diff options
| author | Jakub Steiner <jimmac@gmail.com> | 2019-06-27 10:55:18 +0200 |
|---|---|---|
| committer | Jakub Steiner <jimmac@gmail.com> | 2019-06-27 10:58:18 +0200 |
| commit | 4be2e804aec568027615d2eb9e61e19534cee081 (patch) | |
| tree | f09239138a453ff3f42be9f7e1d34eeb6cceb0a9 | |
| parent | 1056e9976ad2a7dd99c692097ed349bf6dfa8299 (diff) | |
| download | gtk+-4be2e804aec568027615d2eb9e61e19534cee081.tar.gz | |
Adwaita: lighten dark switch sliders
- addresses legibility concerns
Fixes https://gitlab.gnome.org/GNOME/gtk/issues/1819
| -rw-r--r-- | gtk/theme/Adwaita/_common.scss | 18 | ||||
| -rw-r--r-- | gtk/theme/Adwaita/gtk-contained-dark.css | 4 |
2 files changed, 17 insertions, 5 deletions
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 49144ed31d..ab32561ac9 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2717,12 +2717,24 @@ switch { border-radius: 50%; transition: $button_transition; - @include button(normal-alt, $edge: $shadow_color); + @if $variant == 'light' { + @include button(normal-alt, $edge: $shadow_color); + } + @else { + @include button(normal-alt, $c: lighten($bg_color,6%), $edge: $shadow_color); + } } - + image { color: transparent; } /* only show i / o for the accessible theme */ - &:hover slider { @include button(hover-alt, $edge: $shadow_color); } + &:hover slider { + @if $variant == 'light' { + @include button(hover-alt, $edge: $shadow_color); + } + @else { + @include button(hover-alt, $c: lighten($bg_color,6%), $edge: $shadow_color); + } + } &:checked slider { border: 1px solid $selected_borders_color; } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index f417451c56..00b3a81414 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1108,11 +1108,11 @@ switch:backdrop:checked { border-color: #030c17; background-color: #15539e; } switch:backdrop:disabled { color: #5b5b5b; border-color: #202020; background-color: #323232; } -switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #070707; text-shadow: 0 -1px rgba(0, 0, 0, 0.834353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.834353); background-image: linear-gradient(to bottom, #2d2d2d 20%, #262626 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } +switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 0 -1px rgba(0, 0, 0, 0.786353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.786353); background-image: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); } switch image { color: transparent; } -switch:hover slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #070707; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to bottom, #353535 20%, #2b2b2b 90%); } +switch:hover slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to bottom, #444444 20%, #3a3a3a 90%); } switch:checked slider { border: 1px solid #030c17; } |