1
0

OverlayScrollbars.css 23 KB

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