Adwaita: overshoot style tweaks

Trying to make it visible on the dark variant.

3 files changed, 60 insertions, 56 deletions

diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index 4a4551b779..33081e2fa4 100644
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -499,7 +499,7 @@
 
 }
 
-@mixin overshoot($p, $t:normal, $c:$borders_color) {
+@mixin overshoot($p, $t:normal, $c:$fg_color) {
 //
 // overshoot
 //
@@ -514,13 +514,12 @@
 // normal, backdrop
 //
 
-  $_radial_gradient_length: 4%;
-  $_linear_gradient_length: 70%;
+  $_small_gradient_length: 5%;
+  $_big_gradient_length: 120%;
 
   $_position: center top;
-  $_linear_gradient_direction: to bottom;
-  $_radial_gradient_size: 100% $_radial_gradient_length;
-  $_linear_gradient_size: 100% $_linear_gradient_length;
+  $_small_gradient_size: 100% $_small_gradient_length;
+  $_big_gradient_size: 100% $_big_gradient_length;
 
   @if $p==bottom {
     $_position: center bottom;
@@ -529,41 +528,46 @@
 
   @else if $p==right {
     $_position: right center;
-    $_linear_gradient_direction: to left;
-    $_radial_gradient_size: $_radial_gradient_length 100%;
-    $_linear_gradient_size: $_linear_gradient_length 100%;
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
   }
 
   @else if $p==left {
     $_position: left center;
-    $_linear_gradient_direction: to right;
-    $_radial_gradient_size: $_radial_gradient_length 100%;
-    $_linear_gradient_size: $_linear_gradient_length 100%;
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
   }
   
-  $_color: $c;
+  $_small_gradient_color: $c;
+  $_big_gradient_color: $c;
 
-  @if $t==backdrop {
-    $_color: if($c==$borders_color, $backdrop_borders_color, $c);
+  @if $c==$fg_color {
+    $_small_gradient_color: darken($borders_color, 10%);
+    $_big_gradient_color: $fg_color;
+
+    @if $t==backdrop { $_small_graident_color: $backdrop_borders_color; }
   }
 
-  $_radial_gradient: -gtk-gradient(radial,
+  $_small_gradient: -gtk-gradient(radial,
                                   $_position, 0,
                                   $_position, 0.5,
-                                  to($_color),
-                                  to(transparentize($_color, 1)));
+                                  to($_small_gradient_color),
+                                  to(transparentize($_small_gradient_color, 1)));
 
-  $_linear_gradient: linear-gradient($_linear_gradient_direction, transparentize($_color, 0.85),
-                                                                  transparentize($_color, 1));
+  $_big_gradient: -gtk-gradient(radial,
+                                $_position, 0,
+                                $_position, 0.6,
+                                from(transparentize($_big_gradient_color, 0.9)),
+                                to(transparentize($_big_gradient_color, 1)));
 
   @if $t==normal {
-    background-image: $_radial_gradient, $_linear_gradient;
-    background-size: $_radial_gradient_size, $_linear_gradient_size;
+    background-image: $_small_gradient, $_big_gradient;
+    background-size: $_small_gradient_size, $_big_gradient_size;
   }
 
   @else if $t==backdrop {
-    background-image: $_radial_gradient;
-    background-size: $_radial_gradient_size;
+    background-image: $_small_gradient;
+    background-size: $_small_gradient_size;
   }
 
   background-repeat: no-repeat;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 05fe09a5c5..e528c48d1d 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -74,64 +74,64 @@
   background-color: rgba(33, 93, 156, 0.2); }
 
 .overshoot.top {
-  background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to bottom, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
-  background-size: 100% 4%, 100% 70%;
+  background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.1)), to(rgba(238, 238, 236, 0)));
+  background-size: 100% 5%, 100% 120%;
   background-repeat: no-repeat;
   background-position: center top;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.top:backdrop {
-    background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
-    background-size: 100% 4%;
+    background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
+    background-size: 100% 5%;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 .overshoot.bottom {
-  background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to top, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
-  background-size: 100% 4%, 100% 70%;
+  background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.1)), to(rgba(238, 238, 236, 0)));
+  background-size: 100% 5%, 100% 120%;
   background-repeat: no-repeat;
   background-position: center bottom;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.bottom:backdrop {
-    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
-    background-size: 100% 4%;
+    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
+    background-size: 100% 5%;
     background-repeat: no-repeat;
     background-position: center bottom;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 .overshoot.left {
-  background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to right, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
-  background-size: 4% 100%, 70% 100%;
+  background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.1)), to(rgba(238, 238, 236, 0)));
+  background-size: 5% 100%, 120% 100%;
   background-repeat: no-repeat;
   background-position: left center;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.left:backdrop {
-    background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
-    background-size: 4% 100%;
+    background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
+    background-size: 5% 100%;
     background-repeat: no-repeat;
     background-position: left center;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 .overshoot.right {
-  background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to left, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
-  background-size: 4% 100%, 70% 100%;
+  background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.1)), to(rgba(238, 238, 236, 0)));
+  background-size: 5% 100%, 120% 100%;
   background-repeat: no-repeat;
   background-position: right center;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.right:backdrop {
-    background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
-    background-size: 4% 100%;
+    background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0)));
+    background-size: 5% 100%;
     background-repeat: no-repeat;
     background-position: right center;
     background-color: transparent;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 7ef1d4fc4a..85117f50f6 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -74,64 +74,64 @@
   background-color: rgba(74, 144, 217, 0.2); }
 
 .overshoot.top {
-  background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to bottom, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
-  background-size: 100% 4%, 100% 70%;
+  background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
+  background-size: 100% 5%, 100% 120%;
   background-repeat: no-repeat;
   background-position: center top;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.top:backdrop {
-    background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
-    background-size: 100% 4%;
+    background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
+    background-size: 100% 5%;
     background-repeat: no-repeat;
     background-position: center top;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 .overshoot.bottom {
-  background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to top, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
-  background-size: 100% 4%, 100% 70%;
+  background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
+  background-size: 100% 5%, 100% 120%;
   background-repeat: no-repeat;
   background-position: center bottom;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.bottom:backdrop {
-    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
-    background-size: 100% 4%;
+    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
+    background-size: 100% 5%;
     background-repeat: no-repeat;
     background-position: center bottom;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 .overshoot.left {
-  background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to right, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
-  background-size: 4% 100%, 70% 100%;
+  background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
+  background-size: 5% 100%, 120% 100%;
   background-repeat: no-repeat;
   background-position: left center;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.left:backdrop {
-    background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
-    background-size: 4% 100%;
+    background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
+    background-size: 5% 100%;
     background-repeat: no-repeat;
     background-position: left center;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 .overshoot.right {
-  background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to left, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
-  background-size: 4% 100%, 70% 100%;
+  background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.1)), to(rgba(46, 52, 54, 0)));
+  background-size: 5% 100%, 120% 100%;
   background-repeat: no-repeat;
   background-position: right center;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   .overshoot.right:backdrop {
-    background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
-    background-size: 4% 100%;
+    background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0)));
+    background-size: 5% 100%;
     background-repeat: no-repeat;
     background-position: right center;
     background-color: transparent;