Customizable scrollbar for Gecko based browsers (Firefox), blink based Chromium 121+, and in limited form for Webkit Based like Safari 18.2+ (now width only).
/* ==UserStyle==
@name Custom Scrollbars in Firefox 63/64+, Chromium 121+, Safari 18.2+
@namespace scrollbar-c-w
@version 1.0.5
@description Customizable scrollbar for Gecko based browsers (Firefox), blink based Chromium 121+, and in limited form for Webkit Based like Safari 18.2+ (now width only).
@author krystian3w
@license CC-BY-SA-4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
@preprocessor less
@var color bar "bar" #C1C1C1
@var color bg "background" #F1F1F1
@var select scrollbar-width "width almost size" ["auto","thin","none"]
@var select scrollbar-select "width <select> size (may no longer works)" ["auto","thin","none"]
@var select inherit "Change width all scrollbars" {yes: "inherit", no: "auto"}
@var select simplebar "Disable glitching with Simplebar?" {yes: "none", no: "block"}
// @compatible firefox Firefox 63 and 64+
// @compatible chrome Chromium 121+ based
// @compatible Edge Edge 121+
// @compatible opera Opera 107+
// @compatible safari Safari 18.2+
==/UserStyle== */
@-moz-document regexp("^(https?|moz-extension)\\:\\/\\/.*$") {
&:root {
scrollbar-face-color: @bar !important;
scrollbar-track-color: @bg !important;
scrollbar-color: @bar @bg !important;
scrollbar-width: @scrollbar-width !important;
* {
scrollbar-width: @inherit !important;
}
}
/* glitched on few firefox versions - may no longer needed */
select {
&:not([multiple]):not([size]) {
scrollbar-width: @scrollbar-select !important;
}
}
div[class*="simplebar-track"][style*="visible"] {
display: @simplebar;
}
}