25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

OverlayScrollbars.css 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
  1. /*!
  2. * OverlayScrollbars
  3. * https://github.com/KingSora/OverlayScrollbars
  4. *
  5. * Version: 1.13.0
  6. *
  7. * Copyright KingSora | Rene Haas.
  8. * https://github.com/KingSora
  9. *
  10. * Released under the MIT license.
  11. * Date: 02.08.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: 0;
  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.observed {
  271. display: flex;
  272. flex-direction: column;
  273. justify-content: flex-start;
  274. align-items: flex-start;
  275. }
  276. .os-resize-observer-host > .os-resize-observer,
  277. .os-resize-observer-host.observed > .os-resize-observer {
  278. height: 200%;
  279. width: 200%;
  280. padding: inherit;
  281. border: inherit;
  282. margin: 0;
  283. display: block;
  284. box-sizing: content-box;
  285. }
  286. .os-resize-observer-host.observed > .os-resize-observer,
  287. .os-resize-observer-host.observed > .os-resize-observer:before {
  288. display: flex;
  289. position: relative;
  290. flex-grow: 1;
  291. flex-shrink: 0;
  292. flex-basis: auto;
  293. box-sizing: border-box;
  294. }
  295. .os-resize-observer-host.observed > .os-resize-observer:before {
  296. content: '';
  297. box-sizing: content-box;
  298. padding: inherit;
  299. border: inherit;
  300. margin: 0;
  301. }
  302. .os-size-auto-observer {
  303. box-sizing: inherit !important;
  304. height: 100%;
  305. width: inherit;
  306. max-width: 1px;
  307. position: relative;
  308. float: left;
  309. max-height: 1px;
  310. overflow: hidden;
  311. z-index: -1;
  312. padding: 0;
  313. margin: 0;
  314. pointer-events: none;
  315. -webkit-box-flex: inherit;
  316. -ms-flex-positive: inherit;
  317. flex-grow: inherit;
  318. -ms-flex-negative: 0;
  319. flex-shrink: 0;
  320. -ms-flex-preferred-size: 0;
  321. flex-basis: 0;
  322. }
  323. .os-size-auto-observer > .os-resize-observer {
  324. width: 1000%;
  325. height: 1000%;
  326. min-height: 1px;
  327. min-width: 1px;
  328. }
  329. .os-resize-observer-item {
  330. position: absolute;
  331. top: 0;
  332. right: 0;
  333. bottom: 0;
  334. left: 0;
  335. overflow: hidden;
  336. z-index: -1;
  337. opacity: 0;
  338. direction: ltr !important;
  339. -webkit-box-flex: 0 !important;
  340. -ms-flex: none !important;
  341. flex: none !important;
  342. }
  343. .os-resize-observer-item-final {
  344. position: absolute;
  345. left: 0;
  346. top: 0;
  347. -webkit-transition: none !important;
  348. transition: none !important;
  349. -webkit-box-flex: 0 !important;
  350. -ms-flex: none !important;
  351. flex: none !important;
  352. }
  353. .os-resize-observer {
  354. -webkit-animation-duration: 0.001s;
  355. animation-duration: 0.001s;
  356. -webkit-animation-name: os-resize-observer-dummy-animation;
  357. animation-name: os-resize-observer-dummy-animation;
  358. }
  359. object.os-resize-observer {
  360. box-sizing: border-box !important;
  361. }
  362. @-webkit-keyframes os-resize-observer-dummy-animation {
  363. from {
  364. z-index: 0;
  365. }
  366. to {
  367. z-index: -1;
  368. }
  369. }
  370. @keyframes os-resize-observer-dummy-animation {
  371. from {
  372. z-index: 0;
  373. }
  374. to {
  375. z-index: -1;
  376. }
  377. }
  378. /*
  379. CUSTOM SCROLLBARS AND CORNER CORE:
  380. */
  381. .os-host-transition > .os-scrollbar,
  382. .os-host-transition > .os-scrollbar-corner {
  383. -webkit-transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  384. transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  385. }
  386. html.os-html > .os-host > .os-scrollbar {
  387. position: absolute; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
  388. z-index: 999999; /* highest z-index of the page */
  389. }
  390. .os-scrollbar,
  391. .os-scrollbar-corner {
  392. position: absolute;
  393. opacity: 1;
  394. -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  395. z-index: 1;
  396. }
  397. .os-scrollbar-corner {
  398. bottom: 0;
  399. right: 0;
  400. }
  401. .os-scrollbar {
  402. pointer-events: none;
  403. }
  404. .os-scrollbar-track {
  405. pointer-events: auto;
  406. position: relative;
  407. height: 100%;
  408. width: 100%;
  409. padding: 0 !important;
  410. border: none !important;
  411. }
  412. .os-scrollbar-handle {
  413. pointer-events: auto;
  414. position: absolute;
  415. width: 100%;
  416. height: 100%;
  417. }
  418. .os-scrollbar-handle-off,
  419. .os-scrollbar-track-off {
  420. pointer-events: none;
  421. }
  422. .os-scrollbar.os-scrollbar-unusable,
  423. .os-scrollbar.os-scrollbar-unusable * {
  424. pointer-events: none !important;
  425. }
  426. .os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle {
  427. opacity: 0 !important;
  428. }
  429. .os-scrollbar-horizontal {
  430. bottom: 0;
  431. left: 0;
  432. }
  433. .os-scrollbar-vertical {
  434. top: 0;
  435. right: 0;
  436. }
  437. .os-host-rtl > .os-scrollbar-horizontal {
  438. right: 0;
  439. }
  440. .os-host-rtl > .os-scrollbar-vertical {
  441. right: auto;
  442. left: 0;
  443. }
  444. .os-host-rtl > .os-scrollbar-corner {
  445. right: auto;
  446. left: 0;
  447. }
  448. .os-scrollbar-auto-hidden,
  449. .os-padding + .os-scrollbar-corner,
  450. .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-corner,
  451. .os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal,
  452. .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-corner,
  453. .os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical,
  454. .os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical + .os-scrollbar-corner,
  455. .os-scrollbar-horizontal + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner,
  456. .os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner {
  457. opacity: 0;
  458. visibility: hidden;
  459. pointer-events: none;
  460. }
  461. .os-scrollbar-corner-resize-both {
  462. cursor: nwse-resize;
  463. }
  464. .os-host-rtl > .os-scrollbar-corner-resize-both {
  465. cursor: nesw-resize;
  466. }
  467. .os-scrollbar-corner-resize-horizontal {
  468. cursor: ew-resize;
  469. }
  470. .os-scrollbar-corner-resize-vertical {
  471. cursor: ns-resize;
  472. }
  473. .os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize {
  474. cursor: default;
  475. }
  476. .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
  477. top: 0;
  478. bottom: 0;
  479. }
  480. .os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal,
  481. .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
  482. right: 0;
  483. left: 0;
  484. }
  485. .os-scrollbar:hover,
  486. .os-scrollbar-corner.os-scrollbar-corner-resize {
  487. opacity: 1 !important;
  488. visibility: visible !important;
  489. }
  490. .os-scrollbar-corner.os-scrollbar-corner-resize {
  491. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB3aWR0aD0iMTAiICAgaGVpZ2h0PSIxMCIgICB2ZXJzaW9uPSIxLjEiPiAgPGcgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwNDIuMzYyMikiICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjQ5NDExNzY1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDcuNDI0MjE4NywxMDQyLjM2MjIgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjYgLTEuMzEwMTU2MiwxLjMxMDIgMCwwLjI5OSAwLjEwNDM0MTksMC41NzEgMC4yNzI5NDkyLDAuNzkxNSAwLjIwOTEwMjQsMC4xNDEzIDAuNDY1NjIwNiwwLjIxODQgMC43MzY5NjI5LDAuMjE4NCAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NiAxLjMxMDE1NjMsLTEuMzEwMiAwLC0wLjI3MTMgLTAuMDc3MDkzLC0wLjUyNzggLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0MSwtMC4xNjg2IC0wLjQ5MjU0NDMsLTAuMjcyOSAtMC43OTE1NTI4LC0wLjI3MjkgeiBtIDAsMy4wODQzIGMgLTAuNzIzNTc5MiwwIC0xLjMxMDE1NjIsMC41ODY2IC0xLjMxMDE1NjIsMS4zMTAyIDAsMC4yOTkgMC4xMDQzNDE5LDAuNTcxIDAuMjcyOTQ5MiwwLjc5MTUgMC4yMDkxMDI0LDAuMTQxMyAwLjQ2NTYyMDYsMC4yMTg0IDAuNzM2OTYyOSwwLjIxODQgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjYgMS4zMTAxNTYzLC0xLjMxMDIgMCwtMC4yNzEzIC0wLjA3NzA5MywtMC41Mjc4IC0wLjIxODM1OTQsLTAuNzM2OSAtMC4yMjA0OTQxLC0wLjE2ODYgLTAuNDkyNTQ0MywtMC4yNzMgLTAuNzkxNTUyOCwtMC4yNzMgeiBtIC0zLjA4NDMyNjEsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NiAtMS4zMTAxNTYzLDEuMzEwMiAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MSAwLjI3Mjk0OTIsMC43OTE1IDAuMjA5MTAyNCwwLjE0MTMgMC40NjU2MjA3LDAuMjE4NCAwLjczNjk2MjksMC4yMTg0IDAuNzIzNTc5MywwIDEuMzEwMTU2MywtMC41ODY2IDEuMzEwMTU2MywtMS4zMTAyIDAsLTAuMjcxMyAtMC4wNzcwOTMsLTAuNTI3OCAtMC4yMTgzNTk0LC0wLjczNjkgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzMgLTAuNzkxNTUyNywtMC4yNzMgeiBtIC0zLjAyOTczNjQsMy4wMjk4IEMgMC41ODY1NzY5MywxMDQ4LjQ3NjMgMCwxMDQ5LjA2MjggMCwxMDQ5Ljc4NjQgYyAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyMiwwLjc5MTYgMC4yMDkxMDIyOSwwLjE0MTIgMC40NjU2MjA2NSwwLjIxODMgMC43MzY5NjI4OCwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHogbSAzLjAyOTczNjQsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NSAtMS4zMTAxNTYzLDEuMzEwMSAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyLDAuNzkxNiAwLjIwOTEwMjQsMC4xNDEyIDAuNDY1NjIwNywwLjIxODMgMC43MzY5NjI5LDAuMjE4MyAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NSAxLjMxMDE1NjMsLTEuMzEwMSAwLC0wLjI3MTQgLTAuMDc3MDkzLC0wLjUyNzkgLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzI5IC0wLjc5MTU1MjcsLTAuMjcyOSB6IG0gMy4wODQzMjYxLDAgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjUgLTEuMzEwMTU2MiwxLjMxMDEgMCwwLjI5OSAwLjEwNDM0MTksMC41NzExIDAuMjcyOTQ5MiwwLjc5MTYgMC4yMDkxMDI0LDAuMTQxMiAwLjQ2NTYyMDYsMC4yMTgzIDAuNzM2OTYyOSwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHoiLz4gIDwvZz4gIDxnICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDguMjE1NzcxNSwwLjI3Mjk0OTIyIGMgMC4xNDEyNjY3LDAuMjA5MTAyMjkgMC4yMTgzNTk0LDAuNDY1NjIwNjUgMC4yMTgzNTk0LDAuNzM2OTYyODggMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDc2IC0wLjIwNTUxNzYsLTAuNzk3Nzk2NTkgLTAuNTE4NjAzNSwtMS4wMzcyMDY5OCB6IG0gMCwzLjA4NDMyNjE4IGMgMC4xNDEyNjY3LDAuMjA5MTAyMyAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MiAtMS4zMTAxNTYzLDEuMzEwMTU2MiAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTkzIDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAtMy4wODQzMjYyLDAgYyAwLjE0MTI2NjcsMC4yMDkxMDIzIDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYyIC0xLjMxMDE1NjMsMS4zMTAxNTYyIC0wLjI3MTM0MjIsMCAtMC41Mjc4NjA1LC0wLjA3NzA5MyAtMC43MzY5NjI5LC0wLjIxODM1OTMgMC4yMzk0MTA0LDAuMzEzMDg1OSAwLjYxMjYzNjMsMC41MTg2MDM1IDEuMDM3MjA3MSwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYyLC0wLjU4NjU3NyAxLjMxMDE1NjIsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NSwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogTSAyLjEwMTcwOSw2LjM4NzAxMTcgYyAwLjE0MTI2NjcsMC4yMDkxMDI0IDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYzIC0xLjMxMDE1NjMsMS4zMTAxNTYzIC0wLjI3MTM0MjIzLDAgLTAuNTI3ODYwNTksLTAuMDc3MDkzIC0wLjczNjk2Mjg4LC0wLjIxODM1OTQgMC4yMzk0MTAzOSwwLjMxMzA4NTkgMC42MTI2MzYyMiwwLjUxODYwMzUgMS4wMzcyMDY5OCwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAzLjAyOTczNjMsMCBjIDAuMTQxMjY2NywwLjIwOTEwMjQgMC4yMTgzNTk0LDAuNDY1NjIwNiAwLjIxODM1OTQsMC43MzY5NjI5IDAsMC43MjM1NzkzIC0wLjU4NjU3NywxLjMxMDE1NjMgLTEuMzEwMTU2MywxLjMxMDE1NjMgLTAuMjcxMzQyMiwwIC0wLjUyNzg2MDUsLTAuMDc3MDkzIC0wLjczNjk2MjksLTAuMjE4MzU5NCAwLjIzOTQxMDQsMC4zMTMwODU5IDAuNjEyNjM2MywwLjUxODYwMzUgMS4wMzcyMDcxLDAuNTE4NjAzNSAwLjcyMzU3OTMsMCAxLjMxMDE1NjIsLTAuNTg2NTc3IDEuMzEwMTU2MiwtMS4zMTAxNTYzIDAsLTAuNDI0NTcwOCAtMC4yMDU1MTc1LC0wLjc5Nzc5NjYgLTAuNTE4NjAzNSwtMS4wMzcyMDcgeiBtIDMuMDg0MzI2MiwwIGMgMC4xNDEyNjY3LDAuMjA5MTAyNCAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHoiIC8+ICA8L2c+PC9zdmc+);
  492. background-repeat: no-repeat;
  493. background-position: 100% 100%;
  494. pointer-events: auto !important;
  495. }
  496. .os-host-rtl > .os-scrollbar-corner.os-scrollbar-corner-resize {
  497. -webkit-transform: scale(-1, 1);
  498. transform: scale(-1, 1);
  499. }
  500. .os-host-overflow {
  501. overflow: hidden !important;
  502. }
  503. .os-host-overflow-x {
  504. }
  505. .os-host-overflow-y {
  506. }
  507. /*
  508. THEMES:
  509. */
  510. /* NONE THEME: */
  511. .os-theme-none > .os-scrollbar-horizontal,
  512. .os-theme-none > .os-scrollbar-vertical,
  513. .os-theme-none > .os-scrollbar-corner {
  514. display: none !important;
  515. }
  516. .os-theme-none > .os-scrollbar-corner-resize {
  517. display: block !important;
  518. min-width: 10px;
  519. min-height: 10px;
  520. }
  521. /* DARK & LIGHT THEME: */
  522. .os-theme-dark > .os-scrollbar-horizontal,
  523. .os-theme-light > .os-scrollbar-horizontal {
  524. right: 10px;
  525. height: 10px;
  526. }
  527. .os-theme-dark > .os-scrollbar-vertical,
  528. .os-theme-light > .os-scrollbar-vertical {
  529. bottom: 10px;
  530. width: 10px;
  531. }
  532. .os-theme-dark.os-host-rtl > .os-scrollbar-horizontal,
  533. .os-theme-light.os-host-rtl > .os-scrollbar-horizontal {
  534. left: 10px;
  535. right: 0;
  536. }
  537. .os-theme-dark > .os-scrollbar-corner,
  538. .os-theme-light > .os-scrollbar-corner {
  539. height: 10px;
  540. width: 10px;
  541. }
  542. .os-theme-dark > .os-scrollbar-corner,
  543. .os-theme-light > .os-scrollbar-corner {
  544. background-color: transparent;
  545. }
  546. .os-theme-dark > .os-scrollbar,
  547. .os-theme-light > .os-scrollbar {
  548. padding: 2px;
  549. box-sizing: border-box;
  550. background: transparent;
  551. }
  552. .os-theme-dark > .os-scrollbar.os-scrollbar-unusable,
  553. .os-theme-light > .os-scrollbar.os-scrollbar-unusable {
  554. background: transparent;
  555. }
  556. .os-theme-dark > .os-scrollbar > .os-scrollbar-track,
  557. .os-theme-light > .os-scrollbar > .os-scrollbar-track {
  558. background: transparent;
  559. }
  560. .os-theme-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
  561. .os-theme-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
  562. min-width: 30px;
  563. }
  564. .os-theme-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
  565. .os-theme-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
  566. min-height: 30px;
  567. }
  568. .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
  569. .os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  570. -webkit-transition: background-color 0.3s;
  571. transition: background-color 0.3s;
  572. }
  573. .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
  574. .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
  575. .os-theme-dark > .os-scrollbar > .os-scrollbar-track,
  576. .os-theme-light > .os-scrollbar > .os-scrollbar-track {
  577. border-radius: 10px;
  578. }
  579. .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  580. background: rgba(0, 0, 0, 0.4);
  581. }
  582. .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  583. background: rgba(255, 255, 255, 0.4);
  584. }
  585. .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
  586. background: rgba(0, 0, 0, .55);
  587. }
  588. .os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
  589. background: rgba(255, 255, 255, .55);
  590. }
  591. .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
  592. background: rgba(0, 0, 0, .7);
  593. }
  594. .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
  595. background: rgba(255, 255, 255, .7);
  596. }
  597. .os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  598. .os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
  599. .os-theme-light > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  600. .os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
  601. content: '';
  602. position: absolute;
  603. left: 0;
  604. right: 0;
  605. top: 0;
  606. bottom: 0;
  607. display: block;
  608. }
  609. .os-theme-dark.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  610. .os-theme-dark.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before,
  611. .os-theme-light.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  612. .os-theme-light.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before {
  613. display: none;
  614. }
  615. .os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
  616. .os-theme-light > .os-scrollbar-horizontal .os-scrollbar-handle:before {
  617. top: -6px;
  618. bottom: -2px;
  619. }
  620. .os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
  621. .os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
  622. left: -6px;
  623. right: -2px;
  624. }
  625. .os-host-rtl.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
  626. .os-host-rtl.os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
  627. right: -6px;
  628. left: -2px;
  629. }