fix: improve scrollbar and support firefox

std-microblock · std-microblock · commit 5809047116fd · 2025-12-03T14:56:53.000+08:00
diff --git a/src/styles/custom.css b/src/styles/custom.css
@@ -30,34 +30,41 @@
 }
 
 /* Custom scrollbar */
-:root[data-theme="light"] ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+::-webkit-scrollbar {
+    width: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #F5F5F5;
+    border-radius: 2px;
 }
 
-:root[data-theme="light"] ::-webkit-scrollbar-thumb {
-  background: #888;
+::-webkit-scrollbar-thumb {
+    background-color: #C1C1C1;
+    border-radius: 2px;
 }
 
-:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
-  background: #555;
+::-webkit-scrollbar-thumb:hover {
+    background-color: #A8A8A8;
 }
 
 :root[data-theme="dark"] ::-webkit-scrollbar-track {
-  background: #2a2a2a;
+    background-color: #2D2A32;
 }
 
 :root[data-theme="dark"] ::-webkit-scrollbar-thumb {
-  background: #666;
+    background-color: #4A4458;
 }
 
 :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
-  background: #aaa;
+    background-color: #5A5466;
 }
 
-::-webkit-scrollbar {
-  width: 8px;
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #C1C1C1 #F5F5F5;
 }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
+:root[data-theme="dark"] * {
+    scrollbar-color: #4A4458 #2D2A32;
 }

Original file line number	Diff line number	Diff line change
`@@ -30,34 +30,41 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`/* Custom scrollbar */`
`33`		`-:root[data-theme="light"] ::-webkit-scrollbar-track {`
`34`		`- background: #f1f1f1;`
	`33`	`+::-webkit-scrollbar {`
	`34`	`+ width: 4px;`
	`35`	`+}`
	`36`	`+`
	`37`	`+::-webkit-scrollbar-track {`
	`38`	`+ background-color: #F5F5F5;`
	`39`	`+ border-radius: 2px;`
`35`	`40`	`}`
`36`	`41`
`37`		`-:root[data-theme="light"] ::-webkit-scrollbar-thumb {`
`38`		`- background: #888;`
	`42`	`+::-webkit-scrollbar-thumb {`
	`43`	`+ background-color: #C1C1C1;`
	`44`	`+ border-radius: 2px;`
`39`	`45`	`}`
`40`	`46`
`41`		`-:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {`
`42`		`- background: #555;`
	`47`	`+::-webkit-scrollbar-thumb:hover {`
	`48`	`+ background-color: #A8A8A8;`
`43`	`49`	`}`
`44`	`50`
`45`	`51`	`:root[data-theme="dark"] ::-webkit-scrollbar-track {`
`46`		`- background: #2a2a2a;`
	`52`	`+ background-color: #2D2A32;`
`47`	`53`	`}`
`48`	`54`
`49`	`55`	`:root[data-theme="dark"] ::-webkit-scrollbar-thumb {`
`50`		`- background: #666;`
	`56`	`+ background-color: #4A4458;`
`51`	`57`	`}`
`52`	`58`
`53`	`59`	`:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {`
`54`		`- background: #aaa;`
	`60`	`+ background-color: #5A5466;`
`55`	`61`	`}`
`56`	`62`
`57`		`-::-webkit-scrollbar {`
`58`		`- width: 8px;`
	`63`	`+* {`
	`64`	`+ scrollbar-width: thin;`
	`65`	`+ scrollbar-color: #C1C1C1 #F5F5F5;`
`59`	`66`	`}`
`60`	`67`
`61`		`-::-webkit-scrollbar-thumb {`
`62`		`- border-radius: 4px;`
	`68`	`+:root[data-theme="dark"] * {`
	`69`	`+ scrollbar-color: #4A4458 #2D2A32;`
`63`	`70`	`}`