[gtk/gtk-3-24] Adwaita: special case round buttons

[Jakub Steiner <jimmac src gnome org>]

commit 720bc7083c178c681dd7ead5e8ef7a983a10b31d
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Dec 10 12:19:09 2018 +0100

    Adwaita: special case round buttons
    
    - defining gradients outside of _drawing while Lapo isn't
      looking. Surely this will bite us in the future.

 gtk/theme/Adwaita/_common.scss           | 12 ++++++++++--
 gtk/theme/Adwaita/gtk-contained-dark.css |  4 ++--
 gtk/theme/Adwaita/gtk-contained.css      |  4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 7c3079bba6..54daccb01c 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -851,7 +851,7 @@ button {
   &.circular { // The Bloody Circul Button
     border-radius: 9999px;
     -gtk-outline-radius: 9999px;
-
+    
     label { padding: 0; }
 
     // the followind code is needed since we use a darker bottom border on buttons, which looks pretty
@@ -863,12 +863,20 @@ button {
 
     &:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
       @include button(normal);
+      $button_fill: if($variant == 'light', linear-gradient(to top, darken($bg_color, 4%), $bg_color),
+                                            linear-gradient(to top, darken($bg_color, 1%), $bg_color));
+      box-shadow: if($variant == 'light', inset 0 -2px darken($bg_color, 12%), 
+                                          inset 0 -2px darken($bg_color, 6%));
       background-image: $button_fill, $_border_bg;
       border-color: transparent;
     }
 
     &:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
       @include button(hover);
+      $button_fill: if($variant == 'light', linear-gradient(to top, $bg_color, lighten($bg_color, 2%)),
+                                            linear-gradient(to top, darken($bg_color, 1%), 
lighten($bg_color, 2%)));
+      box-shadow: if($variant == 'light', inset 0 -2px darken($bg_color, 4%), 
+                                          inset 0 -2px darken($bg_color, 2%));
       background-image: $button_fill, $_border_bg;
       border-color: transparent;
     }
@@ -4682,4 +4690,4 @@ popover.emoji-completion contents row box {
 
 popover.emoji-completion .emoji:hover {
   background: $popover_hover_color;
-}
\ No newline at end of file
+}
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index f98350f4ae..c6c47480b7 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -384,9 +384,9 @@ button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; background
 
 button.circular label { padding: 0; }
 
-button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #eeeeec; 
outline-color: rgba(238, 238, 236, 0.3); border-color: #252526; border-bottom-color: #111111; 
background-image: linear-gradient(to top, #302f30 2px, #3c3c3d 2px, #3f3e40); text-shadow: 0 -1px rgba(0, 0, 
0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); box-shadow: inset 0 1px rgba(255, 255, 255, 
0.05); background-image: linear-gradient(to top, #302f30 2px, #3c3c3d 2px, #3f3e40), linear-gradient(to top, 
#111111 25%, #252526 50%); border-color: transparent; }
+button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #eeeeec; 
outline-color: rgba(238, 238, 236, 0.3); border-color: #252526; border-bottom-color: #111111; 
background-image: linear-gradient(to top, #302f30 2px, #3c3c3d 2px, #3f3e40); text-shadow: 0 -1px rgba(0, 0, 
0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); box-shadow: inset 0 1px rgba(255, 255, 255, 
0.05); box-shadow: inset 0 -2px #302f30; background-image: linear-gradient(to top, #3c3c3d, #3f3e40), 
linear-gradient(to top, #111111 25%, #252526 50%); border-color: transparent; }
 
-button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #eeeeec; 
outline-color: rgba(238, 238, 236, 0.3); border-color: #252526; border-bottom-color: #111111; text-shadow: 0 
-1px rgba(0, 0, 0, 0.754353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.754353); box-shadow: inset 0 1px 
rgba(255, 255, 255, 0.05); background-image: linear-gradient(to top, #3a393b 2px, #3c3c3d 2px, #414142 1px); 
background-image: linear-gradient(to top, #3a393b 2px, #3c3c3d 2px, #414142 1px), linear-gradient(to top, 
#111111 25%, #252526 50%); border-color: transparent; }
+button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #eeeeec; 
outline-color: rgba(238, 238, 236, 0.3); border-color: #252526; border-bottom-color: #111111; text-shadow: 0 
-1px rgba(0, 0, 0, 0.754353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.754353); box-shadow: inset 0 1px 
rgba(255, 255, 255, 0.05); background-image: linear-gradient(to top, #3a393b 2px, #3c3c3d 2px, #414142 1px); 
box-shadow: inset 0 -2px #3a393b; background-image: linear-gradient(to top, #3c3c3d, #444345), 
linear-gradient(to top, #111111 25%, #252526 50%); border-color: transparent; }
 
 .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, 
stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: 
-gtk-gradient(radial, center center, 0, center center, 0.5, to(#1f76e1), to(transparent)), 
-gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.802353)), to(transparent)); 
background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 2px; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 869649afb5..1858bf4658 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -386,9 +386,9 @@ button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; background
 
 button.circular label { padding: 0; }
 
-button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #2e3436; 
outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: 
linear-gradient(to top, #dad6d2 2px, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); 
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white; background-image: 
linear-gradient(to top, #dad6d2 2px, #edebe9 2px, #f6f5f4), linear-gradient(to top, #bfb8b1 25%, #cdc7c2 
50%); border-color: transparent; }
+button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #2e3436; 
outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: 
linear-gradient(to top, #dad6d2 2px, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); 
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white; box-shadow: inset 0 
-2px #dad6d2; background-image: linear-gradient(to top, #edebe9, #f6f5f4), linear-gradient(to top, #bfb8b1 
25%, #cdc7c2 50%); border-color: transparent; }
 
-button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #2e3436; 
outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; text-shadow: 0 1px 
rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px 
white; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4 2px, #f8f8f7 1px); background-image: 
linear-gradient(to top, #edebe9 2px, #f6f5f4 2px, #f8f8f7 1px), linear-gradient(to top, #bfb8b1 25%, #cdc7c2 
50%); border-color: transparent; }
+button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #2e3436; 
outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; text-shadow: 0 1px 
rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px 
white; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4 2px, #f8f8f7 1px); box-shadow: inset 0 
-2px #edebe9; background-image: linear-gradient(to top, #f6f5f4, #fbfafa), linear-gradient(to top, #bfb8b1 
25%, #cdc7c2 50%); border-color: transparent; }
 
 .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, 
stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: 
-gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), 
-gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), 
to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 
3px, right 4px; }