fix: improve scrollbar and support firefox (#51)

std-microblock · web-flow · commit 407036c4310d · 2025-12-04T22:07:49.000+08:00
* feat: improve scrollbar

* fix: improve scrollbar and support firefox

* style: reformat code

* adjust colors

* do not show scrollbar for decl if not needed
diff --git a/src/components/decl-doc/Decl.astro b/src/components/decl-doc/Decl.astro
@@ -10,7 +10,7 @@
   .decl {
     background-color: var(--sl-color-gray-6);
     border-bottom: 1px solid var(--sl-color-gray-5);
-    overflow: scroll;
+    overflow: auto;
     margin: 0;
     padding: 0 1em;
   }
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: #e6f3ff;
+  border-radius: 2px;
 }
 
-:root[data-theme="light"] ::-webkit-scrollbar-thumb {
-  background: #888;
+::-webkit-scrollbar-thumb {
+  background-color: #87ceeb;
+  border-radius: 2px;
 }
 
-:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
-  background: #555;
+::-webkit-scrollbar-thumb:hover {
+  background-color: #4682b4;
 }
 
 :root[data-theme="dark"] ::-webkit-scrollbar-track {
-  background: #2a2a2a;
+  background-color: #1e3a5f;
 }
 
 :root[data-theme="dark"] ::-webkit-scrollbar-thumb {
-  background: #666;
+  background-color: #4a90e2;
 }
 
 :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
-  background: #aaa;
+  background-color: #5b9bd5;
 }
 
-::-webkit-scrollbar {
-  width: 8px;
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #87ceeb #e6f3ff;
 }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
+:root[data-theme="dark"] * {
+  scrollbar-color: #4a90e2 #1e3a5f;
 }

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`.decl {`
`11`	`11`	`background-color: var(--sl-color-gray-6);`
`12`	`12`	`border-bottom: 1px solid var(--sl-color-gray-5);`
`13`		`- overflow: scroll;`
	`13`	`+ overflow: auto;`
`14`	`14`	`margin: 0;`
`15`	`15`	`padding: 0 1em;`
`16`	`16`	`}`
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: #e6f3ff;`
	`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: #87ceeb;`
	`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: #4682b4;`
`43`	`49`	`}`
`44`	`50`
`45`	`51`	`:root[data-theme="dark"] ::-webkit-scrollbar-track {`
`46`		`- background: #2a2a2a;`
	`52`	`+ background-color: #1e3a5f;`
`47`	`53`	`}`
`48`	`54`
`49`	`55`	`:root[data-theme="dark"] ::-webkit-scrollbar-thumb {`
`50`		`- background: #666;`
	`56`	`+ background-color: #4a90e2;`
`51`	`57`	`}`
`52`	`58`
`53`	`59`	`:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {`
`54`		`- background: #aaa;`
	`60`	`+ background-color: #5b9bd5;`
`55`	`61`	`}`
`56`	`62`
`57`		`-::-webkit-scrollbar {`
`58`		`- width: 8px;`
	`63`	`+* {`
	`64`	`+ scrollbar-width: thin;`
	`65`	`+ scrollbar-color: #87ceeb #e6f3ff;`
`59`	`66`	`}`
`60`	`67`
`61`		`-::-webkit-scrollbar-thumb {`
`62`		`- border-radius: 4px;`
	`68`	`+:root[data-theme="dark"] * {`
	`69`	`+ scrollbar-color: #4a90e2 #1e3a5f;`
`63`	`70`	`}`