history: scrollbars (#1536)

* history: scrollbars

* webkit

Author: shakyShane

special-pages/pages/history/app/components/App.module.css

@@ -13,14 +13,18 @@ body {
     --sidebar-width: 250px;
     --main-padding-left: 48px;
     --main-padding-right: 76px;
-    --windows-scrollbar: 15px;
+    --scrollbar-width: 18px;
 
     &[data-layout-mode="reduced"] {
         --sidebar-width: 230px;
         --main-padding-left: 28px;
         --main-padding-right: 56px;
     }
 
+    [data-platform="windows"] & {
+        --scrollbar-width: 15px
+    }
+
     display: grid;
     grid-template-columns: var(--sidebar-width) 1fr;
     grid-template-rows: max-content 1fr;
@@ -51,13 +55,53 @@ body {
     padding-right: var(--main-padding-right);
     padding-top: 24px;
 }
+
 .customScroller {
     overflow-y: scroll;
-    scrollbar-gutter: stable;
+    padding-right: calc(var(--main-padding-right) - var(--scrollbar-width));
 }
 
+/**
+ * Windows has access to newer CSS features for styling the scrollbar
+ */
 [data-platform="windows"] {
     .customScroller {
-        padding-right: calc(var(--main-padding-right) - var(--windows-scrollbar));
+        scrollbar-gutter: stable;
+        scrollbar-width: var(--scrollbar-width);
+        scrollbar-color: var(--history-scrollbar-controls-color) var(--history-background-color);
+    }
+}
+
+/**
+ * macOS specific styling to handle dark mode - without this full
+ * override you cannot change the track color :(
+ */
+[data-platform="macos"] {
+    .customScroller {
+        --webkit-thumb-color: rgba(136, 136, 136, 0.8);
+
+        &::-webkit-scrollbar {
+            width: var(--scrollbar-width);
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: var(--history-background-color)
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--webkit-thumb-color);
+            border-radius: calc(var(--scrollbar-width) / 2);
+
+            /** faking some padding on the thumb */
+            border: 4px solid var(--history-background-color);
+        }
+
+        &::-webkit-scrollbar-button {
+            display: block;
+            background-color: var(--history-background-color);
+
+            /** a small vertical gap to prevent it touching boundaries */
+            height: 2px;
+        }
     }
-}
+}

special-pages/pages/history/styles/history-theme.css

@@ -35,6 +35,7 @@
     --history-background-color: var(--default-light-bg);
     --history-surface-background-color: var(--color-white-at-30);
     --history-surface-border-color: var(--color-black-at-9);
+    --history-scrollbar-controls-color: var(--color-black-at-18);
     --history-text-normal: var(--color-black-at-84);
     --history-text-invert: var(--color-white-at-84);
     --history-text-muted: var(--color-black-at-60);
@@ -44,6 +45,7 @@
     --history-background-color: var(--default-dark-bg);
     --history-surface-background-color: var(--color-black-at-18);
     --history-surface-border-color: var(--color-white-at-12);
+    --history-scrollbar-controls-color: var(--color-white-at-18);
     --history-surface-color: var(--color-white-at-12);
     --history-text-normal: var(--color-white-at-84);
     --history-text-invert: var(--color-black-at-84);