diff options
| author | Claire <claire.github-309c@sitedethib.com> | 2022-11-25 13:54:43 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-11-25 13:54:43 +0100 |
| commit | 6517b7b9f02f8590a8f9c5aa04e3ef9efeb4e757 (patch) | |
| tree | 2de3769bd591428a80b2c4ceadde13bcf6be04c7 /app/javascript/flavours/glitch/styles/components | |
| parent | 43dbc6256854a9832c7255fc62a8fa8df7244dd6 (diff) | |
Fix pillbar buttons in light theme (#1972)
* Simplify pillbar button design and make it more consistent with toggles * Fix pillbar buttons in light theme Fixes #1970
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/columns.scss | 35 |
1 files changed, 6 insertions, 29 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index c61815e07..71edf7fb3 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -558,6 +558,7 @@ $ui-header-height: 55px; border-radius: 4px; margin-bottom: 10px; align-items: stretch; + gap: 2px; } .pillbar-button { @@ -565,7 +566,6 @@ $ui-header-height: 55px; color: #fafafa; padding: 2px; margin: 0; - margin-left: 2px; font-size: inherit; flex: auto; background-color: $ui-base-color; @@ -578,43 +578,20 @@ $ui-header-height: 55px; } &:not([disabled]) { - &:hover { - background-color: darken($ui-base-color, 10%); - } - + &:hover, &:focus { - background-color: darken($ui-base-color, 15%); - } - - &:active { - background-color: darken($ui-base-color, 20%); + background-color: darken($ui-base-color, 10%); } &.active { - background-color: $ui-highlight-color; - box-shadow: inset 0 5px darken($ui-highlight-color, 20%); - - &:hover { - background-color: lighten($ui-highlight-color, 10%); - box-shadow: inset 0 5px darken($ui-highlight-color, 10%); - } + background-color: darken($ui-highlight-color, 2%); + &:hover, &:focus { - background-color: lighten($ui-highlight-color, 15%); - box-shadow: inset 0 5px darken($ui-highlight-color, 5%); - } - - &:active { - background-color: lighten($ui-highlight-color, 20%); - box-shadow: inset 0 5px $ui-highlight-color; + background-color: $ui-highlight-color; } } } - - /* TODO: check RTL? */ - &:first-child { - margin-left: 0; - } } .limited-account-hint { |