gnome-shell theme improvements and some osd redesign

4 files changed, 478 insertions, 388 deletions

diff --git a/common/gnome-shell/3.16/sass/_colors.scss b/common/gnome-shell/3.16/sass/_colors.scss
index ee3049c..9c51858 100644
--- a/common/gnome-shell/3.16/sass/_colors.scss
+++ b/common/gnome-shell/3.16/sass/_colors.scss
@@ -2,57 +2,89 @@
 // it gets @if ed depending on $variant
 
 
-$base_color: #ffffff;
-$text_color: #5c616c;
-$bg_color: #f9fafb;
-$fg_color: #5c616c;
+$base_color: if($variant =='light', #ffffff, #383C45);
+$text_color: if($variant == 'light', #5c616c, #D3DAE3);
+$bg_color: if($variant =='light', #F5F6F7, #444852);
+$fg_color: if($variant =='light', #5c616c, #D3DAE3);
 
 $selected_fg_color: #ffffff;
 $selected_bg_color: #5294E2;
 $selected_borders_color: darken($selected_bg_color, 20%);
-$borders_color: darken($bg_color,9%);
+$borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,10%));
 
-$link_color: darken($selected_bg_color,10%);
-$link_visited_color: darken($selected_bg_color,20%);
+$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%));
 
-$selection_mode_bg: rgba(36, 80, 130, 0.95);
+$selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color);
 $warning_color: #F27835;
 $error_color: #FC4138;
 $success_color: #73d216;
 $destructive_color: #F04A50;
-$suggested_color: #9EA4B5;
+$suggested_color: #4DADD4;
 
-$osd_fg_color: #A8ADB5;
-$osd_bg_color: transparentize(#3c4049, 0.05);
-$osd_button_bg: darken($osd_bg_color, 3%);
+//insensitive state derived colors
+$insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55));
+$insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
+
+
+$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%));
+$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%));
+
+$button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%));
+$button_border: $entry_border;
+
+$header_bg: red;
+@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); }
+@if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; }
+@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343b, 0.03); }
+@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343b; }
+
+$header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%));
+
+$header_border: if($variant == 'light', darken($header_bg, 7%), darken($header_bg, 5%));
+
+$header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%));
+$header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg);
+
+$dark_sidebar_bg: if($transparency == 'true', transparentize(#3c4049, 0.05), #3c4049);
+$dark_sidebar_fg: #BAC3CF;
+$dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 10%));
+
+$osd_fg_color: $dark_sidebar_fg;
+$osd_bg_color: darken($dark_sidebar_bg, 8%);
 
 $osd_insensitive_bg_color: darken($osd_bg_color, 3%);
 $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%);
 $osd_borders_color: transparentize(black, 0.3);
 
+$panel_bg: darken($osd_bg_color, 4.7%);
+$panel_fg: $osd_fg_color;
 
-$tooltip_bg: $osd_bg_color;
-$tooltip_fg: #edf5fb;
-$tooltip_borders_color: transparentize(white, 0.9);
+//WM Buttons
 
-//insensitive state derived colors
-$insensitive_fg_color: transparentize($fg_color, 0.45);
-$insensitive_bg_color: mix($bg_color, $base_color, 40%);
+// Close
+$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f37076, #e45e65);
+$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f79da1, #f48085);
+$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #ef4048, #e6262f);
 
+$wm_icon_close_bg: $selected_fg_color;
+$wm_icon_close_hover_bg: $selected_fg_color;
+$wm_icon_close_active_bg: $selected_fg_color;
 
-$entry_bg: $base_color;
-$entry_border: #cfd6e6;
-$entry_focus_border: $selected_bg_color;
-
-$button_bg: lighten($bg_color, 1%);
-$button_border: $entry_border;
-
-$header_bg: transparentize(#e7e8eb, 0.05);
-$header_fg: saturate(transparentize($fg_color, 0.2), 10%);
+// Minimize, Maximize
+$wm_button_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #272c32);
+$wm_button_unfocused_bg: if($variant == 'light' and $darker == 'false', #f6f7f8, #2a3035);
+$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #272c32);
+$wm_button_active_bg: $selected_bg_color;
 
-$dark_sidebar_bg: $osd_bg_color;
-$dark_sidebar_fg: $osd_fg_color;
-$dark_sidebar_border: $dark_sidebar_bg;
+$wm_button_border: if($variant == 'light' and $darker == 'false', #d8dae0, #191C21);
+$wm_button_unfocused_border: if($variant == 'light' and $darker == 'false', #dddee2, #1F2328);
+$wm_button_hover_border: $selected_bg_color;
+$wm_button_active_border: $selected_bg_color;
 
-$panel_bg: darken($dark_sidebar_bg, 10%);
-$panel_fg: $dark_sidebar_fg;
+$wm_icon_bg: if($variant == 'light' and $darker == 'false', #8d93a4, #939ca8);
+$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #b8bcc7, #686f78);
+$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #70788d, #afb8c5);
+$wm_icon_active_bg: $selected_fg_color;
diff --git a/common/gnome-shell/3.16/sass/_common.scss b/common/gnome-shell/3.16/sass/_common.scss
index b55a299..4f72cbe 100644
--- a/common/gnome-shell/3.16/sass/_common.scss
+++ b/common/gnome-shell/3.16/sass/_common.scss
@@ -1,6 +1,7 @@
 //This is the RIGHT PLACE to edit the stylesheet
 
 $panel-corner-radius: 0px;
+$asset_path: if($variant == 'dark', dark-assets, light-assets);
 
 /* Copyright 2009, 2015 Red Hat, Inc.
  *
@@ -25,7 +26,7 @@ $panel-corner-radius: 0px;
 // Globals
 //
 $font-size: 9;
-$font-family: Cantarell, Sans-Serif;
+$font-family: Futura Bk bt, Cantarell, Sans-Serif;
 $_bubble_bg_color: opacify($osd_bg_color,0.25);
 $_bubble_fg_color: $osd_fg_color;
 $_bubble_borders_color: transparentize($osd_fg_color,0.8);
@@ -55,16 +56,21 @@ stage {
   @include button(normal);
 
   &:focus { @include button(focus); }
-
   &:hover { @include button(hover); }
-
   &:hover:focus { @include button(focus-hover); }
-
   &:active, &:active:focus { @include button(active); }
-
   &:insensitive { @include button(insensitive); }
 }
 
+%osd_button {
+  @include button(osd);
+
+  &:hover { @include button(osd-hover); }
+  &:focus { color: $selected_bg_color; }
+  &:active { @include button(osd-active); }
+  &:insensitive { @include button(osd-insensitive); }
+}
+
 //
 // Entries
 //
@@ -79,7 +85,6 @@ StEntry {
   @include entry(normal);
 
   &:focus, &:hover { @include entry(focus); }
-
   &:insensitive { @include entry(insensitive); }
 
   StIcon.capslock-warning {
@@ -151,28 +156,28 @@ StScrollBar {
   StBin {
     width: 16px;
     height: 16px;
-    background-image: url("checkbox/checkbox-unchecked.svg");
+    background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg");
   }
 
-  &:focus StBin { background-image: url("checkbox/checkbox-unchecked-focused.svg"); }
+  &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); }
 
-  &:checked StBin { background-image: url("checkbox/checkbox-checked.svg"); }
+  &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); }
 
-  &:focus:checked StBin { background-image: url("checkbox/checkbox-checked-focused.svg"); }
+  &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); }
 }
 
 //
 // Switches
 //
 .toggle-switch {
-  width: 52px;
-  height: 24px;
+  width: 50px;
+  height: 20px;
   background-size: contain;
 
   &-us, &-intl {
-    background-image: url("switch/switch-off.svg");
+    background-image: url("#{$asset_path}/switch/switch-off.svg");
 
-    &:checked { background-image: url("switch/switch-on.svg"); }
+    &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); }
   }
 }
 
@@ -193,35 +198,34 @@ StScrollBar {
 .flashspot { background-color: white; }
 
 .modal-dialog {
-  border-radius: 3px;
   color: $fg_color;
   background-color: transparentize($bg_color, 1);
   border: none;
-  border-image: url("misc/modal.svg") 10 10 10 10;
-  padding: 0 6px 6px 6px;
+  border-image: url("#{$asset_path}/misc/modal.svg") 9 9 9 67;
+  padding: 0 5px 6px 5px;
 
-  > * { padding: 14px; }
+  > StBoxLayout:first-child {
+    padding: 20px 10px 10px 10px;
+  }
 
   &-button-box {
-    spacing: 0px;
+    spacing: 0;
     margin: 0px;
-    padding: 12px 24px;
-    background-color: opacify($osd_bg_color, 1);
-    border: solid 0px rgba(0,0,0,0.3);
-    border-top: 1px;
-    border-radius: 0px 0px 1px 1px;
+    padding: 14px 10px;
+    background: none;
+    border: none;
+    border-image: url("common-assets/misc/button-box.svg") 9 9 9 9;
 
     .button {
-      @include button(osd);
+      padding-top: 0;
+      padding-bottom: 0;
+      height: 30px;
 
-      &:hover { @include button(osd-hover); }
-      &:focus { color: $selected_bg_color; }
-      &:active { @include button(osd-active); }
-      &:insensitive { @include button(osd-insensitive); }
+      @extend %osd_button;
     }
   }
 
-  .run-dialog-entry { width: 23em; }
+  .run-dialog-entry { width: 21em; }
   .run-dialog-error-box {
     padding-top: 5px;
     spacing: 5px;
@@ -229,10 +233,7 @@ StScrollBar {
 
   //.run-dialog-button-box { padding-top: 1em; }
   .run-dialog-label {
-    @include fontsize($font-size * 1.1);
-    font-weight: normal;
-    color: $fg_color;
-    padding-bottom: .8em;
+    font-size: 0;
   }
 }
 
@@ -505,13 +506,13 @@ StScrollBar {
 .popup-menu {
   min-width: 200px;
   color: $fg_color;
-  border-image: url("menu/menu.svg") 10 10 35 14;
+  border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9;
 
   .popup-menu-arrow { } //defined globally in the TOP BAR
   .popup-sub-menu {
     background: none;
     box-shadow: none;
-    border-image: url("menu/submenu.svg") 8 8 2 2;
+    border-image: url("#{$asset_path}/menu/submenu.svg") 9 9 9 9;
   }
 
   .popup-menu-content { padding: 1em 0em 1em 0em; }
@@ -524,14 +525,13 @@ StScrollBar {
     &:checked {
       background: none;
       box-shadow: none;
-      font-weight: normal;
-      border-image: url("menu/submenu-open.svg") 8 8 2 2;
+      border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9;
     }
 
     &:active, &.selected {
       color: $fg_color;
       background-color: transparent;
-      border-image: url("menu/menu-hover.svg") 7 7 1 1;
+      border-image: url("#{$asset_path}/menu/menu-hover.svg") 9 9 1 1;
     }
 
     &:insensitive {
@@ -569,9 +569,9 @@ StScrollBar {
 
 .candidate-popup-boxpointer {
   -arrow-border-radius: 2px;
-  -arrow-background-color: $panel_bg;
+  -arrow-background-color: $osd_bg_color;
   -arrow-border-width: 1px;
-  -arrow-border-color: darken($panel_bg, 7%);
+  -arrow-border-color: transparentize(black, 0.6);
   -arrow-base: 5;
   -arrow-rise: 5;
 }
@@ -582,7 +582,7 @@ StScrollBar {
   margin: 10px 0px;
   background-color: transparent;
   border: none;
-	border-image: url("menu/menu-separator.svg") 1 1 1 1;
+	border-image: url("common-assets/menu-separator.svg") 1 1 1 1;
 }
 
 // Background menu
@@ -609,7 +609,7 @@ StScrollBar {
   background: none;
   border: none;
   border-radius: 5px;
-	border-image: url("misc/osd.svg") 10 10 9 11;
+	border-image: url("common-assets/misc/osd.svg") 9 9 9 9;
 
 .osd-monitor-label { font-size: 3em; }
 
@@ -627,7 +627,7 @@ StScrollBar {
   background: none;
   border: none;
   border-radius: 5px;
-	border-image: url("misc/osd.svg") 10 10 9 11;
+	border-image: url("common-assets/misc/osd.svg") 9 9 9 9;
   padding: 12px;
 }
 
@@ -642,7 +642,7 @@ StScrollBar {
 .switcher-list {
   background: none;
   border: none;
-  border-image: url("misc/bg.svg") 10 10 35 14;
+  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
   border-radius: 3px;
   padding: 20px;
 
@@ -709,7 +709,7 @@ StScrollBar {
   &-group { padding: 12px; }
 
   &-container {
-    border-image: url("misc/bg.svg") 10 10 35 14;
+    border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
     border-radius: 3px;
     padding: 20px;
     padding-bottom: 24px;
@@ -725,11 +725,11 @@ StScrollBar {
 }
 
 .ws-switcher-active-up {
-  background-image: url("misc/ws-switch-arrow-up.png");
+  background-image: url("common-assets/misc/ws-switch-arrow-up.png");
 }
 
 .ws-switcher-active-down {
-  background-image: url("misc/ws-switch-arrow-down.png");
+  background-image: url("common-assets/misc/ws-switch-arrow-down.png");
 }
 
 .ws-switcher-box {
@@ -763,12 +763,10 @@ StScrollBar {
 // Top Bar
 //
 #panel {
-  background-color: $panel_bg;
-  border-color: darken($panel_bg, 9%);
-  border-bottom-width: 1px;
   font-weight: bold;
   height: 2.1em;
-  min-height: 26px;
+  min-height: 27px;
+  border-image: url('common-assets/panel/panel.svg') 1 1 1 1;
 
   &.unlock-screen,
   &.login-screen,
@@ -777,7 +775,7 @@ StScrollBar {
     border-image: none;
   }
 
-  &:overview { background-color: transparentize(darken($panel_bg,10%), 0.15); }
+  &:overview { border-image: url('common-assets/panel/panel-overview.svg') 1 1 1 1; }
 
   #panelLeft, #panelCenter { // spacing between activities<>app menu and such
     spacing: 8px;
@@ -801,33 +799,39 @@ StScrollBar {
   }
 
   .panel-button {
-    -natural-hpadding: 12px;
+    -natural-hpadding: 10px;
     -minimum-hpadding: 6px;
     font-weight: bold;
     color: $selected_fg_color;
     transition-duration: 100ms;
+    border-bottom-width: 1px;
+    border-color: transparent;
 
     .app-menu-icon {
       width: 0;
       height: 0;
-      margin-left: 4px;
-      margin-right: 4px;
+      margin-left: 0px;
+      margin-right: 0px;
     }
 
     &:hover {
       color: $selected_fg_color;
       background-color: transparentize(black, 0.83);
+      border-bottom-width: 1px;
+      border-color: transparent;
     }
 
     &:active, &:overview, &:focus, &:checked {
       color: $selected_fg_color;
       background-color: $selected_bg_color;
       box-shadow: none;
+      border-bottom-width: 1px;
+      border-color: black;
 
       & > .system-status-icon { icon-shadow: none; }
     }
 
-    .system-status-icon { icon-size: 16px; padding: 0 8px; }
+    .system-status-icon { icon-size: 16px; padding: 0 4px; }
     .unlock-screen &,
     .login-screen &,
     .lock-screen & {
@@ -836,23 +840,28 @@ StScrollBar {
     }
   }
 
+    #panelActivities.panel-button { -natural-hpadding: 12px; }
+
   .panel-status-indicators-box,
   .panel-status-menu-box {
     spacing: 2px;
   }
 
-  .screencast-indicator { color: red; }
+  .screencast-indicator { color: $error_color; }
+
+  .clock-display > * > *:last-child {
+    color: $selected_bg_color;
+    margin-left: .3em;
+  }
+
+  .popup-menu-arrow { width: 0; }
 }
 
 // Activities button
-#panelActivities > *,
-#panelActivities:hover > *,
-#panelActivities:focus > *,
-#panelActivities:active > *,
-#panelActivities:overview > *,
-#panel:overview #panelActivities.panel-button:active > *,
-#panel:overview #panelActivities.panel-button:focus > * {
-    background-image: url("misc/activities.svg");
+#panel #panelActivities.panel-button {
+
+  > * {
+    background-image: url("common-assets/panel/activities.svg");
     background-position: center top;
     width: 24px;
     height: 24px;
@@ -863,48 +872,59 @@ StScrollBar {
     transition-duration: 0ms !important;
     box-shadow: none !important;
     color: transparent;
-}
+  }
 
-  // a little unstructured mess:
+  &:active, &:overview, &:focus, &:checked {
+    background-color: transparent;
+    box-shadow: none;
+    border-bottom-width: 1px;
+    border-color: transparent;
 
-  .system-switch-user-submenu-icon {
-    icon-size: 24px;
-    border: 1px solid transparentize($fg_color,0.6);
+    > * { background-image: url("common-assets/panel/activities-active.svg"); }
   }
+}
 
-  #appMenu {
-    spinner-image: url("misc/process-working.svg");
-    spacing: 4px;
+// a little unstructured mess:
 
-    .label-shadow { color: transparent; }
-  }
+.system-switch-user-submenu-icon {
+  icon-size: 24px;
+  border: 1px solid transparentize($fg_color,0.6);
+}
 
-  .aggregate-menu {
-    width: 360px;
-    .popup-menu-icon { padding: 0 4px; }
-  }
+#appMenu {
+  spinner-image: url("common-assets/misc/process-working.svg");
+  spacing: 4px;
+  padding: 0 8px;
 
-  .system-menu-action {
-    padding: 13px;
-    color: $fg_color;
-    border-radius: 32px; /* wish we could do 50% */
-    border: 1px solid transparent;
+  .label-shadow { color: transparent; }
+}
 
-    &:hover, &:focus {
-      transition-duration: 100ms;
-      padding: 13px;
-      color: $fg_color;
-      background-color: transparent;
-      border: 1px solid $selected_bg_color;
-    }
-    &:active {
-      color: $selected_fg_color;
-      background-color: $selected_bg_color;
-      border: 1px solid $selected_bg_color;
-    }
+.aggregate-menu {
+  width: 360px;
+  .popup-menu-icon { padding: 0 4px; }
+}
+
+.system-menu-action {
+  padding: 13px;
+  color: $fg_color;
+  border-radius: 32px; /* wish we could do 50% */
+  border: 1px solid transparent;
 
-    & > StIcon { icon-size: 16px; }
+  &:hover, &:focus {
+    transition-duration: 100ms;
+    padding: 13px;
+    color: $fg_color;
+    background-color: transparent;
+    border: 1px solid $selected_bg_color;
   }
+  &:active {
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+    border: 1px solid $selected_bg_color;
+  }
+
+  & > StIcon { icon-size: 16px; }
+}
 
 //
 // Calendar popover
@@ -948,13 +968,8 @@ StScrollBar {
   padding: 7px 10px 7px 10px;
   border: 1px solid transparentize($base_color, 1);
 
-  &:hover, &:focus {
-    @include button(hover);
-  }
-
-  &:active {
-    @include button(active);
-  }
+  &:hover, &:focus { @include button(hover); }
+  &:active { @include button(active); }
 }
 
 .datemenu-today-button .day-label {
@@ -996,35 +1011,35 @@ StScrollBar {
 
 //arrow back
 .calendar-change-month-back {
-  background-image: url("misc/calendar-arrow-left.svg");
+  background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg");
 
-  &:focus, &:hover { background-image: url("misc/calendar-arrow-left-hover.svg"); }
+  &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); }
 
-  &:active { background-image: url("misc/calendar-arrow-left.svg"); }
+  &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); }
 
   &:rtl {
-    background-image: url("misc/calendar-arrow-right.svg");
+    background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg");
 
-    &:focus, &:hover { background-image: url("misc/calendar-arrow-right-hover.svg"); }
+    &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); }
 
-    &:active { background-image: url("misc/calendar-arrow-right.svg"); }
+    &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); }
   }
 }
 
 //arrow forward
 .calendar-change-month-forward {
-  background-image: url("misc/calendar-arrow-right.svg");
+  background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg");
 
-  &:focus, &:hover { background-image: url("misc/calendar-arrow-right-hover.svg"); }
+  &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); }
 
-  &:active { background-image: url("misc/calendar-arrow-right.svg"); }
+  &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); }
 
   &:rtl {
-    background-image: url("misc/calendar-arrow-left.svg");
+    background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg");
 
-    &:focus, &:hover { background-image: url("misc/calendar-arrow-left-hover.svg"); }
+    &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); }
 
-    &:active { background-image: url("misc/calendar-arrow-left.svg"); }
+    &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); }
   }
 }
 
@@ -1060,9 +1075,7 @@ StScrollBar {
 
 .calendar-day-left { border-left-width: 0; }
 
-.calendar-work-day {
-
-}
+.calendar-work-day {}
 
 .calendar-nonwork-day {
   color: $fg_color;
@@ -1096,82 +1109,74 @@ StScrollBar {
 //
 .message-list {
   width: 420px;
-}
 
-.message-list-sections {
-  spacing: 1.5em;
-}
+  &-sections { spacing: 1.5em; }
 
-.message-list-section,
-.message-list-section-list {
-  spacing: 0.7em;
-}
+  &-section,
+  &-section-list { spacing: 0.7em; }
 
-.message-list-section-title-box {
-  spacing: 0.4em;
-}
+  &-section-list-title-box { spacing: 0.4em; }
 
-.message-list-section-close > StIcon {
-  icon-size: 16px;
-  border-radius: 8px;
-  color: $selected_fg_color; 
-  background-color: transparentize($fg_color, 0.5);
-}
+  &-placeholder {
+    StIcon { width: 0; height: 0; }
+    StLabel { color: $insensitive_fg_color; }
+  }
 
-.message-list-section-close:hover > StIcon,
-.message-list-section-close:focus > StIcon {
-  color: $selected_fg_color; 
-  background-color: $fg_color;
-}
+  &-section-close {
 
-.message-list-section-close:active > StIcon {
-  color: $selected_fg_color; 
-  background-color: $selected_bg_color;
+    > StIcon {
+      icon-size: 18px;
+      border-radius: 0px;
+      color: transparent; 
+      background-color: transparent;
+      background-image: url('#{$asset_path}/misc/message-close.svg');
+    }
+    &:hover > StIcon {
+      color: transparent; 
+      background-color: transparent;
+      background-image: url('#{$asset_path}/misc/message-close-hover.svg');
+    }
+    &:active > StIcon {
+      color: transparent; 
+      background-color: transparent;
+      background-image: url('#{$asset_path}/misc/message-close-active.svg');
+    }
+
+  }
 }
 
 .message {
   padding: 4px;
   color: $fg_color;
-  background-color: $button_bg;
-  border: 1px solid $button_border;
+  border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9;
 
   &:hover, &:focus {
     color: $fg_color;
-    background-color: $button_bg;
-    border: 1px solid $selected_bg_color;
+    border-image: url("#{$asset_path}/misc/message-hover.svg") 9 9 9 9;
   }
 
   &:active {
     color: $selected_fg_color;
-    background-color: $selected_bg_color;
-    border: 1px solid $selected_bg_color;
+    border-image: url("#{$asset_path}/misc/message-active.svg") 9 9 9 9;
   }
-}
 
-.message-icon-bin {
-  padding: 8px 0px 8px 8px;
+  &-icon-bin {
+    padding: 8px 0px 8px 8px;
 
-  &:rtl { padding: 8px 8px 8px 0px; }
-}
+    &:rtl { padding: 8px 8px 8px 0px; }
 
-.message-icon-bin > StIcon {
-  icon-size: 48px;
-}
+    > StIcon { icon-size: 48px; }
+  }
 
-.message-secondary-bin {
-  color: transparentize($fg_color, 0.6);
-}
+  &-secondary-bin { color: transparentize($fg_color, 0.6); }
+  &-secondary-bin > StIcon { icon-size: 16px; }
 
-.message-secondary-bin > StIcon {
-  icon-size: 16px;
-}
+  &-title {
+    font-weight: bold;
+    padding: 2px 0 2px 0;
+  }
 
-.message-title {
-  font-weight: bold;
-  padding: 2px 0 2px 0;
-}
-.message-content {
-  padding: 8px;
+  &-content { padding: 8px; }
 }
 
 
@@ -1181,10 +1186,10 @@ StScrollBar {
 .ripple-box {
   width: 52px;
   height: 52px;
-  background-image: url("misc/corner-ripple-ltr.svg");
+  background-image: url("common-assets/misc/corner-ripple-ltr.svg");
   background-size: contain;
 
-  &:rtl { background-image: url("misc/corner-ripple-rtl.svg"); }
+  &:rtl { background-image: url("common-assets/misc/corner-ripple-rtl.svg"); }
 }
 
 // not really top bar only
@@ -1196,13 +1201,13 @@ StScrollBar {
 //Close buttons
 //
 .window-close {
-  background-image: url("misc/close.svg");
+  background-image: url("common-assets/misc/close.svg");
   background-size: 26px;
   height: 26px;
   width: 26px;
 
   &:hover {
-    background-image: url("misc/close-hover.svg");
+    background-image: url("common-assets/misc/close-hover.svg");
     background-size: 26px;
     height: 26px;
     width: 26px;
@@ -1380,7 +1385,7 @@ StScrollBar {
 .search-provider-icon-more {
   width: 16px;
   height: 16px;
-  background-image: url("misc/more-results.svg");
+  background-image: url("common-assets/misc/more-results.svg");
 }
 
 //
@@ -1389,29 +1394,34 @@ StScrollBar {
 #dash {
   font-size: 1em;
   color: $osd_fg_color;
-  background-color: transparentize($panel_bg, 0.08);
-  padding: 6px 0px 6px 0px;
-  border-color: transparentize(darken($panel_bg, 9%), 0.08);
-  border-radius: 0px 3px 3px 0px;
+  background-color: transparent;
+  border: none;
+  padding: 6px 1px 6px 0px;
+  border-image: url('common-assets/dash/dash-left.svg') 3 3 3 3;
+
+  .extended.left & { border-image: url('common-assets/dash/dash-extended-left.svg') 3 3 3 3; }
 
   .right &,
   &:rtl {
-    padding: 6px 0px 6px 0px;
-    border-radius: 3px 0 0 3px;
+    padding: 6px 0px 6px 1px;
+    border-image: url('common-assets/dash/dash-right.svg') 3 3 3 3;
   }
+  .extended.right & { border-image: url('common-assets/dash/dash-extended-right.svg') 3 3 3 3; }
 
   .bottom & {
-    padding: 0px 6px 0px 6px;
-    border-radius: 3px 3px 0 0;
+    padding: 1px 6px 0px 6px;
+    border-image: url('common-assets/dash/dash-bottom.svg') 3 3 3 3;
   }
+  .extended.bottom & { border-image: url('common-assets/dash/dash-extended-bottom.svg') 3 3 3 3; }
 
   .top & {
-    padding: 0px 6px 0px 6px;
-    border-radius: 0 0 3px 3px;
+    padding: 0px 6px 1px 6px;
+    border-image: url('common-assets/dash/dash-top.svg') 3 3 3 3;
   }
+  .extended.top & { border-image: url('common-assets/dash/dash-extended-top.svg') 3 3 3 3; }
 
   .placeholder {
-    background-image: url("dash/dash-placeholder.svg");
+    background-image: url("common-assets/dash/dash-placeholder.svg");
     background-size: contain;
     height: 24px;
   }
@@ -1478,6 +1488,20 @@ StScrollBar {
   }
 }
 
+#dashtodockContainer {
+  .app-well-app-running-dot {
+    background: none;
+    width: 28px;
+    height: 4px;
+  }
+
+  @each $var in 1, 2, 3, 4 {
+    .running#{$var} .app-well-app-running-dot {
+      background-image: url("common-assets/dash/running#{$var}.svg");
+    }
+  }
+}
+
 .show-apps {
 
   .overview-icon {
@@ -1523,28 +1547,22 @@ StScrollBar {
 .app-view-control {
   padding: 4px 32px;
 
-  color: transparentize($selected_fg_color, 0.2);
-  background-color: transparentize(darken($panel_bg,10%), 0.15);
-  border-color: transparentize($osd_fg_color, 0.7);
+  background-color: $osd_bg_color;
+  color: $osd_fg_color;
+  border-color: rgba(0,0,0,0.7);
 
   &:hover {
-    color: $selected_fg_color;
-    background-color: transparentize(darken($panel_bg,10%), 0.15);
+    background-color: $osd_bg_color;
+    color: $osd_fg_color;
     border-color: $selected_bg_color;
   }
   &:checked { @include button(osd-active); }
 
-  &:first-child:ltr, &:last-child:rtl {
-    border-radius: 2px 0 0 2px;
+  &:first-child:ltr,
+  &:last-child:rtl { border-radius: 2px 0 0 2px; }
 
-
-    &:hover {  }
-  }
-  &:last-child:ltr, &:first-child:rtl {
-    border-radius: 0 2px 2px 0;
-
-    &:hover {  }
-  }
+  &:last-child:ltr,
+  &:first-child:rtl { border-radius: 0 2px 2px 0; }
 }
 
 //
@@ -1563,7 +1581,6 @@ StScrollBar {
 }
 .app-well-app,
 .app-well-app.app-folder,
-//.show-apps,
 .grid-search-result {
 
   .overview-icon {
@@ -1628,11 +1645,12 @@ StScrollBar {
 
 .app-folder-popup { //expanded collection
   -arrow-border-radius: 2px;
-  -arrow-background-color: transparentize(darken($panel_bg,10%), 0.15);
-  -arrow-border-color: transparentize($osd_fg_color, 0.7);
-  -arrow-border-width: 1px;
-  -arrow-base: 5;
-  -arrow-rise: 5;
+  -arrow-background-color: transparent;
+  -arrow-border-color: transparent;
+  -arrow-border-width: 0;
+  -arrow-base: 0;
+  -arrow-rise: 0;
+  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
 }
 .app-folder-popup-bin { padding: 5px; }
 .app-folder-icon {
@@ -1647,13 +1665,13 @@ StScrollBar {
   .page-indicator-icon {
     width: 18px;
     height: 18px;
-    background-image: url(misc/page-indicator-inactive.svg);
+    background-image: url(common-assets/misc/page-indicator-inactive.svg);
   }
 
-  &:hover .page-indicator-icon { background-image: url(misc/page-indicator-hover.svg); }
-  &:active .page-indicator-icon { background-image: url(misc/page-indicator-active.svg); }
+  &:hover .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-hover.svg); }
+  &:active .page-indicator-icon { background-image: url(common-assets/misc/page-indicator-active.svg); }
   &:checked .page-indicator-icon,
-  &:checked:active { background-image: url(misc/page-indicator-checked.svg); }
+  &:checked:active { background-image: url(common-assets/misc/page-indicator-checked.svg); }
 }
 
 .no-frequent-applications-label { @extend %status_text; }
@@ -1672,14 +1690,12 @@ StScrollBar {
   spacing: 11px;
   padding: 12px;
   padding-right: 7px;
-  border-radius: 3px 0 0 3px;
-  background-color: transparentize($panel_bg, 0.08);
-  border-color: transparentize(darken($panel_bg, 9%), 0.08);
+  border-image: url("common-assets/dash/dash-right.svg") 9 9 9 9;
 
   &:rtl {
     padding: 12px;
     padding-left: 7px;
-    border-radius: 0 3px 3px 0;
+    border-image: url("common-assets/dash/dash-left.svg") 9 9 9 9;
   }
 }
 
@@ -1716,11 +1732,10 @@ StScrollBar {
   width: 34em;
   margin: 5px;
   padding: 10px;
-  border-radius: 2px;
-  color: $fg_color;
-  background-color: $bg_color;
-  border: 0px solid transparent;
-  box-shadow: 0 1px 5px transparentize(black, 0.8);
+  color: $osd_fg_color;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
 
   .notification-icon { padding: 5px; }
 
@@ -1731,15 +1746,13 @@ StScrollBar {
   .notification-actions {
     background-color: transparent;
     padding: 2px 2px 0 2px;
-    spacing: 1px;
+    spacing: 3px;
   }
   .notification-button {
     padding: 4px 4px 5px;
-    @extend .button;
+    @extend %osd_button;
 
-    &:first-child, &:last-child {
-      border-radius: 2px;
-    }
+    &:first-child, &:last-child { border-radius: 2px; }
   }
 }
 
@@ -1748,7 +1761,7 @@ StScrollBar {
 // Chat Bubbles
 .chat-body { spacing: 5px; }
 .chat-response { margin: 5px; }
-.chat-log-message { color: $fg_color; }
+.chat-log-message { color: $osd_fg_color; }
 .chat-new-group { padding-top: 1em; }
 .chat-received {
   padding-left: 4px;
@@ -1756,6 +1769,12 @@ StScrollBar {
   &:rtl { padding-left: 0px; padding-right: 4px; }
 }
 
+StEntry.chat-response {
+  @include entry(osd);
+
+  &:focus { @include entry(osd-focus); }
+}
+
 .chat-sent {
   padding-left: 18pt;
   color: $selected_bg_color;
@@ -1767,7 +1786,7 @@ StScrollBar {
   padding-left: 4px;
   font-size: 9pt;
   font-weight: bold;
-  color: transparentize($fg_color, 0.4);
+  color: transparentize($osd_fg_color, 0.4);
 
   &:rtl { padding-left: 0; padding-right: 4px; }
 }
@@ -1780,43 +1799,45 @@ StScrollBar {
   padding: 2px 72px 2px 12px;
 }
 
-  .hotplug-notification-item {
-    padding: 2px 10px;
-    &:focus { padding: 1px 71px 1px 11px; }
-  }
+.hotplug-notification-item {
+  padding: 2px 10px;
+  @extend %osd_button;
 
-  .hotplug-notification-item-icon {
-    icon-size: 24px;
-    padding: 2px 5px;
-  }
+  &:focus { padding: 2px 10px; }
+}
 
-  .hotplug-resident-box { spacing: 8px; }
+.hotplug-notification-item-icon {
+  icon-size: 24px;
+  padding: 2px 5px;
+}
 
-  .hotplug-resident-mount {
-    spacing: 8px;
-    border-radius: 4px;
-    &:hover { background-color: transparentize($bg_color,0.7); }
-  }
+.hotplug-resident-box { spacing: 8px; }
 
-  .hotplug-resident-mount-label {
-    color: inherit;
-    padding-left: 6px;
-  }
+.hotplug-resident-mount {
+  spacing: 8px;
+  border-radius: 4px;
+  &:hover { background-color: transparentize($bg_color,0.7); }
+}
 
-  .hotplug-resident-mount-icon {
-    icon-size: 24px;
-    padding-left: 6px;
-  }
+.hotplug-resident-mount-label {
+  color: inherit;
+  padding-left: 6px;
+}
 
-  .hotplug-resident-eject-icon {
-    icon-size: 16px;
-  }
+.hotplug-resident-mount-icon {
+  icon-size: 24px;
+  padding-left: 6px;
+}
 
-  .hotplug-resident-eject-button {
-    padding: 7px;
-    border-radius: 5px;
-    color: pink;
-  }
+.hotplug-resident-eject-icon {
+  icon-size: 16px;
+}
+
+.hotplug-resident-eject-button {
+  padding: 7px;
+  border-radius: 5px;
+  color: pink;
+}
 
 // Eeeky things
 
@@ -1855,47 +1876,48 @@ $legacy_icon_size: 24px;
 // On-Screen Keyboard
 //
 #keyboard {
-  background-color: transparentize($panel_bg, 0.05);
+  background-color: $osd_bg_color;
+  border-width: 0;
+  border-top-width: 1px;
+  border-color: transparentize(black, 0.6);
 }
 
-  .keyboard-layout {
-    spacing: 10px;
-    padding: 10px;
-  }
+.keyboard-layout {
+  spacing: 10px;
+  padding: 10px;
+}
 
-  .keyboard-row {
-    spacing: 15px;
-  }
+.keyboard-row {
+  spacing: 15px;
+}
 
-  .keyboard-key {
-    @include button(osd);
-    min-height: 2em;
-    min-width: 2em;
-    font-size: 14pt;
-    font-weight: bold;
-    border-radius: 3px;
-    box-shadow: none;
-    &:focus { @include button(focus); }
-    &:hover,&:checked { @include button(osd-hover); }
-    &:active { @include button(osd-active);}
-    &:grayed { //FIXME
-      background-color: $osd_bg_color;
-      color: $osd_fg_color;
-      border-color: $osd_borders_color;
-    }
-  }
+.keyboard-key {
+  min-height: 2em;
+  min-width: 2em;
+  font-size: 14pt;
+  font-weight: bold;
+  border-radius: 3px;
+  box-shadow: none;
 
-  .keyboard-subkeys { //long press on a key popup
-    color: white;
-    padding: 5px;
-    -arrow-border-radius: 2px;
-    -arrow-background-color: transparentize($panel_bg, 0.05);
-    -arrow-border-width: 0px;
-    -arrow-border-color: transparent;
-    -arrow-base: 20px;
-    -arrow-rise: 10px;
-    -boxpointer-gap: 5px;
-  }
+  @include button(osd);
+
+  &:hover { @include button(osd-hover); }
+  &:active, &:checked { @include button(osd-active); }
+
+  &:grayed { @include button(osd-insensitive); }
+}                             
+
+.keyboard-subkeys { //long press on a key popup
+  color: $osd_fg_color;
+  padding: 5px;
+  -arrow-border-radius: 2px;
+  -arrow-background-color: $osd_bg_color;
+  -arrow-border-width: 1px;
+  -arrow-border-color: transparentize(black, 0.6);;
+  -arrow-base: 20px;
+  -arrow-rise: 10px;
+  -boxpointer-gap: 5px;
+}
 
 //
 // IBus Candidate Popup
@@ -1914,7 +1936,7 @@ $legacy_icon_size: 24px;
 
   .candidate-box {
     padding: 0.3em 0.5em 0.3em 0.5em;
-    border-radius: 4px;
+    border-radius: 2px;
     color: $osd_fg_color;
     &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
   }
@@ -2140,17 +2162,18 @@ $legacy_icon_size: 24px;
   padding: 8px 8px 10px 8px;
   background-color: transparentize(black, 0.3);
   border: 1px solid black;
-  border-image: url("misc/osd.svg") 10 10 9 11;
+  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
   border-radius: 2px;
   color: $osd_fg_color;
 
   & > #Toolbar {
     padding: 3px;
-    border: 1px solid darken($osd_bg_color, 7%);
+    border: none;
     background-color: transparent;
     border-radius: 0px;
   }
   .labels { spacing: 4px; }
+
   .notebook-tab {
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
@@ -2159,6 +2182,7 @@ $legacy_icon_size: 24px;
     transition-duration: 100ms;
     padding-left: .3em;
     padding-right: .3em;
+
     &:hover {
       color: $selected_fg_color;
       text-shadow: black 0px 2px 2px;
@@ -2173,63 +2197,76 @@ $legacy_icon_size: 24px;
   StBoxLayout#ResultsArea { spacing: 4px; }
 }
 
-  .lg-dialog {
-    StEntry {
-      background-color: transparentize(black, 0.7);
-      color: $osd_fg_color;
-      selection-background-color: $selected_bg_color;
-      selected-color: $selected_fg_color;
-      border-color: transparentize($osd_fg_color, 0.7);
+.lg-dialog {
 
-      &:focus { border-color: $selected_bg_color; }
-    }
-    .shell-link {
-      color: $link_color;
-      &:hover { color: lighten($link_color,10%); }
-    }
-  }
+  StEntry {
+    selection-background-color: $selected_bg_color;
+    selected-color: $selected_fg_color;
 
-  .lg-completions-text {
-    font-size: .9em;
-    font-style: italic;
+    @include entry(osd);
+    &:focus { @include entry(osd-focus); }
   }
-
-  .lg-obj-inspector-title {
-    spacing: 4px;
+  .shell-link {
+    color: $link_color;
+    &:hover { color: lighten($link_color,10%); }
   }
+}
 
-  .lg-obj-inspector-button {
-    border: 1px solid gray;
-    padding: 4px;
-    border-radius: 4px;
-    &:hover { border: 1px solid #ffffff; }
-  }
+.lg-completions-text {
+  font-size: .9em;
+  font-style: italic;
+}
 
-  #lookingGlassExtensions { padding: 4px; }
+.lg-obj-inspector-title {
+  spacing: 4px;
+}
 
-  .lg-extensions-list {
-    padding: 4px;
-    spacing: 6px;
-  }
+.lg-obj-inspector-button {
+  border: 1px solid gray;
+  padding: 4px;
+  border-radius: 4px;
+  &:hover { border: 1px solid #ffffff; }
+}
 
-  .lg-extension {
-    border: 1px solid $borders_color;
-    border-radius: 2px;
-    background-color: $bg_color;
-    padding: 4px;
-  }
+#lookingGlassExtensions { padding: 4px; }
 
-  .lg-extension-name {
-    font-weight: bold;
-  }
+.lg-extensions-list {
+  padding: 4px;
+  spacing: 6px;
+}
 
-  .lg-extension-meta {
-    spacing: 6px;
-  }
+.lg-extension {
+  border: 1px solid $osd_borders_color;
+  border-radius: 2px;
+  background-color: $osd_bg_color;
+  padding: 4px;
+}
 
-  #LookingGlassPropertyInspector {
-    background: transparentize(black, 0.3);
-    border: 1px solid grey;
-    border-radius: 2px;
-    padding: 6px;
-  }
+.lg-extension-name {
+  font-weight: bold;
+}
+
+.lg-extension-meta {
+  spacing: 6px;
+}
+
+#LookingGlassPropertyInspector {
+  background: transparentize(black, 0.3);
+  border: 1px solid grey;
+  border-radius: 2px;
+  padding: 6px;
+}
+
+/*tweaks*/
+.panel-button:active,
+.panel-button:overview,
+.panel-button:focus,
+.panel-button:hover,
+#appMenu,
+ #panel {
+  text-shadow: 0px 0px white;
+}
+
+stage {
+    font-weight: bold;
+}
diff --git a/common/gnome-shell/3.16/sass/_drawing.scss b/common/gnome-shell/3.16/sass/_drawing.scss
index 0e60551..03b9f15 100644
--- a/common/gnome-shell/3.16/sass/_drawing.scss
+++ b/common/gnome-shell/3.16/sass/_drawing.scss
@@ -34,6 +34,24 @@
     background-color: mix($entry_bg, $bg_color, 55%);
     border-color: 1px solid mix($entry_border, $bg_color, 55%);
   }
+
+  @if $t==osd {
+    color: $osd_fg_color;
+    background-color: transparentize(black, 0.8);
+    border: 1px solid transparentize(black, 0.6);
+  }
+
+  @if $t==osd-focus {
+    color: $osd_fg_color;
+    background-color: transparentize(black, 0.8);
+    border: 1px solid $selected_bg_color;
+  }
+
+  @if $t==osd-insensitive {
+    color: $osd_insensitive_fg_color;
+    background-color: transparentize(black, 0.9);
+    border-color: 1px solid transparentize(black, 0.6);
+  }
 }
 
 // Buttons
@@ -105,19 +123,18 @@
   //
   // normal osd button
   //
-    color: lighten($osd_fg_color, 10%);
-    outline-color: transparentize($osd_fg_color, 0.7);
-    border-color: transparentize($osd_fg_color, 0.7);
-    background-color: darken($osd_bg_color, 5%);
+    color: $osd_fg_color;
+    border: 1px solid transparentize(black, 0.55);
+    background-color: transparentize(black, 0.7);
   }
 
   @else if $t==osd-hover {
   //
   // active osd button
   //
-    color: $selected_fg_color;
-    border-color: $selected_bg_color;
-    background-color: darken($osd_bg_color, 5%);
+    color: $osd_fg_color;
+    border: 1px solid $selected_bg_color;
+    background-color: transparentize(black, 0.7);
   }
 
   @else if $t==osd-active {
@@ -125,7 +142,7 @@
   // active osd button
   //
     color: $selected_fg_color;
-    border-color: $selected_bg_color;
+    border: 1px solid $selected_bg_color;
     background-color: $selected_bg_color;
   }
 
@@ -134,7 +151,7 @@
   // insensitive osd button
   //
     color: $osd_insensitive_fg_color;
-    border-color: transparentize($osd_fg_color, 0.8);
-    background-image: $osd_insensitive_bg_color;
+    border: 1px solid transparentize(black, 0.55);
+    background-color: transparentize(black, 0.85);
   }
 }
diff --git a/common/gnome-shell/3.16/sass/gnome-shell.scss b/common/gnome-shell/3.16/sass/gnome-shell.scss
index 3418548..674f742 100644
--- a/common/gnome-shell/3.16/sass/gnome-shell.scss
+++ b/common/gnome-shell/3.16/sass/gnome-shell.scss
@@ -1,3 +1,7 @@
+$variant: 'light';
+$transparency: 'true';
+$darker: 'false';
+
 @import "_colors"; //use gtk colors
 @import "_drawing";
 @import "_common";