[gtk/wip/jimmac/adwaita-3-32: 21/38] 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: 21/38] Adwaita: button-alt toning down
Date: Mon, 28 Jan 2019 10:57:46 +0000 (UTC)
commit e51f08bda0897a900d243c6c57802e0be4d0dd19
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          | 26 +++++++++-----------------
 gtk/theme/Adwaita/gtk-contained-dark.css | 12 ++++++------
 gtk/theme/Adwaita/gtk-contained.css      | 12 ++++++------
 3 files changed, 21 insertions(+), 29 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 0662c8d217..e398e65d49 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -186,7 +186,7 @@
   $_hilight_color: _button_hilight_color($c);
   $_button_edge: if($edge == none, none, _widget_edge($edge));
   $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
-  $_button_outer: 0 1px 2px transparentize($shadow_color, 0.03);
+  $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
 
   @if $t==normal {
   //
@@ -200,7 +200,7 @@
                                           linear-gradient(to top, darken($c,1%) 2px, $c)) !global;
     background-image: $button_fill;
     @include _button_text_shadow($tc, $c);
-    @include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_outer);
+    @include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);
   }
 
   @else if $t==hover {
@@ -214,12 +214,12 @@
     @if $variant == 'light' {
       $button_fill: linear-gradient(to top, $c, lighten($c, 1%) 1px) !global;
       @include _button_text_shadow($tc, lighten($c, 6%));
-      @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_outer);
+      @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow);
     }
     @else {
       $button_fill: linear-gradient(to top, darken($c,1%), lighten($c, 1%) 1px) !global;
       @include _button_text_shadow($tc,lighten($c, 6%));
-      @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_outer);
+      @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow);
     }
     background-image: $button_fill;
   }
@@ -234,17 +234,13 @@
     @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%),
-                        $_button_edge, $_button_outer);
+       @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_outer);
+                        $_button_edge, $_button_shadow);
     }
   }
 
@@ -258,16 +254,12 @@
     @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_outer);
+                        $_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_outer);
+                        $_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 b0906e5bd3..f4bb2b7983 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), 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.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), 0 1px 2px rgba(0, 
0, 0, 0.07); }
 
-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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 
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), 0 1px 2px rgba(0, 0, 0, 0.07); }
+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), 0 1px 2px rgba(0, 0, 0, 0.07); }
 
 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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 
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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 
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 98a91eb608..b1916ddd05 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), 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: #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), 0 1px 2px rgba(0, 
0, 0, 0.07); }
 
-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), 0 1px 2px 
rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); }
+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), 
0 1px 2px rgba(0, 0, 0, 0.07); }
 
 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), 0 1px 2px 
rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 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), 
0 1px 2px rgba(0, 0, 0, 0.07); 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), 0 1px 2px 
rgba(0, 0, 0, 0.07); 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), 0 1px 2px rgba(0, 0, 0, 0.07); 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]