styleui-components/css/scrollbars.css

Lightweight, modular UI component library with zero dependencies

/*------------------------------------*\\
#SCROLLBARS
\\*------------------------------------*/

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-layer-0);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg-layer-4);
    border-radius: 10px;
    border: 3px solid var(--bg-layer-0);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--overlay-dark);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Thin variant */
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { border: none; }

/* Firefox support */
* { scrollbar-width: auto; scrollbar-color: var(--bg-layer-4) var(--bg-layer-0); }
.scrollbar-thin { scrollbar-width: thin; }

/* Dark-mode adjustments */
body.dark ::-webkit-scrollbar-track { background: var(--bg-layer-2); }
body.dark ::-webkit-scrollbar-thumb { background: var(--bg-layer-4); border: 3px solid var(--bg-layer-2); }
body.dark ::-webkit-scrollbar-thumb:hover { background-color: var(--overlay-dark); }
body.dark ::-webkit-scrollbar-corner { background: transparent; } 

/* Hide scrollbars for the left navigation panel */
.left-panel, .left-panel * {
    scrollbar-width: none; /* Firefox */
}
.left-panel::-webkit-scrollbar, .left-panel *::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}