GNOME.org
 

[gtk/gtk-3-24] Adwaita: gradient undershoots

commit ad7eeb7a23e45eb45b6d9ebbfbca59159c5613ef
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Dec 10 11:47:53 2018 +0100

    Adwaita: gradient undershoots
    
    - based on a patch by frederik.feichtmeier <frederik feichtmeier gmail com>
      I'm certain this is something we had initially, but can't recall
      why we got rid of it for the more visually distracting dashed line.
      We can always revert when Lapo shows up and slams us with that broken
      use case. I'm guessing non-white bgs.
    
    - So far it looks way less distracting than the dashed line

 gtk/theme/Adwaita/_drawing.scss          | 28 +++++++++++++++++++++++-----
 gtk/theme/Adwaita/gtk-contained-dark.css | 12 ++++++------
 gtk/theme/Adwaita/gtk-contained.css      | 12 ++++++------
 3 files changed, 35 insertions(+), 17 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index fbea246f92..8816f89f17 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -598,8 +598,6 @@
 // top, bottom, right, left
 //
 
-  $_undershoot_color_dark: transparentize(black, 0.8);
-  $_undershoot_color_light: transparentize(white, 0.8);
 
   $_gradient_dir: left;
   $_dash_bg_size: 10px 1px;
@@ -615,9 +613,6 @@
     $_bg_pos: $p center;
   }
 
-  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
-                                    $_undershoot_color_light 50%,
-                                    $_undershoot_color_dark 50%);
 
   padding-#{$p}: 1px;
   background-size: $_dash_bg_size;
@@ -626,4 +621,27 @@
   background-position: $_bg_pos;
   border: none;
   box-shadow: none;
+
+
+  // Replace dashed line with light shadow
+  $_undershoot_shadow_color: if($variant=='light', darken(white, 20%), lighten(black, 8%));
+  $_undershoot_shadow_alpha: 0.8;
+
+  @if ($p == "left") {
+    box-shadow: inset 2px 0 0 transparentize($_undershoot_shadow_color, $_undershoot_shadow_alpha),
+                inset 1px 0 0 transparentize(darken($_undershoot_shadow_color, 20%), 
$_undershoot_shadow_alpha);
+  }
+  @else if ($p == "right") {
+    box-shadow: inset -2px 0 0 transparentize($_undershoot_shadow_color,$_undershoot_shadow_alpha),
+                inset -1px 0 0 transparentize( darken($_undershoot_shadow_color, 20%), 
$_undershoot_shadow_alpha);
+  }
+  @else if ($p == "top") {
+    box-shadow: inset 0 2px 0 0 transparentize($_undershoot_shadow_color,$_undershoot_shadow_alpha),
+                inset 0 1px 0 0 transparentize(darken($_undershoot_shadow_color, 20%), 
$_undershoot_shadow_alpha);
+  }
+  @else if ($p == "bottom") {
+      box-shadow: inset 0 -2px 0 0 transparentize($_undershoot_shadow_color,$_undershoot_shadow_alpha),
+                  inset 0 -1px 0 0 transparentize(darken($_undershoot_shadow_color, 20%), 
$_undershoot_shadow_alpha);
+  }
+
 }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 342bed2995..f98350f4ae 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -90,9 +90,9 @@ spinbutton:not(.vertical) image.left, entry image.left { margin-right: 6px; }
 
 spinbutton:not(.vertical) image.right, entry image.right { margin-left: 6px; }
 
-spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; 
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); 
padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: left center; border: none; box-shadow: none; }
+spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; 
padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: left center; border: none; box-shadow: none; box-shadow: inset 2px 0 0 rgba(20, 20, 20, 
0.2), inset 1px 0 0 rgba(0, 0, 0, 0.2); }
 
-spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; 
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); 
padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: right center; border: none; box-shadow: none; }
+spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; 
padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: right center; border: none; box-shadow: none; box-shadow: inset -2px 0 0 rgba(20, 20, 
20, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2); }
 
 spinbutton.flat:focus:not(.vertical), spinbutton.flat:backdrop:not(.vertical), 
spinbutton.flat:disabled:not(.vertical), spinbutton.flat:backdrop:disabled:not(.vertical), 
spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat:backdrop, entry.flat:disabled, 
entry.flat:backdrop:disabled, entry.flat { min-height: 0; padding: 2px; background-color: transparent; 
border-color: transparent; border-radius: 0; }
 
@@ -1545,13 +1545,13 @@ scrolledwindow overshoot.right { background-image: -gtk-gradient(radial, right c
 
 scrolledwindow overshoot.right:backdrop { background-image: -gtk-gradient(radial, right center, 0, right 
center, 0.5, to(#2a2a2b), to(rgba(42, 42, 43, 0))); background-size: 5% 100%; background-repeat: no-repeat; 
background-position: right center; background-color: transparent; border: none; box-shadow: none; }
 
-scrolledwindow undershoot.top { background-color: transparent; background-image: linear-gradient(to left, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-top: 1px; background-size: 10px 1px; 
background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; 
box-shadow: none; }
+scrolledwindow undershoot.top { background-color: transparent; padding-top: 1px; background-size: 10px 1px; 
background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; 
box-shadow: none; box-shadow: inset 0 2px 0 0 rgba(20, 20, 20, 0.2), inset 0 1px 0 0 rgba(0, 0, 0, 0.2); }
 
-scrolledwindow undershoot.bottom { background-color: transparent; background-image: linear-gradient(to left, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-bottom: 1px; background-size: 10px 1px; 
background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: 
none; box-shadow: none; }
+scrolledwindow undershoot.bottom { background-color: transparent; padding-bottom: 1px; background-size: 10px 
1px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: 
none; box-shadow: none; box-shadow: inset 0 -2px 0 0 rgba(20, 20, 20, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 
0.2); }
 
-scrolledwindow undershoot.left { background-color: transparent; background-image: linear-gradient(to top, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; 
background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; 
box-shadow: none; }
+scrolledwindow undershoot.left { background-color: transparent; padding-left: 1px; background-size: 1px 
10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: 
none; box-shadow: none; box-shadow: inset 2px 0 0 rgba(20, 20, 20, 0.2), inset 1px 0 0 rgba(0, 0, 0, 0.2); }
 
-scrolledwindow undershoot.right { background-color: transparent; background-image: linear-gradient(to top, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; 
background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; 
box-shadow: none; }
+scrolledwindow undershoot.right { background-color: transparent; padding-right: 1px; background-size: 1px 
10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: 
none; box-shadow: none; box-shadow: inset -2px 0 0 rgba(20, 20, 20, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2); }
 
 scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #252526 1px, 
transparent 1px) 0 0 0 1/0 1px stretch; background-color: #323136; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 92a37a50c6..869649afb5 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -90,9 +90,9 @@ spinbutton:not(.vertical) image.left, entry image.left { margin-right: 6px; }
 
 spinbutton:not(.vertical) image.right, entry image.right { margin-left: 6px; }
 
-spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; 
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); 
padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: left center; border: none; box-shadow: none; }
+spinbutton:not(.vertical) undershoot.left, entry undershoot.left { background-color: transparent; 
padding-left: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: left center; border: none; box-shadow: none; box-shadow: inset 2px 0 0 rgba(204, 204, 
204, 0.2), inset 1px 0 0 rgba(153, 153, 153, 0.2); }
 
-spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; 
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); 
padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: right center; border: none; box-shadow: none; }
+spinbutton:not(.vertical) undershoot.right, entry undershoot.right { background-color: transparent; 
padding-right: 1px; background-size: 1px 10px; background-repeat: repeat-y; background-origin: content-box; 
background-position: right center; border: none; box-shadow: none; box-shadow: inset -2px 0 0 rgba(204, 204, 
204, 0.2), inset -1px 0 0 rgba(153, 153, 153, 0.2); }
 
 spinbutton.flat:focus:not(.vertical), spinbutton.flat:backdrop:not(.vertical), 
spinbutton.flat:disabled:not(.vertical), spinbutton.flat:backdrop:disabled:not(.vertical), 
spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat:backdrop, entry.flat:disabled, 
entry.flat:backdrop:disabled, entry.flat { min-height: 0; padding: 2px; background-color: transparent; 
border-color: transparent; border-radius: 0; }
 
@@ -1565,13 +1565,13 @@ scrolledwindow overshoot.right { background-image: -gtk-gradient(radial, right c
 
 scrolledwindow overshoot.right:backdrop { background-image: -gtk-gradient(radial, right center, 0, right 
center, 0.5, to(#d5d0cc), to(rgba(213, 208, 204, 0))); background-size: 5% 100%; background-repeat: 
no-repeat; background-position: right center; background-color: transparent; border: none; box-shadow: none; }
 
-scrolledwindow undershoot.top { background-color: transparent; background-image: linear-gradient(to left, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-top: 1px; background-size: 10px 1px; 
background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; 
box-shadow: none; }
+scrolledwindow undershoot.top { background-color: transparent; padding-top: 1px; background-size: 10px 1px; 
background-repeat: repeat-x; background-origin: content-box; background-position: center top; border: none; 
box-shadow: none; box-shadow: inset 0 2px 0 0 rgba(204, 204, 204, 0.2), inset 0 1px 0 0 rgba(153, 153, 153, 
0.2); }
 
-scrolledwindow undershoot.bottom { background-color: transparent; background-image: linear-gradient(to left, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-bottom: 1px; background-size: 10px 1px; 
background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: 
none; box-shadow: none; }
+scrolledwindow undershoot.bottom { background-color: transparent; padding-bottom: 1px; background-size: 10px 
1px; background-repeat: repeat-x; background-origin: content-box; background-position: center bottom; border: 
none; box-shadow: none; box-shadow: inset 0 -2px 0 0 rgba(204, 204, 204, 0.2), inset 0 -1px 0 0 rgba(153, 
153, 153, 0.2); }
 
-scrolledwindow undershoot.left { background-color: transparent; background-image: linear-gradient(to top, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-left: 1px; background-size: 1px 10px; 
background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: none; 
box-shadow: none; }
+scrolledwindow undershoot.left { background-color: transparent; padding-left: 1px; background-size: 1px 
10px; background-repeat: repeat-y; background-origin: content-box; background-position: left center; border: 
none; box-shadow: none; box-shadow: inset 2px 0 0 rgba(204, 204, 204, 0.2), inset 1px 0 0 rgba(153, 153, 153, 
0.2); }
 
-scrolledwindow undershoot.right { background-color: transparent; background-image: linear-gradient(to top, 
rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%); padding-right: 1px; background-size: 1px 10px; 
background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: none; 
box-shadow: none; }
+scrolledwindow undershoot.right { background-color: transparent; padding-right: 1px; background-size: 1px 
10px; background-repeat: repeat-y; background-origin: content-box; background-position: right center; border: 
none; box-shadow: none; box-shadow: inset -2px 0 0 rgba(204, 204, 204, 0.2), inset -1px 0 0 rgba(153, 153, 
153, 0.2); }
 
 scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #cdc7c2 1px, 
transparent 1px) 0 0 0 1/0 1px stretch; background-color: #cecece; }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]