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 {