OverlayScrollbars-theme.css 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066
  1. /*
  2. os-theme-round-dark|os-theme-round-light | os-theme-minimal-dark|os-theme-minimal-light | os-theme-thin-dark|os-theme-thin-light | os-theme-thick-dark|os-theme-thick-light | os-theme-block-dark|os-theme-block-light
  3. */
  4. /*
  5. os-theme-round-dark
  6. */
  7. .os-theme-round-dark > .os-scrollbar {
  8. padding: 0;
  9. }
  10. .os-theme-round-dark > .os-scrollbar-horizontal {
  11. right: 20px;
  12. height: 20px;
  13. }
  14. .os-theme-round-dark > .os-scrollbar-vertical {
  15. bottom: 20px;
  16. width: 20px;
  17. }
  18. .os-theme-round-dark.os-host-rtl > .os-scrollbar-horizontal {
  19. left: 20px;
  20. right: 0;
  21. }
  22. .os-theme-round-dark > .os-scrollbar-corner {
  23. height: 20px;
  24. width: 20px;
  25. background-color: transparent;
  26. }
  27. .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track {
  28. background: transparent;
  29. }
  30. .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  31. .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
  32. content: '';
  33. display: block;
  34. position: absolute;
  35. background: rgba(0, 0, 0, 0.15);
  36. }
  37. .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
  38. left: 3px;
  39. right: 3px;
  40. height: 2px;
  41. top: 50%;
  42. margin-top: -1px;
  43. }
  44. .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
  45. top: 3px;
  46. bottom: 3px;
  47. width: 2px;
  48. left: 50%;
  49. margin-left: -1px;
  50. }
  51. .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  52. background: transparent;
  53. }
  54. .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  55. content: '';
  56. display: block;
  57. position: absolute;
  58. background: #000;
  59. border-radius: 100%;
  60. top: 3px;
  61. bottom: 3px;
  62. left: 3px;
  63. right: 3px;
  64. transform: scale(1);
  65. }
  66. .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  67. .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  68. transform: scale(1.3);
  69. }
  70. .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  71. height: 100%;
  72. min-width: 20px;
  73. max-width: 20px;
  74. }
  75. .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  76. width: 100%;
  77. min-height: 20px;
  78. max-height: 20px;
  79. }
  80. .os-theme-round-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  81. transition: transform 0.3s;
  82. }
  83. /*
  84. os-theme-round-light
  85. */
  86. .os-theme-round-light > .os-scrollbar {
  87. padding: 0;
  88. }
  89. .os-theme-round-light > .os-scrollbar-horizontal {
  90. right: 20px;
  91. height: 20px;
  92. }
  93. .os-theme-round-light > .os-scrollbar-vertical {
  94. bottom: 20px;
  95. width: 20px;
  96. }
  97. .os-theme-round-light.os-host-rtl > .os-scrollbar-horizontal {
  98. left: 20px;
  99. right: 0;
  100. }
  101. .os-theme-round-light > .os-scrollbar-corner {
  102. height: 20px;
  103. width: 20px;
  104. background-color: transparent;
  105. }
  106. .os-theme-round-light > .os-scrollbar > .os-scrollbar-track {
  107. background: transparent;
  108. }
  109. .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  110. .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
  111. content: '';
  112. display: block;
  113. position: absolute;
  114. background: rgba(255, 255, 255, 0.15);
  115. }
  116. .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track:before {
  117. left: 3px;
  118. right: 3px;
  119. height: 2px;
  120. top: 50%;
  121. margin-top: -1px;
  122. }
  123. .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
  124. top: 3px;
  125. bottom: 3px;
  126. width: 2px;
  127. left: 50%;
  128. margin-left: -1px;
  129. }
  130. .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  131. background: transparent;
  132. }
  133. .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  134. content: '';
  135. display: block;
  136. position: absolute;
  137. background: #fff;
  138. border-radius: 100%;
  139. top: 3px;
  140. bottom: 3px;
  141. left: 3px;
  142. right: 3px;
  143. transform: scale(1);
  144. }
  145. .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  146. .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  147. transform: scale(1.3);
  148. }
  149. .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  150. height: 100%;
  151. min-width: 20px;
  152. max-width: 20px;
  153. }
  154. .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  155. width: 100%;
  156. min-height: 20px;
  157. max-height: 20px;
  158. }
  159. .os-theme-round-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  160. transition: transform 0.3s;
  161. }
  162. /*
  163. os-theme-minimal-dark
  164. */
  165. .os-theme-minimal-dark > .os-scrollbar {
  166. padding: 0px;
  167. }
  168. .os-theme-minimal-dark > .os-scrollbar-horizontal {
  169. right: 16px;
  170. height: 16px;
  171. }
  172. .os-theme-minimal-dark > .os-scrollbar-vertical {
  173. bottom: 16px;
  174. width: 16px;
  175. }
  176. .os-theme-minimal-dark.os-host-rtl > .os-scrollbar-horizontal {
  177. left: 16px;
  178. right: 0;
  179. }
  180. .os-theme-minimal-dark > .os-scrollbar-corner {
  181. height: 16px;
  182. width: 16px;
  183. background-color: transparent;
  184. }
  185. .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track,
  186. .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  187. background: transparent;
  188. }
  189. .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  190. content: '';
  191. display: block;
  192. position: absolute;
  193. width: 100%;
  194. height: 100%;
  195. left: 0;
  196. top: 0;
  197. background: #000;
  198. opacity: 0.48;
  199. }
  200. .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
  201. opacity: 0.68;
  202. }
  203. .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  204. opacity: 0.7;
  205. }
  206. .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  207. min-width: 15px;
  208. }
  209. .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  210. min-height: 15px;
  211. }
  212. .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  213. height: 6px;
  214. bottom: 0;
  215. top: auto;
  216. }
  217. .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  218. width: 6px;
  219. right: 0;
  220. left: auto;
  221. }
  222. .os-theme-minimal-dark.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  223. left: 0;
  224. right: auto;
  225. }
  226. .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  227. .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  228. height: 100%;
  229. }
  230. .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  231. .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  232. width: 100%;
  233. }
  234. .os-theme-minimal-dark.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  235. transition: opacity 0.3s, height 0.3s;
  236. }
  237. .os-theme-minimal-dark.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  238. transition: opacity 0.3s, width 0.3s;
  239. }
  240. /*
  241. os-theme-minimal-light
  242. */
  243. .os-theme-minimal-light > .os-scrollbar {
  244. padding: 0px;
  245. }
  246. .os-theme-minimal-light > .os-scrollbar-horizontal {
  247. right: 16px;
  248. height: 16px;
  249. }
  250. .os-theme-minimal-light > .os-scrollbar-vertical {
  251. bottom: 16px;
  252. width: 16px;
  253. }
  254. .os-theme-minimal-light.os-host-rtl > .os-scrollbar-horizontal {
  255. left: 16px;
  256. right: 0;
  257. }
  258. .os-theme-minimal-light > .os-scrollbar-corner {
  259. height: 16px;
  260. width: 16px;
  261. background-color: transparent;
  262. }
  263. .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track,
  264. .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  265. background: transparent;
  266. }
  267. .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  268. content: '';
  269. display: block;
  270. position: absolute;
  271. width: 100%;
  272. height: 100%;
  273. left: 0;
  274. top: 0;
  275. background: #fff;
  276. opacity: 0.48;
  277. }
  278. .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
  279. opacity: 0.68;
  280. }
  281. .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  282. opacity: 0.7;
  283. }
  284. .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  285. min-width: 15px;
  286. }
  287. .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  288. min-height: 15px;
  289. }
  290. .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  291. height: 6px;
  292. bottom: 0;
  293. top: auto;
  294. }
  295. .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  296. width: 6px;
  297. right: 0;
  298. left: auto;
  299. }
  300. .os-theme-minimal-light.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  301. left: 0;
  302. right: auto;
  303. }
  304. .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  305. .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  306. height: 100%;
  307. }
  308. .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  309. .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  310. width: 100%;
  311. }
  312. .os-theme-minimal-light.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  313. transition: opacity 0.3s, height 0.3s;
  314. }
  315. .os-theme-minimal-light.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  316. transition: opacity 0.3s, width 0.3s;
  317. }
  318. /*
  319. os-theme-thin-dark
  320. */
  321. .os-theme-thin-dark > .os-scrollbar-horizontal {
  322. right: 14px;
  323. height: 14px;
  324. padding: 0px 6px;
  325. }
  326. .os-theme-thin-dark > .os-scrollbar-vertical {
  327. bottom: 14px;
  328. width: 14px;
  329. padding: 6px 0px;
  330. }
  331. .os-theme-thin-dark.os-host-rtl > .os-scrollbar-horizontal {
  332. left: 14px;
  333. right: 0;
  334. }
  335. .os-theme-thin-dark > .os-scrollbar-corner {
  336. height: 14px;
  337. width: 14px;
  338. background-color: transparent;
  339. }
  340. .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track {
  341. background: transparent;
  342. }
  343. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  344. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
  345. content: '';
  346. display: block;
  347. position: absolute;
  348. background: rgba(0, 0, 0, 0.15);
  349. }
  350. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  351. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  352. left: 0;
  353. right: 0;
  354. height: 2px;
  355. top: 50%;
  356. margin-top: -1px;
  357. }
  358. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track:before,
  359. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  360. top: 0;
  361. bottom: 0;
  362. width: 2px;
  363. left: 50%;
  364. margin-left: -1px;
  365. }
  366. .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  367. content: '';
  368. display: block;
  369. position: absolute;
  370. background: rgba(0, 0, 0, 0.5);
  371. border-radius: 10px;
  372. }
  373. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  374. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  375. height: 4px;
  376. margin-top: -2px;
  377. }
  378. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  379. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  380. width: 4px;
  381. margin-left: -2px;
  382. }
  383. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  384. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
  385. background: rgba(0, 0, 0, 0.7);
  386. }
  387. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before,
  388. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  389. background: #000;
  390. }
  391. .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  392. height: 100%;
  393. min-width: 30px;
  394. }
  395. .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  396. width: 100%;
  397. min-height: 30px;
  398. }
  399. .os-theme-thin-dark.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  400. transition: height 0.3s, margin-top 0.3s, background 0.2s;
  401. }
  402. .os-theme-thin-dark.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  403. transition: width 0.3s, margin-left 0.3s, background 0.2s;
  404. }
  405. /*
  406. os-theme-thin-light
  407. */
  408. .os-theme-thin-light > .os-scrollbar-horizontal {
  409. right: 14px;
  410. height: 14px;
  411. padding: 0px 6px;
  412. }
  413. .os-theme-thin-light > .os-scrollbar-vertical {
  414. bottom: 14px;
  415. width: 14px;
  416. padding: 6px 0px;
  417. }
  418. .os-theme-thin-light.os-host-rtl > .os-scrollbar-horizontal {
  419. left: 14px;
  420. right: 0;
  421. }
  422. .os-theme-thin-light > .os-scrollbar-corner {
  423. height: 14px;
  424. width: 14px;
  425. background-color: transparent;
  426. }
  427. .os-theme-thin-light > .os-scrollbar > .os-scrollbar-track {
  428. background: transparent;
  429. }
  430. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  431. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
  432. content: '';
  433. display: block;
  434. position: absolute;
  435. background: rgba(255, 255, 255, 0.15);
  436. }
  437. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  438. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  439. left: 0;
  440. right: 0;
  441. height: 2px;
  442. top: 50%;
  443. margin-top: -1px;
  444. }
  445. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track:before,
  446. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  447. top: 0;
  448. bottom: 0;
  449. width: 2px;
  450. left: 50%;
  451. margin-left: -1px;
  452. }
  453. .os-theme-thin-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  454. content: '';
  455. display: block;
  456. position: absolute;
  457. background: rgba(255, 255, 255, 0.5);
  458. border-radius: 10px;
  459. }
  460. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  461. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  462. height: 4px;
  463. margin-top: -2px;
  464. }
  465. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  466. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  467. width: 4px;
  468. margin-left: -2px;
  469. }
  470. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  471. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
  472. background: rgba(255, 255, 255, 0.7);
  473. }
  474. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before,
  475. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  476. background: #fff;
  477. }
  478. .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  479. height: 100%;
  480. min-width: 30px;
  481. }
  482. .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  483. width: 100%;
  484. min-height: 30px;
  485. }
  486. .os-theme-thin-light.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  487. transition: height 0.3s, margin-top 0.3s, background 0.2s;
  488. }
  489. .os-theme-thin-light.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  490. transition: width 0.3s, margin-left 0.3s, background 0.2s;
  491. }
  492. /*
  493. os-theme-thick-dark
  494. */
  495. .os-theme-thick-dark > .os-scrollbar {
  496. padding: 5px;
  497. }
  498. .os-theme-thick-dark > .os-scrollbar:before {
  499. content: '';
  500. display: block;
  501. position: absolute;
  502. background: rgba(0, 0, 0, 0.05);
  503. border-radius: 15px;
  504. top: 2px;
  505. bottom: 2px;
  506. right: 2px;
  507. left: 2px;
  508. border: 1px solid rgba(0, 0, 0, 0.08);
  509. }
  510. .os-theme-thick-dark > .os-scrollbar:hover:before {
  511. border: 1px solid rgba(0, 0, 0, 0.16);
  512. }
  513. .os-theme-thick-dark > .os-scrollbar.active:before {
  514. border: 1px solid rgba(0, 0, 0, 0.24);
  515. }
  516. .os-theme-thick-dark > .os-scrollbar-horizontal {
  517. right: 18px;
  518. height: 18px;
  519. }
  520. .os-theme-thick-dark > .os-scrollbar-vertical {
  521. bottom: 18px;
  522. width: 18px;
  523. }
  524. .os-theme-thick-dark.os-host-rtl > .os-scrollbar-horizontal {
  525. left: 18px;
  526. right: 0;
  527. }
  528. .os-theme-thick-dark > .os-scrollbar-corner {
  529. height: 18px;
  530. width: 18px;
  531. background-color: transparent;
  532. }
  533. .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track {
  534. background: transparent;
  535. }
  536. .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  537. background: rgba(0, 0, 0, 0.4);
  538. border-radius: 15px;
  539. }
  540. .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
  541. background: rgba(0, 0, 0, 0.6);
  542. }
  543. .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
  544. background: rgba(0, 0, 0, 0.8);
  545. }
  546. .os-theme-thick-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  547. min-width: 30px;
  548. }
  549. .os-theme-thick-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  550. min-height: 30px;
  551. }
  552. .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  553. content: '';
  554. position: absolute;
  555. left: 0;
  556. right: 0;
  557. top: -3px;
  558. bottom: -5px;
  559. display: block;
  560. }
  561. .os-theme-thick-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  562. top: -3px;
  563. bottom: -5px;
  564. }
  565. .os-theme-thick-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  566. left: -3px;
  567. right: -5px;
  568. }
  569. .os-theme-thick-dark.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  570. right: -3px;
  571. left: -5px;
  572. }
  573. .os-theme-thick-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  574. transition: background 0.3s;
  575. }
  576. .os-theme-thick-dark.os-host-transition > .os-scrollbar:before {
  577. transition: border 0.3s;
  578. }
  579. /*
  580. os-theme-thick-light
  581. */
  582. .os-theme-thick-light > .os-scrollbar {
  583. padding: 5px;
  584. }
  585. .os-theme-thick-light > .os-scrollbar:before {
  586. content: '';
  587. display: block;
  588. position: absolute;
  589. background: rgba(255, 255, 255, 0.04);
  590. border-radius: 15px;
  591. top: 2px;
  592. bottom: 2px;
  593. right: 2px;
  594. left: 2px;
  595. border: 1px solid rgba(255, 255, 255, 0.1);
  596. }
  597. .os-theme-thick-light > .os-scrollbar:hover:before {
  598. border: 1px solid rgba(255, 255, 255, 0.2);
  599. }
  600. .os-theme-thick-light > .os-scrollbar.active:before {
  601. border: 1px solid rgba(255, 255, 255, 0.3);
  602. }
  603. .os-theme-thick-light > .os-scrollbar-horizontal {
  604. right: 18px;
  605. height: 18px;
  606. }
  607. .os-theme-thick-light > .os-scrollbar-vertical {
  608. bottom: 18px;
  609. width: 18px;
  610. }
  611. .os-theme-thick-light.os-host-rtl > .os-scrollbar-horizontal {
  612. left: 18px;
  613. right: 0;
  614. }
  615. .os-theme-thick-light > .os-scrollbar-corner {
  616. height: 18px;
  617. width: 18px;
  618. background-color: transparent;
  619. }
  620. .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track {
  621. background: transparent;
  622. }
  623. .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  624. background: rgba(255, 255, 255, 0.4);
  625. border-radius: 15px;
  626. }
  627. .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
  628. background: rgba(255, 255, 255, 0.6);
  629. }
  630. .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
  631. background: rgba(255, 255, 255, 0.8);
  632. }
  633. .os-theme-thick-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  634. min-width: 30px;
  635. }
  636. .os-theme-thick-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  637. min-height: 30px;
  638. }
  639. .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  640. content: '';
  641. position: absolute;
  642. left: 0;
  643. right: 0;
  644. top: -3px;
  645. bottom: -5px;
  646. display: block;
  647. }
  648. .os-theme-thick-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
  649. top: -3px;
  650. bottom: -5px;
  651. }
  652. .os-theme-thick-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  653. left: -3px;
  654. right: -5px;
  655. }
  656. .os-theme-thick-light.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
  657. right: -3px;
  658. left: -5px;
  659. }
  660. .os-theme-thick-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  661. transition: background 0.3s;
  662. }
  663. .os-theme-thick-light.os-host-transition > .os-scrollbar:before {
  664. transition: border 0.3s;
  665. }
  666. /*
  667. os-theme-block-dark
  668. */
  669. .os-theme-block-dark > .os-scrollbar {
  670. padding: 0;
  671. }
  672. .os-theme-block-dark > .os-scrollbar-horizontal {
  673. right: 16px;
  674. height: 16px;
  675. }
  676. .os-theme-block-dark > .os-scrollbar-vertical {
  677. bottom: 16px;
  678. width: 16px;
  679. }
  680. .os-theme-block-dark.os-host-rtl > .os-scrollbar-horizontal {
  681. left: 16px;
  682. right: 0;
  683. }
  684. .os-theme-block-dark > .os-scrollbar-corner {
  685. height: 16px;
  686. width: 16px;
  687. background-color: transparent;
  688. }
  689. .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track {
  690. background: transparent;
  691. }
  692. .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  693. .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
  694. content: '';
  695. display: block;
  696. position: absolute;
  697. background: rgba(0, 0, 0, 0.15);
  698. }
  699. .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
  700. left: 4px;
  701. right: 4px;
  702. height: 2px;
  703. top: 50%;
  704. margin-top: -1px;
  705. }
  706. .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
  707. top: 4px;
  708. bottom: 4px;
  709. width: 2px;
  710. left: 50%;
  711. margin-left: -1px;
  712. }
  713. .os-theme-block-dark > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before,
  714. .os-theme-block-dark > .os-scrollbar-horizontal.active > .os-scrollbar-track:before {
  715. left: 0;
  716. right: 0;
  717. height: 100%;
  718. top: 0;
  719. margin-top: 0;
  720. }
  721. .os-theme-block-dark > .os-scrollbar-vertical:hover > .os-scrollbar-track:before,
  722. .os-theme-block-dark > .os-scrollbar-vertical.active > .os-scrollbar-track:before {
  723. top: 0;
  724. bottom: 0;
  725. width: 100%;
  726. left: 0;
  727. margin-left: 0;
  728. }
  729. .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  730. background: transparent;
  731. }
  732. .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  733. min-width: 100px;
  734. max-width: 100px;
  735. }
  736. .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  737. min-height: 100px;
  738. max-height: 100px;
  739. }
  740. .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  741. content: '';
  742. display: block;
  743. position: absolute;
  744. top: 4px;
  745. bottom: 4px;
  746. left: 4px;
  747. right: 4px;
  748. background: #6e6e6e;
  749. }
  750. .os-theme-block-dark.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  751. background: #454545;
  752. }
  753. .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  754. .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  755. background: #000;
  756. }
  757. .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  758. height: 100%;
  759. min-width: 16px;
  760. }
  761. .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  762. width: 100%;
  763. min-height: 16px;
  764. }
  765. .os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  766. transition: background 0.3s;
  767. }
  768. .os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track:before {
  769. transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  770. }
  771. /*
  772. os-theme-block-light
  773. */
  774. .os-theme-block-light > .os-scrollbar {
  775. padding: 0;
  776. }
  777. .os-theme-block-light > .os-scrollbar-horizontal {
  778. right: 16px;
  779. height: 16px;
  780. }
  781. .os-theme-block-light > .os-scrollbar-vertical {
  782. bottom: 16px;
  783. width: 16px;
  784. }
  785. .os-theme-block-light.os-host-rtl > .os-scrollbar-horizontal {
  786. left: 16px;
  787. right: 0;
  788. }
  789. .os-theme-block-light > .os-scrollbar-corner {
  790. height: 16px;
  791. width: 16px;
  792. background-color: transparent;
  793. }
  794. .os-theme-block-light > .os-scrollbar > .os-scrollbar-track {
  795. background: transparent;
  796. }
  797. .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
  798. .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
  799. content: '';
  800. display: block;
  801. position: absolute;
  802. background: rgba(255, 255, 255, 0.15);
  803. }
  804. .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track:before {
  805. left: 4px;
  806. right: 4px;
  807. height: 2px;
  808. top: 50%;
  809. margin-top: -1px;
  810. }
  811. .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
  812. top: 4px;
  813. bottom: 4px;
  814. width: 2px;
  815. left: 50%;
  816. margin-left: -1px;
  817. }
  818. .os-theme-block-light > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before,
  819. .os-theme-block-light > .os-scrollbar-horizontal.active > .os-scrollbar-track:before {
  820. left: 0;
  821. right: 0;
  822. height: 100%;
  823. top: 0;
  824. margin-top: 0;
  825. }
  826. .os-theme-block-light > .os-scrollbar-vertical:hover > .os-scrollbar-track:before,
  827. .os-theme-block-light > .os-scrollbar-vertical.active > .os-scrollbar-track:before {
  828. top: 0;
  829. bottom: 0;
  830. width: 100%;
  831. left: 0;
  832. margin-left: 0;
  833. }
  834. .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  835. background: transparent;
  836. }
  837. .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  838. min-width: 100px;
  839. max-width: 100px;
  840. }
  841. .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  842. min-height: 100px;
  843. max-height: 100px;
  844. }
  845. .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  846. content: '';
  847. display: block;
  848. position: absolute;
  849. top: 4px;
  850. bottom: 4px;
  851. left: 4px;
  852. right: 4px;
  853. background: #afafaf;
  854. }
  855. .os-theme-block-light.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  856. background: #cecece;
  857. }
  858. .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
  859. .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
  860. background: #fff;
  861. }
  862. .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  863. height: 100%;
  864. min-width: 16px;
  865. }
  866. .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  867. width: 100%;
  868. min-height: 16px;
  869. }
  870. .os-theme-block-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
  871. transition: background 0.3s;
  872. }
  873. .os-theme-block-light.os-host-transition > .os-scrollbar > .os-scrollbar-track:before {
  874. transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  875. }