Ultimate ScrollBar by pabli

Imported and mirrored from https://raw.githubusercontent.com/pabli24/ultimate-scrollbar/main/ultimate-scrollbar.user.css
Details

Authorpabli
LicenseMIT
Categoryunset
Created9 months, 2 days ago
Updated6 months, 4 weeks ago
Size19 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Customizable scrollbar for chromium based browsers (Chrome/Edge/Brave/Opera/Vivaldi), with minimal Firefox support
Notes

☕ Support me on ko-fi
See project on GitHub
Features:
Set custom colors
Set custom sizes
Set rounded corners
Separate theme for websites with dark mode
Option to change main scrollbar only
Don't change the size of the scrollbar on zoom (ctrl +)
Check all the options in the config menu ⚙️
How to:
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Ultimate ScrollBar
@namespace    https://github.com/pabli24/
@version      1.2.3
@description  Customizable scrollbar for Chromium based browsers (Chrome/Edge/Brave/Opera/Vivaldi), with minimal Firefox support

@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          select   _dark                        "Separate style for websites with dark mode (On some sites you may need to change their theme from auto to dark) 🦊" ["Enabled", "Manually:Enabled only on sites added manually below", "All:Enabled on all sites", "Disabled"]
@var          text     _darkWebsite                 "Add sites manually if dark scrollbar isn't working 🦊" "'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)

@var          checkbox _new                         "Use new standardized, but less customizable way of styling scrollbars (Supported option = 🦊). The scrollbar look may differ from browser to browser (Chrome 121+ / Firefox 64+)" 0
@var          checkbox _thin                        "↳ Width - Thin 🦊"         0

==/UserStyle== */
@-moz-document regexp(".+"), regexp("(chrome|moz)-extension://.+")
	
	i = !important
	
	if _dark == All
		_trackBackgroundColor = _trackBackgroundColor2
		_thumbBackgroundColor = _thumbBackgroundColor2
		_thumbBackgroundColorHover = _thumbBackgroundColorHover2
		_thumbBackgroundColorActive = _thumbBackgroundColorActive2
		_thumbBorderColor = _thumbBorderColor2
		_cornerBackgroundColor = _cornerBackgroundColor2
	
	if _new == 0
		
		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
		
		h = _html ? ":root, html, body, main, #main, #root" : ":root, *"
		{h}
			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
		
		h = _html ? ":is(html\, body\, main\, #main\, #root)" : ""
		{h}::-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, &:active
					all: initial 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
					background-color: _thumbBackgroundColorHover i
				&:active
					background-color: _thumbBackgroundColorActive 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
					all: initial i
					background-color: _trackBackgroundColor i
			&-track-piece, &-track-piece:vertical, &-track-piece:horizontal
				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
			{h}::-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 ...
Reviews

No reviews yet.