adwaita: initial undershoot stylingscrollable-indicator

3 files changed, 26 insertions, 18 deletions

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 898c26bc27..45907d373b 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -145,21 +145,25 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
 .undershoot {
   &.top {
-    background: linear-gradient(to top, transparentize(red,1), transparentize(red,0.5));
-    background-size: auto 100px;
-    background-position: center 100%;
+    background-image: linear-gradient(to bottom, transparentize(black, 0.75) 1px,
+                                                 transparentize(black, 0.9) 2px,
+                                                 transparent 7px);
+    background-size: 100%;
+    background-position: top;
   } 
   &.bottom {
-    background: linear-gradient(to bottom, transparentize(red,1), transparentize(red,0.5));
-    background-size: auto 100px;
-    background-position: center 0%;
+    background-image: linear-gradient(to top, $base_color 10%, transparentize($base_color, 1));
+    background-size: 100%;
+    background-position: bottom;
   } 
   &.left {
+    /* FIXME: styleme! */
     background: linear-gradient(to left, transparentize(red,1), transparentize(red,0.5));
     background-size: 100px auto;
     background-position: 100% center;
   } 
   &.right {
+    /* FIXME: styleme! */
     background: linear-gradient(to right, transparentize(red,1), transparentize(red,0.5));
     background-size: 100px auto;
     background-position: 0% center;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 5014649a2e..63da0cfd0a 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -91,18 +91,20 @@
   background-position: 0% center; }
 
 .undershoot.top {
-  background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 100%; }
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 1px, rgba(0, 0, 0, 0.1) 2px, transparent 7px);
+  background-size: 100%;
+  background-position: top; }
 .undershoot.bottom {
-  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 0%; }
+  background-image: linear-gradient(to top, #292929 10%, rgba(41, 41, 41, 0));
+  background-size: 100%;
+  background-position: bottom; }
 .undershoot.left {
+  /* FIXME: styleme! */
   background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 100% center; }
 .undershoot.right {
+  /* FIXME: styleme! */
   background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 0% center; }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 8126971ae9..1ad0a8349a 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -91,18 +91,20 @@
   background-position: 0% center; }
 
 .undershoot.top {
-  background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 100%; }
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 1px, rgba(0, 0, 0, 0.1) 2px, transparent 7px);
+  background-size: 100%;
+  background-position: top; }
 .undershoot.bottom {
-  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 0%; }
+  background-image: linear-gradient(to top, #ffffff 10%, rgba(255, 255, 255, 0));
+  background-size: 100%;
+  background-position: bottom; }
 .undershoot.left {
+  /* FIXME: styleme! */
   background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 100% center; }
 .undershoot.right {
+  /* FIXME: styleme! */
   background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 0% center; }