mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-07 18:32:26 +03:00
Rene
175 lines
4.6 KiB
SCSS
175 lines
4.6 KiB
SCSS
.os-scrollbar {
|
|
transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
z-index: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
.os-scrollbar-track {
|
|
pointer-events: auto;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
}
|
|
.os-scrollbar-handle {
|
|
pointer-events: auto;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.os-scrollbar-handle-off,
|
|
.os-scrollbar-track-off {
|
|
pointer-events: none;
|
|
}
|
|
.os-scrollbar-unusable,
|
|
.os-scrollbar-unusable * {
|
|
pointer-events: none !important;
|
|
}
|
|
.os-scrollbar-unusable .os-scrollbar-handle {
|
|
opacity: 0 !important;
|
|
visibility: hidden Im !important;
|
|
}
|
|
.os-scrollbar-horizontal {
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.os-scrollbar-vertical {
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.os-scrollbar-horizontal-rtl {
|
|
right: 0;
|
|
}
|
|
.os-scrollbar-vertical-rtl {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
.os-scrollbar-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.os-scrollbar-auto-hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
.os-scrollbar-interaction.os-scrollbar-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless {
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/*
|
|
THEMES:
|
|
*/
|
|
|
|
/* NONE THEME: */
|
|
.os-theme-none.os-scrollbar {
|
|
display: none !important;
|
|
}
|
|
/* DARK & LIGHT THEME: */
|
|
.os-theme-dark.os-scrollbar-horizontal,
|
|
.os-theme-light.os-scrollbar-horizontal {
|
|
right: 10px;
|
|
height: 10px;
|
|
}
|
|
.os-theme-dark.os-scrollbar-vertical,
|
|
.os-theme-light.os-scrollbar-vertical {
|
|
bottom: 10px;
|
|
width: 10px;
|
|
}
|
|
.os-theme-dark.os-scrollbar-horizontal-rtl,
|
|
.os-theme-light.os-scrollbar-horizontal-rtl {
|
|
left: 10px;
|
|
right: 0;
|
|
}
|
|
.os-theme-dark.os-scrollbar,
|
|
.os-theme-light.os-scrollbar {
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
}
|
|
.os-theme-dark.os-scrollbar-unusable,
|
|
.os-theme-light.os-scrollbar-unusable {
|
|
background: transparent;
|
|
}
|
|
.os-theme-dark.os-scrollbar > .os-scrollbar-track,
|
|
.os-theme-light.os-scrollbar > .os-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.os-theme-dark.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
|
|
.os-theme-light.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
|
|
min-width: 30px;
|
|
}
|
|
.os-theme-dark.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
|
|
.os-theme-light.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
|
min-height: 30px;
|
|
}
|
|
.os-theme-dark.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle,
|
|
.os-theme-light.os-scrollbar-transition > .os-scrollbar-track > .os-scrollbar-handle {
|
|
transition: background-color 0.3s;
|
|
}
|
|
.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
|
|
.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
|
|
.os-theme-dark.os-scrollbar > .os-scrollbar-track,
|
|
.os-theme-light.os-scrollbar > .os-scrollbar-track {
|
|
border-radius: 10px;
|
|
}
|
|
.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.os-theme-dark.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
|
|
background: rgba(0, 0, 0, 0.55);
|
|
}
|
|
.os-theme-light.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
|
|
background: rgba(255, 255, 255, 0.55);
|
|
}
|
|
.os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
|
|
.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
|
|
.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before,
|
|
.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
}
|
|
.os-theme-dark.os-host-scrollbar-hidden > .os-scrollbar-handle:before {
|
|
display: none;
|
|
}
|
|
.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before,
|
|
.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before {
|
|
top: -6px;
|
|
bottom: -2px;
|
|
}
|
|
.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before,
|
|
.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
|
|
left: -6px;
|
|
right: -2px;
|
|
}
|
|
.os-theme-dark.os-scrollbar-vertical-rtl .os-scrollbar-handle:before,
|
|
.os-theme-light.os-scrollbar-vertical-rtl .os-scrollbar-handle:before {
|
|
right: -6px;
|
|
left: -2px;
|
|
}
|