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



commit cb755245508b5499aa78a7d36bf9e44613430dfe
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           | 26 ++++++++++++++++++++++----
 gtk/theme/Adwaita/gtk-contained-dark.css |  8 ++++++--
 gtk/theme/Adwaita/gtk-contained.css      |  8 ++++++--
 3 files changed, 34 insertions(+), 8 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index e6d0f5a407..6c05e26564 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4575,7 +4575,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 10px 20px transparentize(black, 0.7),
+              0 6px 6px transparentize(black, 0.85),
               0 0 0 1px $_wm_border; //doing borders with box-shadow
 
   // FIXME rationalize shadows
@@ -4583,15 +4584,16 @@ 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 10px 20px transparent,
+                0 3px 6px transparentize(black, 0.7),
                 0 0 0 1px $_wm_border_backdrop;
-    transition: $backdrop_transition;
   }
 
   .maximized &,
@@ -4602,6 +4604,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 e072705ca3..4d254367bb 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1828,12 +1828,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 10px 20px rgba(0, 0, 0, 0.3), 0 
6px 6px rgba(0, 0, 0, 0.15), 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 10px 20px transparent, 0 3px 6px rgba(0, 0, 0, 0.3), 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 856e9739a9..09201b55df 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1844,12 +1844,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 10px 20px rgba(0, 0, 0, 0.3), 0 
6px 6px rgba(0, 0, 0, 0.15), 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 10px 20px transparent, 0 3px 6px rgba(0, 0, 0, 0.3), 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]