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

@@ -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;
 }
 

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;}
  }
 }