[gtk/wip/jimmac/tiled-resize-area-gtk3] Adwaita: control surface for resize tiled windows

[Jakub Steiner <jimmac src gnome org>]

commit 56f6ac5fcc42e18989ef8122a93bfc4d1ef09fd0
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Feb 16 14:23:12 2021 +0100

    Adwaita: control surface for resize tiled windows
    
        - window resizing control area is implemented as where the shadows are drawn
        - create a 'fake' shadow for the tiled case to allow easier resizing of
          the tiled window ratio even if it's offset to the side of the border
    
    Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/3670

 gtk/theme/Adwaita/_common.scss                   | 7 +++++--
 gtk/theme/Adwaita/gtk-contained-dark.css         | 4 ++--
 gtk/theme/Adwaita/gtk-contained.css              | 4 ++--
 gtk/theme/HighContrast/gtk-contained-inverse.css | 4 ++--
 gtk/theme/HighContrast/gtk-contained.css         | 4 ++--
 5 files changed, 13 insertions(+), 10 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 634a1475fd..b2eb2fc47d 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4587,9 +4587,12 @@ decoration {
   .tiled-bottom &,
   .tiled-left & {
     border-radius: 0;
-    box-shadow: 0 0 0 1px $_wm_border_backdrop;
+    box-shadow: 0 0 0 1px $_wm_border_backdrop,
+                0 0 0 20px transparent; //transparent control workaround -- #3670
 
-    &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop; }
+    &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop,
+                             0 0 0 20px transparent; // #3670
+    }
    }
 
   .popup & { box-shadow: none; }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b1907ffdf2..1951f82619 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1840,9 +1840,9 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
 
-.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.9); }
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(27, 27, 27, 0.9), 0 0 0 20px transparent; }
 
-.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 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 0 0 1px rgba(27, 27, 27, 0.9), 0 0 0 
20px transparent; }
 
 .popup decoration { box-shadow: none; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index db393f5663..34ed56397a 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1856,9 +1856,9 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
 
-.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 20px transparent; }
 
-.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 20px 
transparent; }
 
 .popup decoration { box-shadow: none; }
 
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index feceac828c..bf27138929 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -1920,9 +1920,9 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
 
-.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); }
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9), 0 0 0 20px transparent; }
 
-.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9); }
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(104, 104, 104, 0.9), 0 0 0 
20px transparent; }
 
 .popup decoration { box-shadow: none; }
 
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 8cb1122f1f..8592ee8d41 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -1936,9 +1936,9 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
 
-.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
+.tiled decoration, .tiled-top decoration, .tiled-right decoration, .tiled-bottom decoration, .tiled-left 
decoration { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 20px transparent; }
 
-.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
+.tiled decoration:backdrop, .tiled-top decoration:backdrop, .tiled-right decoration:backdrop, .tiled-bottom 
decoration:backdrop, .tiled-left decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 20px 
transparent; }
 
 .popup decoration { box-shadow: none; }