[gnome-shell-sass] osdWindow: Implement new OSD design

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

commit aa1357e19f59cb75afe2e637a1994ca397e96d2d
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Jan 25 23:15:52 2022 +0100

    osdWindow: Implement new OSD design
    
    Switch to a horizontal layout, use smaller icons and move
    the OSD to the bottom of the screen.
    
    https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/152
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2127>

 _common.scss      |  2 +-
 widgets/_osd.scss | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)
---
diff --git a/_common.scss b/_common.scss
index b682602..ff63061 100644
--- a/_common.scss
+++ b/_common.scss
@@ -77,7 +77,7 @@ stage {
   color: $osd_fg_color;
   background-color: $osd_bg_color;
   border: 1px solid $osd_outer_borders_color;
-  border-radius: $modal_radius;
+  border-radius: 999px;
   padding: $base_padding*2;
 }
 
diff --git a/widgets/_osd.scss b/widgets/_osd.scss
index 87f376d..e3d0707 100644
--- a/widgets/_osd.scss
+++ b/widgets/_osd.scss
@@ -1,29 +1,32 @@
 /* OSD */
 
-$osd_levelbar_height:8px;
+$osd_levelbar_height:6px;
 
 .osd-window {
   @extend %osd_panel;
   text-align: center;
   font-weight: bold;
-  spacing: $base_spacing * 2; // 12px
-  margin: $base_margin * 8; // 32px
-  min-width: 64px;
-  min-height: 64px;
+  &, & > * { spacing: $base_spacing * 2; } // 12px
+  margin: 4em;
 
   StIcon {
-    icon-size:$base_icon_size * 6;
+    icon-size:$base_icon_size * 2;
+
+    &:first-child:last-child { padding: 0 $base_padding * 2; }
   }
 
   .osd-monitor-label { font-size: 3em; }
   
   .level {
     height: $osd_levelbar_height;
+    min-width:$base_icon_size * 10;
     -barlevel-height: $osd_levelbar_height;
     -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
     -barlevel-active-background-color: $osd_fg_color;
     -barlevel-overdrive-color: $destructive_color;
     -barlevel-overdrive-separator-width: 3px;
+    &:ltr {margin-right: 16px;}
+    &:rtl {margin-left: 16px;}
   }
 }