enclose scrollbar-width and scrollbar-color property in supports clause; move scrollbar track to CSS var

Author: mojavelinux

src/css/base.css

@@ -109,17 +109,19 @@ object[type="image/svg+xml"]:not([width]) {
 }
 
 @media (pointer: fine) {
-  html {
-    scrollbar-color: var(--scrollbar-thumb-color) var(--panel-background);
-  }
-
-  body * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb-color) transparent;
+  @supports (scrollbar-width: thin) {
+    html {
+      scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+    }
+
+    body * {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-thumb-color) transparent;
+    }
   }
 
   html::-webkit-scrollbar {
-    background-color: var(--panel-background);
+    background-color: var(--scrollbar-track-color);
     height: 12px;
     width: 12px;
   }

src/css/vars.css

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