[gtk/wip/jimmac/adwaita-3-32-noshadow] Adwaita: button-alt toning down

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk/wip/jimmac/adwaita-3-32-noshadow] Adwaita: button-alt toning down
Date: Thu, 13 Dec 2018 12:32:53 +0000 (UTC)
commit c5e149bb4b5a059d02c986942607479609f6bd68
Author: Jakub Steiner <jimmac gmail com>
Date:   Thu Dec 13 13:32:15 2018 +0100

    Adwaita: button-alt toning down
    
    - checkboxes and radios were too 3d

 gtk/theme/Adwaita/_drawing.scss          | 10 +---------
 gtk/theme/Adwaita/gtk-contained-dark.css | 12 ++++++------
 gtk/theme/Adwaita/gtk-contained.css      | 12 ++++++------
 3 files changed, 13 insertions(+), 21 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 76a043aa8d..d7ca765920 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -234,16 +234,12 @@
     @include _button_text_shadow($tc, $c);
     @if $variant == 'light' {
       background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
-      @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
-                        inset 0 -2px lighten($c, 2%),
-                        inset 0 -1px darken($c, 12%),
+       @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
                         $_button_edge, $_button_shadow);
     }
     @else {
       background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%);
       @include _shadows(inset 0 1px $_hilight_color,
-                        inset 0 -2px darken($c, 4%),
-                        inset 0 -1px darken($c, 9%),
                         $_button_edge, $_button_shadow);
     }
   }
@@ -258,15 +254,11 @@
     @if $variant == 'light' {
       $button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
       @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
-                        inset 0 -2px lighten($c, 5%),
-                        inset 0 -1px darken($c, 10%),
                         $_button_edge, $_button_shadow);
     }
     @else {
       $button_fill: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%) !global;
       @include _shadows(inset 0 1px $_hilight_color,
-                        inset 0 -2px darken($c, 3%),
-                        inset 0 -1px darken($c, 6%),
                         $_button_edge, $_button_shadow);
     }
     background-image: $button_fill;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index a8a125259e..51019677e4 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1087,9 +1087,9 @@ switch:backdrop:checked { border-color: #030c17; background-color: #15539e; }
 
 switch:backdrop:disabled { color: #656466; border-color: #2a2a2b; background-color: #383739; }
 
-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.802353); 
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to bottom, #373738 20%, 
#302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -2px #353435, inset 0 -1px #282828, 
0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); }
+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.802353); 
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to bottom, #373738 20%, 
#302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px 
rgba(0, 0, 0, 0.05); }
 
-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), inset 0 -2px #373738, inset 0 -1px #302f30, 0 1px rgba(0, 
0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, #3f3e40 20%, 
#353435 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), inset 0 -2px rgba(0, 0, 0, 
0.05); background-image: linear-gradient(to bottom, #3f3e40 20%, #353435 90%); }
 
 switch:checked slider { border: 1px solid #030c17; }
 
@@ -1130,7 +1130,7 @@ checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-but
 
 checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button 
label:not(:only-child):last-child { margin-right: 4px; }
 
-check, radio { margin: 0 4px; min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; 
color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 0 -1px rgba(0, 
0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to 
bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -2px #353435, 
inset 0 -1px #282828, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); }
+check, radio { margin: 0 4px; min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; 
color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 0 -1px rgba(0, 
0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to 
bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 
0.1), inset 0 -2px rgba(0, 0, 0, 0.05); }
 
 check:only-child, radio:only-child { margin: 0; }
 
@@ -1138,7 +1138,7 @@ popover check.left:dir(rtl), popover radio.left:dir(rtl) { margin-left: 0; margi
 
 popover check.right:dir(ltr), popover radio.right:dir(ltr) { margin-left: 12px; margin-right: 0; }
 
-check:hover, radio:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -2px #373738, inset 0 -1px #302f30, 0 1px rgba(0, 
0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, #3f3e40 20%, 
#353435 90%); }
+check:hover, radio:hover { 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), inset 0 -2px rgba(0, 0, 0, 
0.05); background-image: linear-gradient(to bottom, #3f3e40 20%, #353435 90%); }
 
 check:active, radio:active { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #252526; 
background-image: image(#282828); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; }
 
@@ -1251,9 +1251,9 @@ scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; b
 
 .osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: 
transparent; }
 
-scale slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 
0 -1px rgba(0, 0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: 
linear-gradient(to bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 
inset 0 -2px #353435, inset 0 -1px #282828, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); 
border: 1px solid #09090a; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 
transition-property: background, border, box-shadow; }
+scale slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 
0 -1px rgba(0, 0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: 
linear-gradient(to bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 
1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); border: 1px solid #09090a; border-radius: 100%; 
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, 
box-shadow; }
 
-scale slider:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -2px #373738, inset 0 -1px #302f30, 0 1px rgba(0, 
0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, #3f3e40 20%, 
#353435 90%); }
+scale slider:hover { 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), inset 0 -2px rgba(0, 0, 0, 
0.05); background-image: linear-gradient(to bottom, #3f3e40 20%, #353435 90%); }
 
 scale slider:active { border-color: #030c17; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 6569d54570..427746521e 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1095,9 +1095,9 @@ switch:backdrop:checked { color: #f6f5f4; border-color: #3584e4; background-colo
 
 switch:backdrop:disabled { color: #d4cfca; border-color: #d5d0cc; background-color: #faf9f8; }
 
-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: #2e3436; 
outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 
0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: linear-gradient(to 
bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, inset 0 -2px #fbfafa, inset 0 -1px #dad6d2, 0 
1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); }
+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: #2e3436; 
outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 
0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: linear-gradient(to 
bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px 
rgba(0, 0, 0, 0.05); }
 
-switch:hover slider { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; 
box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #dfdcd8, 0 1px rgba(0, 0, 0, 0.1), inset 0 
-2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, white 10%, white 90%); }
+switch:hover slider { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; 
box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); background-image: 
linear-gradient(to bottom, white 10%, white 90%); }
 
 switch:checked slider { border: 1px solid #185fb4; }
 
@@ -1148,7 +1148,7 @@ checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-but
 
 checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button 
label:not(:only-child):last-child { margin-right: 4px; }
 
-check, radio { margin: 0 4px; min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; 
color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 
255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: 
linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, inset 0 -2px #fbfafa, 
inset 0 -1px #dad6d2, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); }
+check, radio { margin: 0 4px; min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; 
color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 
255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: 
linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 
inset 0 -2px rgba(0, 0, 0, 0.05); }
 
 check:only-child, radio:only-child { margin: 0; }
 
@@ -1156,7 +1156,7 @@ popover check.left:dir(rtl), popover radio.left:dir(rtl) { margin-left: 0; margi
 
 popover check.right:dir(ltr), popover radio.right:dir(ltr) { margin-left: 12px; margin-right: 0; }
 
-check:hover, radio:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; 
box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #dfdcd8, 0 1px rgba(0, 0, 0, 0.1), inset 0 
-2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, white 10%, white 90%); }
+check:hover, radio:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; 
box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); background-image: 
linear-gradient(to bottom, white 10%, white 90%); }
 
 check:active, radio:active { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; 
background-image: image(#d6d1cd); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; }
 
@@ -1271,9 +1271,9 @@ scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; b
 
 .osd scale fill:disabled:backdrop, .osd scale fill:disabled { border-color: transparent; background-color: 
transparent; }
 
-scale slider { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 
1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: 
linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, inset 0 -2px #fbfafa, 
inset 0 -1px #dad6d2, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); border: 1px solid #b8b0a8; 
border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: 
background, border, box-shadow; }
+scale slider { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 
1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: 
linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 
inset 0 -2px rgba(0, 0, 0, 0.05); border: 1px solid #b8b0a8; border-radius: 100%; transition: all 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; }
 
-scale slider:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; 
box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #dfdcd8, 0 1px rgba(0, 0, 0, 0.1), inset 0 
-2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, white 10%, white 90%); }
+scale slider:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; 
box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -2px rgba(0, 0, 0, 0.05); background-image: 
linear-gradient(to bottom, white 10%, white 90%); }
 
 scale slider:active { border-color: #185fb4; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]