[gnome-shell-sass] style: Stylesheet updates for GNOME 42

From: Florian Müllner <fmuellner src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell-sass] style: Stylesheet updates for GNOME 42
Date: Mon, 14 Feb 2022 22:47:21 +0000 (UTC)
commit 27c6ae3351b4a3618649481880f82eb0a859bc30
Author: Sam Hewitt <sam snwh org>
Date:   Tue Dec 28 10:16:54 2021 -0330

    style: Stylesheet updates for GNOME 42
    
    - updated switch assets
     - new high contrast assets
    - use non-hardcoded bg color for dash
    - updated palette colors
     - add missing color definitions to hc
    - increase radii of many elements
    - update search entry style
    - align icon better in search entry
    - restyle panel popovers without arrow and add drop shadow
    - used theme colors in panel
    - fix some things with popover labels
    - new slider style
    - some light variant fixes
    - fixes to the calendar popover
     - day with event styles
     - better calendar-today.svg and dark variant
     - shorten calendary weekday header
     - saner padding
    - overhaul popover menu style
    - minor fixes to app grid and alt-tab switch
    - updated looking glass styles
    - nm-dialog adjustments
    - search results adjustments
    - expand out panel button hover styles
    - button drawing adjustments
    - adjust notifications area
    - update on-screen keyboard style
     - better keyboard symbolic icon assets
     - change keyboard symbolic icons to 24px
     - improved keyboard style
     - gave the keyboard word suggestions some styles
    - less obnoxious saner media control buttons
    - cleaned up the css for the dash
    - reworked the alt-tab switcher style
    - sync style on workspace switcher
    - adjusted dialog button style drawing
    - popover submenu redrawing adjustement
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2104>

 _colors.scss                     |  35 ++++-----
 _common.scss                     |  79 ++++++++++-----------
 _drawing.scss                    |  26 +++----
 _high-contrast-colors.scss       |   2 +
 widgets/_app-grid.scss           |  26 ++++---
 widgets/_calendar.scss           |  75 ++++++++++----------
 widgets/_dash.scss               |  66 +++++++++--------
 widgets/_dialogs.scss            |   1 -
 widgets/_keyboard.scss           |  72 +++++++++++++------
 widgets/_looking-glass.scss      |  95 ++++++++++++++-----------
 widgets/_message-list.scss       |  78 ++++++++++++++------
 widgets/_network-dialog.scss     |  29 +++++++-
 widgets/_notifications.scss      |   7 ++
 widgets/_panel.scss              |  66 +++++++++++++++--
 widgets/_popovers.scss           | 149 ++++++++++++++++++++++++++++++---------
 widgets/_search-entry.scss       |  20 +++---
 widgets/_search-results.scss     |  34 ++++-----
 widgets/_slider.scss             |  23 +++---
 widgets/_switcher-popup.scss     |  63 ++++++++++++-----
 widgets/_switches.scss           |   4 +-
 widgets/_workspace-switcher.scss |   8 ++-
 21 files changed, 623 insertions(+), 335 deletions(-)
---
diff --git a/_colors.scss b/_colors.scss
index 9d8f72f..32f7c81 100644
--- a/_colors.scss
+++ b/_colors.scss
@@ -1,34 +1,37 @@
 // When color definition differs for dark and light variant,
-// it gets @if ed depending on $variant
+// it gets @if-ed depending on $variant
 
-$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
-$fg_color: if($variant == 'light', #2e3436, #eeeeec);
+$base_color: if($variant == 'light', #fff, lighten(desaturate(#242424, 20%), 2%));
+$bg_color: if($variant == 'light', #f6f5f4, #242424);
+$fg_color: if($variant == 'light', transparentize(black, .2), white);
 
 $selected_fg_color: #fff;
-$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
+$selected_bg_color: if($variant == 'light', #3584e4, #1c71d8);
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 
30%));
-$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
-$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
+
+$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 3%));
+$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%));
+
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 
10%));
 $top_hilight: $borders_edge;
 
-$warning_color: #f57900;
-$error_color: #ff8080;
-$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
+$warning_color: if($variant == 'light', #e5a50a, #f5c211);;
+$error_color: if($variant == 'light', #e01b24, #c01c28);
+$success_color: if($variant == 'light', #2ec27e, #26a269);
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
 
-$osd_fg_color: #eeeeec;
-$osd_text_color: white;
-$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
+$osd_fg_color: white;
+$osd_bg_color: transparentize(desaturate(#242424, 100%),0.04);
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
-$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
+$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  
mix($osd_fg_color, $osd_bg_color, 70%));
 $osd_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize(white, 0.84);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
 
 $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
-$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
+
+// overview background color
+$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%)); 
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/_common.scss b/_common.scss
index 0f3f3ee..69c4504 100644
--- a/_common.scss
+++ b/_common.scss
@@ -33,21 +33,21 @@ $base_spacing: 6px;
 // border radii
 $base_border_radius: 8px;
 
-$modal_radius:$base_border_radius * 2;
+// radii of things that display over other things, e.g. popovers
+$modal_radius: $base_border_radius*2; // 24px
 
 // non-standard colors
 $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
 // $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
 
-// hover
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
-$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
+// derived hover colors
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
 
-// active
-$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%));
+// derived active colors
+$active_bg_color: darken($bubble_buttons_color,if($variant=='light', 9%, 2%));
 $active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
-$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
 
 // fonts
 $base_font_size: 11;
@@ -76,9 +76,9 @@ stage {
 %osd_panel {
   color: $osd_fg_color;
   background-color: $osd_bg_color;
-  //border: 1px solid $osd_outer_borders_color;
-  border-radius: $base_border_radius * 2 + 4px;
-  padding: $base_padding * 2;
+  border: 1px solid $osd_outer_borders_color;
+  border-radius: $modal_radius;
+  padding: $base_padding*2;
 }
 
 // Overview panels
@@ -90,23 +90,16 @@ stage {
 
 // icon tiles
 %icon_tile {
-  border-radius: $base_border_radius + 4px;
+  border-radius: $base_border_radius * 2; // 16px
   padding: $base_padding;
   border: 2px solid transparent;
   transition-duration: 100ms;
   text-align: center;
 }
 
-// dialogs
-%bubble_panel {
-  color: $fg_color;
-  background-color: $bg_color;
-  border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color);
-}
-
 // button styling
 %button {
-  border-radius: $base_border_radius;
+  border-radius: $base_border_radius - 2px; // 6px
   border-style: solid;
   border-width: 1px;
   min-height: 22px;
@@ -119,41 +112,45 @@ stage {
   &:active, &:checked { @include button(active);}
 }
 
-// buttons in dialogs
+// dialogs
+%bubble_panel {
+  color: $fg_color;
+  background-color: $bg_color;
+  border-radius: $base_border_radius*1.25 + 1px;
+  border: 1px solid $borders_edge;
+}
+
+// buttons in dialogs/notifications
+// styled to have no shadow and be lighter in color
+$bubble_button_radius:$base_border_radius*1.25;
+
 %bubble_button {
-  @include button(normal, $shadow: none);
   padding: $base_padding * 2;
-  border-style: solid;
-  border-width: 1px;
-  border-left-width: 0;
-  border-bottom-width: 0;
+  border: 0 solid $bg_color !important; 
+  border-radius: 0;
+  border-right-width: 1px !important; 
 
+  @include button(normal, $bubble_buttons_color, $shadow: none);
   &:insensitive { @include button(insensitive, $shadow: none); }
   &:focus { @include button(focus, $shadow: none); }
-  &:hover { @include button(hover, $shadow: none); }
-  &:active { @include button(active, $shadow: none); }
-
-  // radius is 2 pixel less to fit in bubble
+  &:hover { @include button(hover, $bubble_buttons_color, $shadow: none); }
+  &:active { @include button(active, $bubble_buttons_color, $shadow: none); }
+  
   &:first-child {
-    border-radius: 0 0 0 $modal_radius - 2px;
+    border-radius: 0 0 0 $bubble_button_radius; 
   }
 
   &:last-child {
-    border-right-width: 0;
-    border-radius: 0 0 $modal_radius - 2px 0;
-  }
-
-  &:first-child:last-child {
-    border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px;
+    border-radius: 0 0 $bubble_button_radius 0;
+    border-right-width: 0 !important;
   }
 }
 
-
-// notification styling
+// styling for elements within popovers that look like notifications
 @mixin notification_bubble($flat: false) {
-  border-width: 1px;
+  border-width: 0px;
   border-style: solid;
-  border-radius: $base_border_radius + 2px;
+  border-radius: $base_border_radius;
   margin: $base_margin;
 
   @if $flat {
diff --git a/_drawing.scss b/_drawing.scss
index f09eb12..634fd4d 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -138,37 +138,38 @@
   @if $t==normal {
     color: $tc;
     background-color: lighten($c, 3%);
-    border-color: draw_border_color($c);
+    border-color: lighten($c, 3%);
     @include draw_shadows($button_shadow);
     // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
+    text-shadow: none;
+    icon-shadow: none;
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
+    background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
+    // border-color: lighten($c, 3%);
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
-    //border-color: $selected_bg_color;
+    text-shadow: none;
+    icon-shadow: none;
   }
 
   // hover button
   @else if $t==hover {
     color: $tc;
     background-color: lighten($c, if($variant == 'light', 8%, 5%));
-    border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
+    border-color: lighten($c, if($variant == 'light', 8%, 5%));
     @include draw_shadows($button_shadow);
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
+    text-shadow: none;
+    icon-shadow: none;
   }
 
   // active button
   @else if $t==active {
     color: $tc;
     background-color: darken($c,3%);
-    border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
+    border-color: darken($c,3%);
     text-shadow: none;
     icon-shadow: none;
     box-shadow: none;
@@ -177,7 +178,7 @@
   // insensitive button
   @else if $t==insensitive {
     color: $insensitive_fg_color;
-    border-color: $insensitive_borders_color;
+    border-color: $insensitive_bg_color;
     background-color: $insensitive_bg_color;
     box-shadow: none;
     text-shadow: none;
@@ -196,7 +197,7 @@
 }
 
 // overview icons
-@mixin overview-icon($color) {
+@mixin overview_icon($color) {
   .overview-icon {
     @extend %icon_tile;
     color: $color;
@@ -223,6 +224,7 @@
     }
   }
 
+  &:focus,
   &:active,
   &:checked {
     .overview-icon {
diff --git a/_high-contrast-colors.scss b/_high-contrast-colors.scss
index b34e0b1..0b615f2 100644
--- a/_high-contrast-colors.scss
+++ b/_high-contrast-colors.scss
@@ -24,6 +24,8 @@ $osd_fg_color: #eeeeec;
 $osd_bg_color: #2e3436;
 $osd_borders_color: rgba(0,0,0, 0.7);
 $osd_outer_borders_color: rgba(255,255,255, 0.1);
+$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%);
+$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  
mix($osd_fg_color, $osd_bg_color, 70%));
 
 $shadow_color: rgba(0,0,0, 0.1);
 $system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index 2df6911..0bc5c74 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -20,7 +20,7 @@ $app_grid_fg_color: #fff;
 
 // Icon tiles in the app grid
 .app-well-app,
-%app-well-app {
+%app_well_app {
   @include overview-icon($app_grid_fg_color);
 
   .overview-icon.overview-icon-with-label {
@@ -35,12 +35,12 @@ $app_grid_fg_color: #fff;
 /* App Folders */
 .app-well-app.app-folder {
   background-color: $dash_background_color;
-  border-radius: $base_border_radius + 4px; // same as %icon_tile
+  border-radius: $base_border_radius * 2; // same as %icon_tile
 }
 
 // expanded folder
 .app-folder-dialog { //style like the dash
-  border-radius: $modal_radius * 1.5;
+  border-radius: 48px;
   background-color: $dash_background_color;
   padding: 12px 0px 12px 0px;
 
@@ -51,7 +51,7 @@ $app_grid_fg_color: #fff;
     & .folder-name-label,
     & .folder-name-entry {
       font-size: 18pt;
-      font-weight: 800;
+      font-weight: 1000;
     }
 
     & .folder-name-entry { width: 300px }
@@ -60,14 +60,17 @@ $app_grid_fg_color: #fff;
     & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
 
     & .edit-folder-button {
-      @extend %button;
-
+      @include button(undecorated, $shadow: none);
       padding: 0;
       width: 36px;
       height: 36px;
       border-radius: 18px;
 
-      & > StIcon { icon-size: 16px }
+      &:focus {@include button(focus);}
+      &:hover {@include button(hover);}
+      &:active {@include button(active);}
+
+      & > StIcon { icon-size: $base_icon_size }
     }
   }
 
@@ -84,8 +87,9 @@ $app_grid_fg_color: #fff;
     margin-bottom: 18px;
   }
 }
+
 .app-folder-dialog-container {
-  padding: 12px;
+  padding: $base_padding*2;
   width: 620px;
   height: 620px;
 }
@@ -96,7 +100,7 @@ $app_grid_fg_color: #fff;
   width: 5px;
   border-radius:5px;
   background-color: $osd_fg_color;
-  margin-bottom: 1px;
+  margin-bottom: 2px;
 }
 
 // Rename popup for app folders
@@ -148,7 +152,7 @@ $app_grid_fg_color: #fff;
     background-gradient-start: rgba(255, 255, 255, 0.05);
     background-gradient-end: transparent;
     background-gradient-direction: horizontal;
-    border-radius: 15px 0px 0px 15px;
+    border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5;
   }
 
   &.previous:ltr,
@@ -156,7 +160,7 @@ $app_grid_fg_color: #fff;
     background-gradient-start: transparent;
     background-gradient-end: rgba(255, 255, 255, 0.05);
     background-gradient-direction: horizontal;
-    border-radius: 0px 15px 15px 0px;
+    border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px;
   }
 }
 
diff --git a/widgets/_calendar.scss b/widgets/_calendar.scss
index 33aea17..1d05258 100644
--- a/widgets/_calendar.scss
+++ b/widgets/_calendar.scss
@@ -1,14 +1,5 @@
 /* Date/Time Menu */
 
-.clock-display-box {
-  spacing: 2px;
-
-  .clock {
-    padding-left: $base_padding * 2;
-    padding-right: $base_padding * 2;
-  }
-}
-
 // overall menu
 #calendarArea {
   padding:0;
@@ -17,11 +8,13 @@
 // Calendar menu side column
 .datemenu-calendar-column {
   spacing: $base_spacing;
-  border: 0 solid $bubble_borders_color;
-  padding: 0 $base_padding * 2;
+  border: none;
+  border-style: solid;
+  border-color: $borders_color;
+  padding: 0;
 
-  &:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
-  &:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
+  &:ltr {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
+  &:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
 
   .datemenu-displays-section {
   }
@@ -33,7 +26,7 @@
 
 .events-section-title {
   @include notification_bubble($flat: true);
-  color: desaturate(darken($fg_color,40%), 10%);
+  color: $insensitive_fg_color;
   font-weight: bold;
   padding: .4em;
 }
@@ -46,6 +39,7 @@
   // weekday label
   .day-label {
     @include fontsize($base_font_size+1);
+    color: $insensitive_fg_color;
     font-weight: bold;
   }
 
@@ -66,7 +60,6 @@
     color: lighten($fg_color,5%);
     font-weight: bold;
     padding: 8px 0;
-    &:focus {}
   }
 
   // prev/next month icons
@@ -79,24 +72,24 @@
     background-color: transparent;
     height: 32px;
     width: 32px;
-    border-radius: $base_border_radius;
-    &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
+    border-radius: $base_border_radius - 2px;
+    &:hover, &:focus { background-color: $hover_bg_color; }
     &:active { background-color: $active_bg_color; }
   }
 
-
   $calendar_day_size: 32px;
 
   .calendar-day-base {
     @include fontsize($base_font_size - 3);
     text-align: center;
-    width: $calendar_day_size;
-    height: $calendar_day_size;
     padding: 0;
     margin: 2px;
+    height: $calendar_day_size;
+    width: $calendar_day_size;
     border-radius: $calendar_day_size * 0.5 + 2px;
     border: 1px solid transparent; //avoid jumparound due to today
     font-feature-settings: "tnum";
+    
     &:hover, &:focus { background-color: $hover_bg_color; }
     &:active,&:selected {
       color: lighten($fg_color,10%);
@@ -105,9 +98,11 @@
 
     // day of week heading
     &.calendar-day-heading {
-      color: lighten($fg_color,10%);
-      margin-top: 1em;
-      @include fontsize($base_font_size - 4);
+      color: $insensitive_fg_color;
+      font-weight: 1000;
+      padding-top: $base_padding;
+      height: 16px !important; // force heading to be smaller height
+      @include fontsize($base_font_size - 2);
     }
   }
 
@@ -123,7 +118,8 @@
     border-left-width: 1px;
   }
 
-  .calendar-work-day {}
+  .calendar-work-day {
+  }
 
   .calendar-nonwork-day {
     color: $insensitive_fg_color;
@@ -131,37 +127,38 @@
 
   // Today
   .calendar-today {
-    font-weight: bold;
-    border: 1px solid transparent;
     background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    border: 1px solid transparent;
+    font-weight: bold;
+    color: $selected_fg_color !important;
 
     &:hover,&:focus {
       background-color:lighten($selected_bg_color, 3%);
-      color: $selected_fg_color;
+      color: inherit;
     }
 
     &:active,&:selected {
       background-color: $selected_bg_color;
-      color: $selected_fg_color;
+      color: inherit;
 
       &:hover,&:focus {
         background-color:lighten($selected_bg_color, 3%);
-        color: $selected_fg_color;
+        color: inherit;
       }
     }
   }
 
   .calendar-day-with-events {
-    background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
+    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today.svg"), 
url("resource:///org/gnome/shell/theme/calendar-today-dark.svg"));
+    background-size: contain;
     &.calendar-work-day {
-       color: lighten($fg_color,10%);
-       font-weight: bold;
+      color: lighten($fg_color,10%);
+      font-weight: bold;
     }
   }
 
   .calendar-other-month-day {
-    color: transparentize($fg_color ,0.5);
+    color: transparentize($fg_color ,0.5) !important;
   }
 
   .calendar-week-number {
@@ -190,13 +187,13 @@
   }
 
   .events-title {
-    color: desaturate(darken($fg_color,40%), 10%);
+    color: $insensitive_fg_color;
     font-weight: bold;
     margin-bottom: $base_margin;
   }
 
   .event-time {
-    color: darken($fg_color,20%);
+    color: $insensitive_fg_color;
     font-feature-settings: "tnum";
     @include fontsize($base_font_size - 1);
   }
@@ -214,7 +211,7 @@
 
   // title
   .world-clocks-header {
-    color: desaturate(darken($fg_color,40%), 10%);
+    color: $insensitive_fg_color;
     font-weight: bold;
   }
 
@@ -238,7 +235,7 @@
 
   // timezone offset label
   .world-clocks-timezone {
-    color: darken($fg_color,20%);
+    color: $insensitive_fg_color;
     font-feature-settings: "tnum";
     @include fontsize($base_font_size - 1);
   }
@@ -258,7 +255,7 @@
   }
 
   .weather-header {
-    color: desaturate(darken($fg_color,40%), 10%);
+    color: $insensitive_fg_color;
     font-weight: bold;
 
     &.location {
diff --git a/widgets/_dash.scss b/widgets/_dash.scss
index cf21552..014844d 100644
--- a/widgets/_dash.scss
+++ b/widgets/_dash.scss
@@ -1,18 +1,17 @@
 /* Dash */
 
-$dash_background_color: #3b3b3b;
+$dash_background_color: lighten($system_bg_color, 5%);
 $dash_placeholder_size: 32px;
 $dash_padding: $base_padding + 4px; // 10px
 $dash_spacing: $base_padding / 4;
-
 $dash_bottom_margin: $base_margin * 4;
+$dash_border_radius: $modal_radius + 8px;
 
-$dash_border_radius: $modal_radius * 1.5;
-
+// container for the dash
 #dash {
   @include fontsize($base_font_size - 2);
-  margin-top: $base_spacing * 3;
-  padding: 0 $dash_padding;
+  margin-top: $base_margin * 3;
+  padding: $dash_padding;
 
   .placeholder {
     // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@@ -26,27 +25,51 @@ $dash_border_radius: $modal_radius * 1.5;
     height: $dash_placeholder_size;
   }
 
+  // icon on the dash
   .overview-icon {
-    padding: $dash_padding / 2;
+    padding: $base_padding+2px;
+  }
+
+  // Running app indicator (also shown in app grid)
+  .app-well-app-running-dot {
+    height: 5px;
+    width: 5px;
+    border-radius:5px;
+    background-color: $osd_fg_color;
+    margin-bottom: 12px;
   }
 }
 
+// background of the dash behind app icons
 .dash-background {
   background-color: $dash_background_color;
-  margin-bottom: $dash_bottom_margin;
-  padding: $dash_padding;
   border-radius: $dash_border_radius;
+  margin-bottom: 0; // this keeps things vertically centered
+  padding: $dash_padding;
 }
 
-// Dash Items
-.dash-item-container .app-well-app, .show-apps {
-  padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin;
+// items on the dash
+.dash-item-container {
+
+  // each app item on the dash
+  .app-well-app {
+    padding:0;
+    margin: 2px;
+  }
+
+  // show apps button
+  .show-apps {
+    @include overview_icon($osd_fg_color);
+    margin: 2px;
+    padding: 0;
+  }
 }
 
+// separator between favourites and running apps
 .dash-separator {
   width: 1px;
-  margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
-  background-color: transparentize($osd_fg_color,0.7);
+  margin: 0 $base_margin*2;
+  background-color: transparentize($borders_color,0.5);
 }
 
 // OSD Tooltip
@@ -56,18 +79,5 @@ $dash_border_radius: $modal_radius * 1.5;
   border-radius: 99px;
   padding: $base_padding $base_padding * 2;
   text-align: center;
-  -y-offset: $base_margin * 3; // distance from the dash edge
-}
-
-// Show apps button
-.show-apps {
-  @include overview-icon($osd_fg_color);
-
-  &:focus,
-  &:checked {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.5);
-      color: $fg_color;
-    }
-  }
+  -y-offset: $base_margin * 2; // distance from the dash edge
 }
diff --git a/widgets/_dialogs.scss b/widgets/_dialogs.scss
index 6eb1cc1..d23bc04 100644
--- a/widgets/_dialogs.scss
+++ b/widgets/_dialogs.scss
@@ -5,7 +5,6 @@
 }
 
 .modal-dialog {
-  border-radius: $modal_radius;
   @extend %bubble_panel;
 
   .modal-dialog-content-box {
diff --git a/widgets/_keyboard.scss b/widgets/_keyboard.scss
index f866d77..4a5dbc6 100644
--- a/widgets/_keyboard.scss
+++ b/widgets/_keyboard.scss
@@ -1,15 +1,16 @@
 /* On-screen Keyboard */
 
 $key_size: 1.2em;
-$key_border_radius: $base_border_radius + 3px;
-$key_bg_color:  $bg_color;
+$key_border_radius: $base_border_radius + 4px; // 12px
+$key_bg_color:  darken($osd_fg_color, 70%);
 // $default_key_bg_color: darken($key_bg_color, 4%);
-$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
+$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
 
 
 // draw keys using button function
 #keyboard {
-  background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
+  // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 
0.1);
+  background-color: $osd_bg_color;
   box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
 
   .page-indicator {
@@ -31,13 +32,14 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 // the keys
 .keyboard-key {
 
-  @include button(normal, $c:$key_bg_color);
+  @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
   &:focus { @include button(focus);}
-  &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
-  &:active { @include button(active, $c: $key_bg_color); }
+  &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
+  &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
 
   @include fontsize($base_font_size + 5);
+  font-weight: bold;
   min-height: $key_size;
   min-width: $key_size;
   border-width: 1px;
@@ -52,42 +54,56 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 
   // non-character keys
   &.default-key {
-    @include button(normal, $c:$default_key_bg_color);
-    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
-    &:active { @include button(active, $c: $default_key_bg_color);}
+    @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
+    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);}
+    &:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);}
+    border-radius: $key_border_radius;
   }
 
   // enter key is suggested-action
   &.enter-key {
     @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
-    &:active {@include button(active, $c: darken($selected_bg_color, 2%));}
+    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), 
$tc:$selected_fg_color);}
+    &:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);}
+    border-radius: $key_border_radius;
+    color: $osd_fg_color;
   }
 
-  &.shift-key-uppercase { color: $selected_bg_color }
+  &.shift-key-lowercase {}
+  
+  // pressed shift has different style
+  &.shift-key-uppercase { 
+    background-color: lighten($key_bg_color, 20%);
+    color: $osd_bg_color;
+    &:hover {
+      background-color: lighten($key_bg_color, 25%);
+      color: lighten($osd_bg_color, 5%);
+    }
+  }
 
-  StIcon { icon-size: 1.125em; }
+  // size of icons on keys
+  StIcon { icon-size: 24px; }
 }
 
 // long press on a key popup
 .keyboard-subkeys {
-  color: $osd_fg_color;
-  -arrow-border-radius: $modal_radius;
+  -arrow-border-radius: $base_border_radius*2;
   -arrow-background-color: $osd_bg_color;
   -arrow-border-width: 1px;
   -arrow-border-color: lighten($osd_bg_color, 9%);
   -arrow-base: 20px;
   -arrow-rise: 10px;
   -boxpointer-gap: $base_spacing;
+  padding: $base_padding;
 
   .keyboard-key {
-    @include button(normal, $c:$key_bg_color);
+    @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
     &:focus { @include button(focus);}
-    &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
-    &:active { @include button(active, $c: $key_bg_color); }
+    &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
+    &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
 
-    border-radius:$base_border_radius;
+    border-radius:$key_border_radius;
   }
 }
 
@@ -112,4 +128,20 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
   @include fontsize($base_font_size + 3);
   spacing: 12px;
   min-height: 20pt;
+  padding: $base_padding*2;
+  color: $osd_fg_color;
+
+  // each suggestion
+  StButton {
+    margin: 0 3px;
+    min-width: 32px;
+    border-radius: $base_border_radius - 2px;
+    padding: $base_padding $base_padding*3;
+
+    @include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
+
+    &:focus { @include button(focus);}
+    &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
+    &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
+  }
 }
diff --git a/widgets/_looking-glass.scss b/widgets/_looking-glass.scss
index ec27aac..2b9cb83 100644
--- a/widgets/_looking-glass.scss
+++ b/widgets/_looking-glass.scss
@@ -1,46 +1,56 @@
 /* Looking Glass */
 
-$text_fg_color: #ccc;
-
 // Dialog
 #LookingGlassDialog {
   background-color: $osd_bg_color;
-  spacing: $base_spacing;
-  padding: 4px;
-  border: 1px solid transparentize($osd_fg_color, 0.8);
-  border-radius: $base_border_radius;
+  border-radius: 0 0 $base_border_radius $base_border_radius;
+  border-top-width: 0;
+  border: 1px solid $osd_outer_borders_color;
   color: $osd_fg_color;
+  padding: $base_padding;
+  spacing: $base_spacing;
 
   & > #Toolbar {
     border: none;
-    border-radius: $base_border_radius;
-    background-color: $osd_bg_color;
+    padding: $base_padding;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  .labels { 
+    spacing: $base_spacing;
   }
 
-  .labels { spacing: $base_spacing; }
   .notebook-tab {
-    -natural-hpadding: $base_padding * 2;
-    -minimum-hpadding: 6px;
+    -natural-hpadding: $base_padding*2;
+    -minimum-hpadding: $base_padding*2;
+
     font-weight: bold;
+    padding: $base_padding $base_padding*2;
     color: darken($osd_fg_color, 15%);
     transition-duration: 100ms;
-    padding-left: .3em;
-    padding-right: .3em;
-    border-bottom-width: 2px;
+    box-shadow:none;
+    border:none;
+    border-radius: $base_border_radius - 2px;
+    background-color: transparent;
+
     &:hover {
       color: $osd_fg_color;
+      background-color: transparentize($osd_fg_color, 0.95);
     }
+
     &:selected {
-      border-bottom-width: 2px;
-      box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%);
       color: $osd_fg_color;
+      background-color: transparentize($osd_fg_color, 0.9);
     }
   }
-  StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
-  StBoxLayout#ResultsArea { spacing: $base_spacing; }
+
+  StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; }
+  StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; }
 }
 
 .lg-dialog {
+
   StEntry {
     background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
     color: $osd_fg_color;
@@ -49,55 +59,55 @@ $text_fg_color: #ccc;
     selection-background-color: $selected_bg_color;
     selected-color: $selected_fg_color;
   }
+
   .shell-link {
     color: $link_color;
     &:hover { color: lighten($link_color, 10%); }
     &:active { color: darken($link_color, 10%); }
    }
+
   .actor-link {
-    color: $text_fg_color;
-    &:hover { color: lighten($text_fg_color, 20%); }
-    &:active { color: darken($text_fg_color, 20%); }
+    color: $insensitive_fg_color;
+    &:hover { color: lighten($insensitive_fg_color, 20%); }
+    &:active { color: darken($insensitive_fg_color, 20%); }
    }
 }
 
 .lg-completions-text {
-    font-size: .9em;
-    font-style: italic;
+  font-size: .9em;
+  font-style: italic;
 }
 
 .lg-obj-inspector-title {
-    spacing: $base_spacing;
+  spacing: $base_spacing;
 }
 
 .lg-obj-inspector-button {
-    border: 1px solid $osd_borders_color;
-    padding: 4px;
-    border-radius: $base_border_radius;
-    &:hover { border: 1px solid #ffffff; }
+  border: 1px solid $osd_borders_color;
+  padding: 4px;
+  border-radius: $base_border_radius;
+  &:hover { border: 1px solid #ffffff; }
 }
 
 // Extensions
-#lookingGlassExtensions { padding: 4px; }
+#lookingGlassExtensions { padding: $base_padding; }
 
 .lg-extensions-list {
-    padding: 4px;
-    spacing: 6px;
+  padding: $base_padding;
+  spacing: $base_spacing;
 }
 
 .lg-extension {
-    border: 1px solid lighten($osd_borders_color, 5%);
-    background-color: lighten($osd_bg_color, 5%);
-    border-radius: $base_border_radius;
-    padding: 4px;
+  padding: $base_padding*2;
+  @include notification_bubble;
 }
 
 .lg-extension-name {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .lg-extension-meta {
-    spacing: 6px;
+  spacing: $base_spacing;
 }
 
 // Inspector
@@ -105,19 +115,20 @@ $text_fg_color: #ccc;
   background: $osd_bg_color;
   border: 1px solid $osd_borders_color;
   border-radius: $base_border_radius;
-  padding: 6px;
+  padding: $base_padding;
 }
 
 .lg-debug-flag-button {
   StLabel { padding: $base_spacing, 2 * $base_spacing; }
 
-  color: $text_fg_color;
-  &:hover { color: lighten($text_fg_color, 20%); }
-  &:active { color: darken($text_fg_color, 20%); }
+  color: $fg_color;
+  &:hover { color: lighten($fg_color, 20%); }
+  &:active { color: darken($fg_color, 20%); }
 }
 
 .lg-debug-flags-header {
   padding-top: 2 * $base_spacing;
   font-size: 120%;
   font-weight: bold;
-}
+  padding: $base_padding;
+}
\ No newline at end of file
diff --git a/widgets/_message-list.scss b/widgets/_message-list.scss
index bb9239f..a583283 100644
--- a/widgets/_message-list.scss
+++ b/widgets/_message-list.scss
@@ -3,15 +3,32 @@
 
 // main list
 .message-list {
-  width: 31.5em;
-  padding: 0 $base_padding * 2;
+  width: 32em;
+  padding: 0;
 
-  .message-list-placeholder { spacing: 12px; }
+  .message-list-placeholder { 
+    font-weight:1000; 
+    font-size: 18pt;
+    color: transparentize($fg_color, 0.7);
+    spacing: 12px;
+
+    // icon size and color
+    > StIcon {
+      icon-size: $base_icon_size*4; // 32px
+      -st-icon-style: symbolic;
+    }
+  }
 }
 
+
 .message-list-sections {
   spacing: $base_spacing;
-  margin: 0 $base_margin * 4; // to account for scrollbar
+  margin: 0; 
+  padding-bottom: $base_padding;
+
+  // to account for scrollbar
+  &:ltr {margin-right: $base_margin * 4; }
+  &:rtl {margin-left: $base_margin * 4;}
 }
 
 .message-list-section,
@@ -21,10 +38,10 @@
 
 // do-not-disturb + clear button
 .message-list-controls {
-  margin: ($base_margin * 2) ($base_margin * 4) 0;
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
-  padding: $base_margin;
-  spacing: $base_spacing * 2;
+  padding: $base_padding;
+  margin: 0;
+  spacing: $base_spacing;
 
   .dnd-button {
     // We need this because the focus outline isn't inset like for the buttons
@@ -32,7 +49,7 @@
     // its color when focusing.
     border-width: 2px;
     border-color: transparent;
-    border-radius: 99px;
+    border-radius: 32px;
     border-style: solid;
 
     &:focus {
@@ -47,10 +64,11 @@
 
   // icon container
   .message-icon-bin {
-    padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
+    padding: ($base_padding * 3);
+    padding-right:$base_padding;
 
     &:rtl {
-      padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
+      padding-right:$base_padding;
     }
 
     // icon size and color
@@ -68,13 +86,16 @@
 
   // content
   .message-content {
-    padding: $base_padding + $base_margin * 2;
     spacing: 4px;
+    padding: ($base_padding*1.5);
+    margin-bottom: $base_margin*2;
   }
 
   // title
   .message-title {
     font-weight: bold;
+    /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+    padding-top: 0.57em;
   }
 
   // secondary container in title box
@@ -95,9 +116,17 @@
 
   // close button
   .message-close-button {
-    color: lighten($fg_color, 15%);
-    &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
-    &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
+    color: $fg_color;
+    background-color: transparentize($fg_color, 0.9);
+    border-radius: 99px;
+    padding: $base_padding;
+    margin: 0;
+    &:hover { 
+      background-color: transparentize($fg_color, 0.8);
+    }
+    &:active {
+      background-color: transparentize($fg_color, 0.9);
+    }
   }
 
   // body
@@ -113,30 +142,32 @@
 
 /* Media Controls */
 .message-media-control {
-  padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
-  color: darken($fg_color, 15%);
+  padding: 0 $base_padding*2;
+  margin: $base_padding*2 0;
+  border-radius: $base_border_radius;
+  color: $fg_color;
 
-  // uses $hover_bg_color since the media controls are in a notification_bubble
+  // colors are lightened since the media controls are in a notification_bubble
   &:hover {
     background-color: lighten($hover_bg_color, 5%);
     color: $fg_color;
   }
 
   &:active { 
-    background-color: darken($hover_bg_color, 2%);
+    background-color: lighten($active_bg_color, 5%);
     color: $fg_color;
   }
 
-  &:insensitive { color: darken($fg_color,40%); }
+  &:insensitive { color: lighten($insensitive_fg_color, 5%); }
   
   // fix border-radius for last button
-  &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
-  &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
+  &:last-child:ltr { margin-right: $base_margin*3; }
+  &:last-child:rtl { margin-left: $base_margin*3; }
 }
 
 // album-art
 .media-message-cover-icon {
-  icon-size: $base_icon_size*2 !important; // 48px
+  icon-size: $base_icon_size*3 !important; // 48px
   border-radius: $base_border_radius;
 
   // when there is no artwork
@@ -145,6 +176,7 @@
     background-color: $bg_color;
     border: 1px solid transparent;
     border-radius: $base_border_radius;
-    icon-size: $base_icon_size * 2 !important;
+    icon-size: $base_icon_size * 2 !important; // 32px
+    padding: ($base_padding*2 + 2); // 16px
   }
 }
diff --git a/widgets/_network-dialog.scss b/widgets/_network-dialog.scss
index 7973d22..13e5c34 100644
--- a/widgets/_network-dialog.scss
+++ b/widgets/_network-dialog.scss
@@ -23,27 +23,50 @@
 .nm-dialog-header {
   font-weight: bold;
 }
+.nm-dialog-subheader {
+  color: $insensitive_fg_color;
+}
+
 .nm-dialog-header-icon {
   icon-size: $base_icon_size * 2;
 }
 .nm-dialog-header-hbox { spacing: 10px; }
 
+// airplane mode
+.nm-dialog-airplane-headline {
+  font-weight: bold;
+}
+
+.nm-dialog-airplane-text {
+  color: $insensitive_fg_color;
+}
+
 // list of networks
 .nm-dialog-scroll-view {
-  border: 1px solid $borders_color;
-  padding:0;
+  border: none;
+  padding:$base_padding;
+  border-radius: $base_border_radius;
   background-color: darken($bg_color, 3%);
 }
 
 // list item
 .nm-dialog-item {
   @include fontsize($base_font_size);
-  border-bottom: 1px solid $borders_color;
+  border: none;
   padding: $base_padding * 2;
   spacing: 0px;
+  text-shadow: none;
+  icon-shadow: none;
+
   &:selected {
     background-color: $selected_bg_color;
     color: $selected_fg_color;
+
+    border-radius: $base_border_radius - 3px;
+  }
+
+  &:hover {
+    background-color:$hover_bg_color;
   }
 }
 
diff --git a/widgets/_notifications.scss b/widgets/_notifications.scss
index 5ff46a0..194a5a4 100644
--- a/widgets/_notifications.scss
+++ b/widgets/_notifications.scss
@@ -2,11 +2,18 @@
 
 $notification_banner_height: 64px;
 $notification_banner_width: 34em;
+$notification_banner_radius: $base_border_radius*1.5;
+
+// make radius of buttons fit in bubble corner (banner radius - width of focus ring)
+$notification_button_radius: ($notification_banner_radius - 2px);
 
 // Banner notifications
 .notification-banner {
   min-height: $notification_banner_height;
   width: $notification_banner_width;
+  box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
+  border-radius: $notification_banner_radius;
+  margin: $base_margin;
 
   .notification-actions {
     spacing: 0;
diff --git a/widgets/_panel.scss b/widgets/_panel.scss
index 1f46507..ad63e24 100644
--- a/widgets/_panel.scss
+++ b/widgets/_panel.scss
@@ -3,7 +3,7 @@
 
 $panel_corner_radius: $base_border_radius+1;
 $panel_bg_color: #000;
-$panel_fg_color: #ddd;
+$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
 $panel_height: 2.2em;
 $panel_transition_duration: 250ms; // same as the overview transition duration
 
@@ -53,8 +53,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       }
     }
 
-    &:hover, &:active, &:overview, &:focus, &:checked {
-      box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+    &:active, &:overview, &:focus, &:checked {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
 
       // The clock display needs to have the background on .clock because
       // we want to exclude the do-not-disturb indicator from the background
@@ -62,7 +62,27 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
         box-shadow: none;
 
         .clock {
-          box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
+        }
+      }
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+      &.clock-display {
+        box-shadow: none;
+        .clock {
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+        }
+      }
+    }
+    
+    &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
+      &.clock-display {
+        box-shadow: none;
+        .clock {
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
         }
       }
     }
@@ -94,14 +114,34 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   &.login-screen,
   &:overview {
     .panel-button {
-      &:hover, &:active, &:overview, &:focus, &:checked {
-        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+      &:active, &:overview, &:focus, &:checked {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
 
         &.clock-display {
           box-shadow: none;
 
           .clock {
-            box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
+          }
+        }
+      }
+
+      &:hover {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+        &.clock-display {
+          box-shadow: none;
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+          }
+        }
+      }
+      
+      &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+        &.clock-display {
+          box-shadow: none;
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
           }
         }
       }
@@ -133,3 +173,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   padding: 0 $base_padding;
   spacing: $base_spacing;
 }
+
+
+// Clock
+
+.clock-display-box {
+  spacing: 2px;
+
+  .clock {
+    padding-left: $base_padding * 2;
+    padding-right: $base_padding * 2;
+  }
+}
\ No newline at end of file
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index db9df9a..7a88e30 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -1,16 +1,15 @@
 /* Popovers/Menus */
 
-$popover_arrow_height: 12px;
-
-//.the popover itself
+// the popover itself
 .popup-menu-boxpointer {
-  -arrow-border-radius: $base_border_radius+4;
+  -arrow-border-radius: $modal_radius;
   -arrow-background-color: $bg_color;
-  -arrow-border-width: 1px;
   -arrow-border-color: $borders_color;
-  -arrow-base: $popover_arrow_height * 2;
-  -arrow-rise: $popover_arrow_height;
-  -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
+  -arrow-border-width: 1px;
+  -arrow-base: 24px;
+  -arrow-rise: 12px; 
+  -arrow-box-shadow: none; // dreaming bugzilla #689995
+  margin: $base_margin; // used as distance from the screen edge
 }
 
 // container of the popover menu
@@ -20,36 +19,74 @@ $popover_arrow_height: 12px;
 
   //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
   &.panel-menu {
-    -boxpointer-gap: $base_margin; // distance from the panel
-    margin-bottom: 1.75em;
+    -boxpointer-gap: $base_margin+2px; // distance from the panel
+    
+    // override popover styles for panel menus so
+    // we can draw a box shadow and no arrow
+    -arrow-border-radius: $modal_radius;
+    -arrow-background-color: transparent;
+    -arrow-border-color: transparent;
+    -arrow-border-width: 0;
+    -arrow-base: 0;
+    -arrow-rise: $base_margin; // use this as top margin
+    -arrow-box-shadow: none; // dreaming bugzilla #689995
+    
+    margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
+
+    // style the menu content instead
+    .popup-menu-content {
+      border-radius: $modal_radius;
+      border: 1px solid $borders_color; 
+      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+      background-color: $bg_color;
+      padding: $base_padding * 2;
+    }
+
+    .popup-menu-item {}
   }
 }
 
+// popover content;
 .popup-menu-content {
-  padding: $base_padding * 2 + $base_margin 0;
+  padding: $base_padding;
 }
 
 // menu items
 .popup-menu-item {
-  spacing: $base_padding;
-  padding: $base_padding;
+  spacing: $base_spacing;
+  padding: $base_padding*2;
+  margin: 2px 0;
+  border-radius: $base_border_radius;
+  transition: 0.2s all ease;
 
   &:ltr { padding-right:1.75em; padding-left: 0; }
   &:rtl { padding-right: 0; padding-left:1.75em; }
 
+  &:hover {
+    background-color: $hover_bg_color;
+  }
+
   &:checked {
-    background-color: lighten($bg_color, 2%);
-    box-shadow: none;
+    background-color: $hover_bg_color;
+    font-weight: bold;
+
+    margin-bottom: 0;
+    box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
+    border-radius: $base_border_radius $base_border_radius 0 0;
+    
+    &:hover {
+      background-color: darken($hover_bg_color, 4%);
+    }
   }
 
   &.selected {
-    background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
+    background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
     color: $fg_color;
   }
 
   &:active { 
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: $active_bg_color;
+    color: $active_fg_color;
   }
 
   &:insensitive { color: transparentize($fg_color,0.5);}
@@ -59,27 +96,65 @@ $popover_arrow_height: 12px;
 .popup-inactive-menu-item {
   color: $fg_color;
 
-  &:insensitive { color: transparentize($fg_color,0.5); }
+  // "Open Windows" label
+  font-weight: bold;
+  font-size: smaller;
+
+  &:insensitive { color: $insensitive_fg_color; }
 }
 
 // symbolic icons in popover
 .popup-menu-arrow,
-.popup-menu-icon { icon-size: $base_icon_size; }
+.popup-menu-icon { 
+  margin: 0;
+  padding:0;
+  icon-size: 16px !important;
+}
+
+.popup-menu-arrow {
+  margin-right: $base_margin;
+}
 
 // popover submenus
 .popup-sub-menu {
-  background-color: darken($bg_color, 3%);
-  box-shadow: none;
-  border-top: 1px solid transparentize($borders_color, 0.2);
-  border-bottom: 1px solid transparentize($borders_color, 0.2);
+  background-color: $hover_bg_color;
+  border:none;
+  border-radius: 0 0 $base_border_radius $base_border_radius;
+  padding: 0;
+  margin-top: 0;
+  &:active {
+    background-color: transparent;
+  }
+
+  
+  
+  .popup-menu-ornament {
+    min-width: 14px !important;
+  }
+
+  .popup-menu-item {
+    margin: 0;
+    border-radius: 0;
+    padding: $base_padding*1.5 $base_padding*2;
+
+    &:last-child:hover{
+      border-radius: 0 0 $base_border_radius $base_border_radius;
+    }
+  }
+
+  .popup-separator-menu-item {
+    margin: 0;
+  }
 }
 
 // container for radio and check boxes
 .popup-menu-ornament {
   width: 1.2em;
+  font-weight: bold;
+  font-size: 1em;
 
-  &:ltr { text-align: right };
-  &:rtl { text-align: left };
+  &:ltr { text-align: right; };
+  &:rtl { text-align: left; };
 }
 
 // separator
@@ -89,13 +164,13 @@ $popover_arrow_height: 12px;
   .popup-separator-menu-item-separator {
     //-margin-horizontal: 24px;
     height: 1px; //not really the whole box
-    margin: 6px 64px;
+    margin: $base_margin 4em;
     background-color: lighten($borders_color, 2%);
+
     .popup-sub-menu & { //submenu separators
-      margin: 0 64px 0 32px;
-      @if $variant == 'dark' {
-        background-color: lighten($bg_color,10%);
-      }
+      margin: 0 4em 0 3em; // balance it in the middle
+      padding:0 !important;
+      background-color: darken($hover_bg_color, 5%);
     }
   }
 }
@@ -110,6 +185,14 @@ $popover_arrow_height: 12px;
 .aggregate-menu {
   min-width: 21em;
 
+  // this is unneeded in at the top-level this menu, hide it
+  .popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;}
+
+  .popup-menu-item {
+    &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
+    &:rtl { padding-right:$base_padding;padding-left:$base_padding*2; }
+  }
+
   // lock screen, shutdown, etc. buttons
   .popup-menu-icon { 
     padding:0;
@@ -120,11 +203,11 @@ $popover_arrow_height: 12px;
   .popup-sub-menu .popup-menu-item > :first-child {
     // account for icons in submenus with padding
     &:ltr {
-      padding-left: $base_padding + $base_margin * 2; 
+      padding-left: 0;
       margin-left: $base_icon_size;
     }
     &:rtl {
-      padding-right: $base_padding + $base_margin * 2; ;
+      padding-right: 0;
       margin-right: $base_icon_size;
     }
   }
diff --git a/widgets/_search-entry.scss b/widgets/_search-entry.scss
index d3584fb..409fff0 100644
--- a/widgets/_search-entry.scss
+++ b/widgets/_search-entry.scss
@@ -5,30 +5,32 @@ $search_entry_height: 36px;
 
 %search_entry,
 .search-entry {
-  width: $search_entry_width;
-  padding: $base_padding+1 $base_padding+3;
+  background-color: lighten($bg_color, 5%);
+  border-width: 2px;
+  border-color: transparent;
   border-radius: $search_entry_height * 0.5; // half the height
   color: transparentize($fg_color,0.3);
-  background-color: $bg_color;
   margin-top: $base_spacing * 2;
   margin-bottom: $base_spacing;
-  border-width: 2px;
-  border-color: transparent;
+  padding: $base_padding+1 $base_padding+3;
+  width: $search_entry_width;
+  
   &:hover {
-    background-color: $hover_bg_color;
-    color: $hover_fg_color;
+    background-color: lighten($hover_bg_color, 5%);
+    color: lighten($hover_fg_color, 5%);
   }
 
   &:focus {
     border-style: solid;
     border-color: $selected_bg_color;
     color: $fg_color;
-    box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
+    box-shadow: none;
   }
 
   .search-entry-icon { 
+    color: inherit;
     icon-size: $base_icon_size;
+    margin-top: 2px; // center vertically
     padding: 0 4px;
-    color: inherit;
   }
 }
diff --git a/widgets/_search-results.scss b/widgets/_search-results.scss
index 0d81c97..787311a 100644
--- a/widgets/_search-results.scss
+++ b/widgets/_search-results.scss
@@ -11,31 +11,33 @@
   // This should be equal to #searchResultsContent spacing
   spacing: $base_margin * 2;
 
-  // separator
+  // separator (unstyled)
   .search-section-separator { 
-    // height: 1px;
-    // background-color: $osd_outer_borders_color;
-    height: 0;
+    height: $base_margin*2; // use it as a spacer
     background-color: transparent;
   }
 }
 
 // content
 .search-section-content {
-  background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
-  border-radius: $modal_radius+3;
+  background-color: lighten($system_bg_color, 5%);
+  border-radius: $modal_radius*1.5;
   border: 1px solid $osd_outer_borders_color;
-  box-shadow: 0 2px 4px 0 $shadow_color;
-  text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
+  box-shadow: none;
+  text-shadow: none;
   color: $osd_fg_color;
   padding: $base_padding * 3;
+  margin: $base_margin;
   // This is the space between the provider icon and the results container
-  spacing: $base_margin * 2;
 }
 
-%search-section-content-item {
+%search_section_content_item {
   @extend %icon_tile;
 
+  border-radius: $base_border_radius;
+
+  color: $osd_fg_color;
+
   &:focus,
   &:hover,
   &:selected {
@@ -60,12 +62,12 @@
 
 // Search results with icons
 .grid-search-result {
-  @extend %app-well-app;
+  @extend %app_well_app;
 }
 
 // search result provider
 .search-provider-icon {
-  @extend %search-section-content-item;
+  @extend %search_section_content_item;
 
   // content
   .list-search-provider-content {
@@ -74,9 +76,7 @@
     // provider labels
     .list-search-provider-details {
       width: 120px;
-      margin-top: 0;
-      color: darken($osd_fg_color, 8%);
-      // font-weight: bold;
+      color: $osd_fg_color;
     }
   }
 }
@@ -88,7 +88,7 @@
 
 // search result listitem
 .list-search-result {
-  @extend %search-section-content-item;
+  @extend %search_section_content_item;
 
   // content
   .list-search-result-content {
@@ -103,6 +103,6 @@
 
   // list item description
   .list-search-result-description {
-    color: darken($osd_fg_color, 30%);
+    color: $osd_insensitive_fg_color;
   }
 }
diff --git a/widgets/_slider.scss b/widgets/_slider.scss
index f21d62e..8f6c49e 100644
--- a/widgets/_slider.scss
+++ b/widgets/_slider.scss
@@ -1,27 +1,28 @@
 /* Slider */
 
-$slider_size: 15px;
+$slider_size: 16px;
 
 .slider {
   height: $slider_size;
   // slider trough
-  -barlevel-height: 3px; // has to be an odd number
-  -barlevel-background-color: $borders_color; //background of the trough
-  -barlevel-border-width: 1px; 
-  -barlevel-border-color: $borders_color; // trough border color
+  -barlevel-height: 4px;
+  -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), 
transparentize($fg_color, 0.8)); //background of the trough
+  -barlevel-border-width: 2px; 
+  -barlevel-border-color: transparent; // trough border color
   // fill style
-  -barlevel-active-background-color: $selected_bg_color; //active trough fill
-  -barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), 
lighten($selected_bg_color, 2%)); //active trough border
+  -barlevel-active-background-color: $selected_bg_color;
+  -barlevel-active-border-color: transparent;
   // overfill style (red in this case)
   -barlevel-overdrive-color: $destructive_color;
-  -barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), 
lighten($destructive_color, 2%)); //trough border when red;
+  -barlevel-overdrive-border-color: transparent; //trough border when red;
   -barlevel-overdrive-separator-width:1px;
   // slider handler
   -slider-handle-radius: $slider_size * 0.5; // half the size of the size
-  -slider-handle-border-width: 1px;
-  -slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
+  -slider-handle-border-width: 0;
+  -slider-handle-border-color: transparent; // because 0 width
+  margin: 0 $base_padding;
 
-  color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
+  color: $fg_color;
   &:hover { color: $hover_bg_color; }
   &:active { color: $active_bg_color; }
 }
\ No newline at end of file
diff --git a/widgets/_switcher-popup.scss b/widgets/_switcher-popup.scss
index 32cbbe5..8335b05 100644
--- a/widgets/_switcher-popup.scss
+++ b/widgets/_switcher-popup.scss
@@ -1,37 +1,51 @@
 /* App Switcher */
 
+// same as dash
+$switcher_padding: $base_padding + 4px; // 10px
+$switcher_border_radius: $modal_radius + 8px;
+
+
+// the full screen container of the switcher
 .switcher-popup {
-  padding: 8px;
+  padding: 0;
   spacing: $base_spacing * 4;
 }
 
 // switcher onscreen panel
 .switcher-list {
   @extend %osd_panel;
+  padding: $switcher_padding;
+  border-radius: $switcher_border_radius;
+  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
+
+  // container for items in list
+  .switcher-list-item-container {
+    spacing: $base_spacing * 2;
+  }
 
+  // each item in the list
   .item-box {
-    padding: 8px;
-    border-radius: $base_border_radius + 1px;
-    border: 1px solid transparent;
+    @extend %icon_tile;
 
     &:outlined {
       background-color: transparentize($osd_fg_color, 0.7);
     }
 
+    &:hover,
     &:selected {
-      background-color: transparentize($osd_fg_color, 0.7);
-      color: $osd_fg_color;
+      background-color: transparentize($osd_fg_color, .9);
     }
-  }
 
-  // window thumbnails
-  .thumbnail-box {
-    padding: 2px;
-    spacing: $base_spacing;
-  }
+    &:focus {
+      background-color: transparentize($osd_fg_color, .7);
+      // border-color: $selected_bg_color;
+    }
 
-  .thumbnail {
-    width: 256px;
+    &:focus,
+    &:active,
+    &:checked {
+      background-color: transparentize(darken($osd_bg_color, 10%), .5);
+    }
   }
 
   .separator {
@@ -39,16 +53,27 @@
     background: $borders_color;
   }
 
-  .switcher-list-item-container {
-    spacing: $base_spacing * 2;
+  // container of thumbnails
+  .thumbnail-box {
+    padding: 2px;
+    spacing: $base_spacing;
+  }
+
+  // window thumbnail itself
+  .thumbnail {
+    width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js
+    border-radius:$base_border_radius;
   }
 }
 
+// arrow if app has multiple windows
 .switcher-arrow {
-  border-color: rgba(0,0,0,0);
-  color: transparentize($fg_color,0.2);
+  border-color: transparentize($osd_fg_color, 0.2);
+  color: transparentize($osd_fg_color, 0.2);
+
   &:highlighted {
-    color: $fg_color;
+    border-color: $osd_fg_color;
+    color: $osd_fg_color;
   }
 }
 
diff --git a/widgets/_switches.scss b/widgets/_switches.scss
index fd7472e..30a0f0d 100644
--- a/widgets/_switches.scss
+++ b/widgets/_switches.scss
@@ -1,8 +1,8 @@
 /* Switches */
 
 // these are equal to the size of the SVG assets
-$switch_height: 22px;
-$switch_width: 46px;
+$switch_height: 26px;
+$switch_width: 48px;
 
 .toggle-switch {
   color: $fg_color;
diff --git a/widgets/_workspace-switcher.scss b/widgets/_workspace-switcher.scss
index 5b15a30..69cf414 100644
--- a/widgets/_workspace-switcher.scss
+++ b/widgets/_workspace-switcher.scss
@@ -1,17 +1,23 @@
 /* Workspace Switcher */
+
+$ws_padding: $base_padding*2;
+$ws_border_radius: $modal_radius + 8px;
+
 .workspace-switcher-group {
   padding: $base_padding * 2;
 }
 
 .workspace-switcher-container {
   @extend %osd_panel;
+  padding: $ws_padding;
+  border-radius: $ws_border_radius;
+  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
 }
 
 .workspace-switcher {
   background: transparent;
   border: none;
   border-radius: 0;
-  padding: 0;
   spacing: $base_spacing * 2;
 }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]