align scrollbar style across non-mobile browsers

Author: mojavelinux

src/css/base.css

@@ -108,18 +108,40 @@ object[type="image/svg+xml"]:not([width]) {
   opacity: 0.5;
 }
 
-@supports (scrollbar-width: thin) {
+@media (pointer: fine) {
+  html {
+    scrollbar-color: var(--scrollbar-thumb-color) var(--panel-background);
+  }
+
   body * {
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb-color) transparent;
   }
-}
 
-body ::-webkit-scrollbar {
-  height: 0.25rem;
-  width: 0.25rem;
-}
+  html::-webkit-scrollbar {
+    background-color: var(--panel-background);
+    height: 12px;
+    width: 12px;
+  }
 
-body ::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-color);
+  body ::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--scrollbar-thumb-color);
+    border: 3px solid transparent;
+    border-radius: 12px;
+  }
+
+  body ::-webkit-scrollbar-thumb {
+    border-width: 1.75px;
+    border-radius: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar_hover-thumb-color);
+  }
 }

src/css/vars.css

@@ -36,6 +36,7 @@
   --panel-background: var(--color-smoke-30);
   --panel-border-color: var(--color-smoke-90);
   --scrollbar-thumb-color: var(--color-gray-10);
+  --scrollbar_hover-thumb-color: #9c9c9c;
   /* navbar */
   --navbar-background: var(--color-jet-80);
   --navbar-font-color: var(--color-white);