Adwaita: overshoot styling

4 files changed, 151 insertions, 36 deletions

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index c3d7457d1e..06d5c5240e 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -122,24 +122,20 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
 .overshoot {
   &.top {
-    background: linear-gradient(to top, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
-    background-size: auto 100px;
-    background-position: center 100%;
+    @include overshoot(top);
+    &:backdrop { @include overshoot(top, backdrop); }
   }
   &.bottom {
-    background: linear-gradient(to bottom, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
-    background-size: auto 100px;
-    background-position: center 0%;
+    @include overshoot(bottom);
+    &:backdrop { @include overshoot(bottom, backdrop); }
   }
   &.left {
-    background: linear-gradient(to left, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
-    background-size: 100px auto;
-    background-position: 100% center;
+    @include overshoot(left);
+    &:backdrop { @include overshoot(left, backdrop); }
   }
   &.right {
-    background: linear-gradient(to right, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
-    background-size: 100px auto;
-    background-position: 0% center;
+    @include overshoot(right);
+    &:backdrop { @include overshoot(right, backdrop); }
   }
 }
 
diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index 7cbbba825b..d9cdfb9200 100644
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -498,3 +498,74 @@
               inset 0 1px $hc; // top highlight
 
 }
+
+@mixin overshoot($p, $t:normal, $c:$borders_color) {
+//
+// overshoot
+//
+// $p: position
+// $t: type
+// $c: base color
+//
+// possible $p values:
+// top, bottom, right, left
+//
+// possible $t values:
+// normal, backdrop
+//
+
+  $_radial_gradient_length: 4%;
+  $_linear_gradient_length: 70%;
+
+  $_position: center top;
+  $_linear_gradient_direction: to bottom;
+  $_radial_gradient_size: 100% $_radial_gradient_length;
+  $_linear_gradient_size: 100% $_linear_gradient_length;
+
+  @if $p==bottom {
+    $_position: center bottom;
+    $_linear_gradient_direction: to top; 
+  }
+
+  @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%;
+  }
+
+  @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%;
+  }
+  
+  $_color: $c;
+
+  @if $t==backdrop {
+    $_color: if($c==$borders_color, $backdrop_borders_color, $c);
+  }
+
+  $_radial_gradient: -gtk-gradient(radial,
+                                  $_position, 0,
+                                  $_position, 0.5,
+                                  to($_color),
+                                  to(transparentize($_color, 1)));
+
+  $_linear_gradient: linear-gradient($_linear_gradient_direction, transparentize($_color, 0.85),
+                                                                  transparentize($_color, 1));
+
+  @if $t==normal {
+    background-image: $_radial_gradient, $_linear_gradient;
+    background-size: $_radial_gradient_size, $_linear_gradient_size;
+  }
+
+  @else if $t==backdrop {
+    background-image: $_radial_gradient;
+    background-size: $_radial_gradient_size;
+  }
+
+  background-repeat: no-repeat;
+  background-position: $_position;
+}
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index d910b87f7c..439306ebbb 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -74,21 +74,45 @@
   background-color: rgba(33, 93, 156, 0.2); }
 
 .overshoot.top {
-  background: linear-gradient(to top, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
-  background-size: auto 100px;
-  background-position: center 100%; }
+  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-repeat: no-repeat;
+  background-position: center top; }
+  .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-repeat: no-repeat;
+    background-position: center top; }
 .overshoot.bottom {
-  background: linear-gradient(to bottom, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
-  background-size: auto 100px;
-  background-position: center 0%; }
+  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-repeat: no-repeat;
+  background-position: center bottom; }
+  .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-repeat: no-repeat;
+    background-position: center bottom; }
 .overshoot.left {
-  background: linear-gradient(to left, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
-  background-size: 100px auto;
-  background-position: 100% center; }
+  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-repeat: no-repeat;
+  background-position: left center; }
+  .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-repeat: no-repeat;
+    background-position: left center; }
 .overshoot.right {
-  background: linear-gradient(to right, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
-  background-size: 100px auto;
-  background-position: 0% center; }
+  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-repeat: no-repeat;
+  background-position: right center; }
+  .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-repeat: no-repeat;
+    background-position: right center; }
 
 .label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
   color: #eeeeec; }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index fea5d57920..8515873395 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -74,21 +74,45 @@
   background-color: rgba(74, 144, 217, 0.2); }
 
 .overshoot.top {
-  background: linear-gradient(to top, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
-  background-size: auto 100px;
-  background-position: center 100%; }
+  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-repeat: no-repeat;
+  background-position: center top; }
+  .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-repeat: no-repeat;
+    background-position: center top; }
 .overshoot.bottom {
-  background: linear-gradient(to bottom, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
-  background-size: auto 100px;
-  background-position: center 0%; }
+  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-repeat: no-repeat;
+  background-position: center bottom; }
+  .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-repeat: no-repeat;
+    background-position: center bottom; }
 .overshoot.left {
-  background: linear-gradient(to left, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
-  background-size: 100px auto;
-  background-position: 100% center; }
+  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-repeat: no-repeat;
+  background-position: left center; }
+  .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-repeat: no-repeat;
+    background-position: left center; }
 .overshoot.right {
-  background: linear-gradient(to right, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
-  background-size: 100px auto;
-  background-position: 0% center; }
+  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-repeat: no-repeat;
+  background-position: right center; }
+  .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-repeat: no-repeat;
+    background-position: right center; }
 
 .label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
   color: #2e3436; }