fix: improve scrollbar and support firefox (#51)

* feat: improve scrollbar

* fix: improve scrollbar and support firefox

* style: reformat code

* adjust colors

* do not show scrollbar for decl if not needed

Author: std-microblock

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;
   }

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;
 }