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 {