[gnome-shell-sass] css: Add a special chroma key color and use it on .workspace-background

[Florian Müllner <fmuellner src gnome org>]

commit 5d0b82220c9bde6b4af0b0b8e4b0c9b951c6e27c
Author: Daniel van Vugt <daniel van vugt canonical com>
Date:   Thu Jul 15 14:18:48 2021 +0800

    css: Add a special chroma key color and use it on .workspace-background
    
    There's no visible change here since we're just moving from the
    default transparent black to transparent other. But the latter can
    be used as a special value to indicate to the rendering code when a
    background is expected to be always occluded.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1915>

 _common.scss                | 5 +++++
 widgets/_window-picker.scss | 1 +
 2 files changed, 6 insertions(+)
---
diff --git a/_common.scss b/_common.scss
index 6372af4..f2fe78a 100644
--- a/_common.scss
+++ b/_common.scss
@@ -35,6 +35,11 @@ $base_border_radius: 8px;
 // radii of things that display over other things, e.g. popovers
 $modal_radius: $base_border_radius*2; // 24px
 
+// Chroma key to flag when a background-color is always occluded, not visible.
+// This allows any box-shadow behind it to be rendered more efficiently by
+// omitting the middle rectangle.
+$invisible_occluded_bg_color: rgba(3,2,1,0);
+
 // fonts
 $base_font_size: 11;
 $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
diff --git a/widgets/_window-picker.scss b/widgets/_window-picker.scss
index c71adad..9067a6d 100644
--- a/widgets/_window-picker.scss
+++ b/widgets/_window-picker.scss
@@ -48,5 +48,6 @@ $window_close_button_padding: 3px;
 .workspace-background {
   // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
   border-radius: 30px;
+  background-color: $invisible_occluded_bg_color;
   box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
 }