diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index ae8bc9f781..f45d0f663e 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -8110,10 +8110,6 @@ img.modal-warning { } } -::-webkit-scrollbar-thumb { - border-radius: 0; -} - noscript { text-align: center; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index d41577cf05..869253e5e5 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/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; } @@ -624,3 +620,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/flavours/glitch/styles/reset.scss b/app/javascript/flavours/glitch/styles/reset.scss index f8a4a08ced..5a4152826d 100644 --- a/app/javascript/flavours/glitch/styles/reset.scss +++ b/app/javascript/flavours/glitch/styles/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 {