Harmonize persistent scrollbar styles (#31445)

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;
+}

app/javascript/styles/mastodon/components.scss

@@ -7560,10 +7560,6 @@ a.status-card {
   }
 }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 0;
-}
-
 noscript {
   text-align: center;
 

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 {