[gtk/wip/exalm/shadows] Adwaita: Refresh window shadows



commit 10af5a4d7cba1cc66c92c851f674485be402fada
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Mon Sep 2 19:02:21 2019 +0500

    Adwaita: Refresh window shadows
    
    Use shadows heavily based on elementary stylesheet. Make half-tiled
    shadows very subtle. Enable normal->backdrop transition.

 gtk/theme/Adwaita/_common.scss           | 27 +++++++++++++++++++++++----
 gtk/theme/Adwaita/gtk-contained-dark.css |  8 ++++++--
 gtk/theme/Adwaita/gtk-contained.css      |  8 ++++++--
 3 files changed, 35 insertions(+), 8 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index fae698134e..0a48a33626 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4470,7 +4470,8 @@ decoration {
   $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
   $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 
0.1));
 
-  box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
+  box-shadow: 0 14px 28px transparentize(black, 0.65),
+              0 10px 10px transparentize(black, 0.78),
               0 0 0 1px $_wm_border; //doing borders with box-shadow
 
   // FIXME rationalize shadows
@@ -4478,15 +4479,17 @@ decoration {
   // this is used for the resize cursor area
   margin: 10px;
 
+  transition: $backdrop_transition;
+
   &:backdrop {
     // the transparent shadow here is to enforce that the shadow extents don't
     // change when we go to backdrop, to prevent jumping windows.
     // The biggest shadow should be in the same order then in the active state
     // or the jumping will happen during the transition.
-    box-shadow: 0 3px 9px 1px transparent,
-                0 2px 6px 2px transparentize(black, 0.8),
+    box-shadow: 0 14px 28px transparent,
+                0 3px 6px transparentize(black, 0.84),
+                0 3px 6px transparentize(black, 0.77),
                 0 0 0 1px $_wm_border_backdrop;
-    transition: $backdrop_transition;
   }
 
   .maximized &,
@@ -4497,6 +4500,22 @@ decoration {
   .tiled-bottom &,
   .tiled-left & { border-radius: 0; }
 
+  .tiled &,
+  .tiled-top &,
+  .tiled-right &,
+  .tiled-bottom &,
+  .tiled-left & {
+    box-shadow: 0 1px 3px transparentize(black, 0.88),
+                0 1px 2px transparentize(black, 0.76),
+                0 0 0 1px $_wm_border;
+
+    &:backdrop {
+      box-shadow: 0 1px 3px transparentize(black, 0.88),
+                  0 1px 2px transparentize(black, 0.76),
+                  0 0 0 1px $_wm_border_backdrop;
+    }
+  }
+
   .popup & { box-shadow: none; }
 
   // server-side decorations as used by mutter
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 5eb5d8d487..04104e752d 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1886,12 +1886,16 @@ colorchooser .popover.osd { border-radius: 5px; }
 .scale-popup button:hover { background-color: rgba(238, 238, 236, 0.1); border-radius: 5px; }
 
 /********************** Window Decorations * */
-decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 
0 0 1px rgba(27, 27, 27, 0.9); margin: 10px; }
+decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 
10px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(27, 27, 27, 0.9); margin: 10px; transition: 200ms ease-out; }
 
-decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(27, 27, 27, 0.9); transition: 200ms ease-out; }
+decoration:backdrop { box-shadow: 0 14px 28px transparent, 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 
0, 0, 0.23), 0 0 0 1px rgba(27, 27, 27, 0.9); }
 
 .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right 
decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; }
 
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(27, 27, 
27, 0.9); }
+
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px 
rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(27, 27, 27, 0.9); }
+
 .popup decoration { box-shadow: none; }
 
 .ssd decoration { box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.9); }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 74d25a1f8e..7f33e20f73 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1902,12 +1902,16 @@ colorchooser .popover.osd { border-radius: 5px; }
 .scale-popup button:hover { background-color: rgba(46, 52, 54, 0.1); border-radius: 5px; }
 
 /********************** Window Decorations * */
-decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 
0 0 1px rgba(0, 0, 0, 0.23); margin: 10px; }
+decoration { border-radius: 8px 8px 0 0; border-width: 0px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 
10px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 10px; transition: 200ms ease-out; }
 
-decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px 
rgba(0, 0, 0, 0.18); transition: 200ms ease-out; }
+decoration:backdrop { box-shadow: 0 14px 28px transparent, 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 
0, 0, 0.23), 0 0 0 1px rgba(0, 0, 0, 0.18); }
 
 .maximized decoration, .fullscreen decoration, .tiled decoration, .tiled-top decoration, .tiled-right 
decoration, .tiled-bottom decoration, .tiled-left decoration { border-radius: 0; }
 
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 0, 
0, 0.23); }
+
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px 
rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.18); }
+
 .popup decoration { box-shadow: none; }
 
 .ssd decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); }


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]