Merge pull request #319 from AllenInstitute/bugfix/scrollbar-styling

[small] Fix scrollbar for Safari and Chromium
AllenInstitute · Nov 13, 2024 · f0066e6 · f0066e6
2 parents f072f35 + 4a3e66a
commit f0066e6
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/packages/core/styles/global.css b/packages/core/styles/global.css
@@ -20,8 +20,30 @@ main {
     padding: 0;
     border: 0;
     overflow: hidden;
-    /* Unavailable on some versions of some browsers */
-    scrollbar-color:  var(--medium-grey) var(--accent-dark);
+}
+
+/* For browsers that support `scrollbar-*` properties (updated versions of Firefox, Chrome, Edge) */
+@supports (scrollbar-color: auto) {
+    html,
+    body,
+    main {
+        scrollbar-color: var(--medium-grey) var(--accent-dark);
+    }
+}
+/* Otherwise, use pseudo-elements (Safari, Chromium) */
+@supports selector(::-webkit-scrollbar) {
+    body *::-webkit-scrollbar {
+        background-color: var(--accent-dark);
+        width: 12px;
+        height: 12px;
+    }
+    body *::-webkit-scrollbar-corner {
+        background-color: var(--accent-dark);
+    }
+    body *::-webkit-scrollbar-thumb {
+        background-color: var(--medium-grey);
+        border-radius: 8px
+    }
 }
 
 body {