1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066 |
- /*
- os-theme-round-dark|os-theme-round-light | os-theme-minimal-dark|os-theme-minimal-light | os-theme-thin-dark|os-theme-thin-light | os-theme-thick-dark|os-theme-thick-light | os-theme-block-dark|os-theme-block-light
- */
- /*
- os-theme-round-dark
- */
- .os-theme-round-dark > .os-scrollbar {
- padding: 0;
- }
- .os-theme-round-dark > .os-scrollbar-horizontal {
- right: 20px;
- height: 20px;
- }
- .os-theme-round-dark > .os-scrollbar-vertical {
- bottom: 20px;
- width: 20px;
- }
- .os-theme-round-dark.os-host-rtl > .os-scrollbar-horizontal {
- left: 20px;
- right: 0;
- }
- .os-theme-round-dark > .os-scrollbar-corner {
- height: 20px;
- width: 20px;
- background-color: transparent;
- }
- .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(0, 0, 0, 0.15);
- }
- .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
- left: 3px;
- right: 3px;
- height: 2px;
- top: 50%;
- margin-top: -1px;
- }
- .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
- top: 3px;
- bottom: 3px;
- width: 2px;
- left: 50%;
- margin-left: -1px;
- }
- .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: transparent;
- }
- .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- background: #000;
- border-radius: 100%;
- top: 3px;
- bottom: 3px;
- left: 3px;
- right: 3px;
- transform: scale(1);
- }
- .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- transform: scale(1.3);
- }
- .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- height: 100%;
- min-width: 20px;
- max-width: 20px;
- }
- .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- width: 100%;
- min-height: 20px;
- max-height: 20px;
- }
- .os-theme-round-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: transform 0.3s;
- }
- /*
- os-theme-round-light
- */
- .os-theme-round-light > .os-scrollbar {
- padding: 0;
- }
- .os-theme-round-light > .os-scrollbar-horizontal {
- right: 20px;
- height: 20px;
- }
- .os-theme-round-light > .os-scrollbar-vertical {
- bottom: 20px;
- width: 20px;
- }
- .os-theme-round-light.os-host-rtl > .os-scrollbar-horizontal {
- left: 20px;
- right: 0;
- }
- .os-theme-round-light > .os-scrollbar-corner {
- height: 20px;
- width: 20px;
- background-color: transparent;
- }
- .os-theme-round-light > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(255, 255, 255, 0.15);
- }
- .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track:before {
- left: 3px;
- right: 3px;
- height: 2px;
- top: 50%;
- margin-top: -1px;
- }
- .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
- top: 3px;
- bottom: 3px;
- width: 2px;
- left: 50%;
- margin-left: -1px;
- }
- .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: transparent;
- }
- .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- background: #fff;
- border-radius: 100%;
- top: 3px;
- bottom: 3px;
- left: 3px;
- right: 3px;
- transform: scale(1);
- }
- .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- transform: scale(1.3);
- }
- .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- height: 100%;
- min-width: 20px;
- max-width: 20px;
- }
- .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- width: 100%;
- min-height: 20px;
- max-height: 20px;
- }
- .os-theme-round-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: transform 0.3s;
- }
- /*
- os-theme-minimal-dark
- */
- .os-theme-minimal-dark > .os-scrollbar {
- padding: 0px;
- }
- .os-theme-minimal-dark > .os-scrollbar-horizontal {
- right: 16px;
- height: 16px;
- }
- .os-theme-minimal-dark > .os-scrollbar-vertical {
- bottom: 16px;
- width: 16px;
- }
- .os-theme-minimal-dark.os-host-rtl > .os-scrollbar-horizontal {
- left: 16px;
- right: 0;
- }
- .os-theme-minimal-dark > .os-scrollbar-corner {
- height: 16px;
- width: 16px;
- background-color: transparent;
- }
- .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track,
- .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: transparent;
- }
- .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- background: #000;
- opacity: 0.48;
- }
- .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
- opacity: 0.68;
- }
- .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- opacity: 0.7;
- }
- .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- min-width: 15px;
- }
- .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- min-height: 15px;
- }
- .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- height: 6px;
- bottom: 0;
- top: auto;
- }
- .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- width: 6px;
- right: 0;
- left: auto;
- }
- .os-theme-minimal-dark.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- left: 0;
- right: auto;
- }
- .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- height: 100%;
- }
- .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- width: 100%;
- }
- .os-theme-minimal-dark.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: opacity 0.3s, height 0.3s;
- }
- .os-theme-minimal-dark.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: opacity 0.3s, width 0.3s;
- }
- /*
- os-theme-minimal-light
- */
- .os-theme-minimal-light > .os-scrollbar {
- padding: 0px;
- }
- .os-theme-minimal-light > .os-scrollbar-horizontal {
- right: 16px;
- height: 16px;
- }
- .os-theme-minimal-light > .os-scrollbar-vertical {
- bottom: 16px;
- width: 16px;
- }
- .os-theme-minimal-light.os-host-rtl > .os-scrollbar-horizontal {
- left: 16px;
- right: 0;
- }
- .os-theme-minimal-light > .os-scrollbar-corner {
- height: 16px;
- width: 16px;
- background-color: transparent;
- }
- .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track,
- .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: transparent;
- }
- .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- background: #fff;
- opacity: 0.48;
- }
- .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
- opacity: 0.68;
- }
- .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- opacity: 0.7;
- }
- .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- min-width: 15px;
- }
- .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- min-height: 15px;
- }
- .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- height: 6px;
- bottom: 0;
- top: auto;
- }
- .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- width: 6px;
- right: 0;
- left: auto;
- }
- .os-theme-minimal-light.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- left: 0;
- right: auto;
- }
- .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- height: 100%;
- }
- .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- width: 100%;
- }
- .os-theme-minimal-light.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: opacity 0.3s, height 0.3s;
- }
- .os-theme-minimal-light.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: opacity 0.3s, width 0.3s;
- }
- /*
- os-theme-thin-dark
- */
- .os-theme-thin-dark > .os-scrollbar-horizontal {
- right: 14px;
- height: 14px;
- padding: 0px 6px;
- }
- .os-theme-thin-dark > .os-scrollbar-vertical {
- bottom: 14px;
- width: 14px;
- padding: 6px 0px;
- }
- .os-theme-thin-dark.os-host-rtl > .os-scrollbar-horizontal {
- left: 14px;
- right: 0;
- }
- .os-theme-thin-dark > .os-scrollbar-corner {
- height: 14px;
- width: 14px;
- background-color: transparent;
- }
- .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(0, 0, 0, 0.15);
- }
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- left: 0;
- right: 0;
- height: 2px;
- top: 50%;
- margin-top: -1px;
- }
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track:before,
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- top: 0;
- bottom: 0;
- width: 2px;
- left: 50%;
- margin-left: -1px;
- }
- .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 10px;
- }
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- height: 4px;
- margin-top: -2px;
- }
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- width: 4px;
- margin-left: -2px;
- }
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
- background: rgba(0, 0, 0, 0.7);
- }
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before,
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- background: #000;
- }
- .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- height: 100%;
- min-width: 30px;
- }
- .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- width: 100%;
- min-height: 30px;
- }
- .os-theme-thin-dark.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: height 0.3s, margin-top 0.3s, background 0.2s;
- }
- .os-theme-thin-dark.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: width 0.3s, margin-left 0.3s, background 0.2s;
- }
- /*
- os-theme-thin-light
- */
- .os-theme-thin-light > .os-scrollbar-horizontal {
- right: 14px;
- height: 14px;
- padding: 0px 6px;
- }
- .os-theme-thin-light > .os-scrollbar-vertical {
- bottom: 14px;
- width: 14px;
- padding: 6px 0px;
- }
- .os-theme-thin-light.os-host-rtl > .os-scrollbar-horizontal {
- left: 14px;
- right: 0;
- }
- .os-theme-thin-light > .os-scrollbar-corner {
- height: 14px;
- width: 14px;
- background-color: transparent;
- }
- .os-theme-thin-light > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(255, 255, 255, 0.15);
- }
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- left: 0;
- right: 0;
- height: 2px;
- top: 50%;
- margin-top: -1px;
- }
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track:before,
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- top: 0;
- bottom: 0;
- width: 2px;
- left: 50%;
- margin-left: -1px;
- }
- .os-theme-thin-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(255, 255, 255, 0.5);
- border-radius: 10px;
- }
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- height: 4px;
- margin-top: -2px;
- }
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- width: 4px;
- margin-left: -2px;
- }
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
- background: rgba(255, 255, 255, 0.7);
- }
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before,
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- background: #fff;
- }
- .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- height: 100%;
- min-width: 30px;
- }
- .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- width: 100%;
- min-height: 30px;
- }
- .os-theme-thin-light.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: height 0.3s, margin-top 0.3s, background 0.2s;
- }
- .os-theme-thin-light.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: width 0.3s, margin-left 0.3s, background 0.2s;
- }
- /*
- os-theme-thick-dark
- */
- .os-theme-thick-dark > .os-scrollbar {
- padding: 5px;
- }
- .os-theme-thick-dark > .os-scrollbar:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(0, 0, 0, 0.05);
- border-radius: 15px;
- top: 2px;
- bottom: 2px;
- right: 2px;
- left: 2px;
- border: 1px solid rgba(0, 0, 0, 0.08);
- }
- .os-theme-thick-dark > .os-scrollbar:hover:before {
- border: 1px solid rgba(0, 0, 0, 0.16);
- }
- .os-theme-thick-dark > .os-scrollbar.active:before {
- border: 1px solid rgba(0, 0, 0, 0.24);
- }
- .os-theme-thick-dark > .os-scrollbar-horizontal {
- right: 18px;
- height: 18px;
- }
- .os-theme-thick-dark > .os-scrollbar-vertical {
- bottom: 18px;
- width: 18px;
- }
- .os-theme-thick-dark.os-host-rtl > .os-scrollbar-horizontal {
- left: 18px;
- right: 0;
- }
- .os-theme-thick-dark > .os-scrollbar-corner {
- height: 18px;
- width: 18px;
- background-color: transparent;
- }
- .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: rgba(0, 0, 0, 0.4);
- border-radius: 15px;
- }
- .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
- background: rgba(0, 0, 0, 0.6);
- }
- .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
- background: rgba(0, 0, 0, 0.8);
- }
- .os-theme-thick-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- min-width: 30px;
- }
- .os-theme-thick-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- min-height: 30px;
- }
- .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- position: absolute;
- left: 0;
- right: 0;
- top: -3px;
- bottom: -5px;
- display: block;
- }
- .os-theme-thick-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- top: -3px;
- bottom: -5px;
- }
- .os-theme-thick-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- left: -3px;
- right: -5px;
- }
- .os-theme-thick-dark.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- right: -3px;
- left: -5px;
- }
- .os-theme-thick-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- transition: background 0.3s;
- }
- .os-theme-thick-dark.os-host-transition > .os-scrollbar:before {
- transition: border 0.3s;
- }
- /*
- os-theme-thick-light
- */
- .os-theme-thick-light > .os-scrollbar {
- padding: 5px;
- }
- .os-theme-thick-light > .os-scrollbar:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(255, 255, 255, 0.04);
- border-radius: 15px;
- top: 2px;
- bottom: 2px;
- right: 2px;
- left: 2px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- }
- .os-theme-thick-light > .os-scrollbar:hover:before {
- border: 1px solid rgba(255, 255, 255, 0.2);
- }
- .os-theme-thick-light > .os-scrollbar.active:before {
- border: 1px solid rgba(255, 255, 255, 0.3);
- }
- .os-theme-thick-light > .os-scrollbar-horizontal {
- right: 18px;
- height: 18px;
- }
- .os-theme-thick-light > .os-scrollbar-vertical {
- bottom: 18px;
- width: 18px;
- }
- .os-theme-thick-light.os-host-rtl > .os-scrollbar-horizontal {
- left: 18px;
- right: 0;
- }
- .os-theme-thick-light > .os-scrollbar-corner {
- height: 18px;
- width: 18px;
- background-color: transparent;
- }
- .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: rgba(255, 255, 255, 0.4);
- border-radius: 15px;
- }
- .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
- background: rgba(255, 255, 255, 0.6);
- }
- .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
- background: rgba(255, 255, 255, 0.8);
- }
- .os-theme-thick-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- min-width: 30px;
- }
- .os-theme-thick-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- min-height: 30px;
- }
- .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- position: absolute;
- left: 0;
- right: 0;
- top: -3px;
- bottom: -5px;
- display: block;
- }
- .os-theme-thick-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
- top: -3px;
- bottom: -5px;
- }
- .os-theme-thick-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- left: -3px;
- right: -5px;
- }
- .os-theme-thick-light.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
- right: -3px;
- left: -5px;
- }
- .os-theme-thick-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- transition: background 0.3s;
- }
- .os-theme-thick-light.os-host-transition > .os-scrollbar:before {
- transition: border 0.3s;
- }
- /*
- os-theme-block-dark
- */
- .os-theme-block-dark > .os-scrollbar {
- padding: 0;
- }
- .os-theme-block-dark > .os-scrollbar-horizontal {
- right: 16px;
- height: 16px;
- }
- .os-theme-block-dark > .os-scrollbar-vertical {
- bottom: 16px;
- width: 16px;
- }
- .os-theme-block-dark.os-host-rtl > .os-scrollbar-horizontal {
- left: 16px;
- right: 0;
- }
- .os-theme-block-dark > .os-scrollbar-corner {
- height: 16px;
- width: 16px;
- background-color: transparent;
- }
- .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(0, 0, 0, 0.15);
- }
- .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
- left: 4px;
- right: 4px;
- height: 2px;
- top: 50%;
- margin-top: -1px;
- }
- .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
- top: 4px;
- bottom: 4px;
- width: 2px;
- left: 50%;
- margin-left: -1px;
- }
- .os-theme-block-dark > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before,
- .os-theme-block-dark > .os-scrollbar-horizontal.active > .os-scrollbar-track:before {
- left: 0;
- right: 0;
- height: 100%;
- top: 0;
- margin-top: 0;
- }
- .os-theme-block-dark > .os-scrollbar-vertical:hover > .os-scrollbar-track:before,
- .os-theme-block-dark > .os-scrollbar-vertical.active > .os-scrollbar-track:before {
- top: 0;
- bottom: 0;
- width: 100%;
- left: 0;
- margin-left: 0;
- }
- .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: transparent;
- }
- .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- min-width: 100px;
- max-width: 100px;
- }
- .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- min-height: 100px;
- max-height: 100px;
- }
- .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- top: 4px;
- bottom: 4px;
- left: 4px;
- right: 4px;
- background: #6e6e6e;
- }
- .os-theme-block-dark.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- background: #454545;
- }
- .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- background: #000;
- }
- .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- height: 100%;
- min-width: 16px;
- }
- .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- width: 100%;
- min-height: 16px;
- }
- .os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: background 0.3s;
- }
- .os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track:before {
- transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
- }
- /*
- os-theme-block-light
- */
- .os-theme-block-light > .os-scrollbar {
- padding: 0;
- }
- .os-theme-block-light > .os-scrollbar-horizontal {
- right: 16px;
- height: 16px;
- }
- .os-theme-block-light > .os-scrollbar-vertical {
- bottom: 16px;
- width: 16px;
- }
- .os-theme-block-light.os-host-rtl > .os-scrollbar-horizontal {
- left: 16px;
- right: 0;
- }
- .os-theme-block-light > .os-scrollbar-corner {
- height: 16px;
- width: 16px;
- background-color: transparent;
- }
- .os-theme-block-light > .os-scrollbar > .os-scrollbar-track {
- background: transparent;
- }
- .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track:before,
- .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
- content: '';
- display: block;
- position: absolute;
- background: rgba(255, 255, 255, 0.15);
- }
- .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track:before {
- left: 4px;
- right: 4px;
- height: 2px;
- top: 50%;
- margin-top: -1px;
- }
- .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track:before {
- top: 4px;
- bottom: 4px;
- width: 2px;
- left: 50%;
- margin-left: -1px;
- }
- .os-theme-block-light > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before,
- .os-theme-block-light > .os-scrollbar-horizontal.active > .os-scrollbar-track:before {
- left: 0;
- right: 0;
- height: 100%;
- top: 0;
- margin-top: 0;
- }
- .os-theme-block-light > .os-scrollbar-vertical:hover > .os-scrollbar-track:before,
- .os-theme-block-light > .os-scrollbar-vertical.active > .os-scrollbar-track:before {
- top: 0;
- bottom: 0;
- width: 100%;
- left: 0;
- margin-left: 0;
- }
- .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
- background: transparent;
- }
- .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- min-width: 100px;
- max-width: 100px;
- }
- .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- min-height: 100px;
- max-height: 100px;
- }
- .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- content: '';
- display: block;
- position: absolute;
- top: 4px;
- bottom: 4px;
- left: 4px;
- right: 4px;
- background: #afafaf;
- }
- .os-theme-block-light.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- background: #cecece;
- }
- .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
- .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
- background: #fff;
- }
- .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
- height: 100%;
- min-width: 16px;
- }
- .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
- width: 100%;
- min-height: 16px;
- }
- .os-theme-block-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
- transition: background 0.3s;
- }
- .os-theme-block-light.os-host-transition > .os-scrollbar > .os-scrollbar-track:before {
- transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
- }
|