☰

Ultimate ScrollBar

Customizable scrollbar for chromium based browsers (Chrome/Edge/Brave/Opera/Vivaldi)

当前为 2024-03-15 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name         Ultimate ScrollBar
  3. @namespace    https://github.com/pabli24/
  4. @version      1.0.4
  5. @description  Customizable scrollbar for chromium based browsers (Chrome/Edge/Brave/Opera/Vivaldi) 
  6.  
  7. @author       Pabli (https://ko-fi.com/pabli)
  8. @license      MIT
  9. @homepageURL  https://github.com/pabli24/ultimate-scrollbar
  10. @supportURL   https://github.com/pabli24/ultimate-scrollbar/issues
  11.  
  12. @preprocessor stylus
  13. @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
  14. @var          checkbox _zoom                        "Don't change the size of the scrollbar on zoom (ctrl +)" 1
  15. @var          checkbox _html                        "Main scrollbar only" 0
  16.  
  17. @var          number   _width                       "Width (px)"                [12, 0, null, null, "px"]
  18. @var          number   _thumbBorderRadius           "Thumb border radius (px)"  [4, 0, null, null, "px"]
  19. @var          number   _thumbBoxShadowWidth         "Thumb border (px)"         [1, 0, null, null, "px"]
  20. @var          number   _thumbBorderWidth            "Thumb margin (px)"         [1, 0, null, null, "px"]
  21. @var          number   _buttonBorderWidth           "Arrow buttons margin (px)" [1, 0, null, null, "px"]
  22.  
  23. @var          color    _trackBackgroundColor        "Track"                     hsla(0, 0%, 0%, 0)
  24. @var          color    _thumbBackgroundColor        "Thumb"                     hsla(0, 0%, 30%, .7)
  25. @var          color    _thumbBackgroundColorHover   "Thumb on hover"            hsla(0, 0%, 35%, .7)
  26. @var          color    _thumbBackgroundColorActive  "Thumb on click"            hsla(0, 0%, 40%, .7)
  27. @var          color    _thumbBorderColor            "Thumb border"              hsla(0, 0%, 40%, .3)
  28. @var          color    _cornerBackgroundColor       "Corner"                    hsla(0, 0%, 30%, .7)
  29.  
  30. @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
  31. @var          text     _darkWebsite                 "Add websites where dark mode isn't automatically detected" "'example.com, example.org'"
  32. @var          color    _trackBackgroundColor2       "Dark - Track"              hsla(0, 0%, 0%, 0)
  33. @var          color    _thumbBackgroundColor2       "Dark - Thumb"              hsla(0, 0%, 70%, .7)
  34. @var          color    _thumbBackgroundColorHover2  "Dark - Thumb on hover"     hsla(0, 0%, 75%, .7)
  35. @var          color    _thumbBackgroundColorActive2 "Dark - Thumb on click"     hsla(0, 0%, 80%, .7)
  36. @var          color    _thumbBorderColor2           "Dark - Thumb border"       hsla(0, 0%, 80%, .3)
  37. @var          color    _cornerBackgroundColor2      "Dark - Corner"             hsla(0, 0%, 70%, .7)
  38.  
  39. ==/UserStyle== */
  40. @-moz-document regexp(".+"), regexp("(chrome|moz)-extension://.+")
  41. 	
  42. 	i = !important
  43. 	
  44. 	p = "--ultimate-scrollbar-"
  45. 	
  46. 	v(a)
  47. 		s("var("+ p + a +")")
  48. 	
  49. 	wh(a...)
  50. 		width: a
  51. 		min-width: a
  52. 		max-width: a
  53. 		height: a
  54. 		min-height: a
  55. 		max-height: a
  56. 	
  57. 	h = _html ? ":root, html, body, main, #main, #root" : ":root, *"
  58. 	{h}
  59. 		scrollbar-width: unset i
  60. 		scrollbar-color: unset i
  61. 	
  62. 	:root
  63. 		if _zoom
  64. 			{p}dppx: 1
  65. 		{p}width: _zoom ? "calc(%s * (1 / %s))" % (_width v(dppx)) : _width
  66. 		{p}thumb-box-shadow-width: _zoom ? "calc(%s * (1 / %s))" % (_thumbBoxShadowWidth v(dppx)) : _thumbBoxShadowWidth
  67. 		{p}thumb-border-width: _zoom ? "calc(%s * (1 / %s))" % (_thumbBorderWidth v(dppx)) : _thumbBorderWidth
  68. 		{p}thumb-border-radius: _zoom ? "calc(%s * (1 / %s))" % (_thumbBorderRadius v(dppx)) : _thumbBorderRadius
  69. 		{p}button-border-width: _zoom ? "calc(%s * (1 / %s))" % (_buttonBorderWidth v(dppx)) : _buttonBorderWidth
  70. 	
  71. 	h = _html ? ":is(html\, body\, main\, #main\, #root)" : ""
  72. 	{h}::-webkit-scrollbar
  73. 		^[0], &:vertical, &:horizontal
  74. 			wh: v(width) i
  75. 			background: none i
  76. 			border: none i
  77. 			outline: none i
  78. 			box-shadow: none i
  79. 		&-thumb, &-thumb:vertical, &-thumb:horizontal
  80. 			all: initial i
  81. 			background-color: _thumbBackgroundColor i
  82. 			background-clip: padding-box i
  83. 			border: solid transparent i
  84. 			border-radius: v(thumb-border-radius) i
  85. 			box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor i
  86. 			&:hover
  87. 				all: initial i
  88. 				background-color: _thumbBackgroundColorHover i
  89. 				background-clip: padding-box i
  90. 				border: solid transparent i
  91. 				border-radius: v(thumb-border-radius) i
  92. 				box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor i
  93. 			&:active
  94. 				all: initial i
  95. 				background-color: _thumbBackgroundColorActive i
  96. 				background-clip: padding-box i
  97. 				border: solid transparent i
  98. 				border-radius: v(thumb-border-radius) i
  99. 				box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor i
  100. 		&-thumb:vertical, &-thumb:vertical:hover, &-thumb:vertical:active 
  101. 			border-width: 0 v(thumb-border-width) i
  102. 		&-thumb:horizontal, &-thumb:horizontal:hover, &-thumb:horizontal:active
  103. 			border-width: v(thumb-border-width) 0 i
  104. 		&-track, &-track:vertical, &-track:horizontal
  105. 			all: initial i
  106. 			background-color: _trackBackgroundColor i
  107. 			&:hover, &:active
  108. 				all: initial i
  109. 		&-track-piece, &-track-piece:vertical, &-track-piece:horizontal
  110. 			all: initial i
  111. 		&-corner
  112. 			all: initial i
  113. 			background-color: _cornerBackgroundColor i
  114. 	
  115. 	dataSvg = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' "
  116. 	if _button
  117. 		{h}::-webkit-scrollbar-button
  118. 			all: initial i
  119. 			display: none i
  120. 			&:single-button
  121. 				all: initial i
  122. 				&:vertical
  123. 					all: initial i
  124. 					&:decrement
  125. 						all: initial i
  126. 						wh: v(width) i
  127. 						border: v(button-border-width) solid transparent i
  128. 						background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor +"'><polygon points='1,0 0,1 2,1'/></svg>") i
  129. 						&:hover
  130. 							all: initial i
  131. 							wh: v(width) i
  132. 							border: v(button-border-width) solid transparent i
  133. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover +"'><polygon points='1,0 0,1 2,1'/></svg>") i
  134. 						&:active
  135. 							all: initial i
  136. 							wh: v(width) i
  137. 							border: v(button-border-width) solid transparent i
  138. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive +"'><polygon points='1,0 0,1 2,1'/></svg>") i
  139. 					&:increment
  140. 						all: initial i
  141. 						wh: v(width) i
  142. 						border: v(button-border-width) solid transparent i
  143. 						background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor +"'><polygon points='0,0 2,0 1,1'/></svg>") i
  144. 						&:hover
  145. 							all: initial i
  146. 							wh: v(width) i
  147. 							border: v(button-border-width) solid transparent i
  148. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover +"'><polygon points='0,0 2,0 1,1'/></svg>") i
  149. 						&:active
  150. 							all: initial i
  151. 							wh: v(width) i
  152. 							border: v(button-border-width) solid transparent i
  153. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive +"'><polygon points='0,0 2,0 1,1'/></svg>") i
  154. 				&:horizontal
  155. 					all: initial i
  156. 					&:decrement
  157. 						all: initial i
  158. 						wh: v(width) i
  159. 						border: v(button-border-width) solid transparent i
  160. 						background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor +"'><polygon points='0,1 1,2 1,0'/></svg>") i
  161. 						&:hover
  162. 							all: initial i
  163. 							wh: v(width) i
  164. 							border: v(button-border-width) solid transparent i
  165. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover +"'><polygon points='0,1 1,2 1,0'/></svg>") i
  166. 						&:active
  167. 							all: initial i
  168. 							wh: v(width) i
  169. 							border: v(button-border-width) solid transparent i
  170. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive +"'><polygon points='0,1 1,2 1,0'/></svg>") i
  171. 					&:increment
  172. 						all: initial i
  173. 						wh: v(width) i
  174. 						border: v(button-border-width) solid transparent i
  175. 						background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor +"'><polygon points='0,0 0,2 1,1'/></svg>") i
  176. 						&:hover
  177. 							all: initial i
  178. 							wh: v(width) i
  179. 							border: v(button-border-width) solid transparent i
  180. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover +"'><polygon points='0,0 0,2 1,1'/></svg>") i
  181. 						&:active
  182. 							all: initial i
  183. 							wh: v(width) i
  184. 							border: v(button-border-width) solid transparent i
  185. 							background: no-repeat center / contain _trackBackgroundColor url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive +"'><polygon points='0,0 0,2 1,1'/></svg>") i
  186. 	else
  187. 		{h}::-webkit-scrollbar-button
  188. 			^[0], &:single-button, &:single-button:vertical, &:single-button:horizontal
  189. 				all: initial i
  190. 				display: none i
  191. 	
  192. 	if _zoom
  193. 		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")
  194. 		for n in zoom
  195. 			s("@media (min-resolution:"+ n +"dppx) {:root{"+ p +"dppx:"+ n +"}}")
  196.  
  197. dark()
  198. 	{h}::-webkit-scrollbar
  199. 			&-thumb, &-thumb:vertical, &-thumb:horizontal
  200. 				background-color: _thumbBackgroundColor2 i
  201. 				box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor2 i
  202. 				&:hover
  203. 					background-color: _thumbBackgroundColorHover2 i
  204. 					box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor2 i
  205. 				&:active
  206. 					background-color: _thumbBackgroundColorActive2 i
  207. 					box-shadow: inset 0 0 0 v(thumb-box-shadow-width) _thumbBorderColor2 i
  208. 			&-track, &-track:vertical, &-track:horizontal
  209. 				background-color: _trackBackgroundColor2 i
  210. 			&-corner
  211. 				background-color: _cornerBackgroundColor2 i
  212. 			if _button
  213. 				&-button:single-button
  214. 					&:vertical
  215. 						&:decrement
  216. 							background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor2 +"'><polygon points='1,0 0,1 2,1'/></svg>") i
  217. 							&:hover
  218. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='1,0 0,1 2,1'/></svg>") i
  219. 							&:active
  220. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='1,0 0,1 2,1'/></svg>") i
  221. 						&:increment
  222. 							background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColor2 +"'><polygon points='0,0 2,0 1,1'/></svg>") i
  223. 							&:hover
  224. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='0,0 2,0 1,1'/></svg>") i
  225. 							&:active
  226. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='2' height='1' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='0,0 2,0 1,1'/></svg>") i
  227. 					&:horizontal
  228. 						&:decrement
  229. 							background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor2 +"'><polygon points='0,1 1,2 1,0'/></svg>") i
  230. 							&:hover
  231. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='0,1 1,2 1,0'/></svg>") i
  232. 							&:active
  233. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='0,1 1,2 1,0'/></svg>") i
  234. 						&:increment
  235. 							background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColor2 +"'><polygon points='0,0 0,2 1,1'/></svg>") i
  236. 							&:hover
  237. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorHover2 +"'><polygon points='0,0 0,2 1,1'/></svg>") i
  238. 							&:active
  239. 								background: no-repeat center / contain _trackBackgroundColor2 url(dataSvg +"width='1' height='2' fill='"+ _thumbBackgroundColorActive2 +"'><polygon points='0,0 0,2 1,1'/></svg>") i
  240.  
  241. if _dark
  242. 	@-moz-document regexp("(?!https?:\/\/(www\.duolingo\.com|duckduckgo\.com|minecraft\.wiki|runescape\.wiki|www\.google\.)).*")
  243. 		.dark, .dark-bg, .dark-mode, .dark-theme, .theme-dark, .tw-dark, [dark], [dark="true"], [theme="dark"],
  244. 		[data-theme="dark"], [data-color-mode="dark"], [data-color-scheme="dark"], [data-scheme="dark"], [data-bs-theme="dark"], [data-ui-theme="dark"],
  245. 		[data-dark-mode="true"], [style*="color-scheme: dark"],
  246. 		html:has(>:is(.theme-default\\\,.theme-contrast\,.skin-modern-dark)>:is(\#mastodon\,.admin-wrapper)),
  247. 		[data-darkreader-scheme="dark"], [native-dark-active], [ml-is-active]
  248. 			dark()
  249. 	
  250. 	@-moz-document domain("minecraft.wiki"), domain("steampowered.com"), domain("steamcommunity.com")
  251. 		html
  252. 			dark()
  253. 	
  254. 	@-moz-document regexp("(chrome|moz)-extension://.+")
  255. 		[data-ui-theme="dark"]
  256. 			dark()
  257. 	
  258. 	@-moz-document domain("duolingo.com")
  259. 		[data-duo-theme="dark"]
  260. 			dark()
  261. 	
  262. 	@-moz-document domain("old.reddit.com"), domain("www.reddit.com")
  263. 		.res-nightmode
  264. 			dark()
  265. 	
  266. 	@-moz-document domain("duckduckgo.com")
  267. 		[style*="--theme-bg-global: var(--color-gray100)"]
  268. 			dark()
  269. 	
  270. 	@-moz-document domain("runescape.wiki")
  271. 		html:has(>body:is(.wgl-theme-dark\\\, .wgl-theme-browntown))
  272. 			dark()
  273. 	
  274. 	@-moz-document url-prefix("https://www.google.")
  275. 		html:has([data-darkmode="true"])
  276. 			dark()
  277. 	
  278. 	if _darkWebsite != "example.com, example.org"
  279. 		unless _darkWebsite is a "string"
  280. 			error("Expected a string. DO NOT remove the quotation marks.")
  281. 		_darkWebsite = split(",", replace("^\s+|\s+(?=,)|(?<=,)\s+|\s+$", "", _darkWebsite))
  282. 		if _darkWebsite != ""
  283. 			domain = ""
  284. 			for n in _darkWebsite
  285. 				domain += "domain('"+ n +"')"
  286. 				if n != _darkWebsite[-1]
  287. 					domain += ", "
  288. 			s("@-moz-document "+ domain +" {")
  289. 			dark()
  290. 			s("}")