[gtk/gtk-3-24] Adwaita: lighten dark switch sliders
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk/gtk-3-24] Adwaita: lighten dark switch sliders
- Date: Thu, 27 Jun 2019 08:57:14 +0000 (UTC)
commit 1f69f5196bccfb52305e739f5b0410829036dcf9
Author: Jakub Steiner <jimmac gmail com>
Date: Thu Jun 27 10:55:18 2019 +0200
Adwaita: lighten dark switch sliders
- addresses legibility concerns
Fixes https://gitlab.gnome.org/GNOME/gtk/issues/1819
gtk/theme/Adwaita/_common.scss | 18 +++++++++++++++---
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 15b1c28efd..fe87aa0745 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2813,12 +2813,24 @@ switch {
transition: $button_transition;
-gtk-outline-radius: 20px;
- @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 $suggested_border_color; }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index d6991cc58d..0724a0782a 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1101,11 +1101,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); -gtk-outline-radius: 20px; 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); -gtk-outline-radius: 20px; 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; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]