From 2f01f5f4ea886c4a1bec2148d0ca82da5ae67f0c Mon Sep 17 00:00:00 2001
From: Michael Stanclift <mx@vmstan.com>
Date: Tue, 20 Aug 2024 02:48:51 -0500
Subject: [PATCH] Harmonize persistent scrollbar styles (#31445)

---
 .../styles/mastodon-light/diff.scss           | 15 +++++++++++----
 .../styles/mastodon/components.scss           |  4 ----
 app/javascript/styles/mastodon/reset.scss     | 19 +++++++++++++------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 55eb88dae1..8d801e4cd5 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -1,10 +1,6 @@
 // Notes!
 // Sass color functions, "darken" and "lighten" are automatically replaced.
 
-html {
-  scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
-}
-
 .simple_form .button.button-tertiary {
   color: $highlight-text-color;
 }
@@ -561,3 +557,14 @@ a.sparkline {
     color: $dark-text-color;
   }
 }
+
+@supports not selector(::-webkit-scrollbar) {
+  html {
+    scrollbar-color: rgba($action-button-color, 0.25)
+      var(--background-border-color);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  opacity: 0.25;
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index c1ee4ea10d..97abf77d10 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7560,10 +7560,6 @@ a.status-card {
   }
 }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 0;
-}
-
 noscript {
   text-align: center;
 
diff --git a/app/javascript/styles/mastodon/reset.scss b/app/javascript/styles/mastodon/reset.scss
index f8a4a08ced..5a4152826d 100644
--- a/app/javascript/styles/mastodon/reset.scss
+++ b/app/javascript/styles/mastodon/reset.scss
@@ -53,22 +53,29 @@ table {
   border-spacing: 0;
 }
 
-html {
-  scrollbar-color: var(--background-border-color);
+@supports not selector(::-webkit-scrollbar) {
+  html {
+    scrollbar-color: $action-button-color var(--background-border-color);
+    scrollbar-width: thin;
+  }
 }
 
 ::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: $ui-highlight-color;
-  opacity: .25;
+  background-color: $action-button-color;
+  border: 2px var(--background-border-color);
+  border-radius: 12px;
+  width: 6px;
+  box-shadow: inset 0 0 0 2px var(--background-border-color);
 }
 
 ::-webkit-scrollbar-track {
   background-color: var(--background-border-color);
+  border-radius: 0px;
 }
 
 ::-webkit-scrollbar-corner {