OverlayScrollbars.css 22 KB

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