/* ==UserStyle==
@name Ultimate ScrollBar
@namespace https://github.com/pabli24/
@version 1.0.0
@description Customizable scrollbar for chromium based browsers (Chrome/Edge/Brave/Opera/Vivaldi)
@author Pabli (https://ko-fi.com/pabli)
@license MIT
@homepageURL https://github.com/pabli24/ultimate-scrollbar
@supportURL https://github.com/pabli24/ultimate-scrollbar/issues
@preprocessor stylus
@var checkbox _button "Show arrow buttons (Enable 'Patch CSP to allow style assets' in the stylus options, otherwise the arrows may not show up on some sites)" 1
@var checkbox _zoom "Don't change the size of the scrollbar on zoom (ctrl +)" 1
@var checkbox _html "Main scrollbar only" 0
@var number _width "Width (px)" [12, 0, null, null, "px"]
@var number _thumbBorderRadius "Thumb border radius (px)" [4, 0, null, null, "px"]
@var number _thumbBoxShadowWidth "Thumb border (px)" [1, 0, null, null, "px"]
@var number _thumbBorderWidth "Thumb margin (px)" [1, 0, null, null, "px"]
@var number _buttonBorderWidth "Arrow buttons margin (px)" [1, 0, null, null, "px"]
@var color _trackBackgroundColor "Track" hsla(0, 0%, 0%, 0)
@var color _thumbBackgroundColor "Thumb" hsla(0, 0%, 30%, .7)
@var color _thumbBackgroundColorHover "Thumb on hover" hsla(0, 0%, 35%, .7)
@var color _thumbBackgroundColorActive "Thumb on click" hsla(0, 0%, 40%, .7)
@var color _thumbBorderColor "Thumb border" hsla(0, 0%, 40%, .3)
@var color _cornerBackgroundColor "Corner" hsla(0, 0%, 30%, .7)
@var checkbox _dark "Separate theme for websites with dark mode (On some websites you may need to change their theme from auto to dark)" 1
@var text _darkWebsite "Add websites where dark mode isn't automatically detected" "'example.com, example.org'"
@var color _trackBackgroundColor2 "Dark - Track" hsla(0, 0%, 0%, 0)
@var color _thumbBackgroundColor2 "Dark - Thumb" hsla(0, 0%, 70%, .7)
@var color _thumbBackgroundColorHover2 "Dark - Thumb on hover" hsla(0, 0%, 75%, .7)
@var color _thumbBackgroundColorActive2 "Dark - Thumb on click" hsla(0, 0%, 80%, .7)
@var color _thumbBorderColor2 "Dark - Thumb border" hsla(0, 0%, 80%, .3)
@var color _cornerBackgroundColor2 "Dark - Corner" hsla(0, 0%, 70%, .7)
==/UserStyle== */
@-moz-document regexp(".+"), regexp("(chrome|moz)-extension://.+")
i = !important
p = "--ultimate-scrollbar-"
v(a) {s("var("+p+a+")")}
wh(a...)
width: a
min-width: a
max-width: a
height: a
min-height: a
max-height: a
if _html
:root, html, body, main, #main, #root
scrollbar-width: unset i
scrollbar-color: unset i
else
:root, *
scrollbar-width: unset i
scrollbar-color: unset i
:root
if _zoom
{p}dppx: 1
{p}width: _zoom ? "calc(%s * (1 / %s))" % (_width v(dppx)) : _width
{p}thumb-box-shadow-width: _zoom ? "calc(%s * (1 / %s))" % (_thumbBoxShadowWidth v(dppx)) : _thumbBoxShadowWidth
{p}thumb-border-width: _zoom ? "calc(%s * (1 / %s))" % (_thumbBorderWidth v(dppx)) : _thumbBorderWidth
{p}thumb-border-radius: _zoom ? "calc(%s * (1 / %s))" % (_thumbBorderRadius v(dppx)) : _thumbBorderRadius
{p}button-border-width: _zoom ? "calc(%s * (1 / %s))" % (_buttonBorderWidth v(dppx)) : _buttonBorderWidth
_html = _html ? ":is(html\, body\, main\, #main\, #root)" : ""
{_html}::-webkit-scrollbar
^[0], &:vertical, &:horizontal
wh: v(width) i
background: none i
border: none i
outline: none i
box-shadow: none i
&-thumb, &-thumb:vertical, &-thumb:horizontal
all: initial i
background-color: _thumbBackgroundColor i
background-clip: padding-box i
border: solid transparent i
border-radius: v(thumb-border-radius) i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor i
&:hover
all: initial i
background-color: _thumbBackgroundColorHover i
background-clip: padding-box i
border: solid transparent i
border-radius: v(thumb-border-radius) i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor i
&:active
all: initial i
background-color: _thumbBackgroundColorActive i
background-clip: padding-box i
border: solid transparent i
border-radius: v(thumb-border-radius) i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor i
&-thumb:vertical, &-thumb:vertical:hover, &-thumb:vertical:active
border-width: 0 v(thumb-border-width) i
&-thumb:horizontal, &-thumb:horizontal:hover, &-thumb:horizontal:active
border-width: v(thumb-border-width) 0 i
&-track, &-track:vertical, &-track:horizontal
all: initial i
background-color: _trackBackgroundColor i
&:hover, &:active, &-piece
all: initial i
&-corner
all: initial i
background-color: _cornerBackgroundColor i
dataSvg = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' "
if _button
{_html}::-webkit-scrollbar-button
all: initial i
display: none i
&:single-button
all: initial i
&:vertical
all: initial i
&:decrement
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor +"'><polygon points='1,0 0,1 2,1'/></svg>") i
&:hover
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover +"'><polygon points='1,0 0,1 2,1'/></svg>") i
&:active
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive +"'><polygon points='1,0 0,1 2,1'/></svg>") i
&:increment
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor +"'><polygon points='0,0 2,0 1,1'/></svg>") i
&:hover
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover +"'><polygon points='0,0 2,0 1,1'/></svg>") i
&:active
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive +"'><polygon points='0,0 2,0 1,1'/></svg>") i
&:horizontal
all: initial i
&:decrement
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor +"'><polygon points='0,1 1,2 1,0'/></svg>") i
&:hover
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover +"'><polygon points='0,1 1,2 1,0'/></svg>") i
&:active
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive +"'><polygon points='0,1 1,2 1,0'/></svg>") i
&:increment
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor +"'><polygon points='0,0 0,2 1,1'/></svg>") i
&:hover
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover +"'><polygon points='0,0 0,2 1,1'/></svg>") i
&:active
all: initial i
wh: v(width) i
border: v(button-border-width) solid transparent i
background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive +"'><polygon points='0,0 0,2 1,1'/></svg>") i
else
{_html}::-webkit-scrollbar-button
^[0], &:single-button, &:single-button:vertical, &:single-button:horizontal
all: initial i
display: none i
if _zoom
zoom = ('0.1' '0.2' '0.25' '0.30000001192092896' '0.3125' '0.3333333432674408' '0.375' '0.4000000059604645' '0.4166666865348816' '0.4375' '0.45000001788139343' '0.5' '0.5250000357627869' '0.5833333730697632' '0.6000000238418579' '0.625' '0.6666666865348816' '0.699999988079071' '0.75' '0.800000011920929' '0.8333333730697632' '0.875' '0.8999999761581421' '0.9000000357627869' '0.9375' '1.0' '1.0499999523162842' '1.0500000715255737' '1.100000023841858' '1.125' '1.1666667461395264' '1.2000000476837158' '1.225000023841858' '1.25' '1.2999999523162842' '1.3125' '1.3333333730697632' '1.3499999046325684' '1.375' '1.399999976158142' '1.5' '1.5625' '1.5749999284744263' '1.600000023841858' '1.625' '1.6500000953674316' '1.6666667461395264' '1.7000000476837158' '1.75' '1.7999999523162842' '1.8000000715255737' '1.875' '1.899999976158142' '1.9250000715255737' '1.9499999284744263' '2.0' '2.0999999046325684' '2.1000001430511475' '2.125' '2.1875' '2.200000047683716' '2.25' '2.2749998569488525' '2.299999952316284' '2.3333334922790527' '2.375' '2.4000000953674316' '2.450000047683716' '2.5' '2.5500001907348633' '2.5999999046325684' '2.625' '2.6666667461395264' '2.6999998092651367' '2.700000047683716' '2.75' '2.799999952316284' '2.8499999046325684' '2.875' '2.9000000953674316' '2.9750001430511475' '3.0' '3.0625' '3.0999999046325684' '3.125' '3.1499998569488525' '3.200000047683716' '3.25' '3.299999952316284' '3.3000001907348633' '3.325000047683716' '3.375' '3.4000000953674316' '3.4499998092651367' '3.5' '3.5999999046325684' '3.6000001430511475' '3.625' '3.674999713897705' '3.700000047683716' '3.75' '3.799999952316284' '3.8500001430511475' '3.875' '3.8999998569488525' '3.9000000953674316' '4.0' '4.025000095367432' '4.050000190734863' '4.099999904632568' '4.125' '4.199999809265137' '4.200000286102295' '4.25' '4.300000190734863' '4.350000381469727' '4.375' '4.400000095367432' '4.5' '4.549999713897705' '4.599999904632568' '4.625' '4.649999618530273' '4.699999809265137' '4.724999904632568' '4.75' '4.800000190734863' '4.875' '4.900000095367432' '4.949999809265137' '5.0' '5.075000286102295' '5.100000381469727' '5.125' '5.199999809265137' '5.25' '5.375' '5.399999618530273' '5.400000095367432' '5.424999713897705' '5.5' '5.550000190734863' '5.599999904632568' '5.625' '5.699999809265137' '5.75' '5.775000095367432' '5.800000190734863' '5.850000381469727' '5.875' '5.950000286102295' '6.0' '6.125' '6.149999618530273' '6.199999809265137' '6.25' '6.299999713897705' '6.400000095367432' '6.450000286102295' '6.474999904632568' '6.599999904632568' '6.600000381469727' '6.650000095367432' '6.75' '6.800000190734863' '6.825000286102295' '6.899999618530273' '7.0' '7.049999713897705' '7.174999713897705' '7.199999809265137' '7.200000286102295' '7.34999942779541' '7.350000381469727' '7.400000095367432' '7.5' '7.52500057220459' '7.599999904632568' '7.700000286102295' '7.800000190734863' '7.875' '8.0' '8.050000190734863' '8.199999809265137' '8.22499942779541' '8.399999618530273' '8.40000057220459' '8.574999809265137' '8.600000381469727' '8.75' '8.800000190734863' '9.0' '9.199999809265137' '9.399999618530273' '9.600000381469727' '9.800000190734863' '10.0' '11.0' '12.0' '13.0' '14.0' '15.0')
for n in zoom
s('@media (min-resolution:'+ n +'dppx) {:root{'+ p +'dppx:'+ n +'}}')
dark()
{_html}::-webkit-scrollbar
&-thumb, &-thumb:vertical, &-thumb:horizontal
background-color: _thumbBackgroundColor2 i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor2 i
&:hover
background-color: _thumbBackgroundColorHover2 i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor2 i
&:active
background-color: _thumbBackgroundColorActive2 i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor2 i
&-track, &-track:vertical, &-track:horizontal
background-color: _trackBackgroundColor2 i
&-corner
background-color: _cornerBackgroundColor2 i
if _button
&-button:single-button
&:vertical
&:decrement
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor2 +"'><polygon points='1,0 0,1 2,1'/></svg>") i
&:hover
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='1,0 0,1 2,1'/></svg>") i
&:active
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='1,0 0,1 2,1'/></svg>") i
&:increment
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor2 +"'><polygon points='0,0 2,0 1,1'/></svg>") i
&:hover
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='0,0 2,0 1,1'/></svg>") i
&:active
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='0,0 2,0 1,1'/></svg>") i
&:horizontal
&:decrement
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor2 +"'><polygon points='0,1 1,2 1,0'/></svg>") i
&:hover
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='0,1 1,2 1,0'/></svg>") i
&:active
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='0,1 1,2 1,0'/></svg>") i
&:increment
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor2 +"'><polygon points='0,0 0,2 1,1'/></svg>") i
&:hover
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='0,0 0,2 1,1'/></svg>") i
&:active
background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='0,0 0,2 1,1'/></svg>") i
if _dark
@-moz-document regexp("(?!https?:\/\/(www\.duolingo\.com|old\.reddit\.com|duckduckgo\.com)).*")
.dark, .dark-bg, .dark-mode, .dark-theme, .theme-dark, [dark], [dark="true"],
[data-theme="dark"], [data-color-mode="dark"], [data-color-scheme="dark"], [data-scheme="dark"], [data-bs-theme="dark"], [data-ui-theme="dark"],
[data-dark-mode="true"], [style*="color-scheme: dark;"]
[data-darkreader-scheme="dark"], [native-dark-active], [ml-is-active]
dark()
@-moz-document regexp("(chrome|moz)-extension://.+")
[data-ui-theme="dark"]
dark()
@-moz-document domain("duolingo.com")
[data-duo-theme="dark"]
dark()
@-moz-document domain("old.reddit.com")
.res-nightmode //Reddit Enhancement Suite
dark()
@-moz-document domain("duckduckgo.com")
[style*="--theme-bg-global: var(--color-gray100)"]
dark()
if _darkWebsite != "example.com, example.org"
unless _darkWebsite is a "string"
error("Expected a string. DO NOT remove the quotation marks.")
_darkWebsite = split(",", replace("^\s+|\s+(?=,)|(?<=,)\s+|\s+$", "", _darkWebsite))
if _darkWebsite != ""
domain = ""
for n in _darkWebsite
domain += "domain('"+ n +"')"
if n != _darkWebsite[-1]
domain += ", "
s("@-moz-document "+ domain +" {")
dark()
s("}")
