OverlayScrollbars.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624
  1. /*!
  2. * OverlayScrollbars
  3. * https://github.com/KingSora/OverlayScrollbars
  4. *
  5. * Version: 1.12.0
  6. *
  7. * Copyright KingSora | Rene Haas.
  8. * https://github.com/KingSora
  9. *
  10. * Released under the MIT license.
  11. * Date: 05.04.2020
  12. */
  13. /*
  14. OVERLAY SCROLLBARS CORE:
  15. */
  16. html.os-html,
  17. html.os-html > .os-host {
  18. display: block;
  19. overflow: hidden;
  20. box-sizing: border-box;
  21. height: 100% !important;
  22. width: 100% !important;
  23. min-width: 100% !important;
  24. min-height: 100% !important;
  25. margin: 0 !important;
  26. position: absolute !important; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
  27. }
  28. html.os-html > .os-host > .os-padding {
  29. position: absolute; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
  30. }
  31. body.os-dragging,
  32. body.os-dragging * {
  33. cursor: default;
  34. }
  35. .os-host,
  36. .os-host-textarea {
  37. position: relative;
  38. overflow: visible !important;
  39. -webkit-box-orient: vertical;
  40. -webkit-box-direction: normal;
  41. -ms-flex-direction: column;
  42. flex-direction: column;
  43. -ms-flex-wrap: nowrap;
  44. flex-wrap: nowrap;
  45. -webkit-box-pack: start;
  46. -ms-flex-pack: start;
  47. justify-content: flex-start;
  48. -ms-flex-line-pack: start;
  49. align-content: flex-start;
  50. -webkit-box-align: start;
  51. -ms-flex-align: start;
  52. -ms-grid-row-align: flex-start;
  53. align-items: flex-start;
  54. }
  55. .os-host-flexbox {
  56. overflow: hidden !important;
  57. display: -webkit-box;
  58. display: -ms-flexbox;
  59. display: flex;
  60. }
  61. .os-host-flexbox > .os-size-auto-observer {
  62. height: inherit !important;
  63. }
  64. .os-host-flexbox > .os-content-glue {
  65. -webkit-box-flex: 1;
  66. -ms-flex-positive: 1;
  67. flex-grow: 1;
  68. -ms-flex-negative: 0;
  69. flex-shrink: 0;
  70. }
  71. .os-host-flexbox > .os-size-auto-observer,
  72. .os-host-flexbox > .os-content-glue {
  73. min-height: 0;
  74. min-width: 0;
  75. -webkit-box-flex: 0;
  76. -ms-flex-positive: 0;
  77. flex-grow: 0;
  78. -ms-flex-negative: 1;
  79. flex-shrink: 1;
  80. -ms-flex-preferred-size: auto;
  81. flex-basis: auto;
  82. }
  83. #os-dummy-scrollbar-size {
  84. position: fixed;
  85. opacity: 0;
  86. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  87. visibility: hidden;
  88. overflow: scroll;
  89. height: 500px;
  90. width: 500px;
  91. }
  92. #os-dummy-scrollbar-size > div {
  93. width: 200%;
  94. height: 200%;
  95. margin: 10px 0;
  96. }
  97. /* fix restricted measuring */
  98. #os-dummy-scrollbar-size:before,
  99. #os-dummy-scrollbar-size:after,
  100. .os-content:before,
  101. .os-content:after {
  102. content: '';
  103. display: table;
  104. width: 0.01px;
  105. height: 0.01px;
  106. line-height: 0;
  107. font-size: 0;
  108. flex-grow: 0;
  109. flex-shrink: 0;
  110. visibility: hidden;
  111. }
  112. #os-dummy-scrollbar-size,
  113. .os-viewport {
  114. -ms-overflow-style: scrollbar !important;
  115. }
  116. .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size,
  117. .os-viewport-native-scrollbars-invisible.os-viewport {
  118. scrollbar-width: none !important;
  119. }
  120. .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar,
  121. .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar,
  122. .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner,
  123. .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner {
  124. display: none !important;
  125. width: 0px !important;
  126. height: 0px !important;
  127. visibility: hidden !important;
  128. background: transparent !important;
  129. }
  130. .os-content-glue {
  131. box-sizing: inherit;
  132. max-height: 100%;
  133. max-width: 100%;
  134. width: 100%;
  135. pointer-events: none;
  136. }
  137. .os-padding {
  138. box-sizing: inherit;
  139. direction: inherit;
  140. position: absolute;
  141. overflow: visible;
  142. padding: 0;
  143. margin: 0;
  144. left: 0;
  145. top: 0;
  146. bottom: 0;
  147. right: 0;
  148. width: auto !important;
  149. height: auto !important;
  150. z-index: 1;
  151. }
  152. .os-host-overflow > .os-padding {
  153. overflow: hidden;
  154. }
  155. .os-viewport {
  156. direction: inherit !important;
  157. box-sizing: inherit !important;
  158. resize: none !important;
  159. outline: none !important;
  160. position: absolute;
  161. overflow: hidden;
  162. top: 0;
  163. left: 0;
  164. bottom: 0;
  165. right: 0;
  166. padding: 0;
  167. margin: 0;
  168. -webkit-overflow-scrolling: touch;
  169. }
  170. .os-content-arrange {
  171. position: absolute;
  172. z-index: -1;
  173. min-height: 1px;
  174. min-width: 1px;
  175. pointer-events: none;
  176. }
  177. .os-content {
  178. direction: inherit;
  179. box-sizing: border-box !important;
  180. position: relative;
  181. display: block;
  182. height: 100%;
  183. width: 100%;
  184. height: 100%;
  185. width: 100%;
  186. visibility: visible;
  187. }
  188. .os-content > .os-textarea {
  189. box-sizing: border-box !important;
  190. direction: inherit !important;
  191. background: transparent !important;
  192. outline: 0px none transparent !important;
  193. overflow: hidden !important;
  194. position: absolute !important;
  195. display: block !important;
  196. top: 0 !important;
  197. left: 0 !important;
  198. margin: 0 !important;
  199. border-radius: 0px !important;
  200. float: none !important;
  201. -webkit-filter: none !important;
  202. filter: none !important;
  203. border: none !important;
  204. resize: none !important;
  205. -webkit-transform: none !important;
  206. transform: none !important;
  207. max-width: none !important;
  208. max-height: none !important;
  209. box-shadow: none !important;
  210. -webkit-perspective: none !important;
  211. perspective: none !important;
  212. opacity: 1 !important;
  213. z-index: 1 !important;
  214. clip: auto !important;
  215. vertical-align: baseline !important;
  216. padding: 0px;
  217. }
  218. .os-host-rtl > .os-padding > .os-viewport > .os-content > .os-textarea {
  219. right: 0 !important;
  220. }
  221. .os-content > .os-textarea-cover {
  222. z-index: -1;
  223. pointer-events: none;
  224. }
  225. .os-content > .os-textarea[wrap='off'] {
  226. white-space: pre !important;
  227. margin: 0px !important;
  228. }
  229. .os-text-inherit {
  230. font-family: inherit;
  231. font-size: inherit;
  232. font-weight: inherit;
  233. font-style: inherit;
  234. font-variant: inherit;
  235. text-transform: inherit;
  236. text-decoration: inherit;
  237. text-indent: inherit;
  238. text-align: inherit;
  239. text-shadow: inherit;
  240. text-overflow: inherit;
  241. letter-spacing: inherit;
  242. word-spacing: inherit;
  243. line-height: inherit;
  244. unicode-bidi: inherit;
  245. direction: inherit;
  246. color: inherit;
  247. cursor: text;
  248. }
  249. .os-resize-observer,
  250. .os-resize-observer-host {
  251. box-sizing: inherit;
  252. display: block;
  253. visibility: hidden;
  254. position: absolute;
  255. top: 0;
  256. left: 0;
  257. height: 100%;
  258. width: 100%;
  259. overflow: hidden;
  260. pointer-events: none;
  261. z-index: -1;
  262. }
  263. .os-resize-observer-host {
  264. padding: inherit;
  265. border: inherit;
  266. border-color: transparent;
  267. border-style: solid;
  268. box-sizing: border-box;
  269. }
  270. .os-resize-observer-host > .os-resize-observer {
  271. height: 200%;
  272. width: 200%;
  273. padding: inherit;
  274. border: inherit;
  275. margin: 0px;
  276. display: block;
  277. box-sizing: content-box;
  278. }
  279. .os-resize-observer-host.observed {
  280. display: flex;
  281. flex-direction: column;
  282. justify-content: flex-start;
  283. align-items: flex-start;
  284. }
  285. .os-resize-observer-host.observed > .os-resize-observer {
  286. position: relative;
  287. flex-grow: 1;
  288. flex-shrink: 0;
  289. flex-basis: auto;
  290. }
  291. .os-size-auto-observer {
  292. box-sizing: inherit !important;
  293. height: 100%;
  294. width: inherit;
  295. max-width: 1px;
  296. position: relative;
  297. float: left;
  298. max-height: 1px;
  299. overflow: hidden;
  300. z-index: -1;
  301. padding: 0;
  302. margin: 0;
  303. pointer-events: none;
  304. -webkit-box-flex: inherit;
  305. -ms-flex-positive: inherit;
  306. flex-grow: inherit;
  307. -ms-flex-negative: 0;
  308. flex-shrink: 0;
  309. -ms-flex-preferred-size: 0;
  310. flex-basis: 0;
  311. }
  312. .os-size-auto-observer > .os-resize-observer {
  313. width: 1000%;
  314. height: 1000%;
  315. min-height: 1px;
  316. min-width: 1px;
  317. }
  318. .os-resize-observer-item {
  319. position: absolute;
  320. top: 0;
  321. right: 0;
  322. bottom: 0;
  323. left: 0;
  324. overflow: hidden;
  325. z-index: -1;
  326. opacity: 0;
  327. direction: ltr !important;
  328. -webkit-box-flex: 0 !important;
  329. -ms-flex: none !important;
  330. flex: none !important;
  331. }
  332. .os-resize-observer-item-final {
  333. position: absolute;
  334. left: 0;
  335. top: 0;
  336. -webkit-transition: none !important;
  337. transition: none !important;
  338. -webkit-box-flex: 0 !important;
  339. -ms-flex: none !important;
  340. flex: none !important;
  341. }
  342. .os-resize-observer {
  343. -webkit-animation-duration: 0.001s;
  344. animation-duration: 0.001s;
  345. -webkit-animation-name: os-resize-observer-dummy-animation;
  346. animation-name: os-resize-observer-dummy-animation;
  347. }
  348. object.os-resize-observer {
  349. box-sizing: border-box !important;
  350. }
  351. @-webkit-keyframes os-resize-observer-dummy-animation {
  352. from {
  353. z-index: 0;
  354. }
  355. to {
  356. z-index: -1;
  357. }
  358. }
  359. @keyframes os-resize-observer-dummy-animation {
  360. from {
  361. z-index: 0;
  362. }
  363. to {
  364. z-index: -1;
  365. }
  366. }
  367. /*
  368. CUSTOM SCROLLBARS AND CORNER CORE:
  369. */
  370. .os-host-transition > .os-scrollbar,
  371. .os-host-transition > .os-scrollbar-corner {
  372. -webkit-transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  373. transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  374. }
  375. html.os-html > .os-host > .os-scrollbar {
  376. position: absolute; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
  377. z-index: 999999; /* highest z-index of the page */
  378. }
  379. .os-scrollbar,
  380. .os-scrollbar-corner {
  381. position: absolute;
  382. opacity: 1;
  383. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  384. z-index: 1;
  385. }
  386. .os-scrollbar-corner {
  387. bottom: 0;
  388. right: 0;
  389. }
  390. .os-scrollbar {
  391. pointer-events: none;
  392. }
  393. .os-scrollbar-track {
  394. pointer-events: auto;
  395. position: relative;
  396. height: 100%;
  397. width: 100%;
  398. padding: 0 !important;
  399. border: none !important;
  400. }
  401. .os-scrollbar-handle {
  402. pointer-events: auto;
  403. position: absolute;
  404. width: 100%;
  405. height: 100%;
  406. }
  407. .os-scrollbar-handle-off,
  408. .os-scrollbar-track-off {
  409. pointer-events: none;
  410. }
  411. .os-scrollbar.os-scrollbar-unusable,
  412. .os-scrollbar.os-scrollbar-unusable * {
  413. pointer-events: none !important;
  414. }
  415. .os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle {
  416. opacity: 0 !important;
  417. }
  418. .os-scrollbar-horizontal {
  419. bottom: 0;
  420. left: 0;
  421. }
  422. .os-scrollbar-vertical {
  423. top: 0;
  424. right: 0;
  425. }
  426. .os-host-rtl > .os-scrollbar-horizontal {
  427. right: 0;
  428. }
  429. .os-host-rtl > .os-scrollbar-vertical {
  430. right: auto;
  431. left: 0;
  432. }
  433. .os-host-rtl > .os-scrollbar-corner {
  434. right: auto;
  435. left: 0;
  436. }
  437. .os-scrollbar-auto-hidden,
  438. .os-padding + .os-scrollbar-corner,
  439. .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-corner,
  440. .os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal,
  441. .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-corner,
  442. .os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical,
  443. .os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical + .os-scrollbar-corner,
  444. .os-scrollbar-horizontal + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner,
  445. .os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner {
  446. opacity: 0;
  447. visibility: hidden;
  448. pointer-events: none;
  449. }
  450. .os-scrollbar-corner-resize-both {
  451. cursor: nwse-resize;
  452. }
  453. .os-host-rtl > .os-scrollbar-corner-resize-both {
  454. cursor: nesw-resize;
  455. }
  456. .os-scrollbar-corner-resize-horizontal {
  457. cursor: ew-resize;
  458. }
  459. .os-scrollbar-corner-resize-vertical {
  460. cursor: ns-resize;
  461. }
  462. .os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize {
  463. cursor: default;
  464. }
  465. .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
  466. top: 0;
  467. bottom: 0;
  468. }
  469. .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal,
  470. .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
  471. right: 0;
  472. left: 0;
  473. }
  474. .os-scrollbar:hover,
  475. .os-scrollbar-corner.os-scrollbar-corner-resize {
  476. opacity: 1 !important;
  477. visibility: visible !important;
  478. }
  479. .os-scrollbar-corner.os-scrollbar-corner-resize {
  480. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB3aWR0aD0iMTAiICAgaGVpZ2h0PSIxMCIgICB2ZXJzaW9uPSIxLjEiPiAgPGcgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwNDIuMzYyMikiICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjQ5NDExNzY1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDcuNDI0MjE4NywxMDQyLjM2MjIgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjYgLTEuMzEwMTU2MiwxLjMxMDIgMCwwLjI5OSAwLjEwNDM0MTksMC41NzEgMC4yNzI5NDkyLDAuNzkxNSAwLjIwOTEwMjQsMC4xNDEzIDAuNDY1NjIwNiwwLjIxODQgMC43MzY5NjI5LDAuMjE4NCAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NiAxLjMxMDE1NjMsLTEuMzEwMiAwLC0wLjI3MTMgLTAuMDc3MDkzLC0wLjUyNzggLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0MSwtMC4xNjg2IC0wLjQ5MjU0NDMsLTAuMjcyOSAtMC43OTE1NTI4LC0wLjI3MjkgeiBtIDAsMy4wODQzIGMgLTAuNzIzNTc5MiwwIC0xLjMxMDE1NjIsMC41ODY2IC0xLjMxMDE1NjIsMS4zMTAyIDAsMC4yOTkgMC4xMDQzNDE5LDAuNTcxIDAuMjcyOTQ5MiwwLjc5MTUgMC4yMDkxMDI0LDAuMTQxMyAwLjQ2NTYyMDYsMC4yMTg0IDAuNzM2OTYyOSwwLjIxODQgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjYgMS4zMTAxNTYzLC0xLjMxMDIgMCwtMC4yNzEzIC0wLjA3NzA5MywtMC41Mjc4IC0wLjIxODM1OTQsLTAuNzM2OSAtMC4yMjA0OTQxLC0wLjE2ODYgLTAuNDkyNTQ0MywtMC4yNzMgLTAuNzkxNTUyOCwtMC4yNzMgeiBtIC0zLjA4NDMyNjEsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NiAtMS4zMTAxNTYzLDEuMzEwMiAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MSAwLjI3Mjk0OTIsMC43OTE1IDAuMjA5MTAyNCwwLjE0MTMgMC40NjU2MjA3LDAuMjE4NCAwLjczNjk2MjksMC4yMTg0IDAuNzIzNTc5MywwIDEuMzEwMTU2MywtMC41ODY2IDEuMzEwMTU2MywtMS4zMTAyIDAsLTAuMjcxMyAtMC4wNzcwOTMsLTAuNTI3OCAtMC4yMTgzNTk0LC0wLjczNjkgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzMgLTAuNzkxNTUyNywtMC4yNzMgeiBtIC0zLjAyOTczNjQsMy4wMjk4IEMgMC41ODY1NzY5MywxMDQ4LjQ3NjMgMCwxMDQ5LjA2MjggMCwxMDQ5Ljc4NjQgYyAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyMiwwLjc5MTYgMC4yMDkxMDIyOSwwLjE0MTIgMC40NjU2MjA2NSwwLjIxODMgMC43MzY5NjI4OCwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHogbSAzLjAyOTczNjQsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NSAtMS4zMTAxNTYzLDEuMzEwMSAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyLDAuNzkxNiAwLjIwOTEwMjQsMC4xNDEyIDAuNDY1NjIwNywwLjIxODMgMC43MzY5NjI5LDAuMjE4MyAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NSAxLjMxMDE1NjMsLTEuMzEwMSAwLC0wLjI3MTQgLTAuMDc3MDkzLC0wLjUyNzkgLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzI5IC0wLjc5MTU1MjcsLTAuMjcyOSB6IG0gMy4wODQzMjYxLDAgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjUgLTEuMzEwMTU2MiwxLjMxMDEgMCwwLjI5OSAwLjEwNDM0MTksMC41NzExIDAuMjcyOTQ5MiwwLjc5MTYgMC4yMDkxMDI0LDAuMTQxMiAwLjQ2NTYyMDYsMC4yMTgzIDAuNzM2OTYyOSwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHoiLz4gIDwvZz4gIDxnICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDguMjE1NzcxNSwwLjI3Mjk0OTIyIGMgMC4xNDEyNjY3LDAuMjA5MTAyMjkgMC4yMTgzNTk0LDAuNDY1NjIwNjUgMC4yMTgzNTk0LDAuNzM2OTYyODggMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDc2IC0wLjIwNTUxNzYsLTAuNzk3Nzk2NTkgLTAuNTE4NjAzNSwtMS4wMzcyMDY5OCB6IG0gMCwzLjA4NDMyNjE4IGMgMC4xNDEyNjY3LDAuMjA5MTAyMyAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MiAtMS4zMTAxNTYzLDEuMzEwMTU2MiAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTkzIDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAtMy4wODQzMjYyLDAgYyAwLjE0MTI2NjcsMC4yMDkxMDIzIDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYyIC0xLjMxMDE1NjMsMS4zMTAxNTYyIC0wLjI3MTM0MjIsMCAtMC41Mjc4NjA1LC0wLjA3NzA5MyAtMC43MzY5NjI5LC0wLjIxODM1OTMgMC4yMzk0MTA0LDAuMzEzMDg1OSAwLjYxMjYzNjMsMC41MTg2MDM1IDEuMDM3MjA3MSwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYyLC0wLjU4NjU3NyAxLjMxMDE1NjIsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NSwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogTSAyLjEwMTcwOSw2LjM4NzAxMTcgYyAwLjE0MTI2NjcsMC4yMDkxMDI0IDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYzIC0xLjMxMDE1NjMsMS4zMTAxNTYzIC0wLjI3MTM0MjIzLDAgLTAuNTI3ODYwNTksLTAuMDc3MDkzIC0wLjczNjk2Mjg4LC0wLjIxODM1OTQgMC4yMzk0MTAzOSwwLjMxMzA4NTkgMC42MTI2MzYyMiwwLjUxODYwMzUgMS4wMzcyMDY5OCwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAzLjAyOTczNjMsMCBjIDAuMTQxMjY2NywwLjIwOTEwMjQgMC4yMTgzNTk0LDAuNDY1NjIwNiAwLjIxODM1OTQsMC43MzY5NjI5IDAsMC43MjM1NzkzIC0wLjU4NjU3NywxLjMxMDE1NjMgLTEuMzEwMTU2MywxLjMxMDE1NjMgLTAuMjcxMzQyMiwwIC0wLjUyNzg2MDUsLTAuMDc3MDkzIC0wLjczNjk2MjksLTAuMjE4MzU5NCAwLjIzOTQxMDQsMC4zMTMwODU5IDAuNjEyNjM2MywwLjUxODYwMzUgMS4wMzcyMDcxLDAuNTE4NjAzNSAwLjcyMzU3OTMsMCAxLjMxMDE1NjIsLTAuNTg2NTc3IDEuMzEwMTU2MiwtMS4zMTAxNTYzIDAsLTAuNDI0NTcwOCAtMC4yMDU1MTc1LC0wLjc5Nzc5NjYgLTAuNTE4NjAzNSwtMS4wMzcyMDcgeiBtIDMuMDg0MzI2MiwwIGMgMC4xNDEyNjY3LDAuMjA5MTAyNCAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHoiIC8+ICA8L2c+PC9zdmc+);
  481. background-repeat: no-repeat;
  482. background-position: 100% 100%;
  483. pointer-events: auto !important;
  484. }
  485. .os-host-rtl > .os-scrollbar-corner.os-scrollbar-corner-resize {
  486. -webkit-transform: scale(-1, 1);
  487. transform: scale(-1, 1);
  488. }
  489. .os-host-overflow {
  490. overflow: hidden !important;
  491. }
  492. .os-host-overflow-x {
  493. }
  494. .os-host-overflow-y {
  495. }
  496. /*
  497. THEMES:
  498. */
  499. /* NONE THEME: */
  500. .os-theme-none > .os-scrollbar-horizontal,
  501. .os-theme-none > .os-scrollbar-vertical,
  502. .os-theme-none > .os-scrollbar-corner {
  503. display: none !important;
  504. }
  505. .os-theme-none > .os-scrollbar-corner-resize {
  506. display: block !important;
  507. min-width: 10px;
  508. min-height: 10px;
  509. }
  510. /* DARK & LIGHT THEME: */
  511. .os-theme-dark > .os-scrollbar-horizontal,
  512. .os-theme-light > .os-scrollbar-horizontal {
  513. right: 10px;
  514. height: 10px;
  515. }
  516. .os-theme-dark > .os-scrollbar-vertical,
  517. .os-theme-light > .os-scrollbar-vertical {
  518. bottom: 10px;
  519. width: 10px;
  520. }
  521. .os-theme-dark.os-host-rtl > .os-scrollbar-horizontal,
  522. .os-theme-light.os-host-rtl > .os-scrollbar-horizontal {
  523. left: 10px;
  524. right: 0;
  525. }
  526. .os-theme-dark > .os-scrollbar-corner,
  527. .os-theme-light > .os-scrollbar-corner {
  528. height: 10px;
  529. width: 10px;
  530. }
  531. .os-theme-dark > .os-scrollbar-corner,
  532. .os-theme-light > .os-scrollbar-corner {
  533. background-color: transparent;
  534. }
  535. .os-theme-dark > .os-scrollbar,
  536. .os-theme-light > .os-scrollbar {
  537. padding: 2px;
  538. box-sizing: border-box;
  539. background: transparent;
  540. }
  541. .os-theme-dark > .os-scrollbar.os-scrollbar-unusable,
  542. .os-theme-light > .os-scrollbar.os-scrollbar-unusable {
  543. background: transparent;
  544. }
  545. .os-theme-dark > .os-scrollbar > .os-scrollbar-track,
  546. .os-theme-light > .os-scrollbar > .os-scrollbar-track {
  547. background: transparent;
  548. }
  549. .os-theme-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
  550. .os-theme-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  551. min-width: 30px;
  552. }
  553. .os-theme-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
  554. .os-theme-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  555. min-height: 30px;
  556. }
  557. .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
  558. .os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  559. -webkit-transition: background-color 0.3s;
  560. transition: background-color 0.3s;
  561. }
  562. .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
  563. .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
  564. .os-theme-dark > .os-scrollbar > .os-scrollbar-track,
  565. .os-theme-light > .os-scrollbar > .os-scrollbar-track {
  566. border-radius: 10px;
  567. }
  568. .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  569. background: rgba(0, 0, 0, 0.4);
  570. }
  571. .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  572. background: rgba(255, 255, 255, 0.4);
  573. }
  574. .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
  575. background: rgba(0, 0, 0, .55);
  576. }
  577. .os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
  578. background: rgba(255, 255, 255, .55);
  579. }
  580. .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
  581. background: rgba(0, 0, 0, .7);
  582. }
  583. .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
  584. background: rgba(255, 255, 255, .7);
  585. }
  586. .os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  587. .os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
  588. .os-theme-light > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  589. .os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
  590. content: '';
  591. position: absolute;
  592. left: 0;
  593. right: 0;
  594. top: 0;
  595. bottom: 0;
  596. display: block;
  597. }
  598. .os-theme-dark.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  599. .os-theme-dark.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before,
  600. .os-theme-light.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  601. .os-theme-light.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before {
  602. display: none;
  603. }
  604. .os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  605. .os-theme-light > .os-scrollbar-horizontal .os-scrollbar-handle:before {
  606. top: -6px;
  607. bottom: -2px;
  608. }
  609. .os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
  610. .os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
  611. left: -6px;
  612. right: -2px;
  613. }
  614. .os-host-rtl.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
  615. .os-host-rtl.os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
  616. right: -6px;
  617. left: -2px;
  618. }