normalize scrollbars across browsers

* customize scrollbars on html element
* align scrollbar track width between Firefox and Webkit-based browsers
* align scrollbar thumb between Firefox and Webkit-based browsers

diff --git a/src/css/base.css b/src/css/base.css
index b0d16ee..e637407 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -107,18 +107,42 @@ object[type="image/svg+xml"]:not([width]) {
   opacity: 0.5;
 }
 
-@supports (scrollbar-width: thin) {
-  body * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb-color) transparent;
+@media (pointer: fine) {
+  @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;
+    }
   }
-}
 
-body ::-webkit-scrollbar {
-  height: 0.25rem;
-  width: 0.25rem;
-}
+  html::-webkit-scrollbar {
+    background-color: var(--scrollbar-track-color);
+    height: 12px;
+    width: 12px;
+  }
+
+  body ::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+  }
 
-body ::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-color);
+  ::-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);
+  }
 }

diff --git a/src/css/toc.css b/src/css/toc.css
index 429bc13..08989fe 100644 (file)
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -36,7 +36,12 @@
   max-height: var(--toc-height);
   overflow-y: auto;
   overscroll-behavior: none;
-  scrollbar-width: none;
+}
+
+@supports (scrollbar-width: none) {
+  .toc.sidebar .toc-menu ul {
+    scrollbar-width: none;
+  }
 }
 
 .toc .toc-menu ul::-webkit-scrollbar {

diff --git a/src/css/vars.css b/src/css/vars.css
index a6f4590..00bcb12 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -7,7 +7,8 @@
   --color-smoke-70: #f0f0f0;
   --color-smoke-90: #e1e1e1;
   --color-gray-10: #c1c1c1;
-  --color-gray-30: #8e8e8e;
+  --color-gray-30: #9c9c9c;
+  --color-gray-40: #8e8e8e;
   --color-gray-50: #808080;
   --color-gray-70: #5d5d5d;
   --color-jet-20: #4a4a4a;
@@ -31,7 +32,9 @@
   --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: var(--color-gray-30);
   /* navbar */
   --navbar-background: var(--color-jet-80);
   --navbar-font-color: var(--color-white);
@@ -55,9 +58,9 @@
   --toolbar-background: var(--panel-background);
   --toolbar-border-color: var(--panel-border-color);
   --toolbar-font-color: var(--color-gray-70);
-  --toolbar-muted-color: var(--color-gray-30);
+  --toolbar-muted-color: var(--color-gray-40);
   --page-version-menu-background: var(--color-smoke-70);
-  --page-version-missing-font-color: var(--color-gray-30);
+  --page-version-missing-font-color: var(--color-gray-40);
   /* admonitions */
   --caution-color: #a0439c;
   --caution-on-color: var(--color-white);
@@ -102,7 +105,7 @@
   --quote-background: var(--panel-background);
   --quote-border-color: var(--color-gray-70);
   --quote-font-color: var(--color-gray-70);
-  --quote-attribution-font-color: var(--color-gray-30);
+  --quote-attribution-font-color: var(--color-gray-40);
   --sidebar-background: var(--color-smoke-90);
   --table-border-color: var(--panel-border-color);
   --table-stripe-background: var(--panel-background);