A new version of my scrollbar style
Scrollbar for Opera GX (NEW) by BlueYoshi1938
Details
AuthorBlueYoshi1938
LicenseNo License
Categoryscrollbar
Created
Updated
Size9.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This only works on Opera GX Browser, otherwise show white.
Based on Ultimate ScrollBar by Pabli (pabli), but without arrows
Source code
/* ==UserStyle==
@name Scrollbar for Opera GX (NEW)
@namespace https://github.com/HelloTech2
@version 1.0.0
@description A new version of my scrollbar style
@author Pabli (https://ko-fi.com/pabli)
@license MIT
@preprocessor stylus
@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 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'"
==/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: env(-opera-gx-accent-color) 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) #ffffff42 i
&:hover
all: initial i
background-color: env(-opera-gx-accent-color) 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) #ffffff52 i
&:active
all: initial i
background-color: env(-opera-gx-accent-color) 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) #ffffff62 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: env(-opera-gx-background-color) i
&:hover, &:active, &-piece
all: initial i
&-corner
all: initial i
background-color: env(-opera-gx-background-color) i
::-webkit-scrollbar-button
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: env(-opera-gx-accent-color) i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) #00000040 i
&:hover
background-color: env(-opera-gx-accent-color) i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) #00000052 i
&:active
background-color: env(-opera-gx-accent-color) i
box-shadow: inset 0 0 0 v(thumb-box-shadow-width) #00000063 i
&-track, &-track:vertical, &-track:horizontal
background-color: env(-opera-gx-background-color) i
&-corner
background-color: _cornerBackgroundColor2 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("}")