[gtk+] Adwaita: tweak radial-gradient()'s

[Lapo Calamandrei <lapo src gnome org>]

commit 8d212ae5c20d08cbbac9da12bd358059c14f8884
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Mon Nov 7 22:34:02 2016 +0100

    Adwaita: tweak radial-gradient()'s
    
    radial-gradient()'s are behaving, hence simplify the css.

 gtk/theme/Adwaita/_common.scss           |   10 ++++------
 gtk/theme/Adwaita/_drawing.scss          |    4 ++--
 gtk/theme/Adwaita/gtk-contained-dark.css |   22 +++++++++++-----------
 gtk/theme/Adwaita/gtk-contained.css      |   22 +++++++++++-----------
 4 files changed, 28 insertions(+), 30 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index a00def2..430ae8d 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -419,8 +419,8 @@ treeview entry {
 $_dot_color: if($variant=='light', $selected_bg_color,
                                    lighten($selected_bg_color,15%));
 @keyframes needs_attention {
-  from { background-image: radial-gradient($_dot_color 0%, transparentize($_dot_color, 1) 0%); }
-  to { background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color, 1) 70%); }
+  from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 
0%); }
+  to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
 }
 
 %button,
@@ -787,11 +787,9 @@ button {
   // simulates the shadow labels and icons normally have in buttons.
   animation: needs_attention 150ms ease-in;
   $_dot_shadow: _text_shadow_color(); // shadow color
-  $_dot_shadow_r: if($variant == 'light', 70%, 69%); // the radii of the shadow is different in
-                                                     // dark variant to dim the intensity a bit
 
-  background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%),
-                    radial-gradient($_dot_shadow 68%, transparentize($_dot_shadow, 1) $_dot_shadow_r);
+  background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )),
+                    radial-gradient(farthest-side, $_dot_shadow 95%, transparentize($_dot_shadow, 1));
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
 
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index be410b5..f1231a9 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -545,11 +545,11 @@
     @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
   }
 
-  $_small_gradient: radial-gradient(ellipse farthest-side at $p,
+  $_small_gradient: radial-gradient(farthest-side at $p,
                                     $_small_gradient_color 85%,
                                     transparentize($_small_gradient_color, 1));
 
-  $_big_gradient: radial-gradient(ellipse farthest-side at $p,
+  $_big_gradient: radial-gradient(farthest-side at $p,
                                   $_big_gradient_color,
                                   transparentize($_big_gradient_color, 1));
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b2c3fb0..7f76574 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
  ***********/
 @keyframes needs_attention {
   from {
-    background-image: radial-gradient(#3583d5 0%, rgba(53, 131, 213, 0) 0%); }
+    background-image: radial-gradient(farthest-side, #3583d5 0%, rgba(53, 131, 213, 0) 0%); }
   to {
-    background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%); } }
+    background-image: radial-gradient(farthest-side, #3583d5 95%, rgba(53, 131, 213, 0)); } }
 notebook > header > tabs > arrow, button.titlebutton,
 button {
   min-height: 24px;
@@ -1188,7 +1188,7 @@ button.needs-attention > label,
 .stack-switcher >
 button.needs-attention > image, stacksidebar row.needs-attention > label {
   animation: needs_attention 150ms ease-in;
-  background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%), radial-gradient(rgba(0, 0, 0, 
0.82745) 68%, transparent 69%);
+  background-image: radial-gradient(farthest-side, #3583d5 96%, rgba(53, 131, 213, 0)), 
radial-gradient(farthest-side, rgba(0, 0, 0, 0.82745) 95%, transparent);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   background-position: right 3px, right 2px; }
@@ -3794,7 +3794,7 @@ actionbar > revealer > box {
 scrolledwindow viewport.frame {
   border-style: none; }
 scrolledwindow overshoot.top {
-  background-image: radial-gradient(ellipse farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(ellipse farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: top;
@@ -3802,7 +3802,7 @@ scrolledwindow overshoot.top {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.top:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at top, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at top, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: top;
@@ -3810,7 +3810,7 @@ scrolledwindow overshoot.top {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.bottom {
-  background-image: radial-gradient(ellipse farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(ellipse farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: bottom;
@@ -3818,7 +3818,7 @@ scrolledwindow overshoot.bottom {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.bottom:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: bottom;
@@ -3826,7 +3826,7 @@ scrolledwindow overshoot.bottom {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.left {
-  background-image: radial-gradient(ellipse farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(ellipse farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: left;
@@ -3834,7 +3834,7 @@ scrolledwindow overshoot.left {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.left:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at left, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at left, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: left;
@@ -3842,7 +3842,7 @@ scrolledwindow overshoot.left {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.right {
-  background-image: radial-gradient(ellipse farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(ellipse farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
+  background-image: radial-gradient(farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), 
radial-gradient(farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: right;
@@ -3850,7 +3850,7 @@ scrolledwindow overshoot.right {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.right:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at right, #202425 85%, rgba(32, 36, 37, 0));
+    background-image: radial-gradient(farthest-side at right, #202425 85%, rgba(32, 36, 37, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: right;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 29db4e8..78f4caf 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
  ***********/
 @keyframes needs_attention {
   from {
-    background-image: radial-gradient(#4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
+    background-image: radial-gradient(farthest-side, #4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
   to {
-    background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%); } }
+    background-image: radial-gradient(farthest-side, #4a90d9 95%, rgba(74, 144, 217, 0)); } }
 notebook > header > tabs > arrow, button.titlebutton,
 button {
   min-height: 24px;
@@ -1191,7 +1191,7 @@ button.needs-attention > label,
 .stack-switcher >
 button.needs-attention > image, stacksidebar row.needs-attention > label {
   animation: needs_attention 150ms ease-in;
-  background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%), radial-gradient(rgba(255, 255, 
255, 0.76923) 68%, rgba(255, 255, 255, 0) 70%);
+  background-image: radial-gradient(farthest-side, #4a90d9 96%, rgba(74, 144, 217, 0)), 
radial-gradient(farthest-side, rgba(255, 255, 255, 0.76923) 95%, rgba(255, 255, 255, 0));
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   background-position: right 3px, right 4px; }
@@ -3825,7 +3825,7 @@ actionbar > revealer > box {
 scrolledwindow viewport.frame {
   border-style: none; }
 scrolledwindow overshoot.top {
-  background-image: radial-gradient(ellipse farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(ellipse farthest-side at top, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(farthest-side at top, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: top;
@@ -3833,7 +3833,7 @@ scrolledwindow overshoot.top {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.top:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: top;
@@ -3841,7 +3841,7 @@ scrolledwindow overshoot.top {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.bottom {
-  background-image: radial-gradient(ellipse farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(ellipse farthest-side at bottom, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(farthest-side at bottom, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 100% 3%, 100% 50%;
   background-repeat: no-repeat;
   background-position: bottom;
@@ -3849,7 +3849,7 @@ scrolledwindow overshoot.bottom {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.bottom:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 100% 3%;
     background-repeat: no-repeat;
     background-position: bottom;
@@ -3857,7 +3857,7 @@ scrolledwindow overshoot.bottom {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.left {
-  background-image: radial-gradient(ellipse farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(ellipse farthest-side at left, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(farthest-side at left, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: left;
@@ -3865,7 +3865,7 @@ scrolledwindow overshoot.left {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.left:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: left;
@@ -3873,7 +3873,7 @@ scrolledwindow overshoot.left {
     border: none;
     box-shadow: none; }
 scrolledwindow overshoot.right {
-  background-image: radial-gradient(ellipse farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(ellipse farthest-side at right, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
+  background-image: radial-gradient(farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), 
radial-gradient(farthest-side at right, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0));
   background-size: 3% 100%, 50% 100%;
   background-repeat: no-repeat;
   background-position: right;
@@ -3881,7 +3881,7 @@ scrolledwindow overshoot.right {
   border: none;
   box-shadow: none; }
   scrolledwindow overshoot.right:backdrop {
-    background-image: radial-gradient(ellipse farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0));
+    background-image: radial-gradient(farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0));
     background-size: 3% 100%;
     background-repeat: no-repeat;
     background-position: right;