Adwaita: undershoot teeth removal

3 files changed, 70 insertions, 86 deletions

diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 0766f037d5..9f8e832d6a 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -592,57 +592,35 @@
   $_undershoot_color: transparentize($fg_color, 0.6);
   $_undershoot_base: transparentize($base_color, 0.5);
 
-  $_1st_gradient_dir: bottom left;
-  $_2nd_gradient_dir: bottom right;
-  $_gradient_size: 13px 7px;
-  $_line_size: 100% 1px;
+  $_gradient_dir: left;
+  $_dash_bg_size: 10px 1px;
+  $_base_bg_size: 10px 3px;
   $_gradient_repeat: repeat-x;
-  $_background_position: left top;
+  $_bg_pos: center $p;
 
   background-color: transparent; // shouldn't be needed, but better to be sure;
 
-  @if $p==top { box-shadow: 0 -1px $borders_color; } // vars are already set for top undershoot, there's just a box shadow to
-                                                     // to cover the treeview lighter border, in the other cases it shouldn't be
-                                                     // a problem
-
-  @else if $p==bottom {
-    $_1st_gradient_dir: top left;
-    $_2nd_gradient_dir: top right;
-    $_background_position: bottom left;
-  }
-
-  @else { // left
-    $_1st_gradient_dir: bottom right;
-    $_2nd_gradient_dir: top right;
-    $_gradient_size: 7px 13px;
-    $_line_size: 1px 100%;
+  @if ($p == left) or ($p == right) {
+    $_gradient_dir: top;
+    $_dash_bg_size: 1px 10px;
+    $_base_bg_size: 3px 10px;
     $_gradient_repeat: repeat-y;
-    $_background_position: left top;
-
-    @if $p==right {
-      $_1st_gradient_dir: bottom left;
-      $_2nd_gradient_dir: top left;
-      $_background_position: right top;
-    }
+    $_bg_pos: $p center;
   }
 
-  background-image: linear-gradient(to $_1st_gradient_dir, // first half triangle - colored
-                                    $_undershoot_color 18%,
-                                    transparentize($_undershoot_color, 1) 25%),
-                    linear-gradient(to $_2nd_gradient_dir, // second half triangle - colored
-                                    $_undershoot_color 18%,
-                                    transparentize($_undershoot_color, 1) 25%),
-                    linear-gradient(to $_1st_gradient_dir, // first half triangle - as a base
-                                    $_undershoot_base 18%,
-                                    transparentize($_undershoot_base, 1) 25%),
-                    linear-gradient(to $_2nd_gradient_dir, // second half triangle - as a base
-                                    $_undershoot_base 18%,
-                                    transparentize($_undershoot_base, 1) 25%),
-                    linear-gradient(to top, $_undershoot_base); // this is just a line
+  background-image: linear-gradient(to $_gradient_dir, // this is the dash
+                                    transparentize($_undershoot_color, 1) 10%,
+                                    $_undershoot_color 10%,
+                                    $_undershoot_color 60%,
+                                    transparentize($_undershoot_color, 1) 60%),
+                    linear-gradient(to $_gradient_dir, // this is the dash base
+                                    $_undershoot_base 70%,
+                                    transparentize($_undershoot_base, 1) 70%);
 
   border-#{$p}: 1px solid transparent;
-  background-size: $_gradient_size, $_gradient_size, $_gradient_size, $_gradient_size, $_line_size;
-  background-repeat: $_gradient_repeat, $_gradient_repeat, $_gradient_repeat, $_gradient_repeat, no-repeat;
-  background-position: $_background_position;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box;
+  padding-#{$p}: 1px;
+  background-size: $_dash_bg_size, $_base_bg_size;
+  background-repeat: $_gradient_repeat;
+  background-origin: content-box, padding-box;
+  background-position: $_bg_pos;
 }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index fd94c6a3a8..ffe4f7daac 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4415,37 +4415,40 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 
 .undershoot.top {
   background-color: transparent;
-  box-shadow: 0 -1px #1c1f1f;
-  background-image: linear-gradient(to bottom left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to bottom right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
+  background-image: linear-gradient(to left, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
   border-top: 1px solid transparent;
-  background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
-  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
-  background-position: left top;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-top: 1px;
+  background-size: 10px 1px, 10px 3px;
+  background-repeat: repeat-x;
+  background-origin: content-box, padding-box;
+  background-position: center top; }
 .undershoot.bottom {
   background-color: transparent;
-  background-image: linear-gradient(to top left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
+  background-image: linear-gradient(to left, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
   border-bottom: 1px solid transparent;
-  background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
-  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
-  background-position: bottom left;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-bottom: 1px;
+  background-size: 10px 1px, 10px 3px;
+  background-repeat: repeat-x;
+  background-origin: content-box, padding-box;
+  background-position: center bottom; }
 .undershoot.left {
   background-color: transparent;
-  background-image: linear-gradient(to bottom right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top right, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top right, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
+  background-image: linear-gradient(to top, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
   border-left: 1px solid transparent;
-  background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
-  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
-  background-position: left top;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-left: 1px;
+  background-size: 1px 10px, 3px 10px;
+  background-repeat: repeat-y;
+  background-origin: content-box, padding-box;
+  background-position: left center; }
 .undershoot.right {
   background-color: transparent;
-  background-image: linear-gradient(to bottom left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to top left, rgba(238, 238, 236, 0.4) 18%, rgba(238, 238, 236, 0) 25%), linear-gradient(to bottom left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top left, rgba(41, 41, 41, 0.5) 18%, rgba(41, 41, 41, 0) 25%), linear-gradient(to top, rgba(41, 41, 41, 0.5));
+  background-image: linear-gradient(to top, rgba(238, 238, 236, 0) 10%, rgba(238, 238, 236, 0.4) 10%, rgba(238, 238, 236, 0.4) 60%, rgba(238, 238, 236, 0) 60%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 70%, rgba(41, 41, 41, 0) 70%);
   border-right: 1px solid transparent;
-  background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
-  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
-  background-position: right top;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-right: 1px;
+  background-size: 1px 10px, 3px 10px;
+  background-repeat: repeat-y;
+  background-origin: content-box, padding-box;
+  background-position: right center; }
 .undershoot.sidebar {
   background-color: transparent; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 597cef652f..775a786feb 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4588,37 +4588,40 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 
 .undershoot.top {
   background-color: transparent;
-  box-shadow: 0 -1px #a1a1a1;
-  background-image: linear-gradient(to bottom left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
+  background-image: linear-gradient(to left, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
   border-top: 1px solid transparent;
-  background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
-  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
-  background-position: left top;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-top: 1px;
+  background-size: 10px 1px, 10px 3px;
+  background-repeat: repeat-x;
+  background-origin: content-box, padding-box;
+  background-position: center top; }
 .undershoot.bottom {
   background-color: transparent;
-  background-image: linear-gradient(to top left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
+  background-image: linear-gradient(to left, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
   border-bottom: 1px solid transparent;
-  background-size: 13px 7px, 13px 7px, 13px 7px, 13px 7px, 100% 1px;
-  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
-  background-position: bottom left;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-bottom: 1px;
+  background-size: 10px 1px, 10px 3px;
+  background-repeat: repeat-x;
+  background-origin: content-box, padding-box;
+  background-position: center bottom; }
 .undershoot.left {
   background-color: transparent;
-  background-image: linear-gradient(to bottom right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top right, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top right, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
+  background-image: linear-gradient(to top, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
   border-left: 1px solid transparent;
-  background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
-  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
-  background-position: left top;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-left: 1px;
+  background-size: 1px 10px, 3px 10px;
+  background-repeat: repeat-y;
+  background-origin: content-box, padding-box;
+  background-position: left center; }
 .undershoot.right {
   background-color: transparent;
-  background-image: linear-gradient(to bottom left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to top left, rgba(46, 52, 54, 0.4) 18%, rgba(46, 52, 54, 0) 25%), linear-gradient(to bottom left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top left, rgba(255, 255, 255, 0.5) 18%, rgba(255, 255, 255, 0) 25%), linear-gradient(to top, rgba(255, 255, 255, 0.5));
+  background-image: linear-gradient(to top, rgba(46, 52, 54, 0) 10%, rgba(46, 52, 54, 0.4) 10%, rgba(46, 52, 54, 0.4) 60%, rgba(46, 52, 54, 0) 60%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 70%);
   border-right: 1px solid transparent;
-  background-size: 7px 13px, 7px 13px, 7px 13px, 7px 13px, 1px 100%;
-  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
-  background-position: right top;
-  background-origin: border-box, border-box, padding-box, padding-box, border-box; }
+  padding-right: 1px;
+  background-size: 1px 10px, 3px 10px;
+  background-repeat: repeat-y;
+  background-origin: content-box, padding-box;
+  background-position: right center; }
 .undershoot.sidebar {
   background-color: transparent; }