gnome-shell theme improvements and some osd redesign

5 files changed, 55 insertions, 99 deletions

diff --git a/common/gtk-3.0/3.16/sass/_colors.scss b/common/gtk-3.0/3.16/sass/_colors.scss
index c32b223..9c51858 100644
--- a/common/gtk-3.0/3.16/sass/_colors.scss
+++ b/common/gtk-3.0/3.16/sass/_colors.scss
@@ -24,19 +24,6 @@ $success_color: #73d216;
 $destructive_color: #F04A50;
 $suggested_color: #4DADD4;
 
-$osd_fg_color: #A8ADB5;
-$osd_bg_color: transparentize(#3c4049, 0.05);
-$osd_button_bg: darken($osd_bg_color, 3%);
-
-$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);
-
-
-$tooltip_bg: $osd_bg_color;
-$tooltip_fg: #edf5fb;
-$tooltip_borders_color: transparentize(white, 0.9);
-
 //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%));
@@ -44,7 +31,6 @@ $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%),
 
 $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%));
 $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%));
-$entry_focus_border: $selected_bg_color;
 
 $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%));
 $button_border: $entry_border;
@@ -55,8 +41,6 @@ $header_bg: red;
 @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: if(($darker == 'true' or $variant == 'dark') and $transparency == 'true', transparentize(#2f343b, 0.03), #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%));
@@ -64,15 +48,19 @@ $header_border: if($variant == 'light', darken($header_bg, 7%), darken($header_b
 $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' and $variant == 'light', $osd_bg_color, opacify($osd_bg_color, 1));
-@if $variant==dark { $dark_sidebar_bg: if($transparency == 'true', lighten($osd_bg_color, 4%), lighten(opacify($osd_bg_color, 1), 4%)); }
-
-$dark_sidebar_fg: $osd_fg_color;
+$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%));
 
-$panel_bg: darken($osd_bg_color, 10%);
-$panel_fg: $dark_sidebar_fg;
+$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;
 
 //WM Buttons
 
diff --git a/common/gtk-3.0/3.16/sass/_common.scss b/common/gtk-3.0/3.16/sass/_common.scss
index d7baa9d..9c0150f 100644
--- a/common/gtk-3.0/3.16/sass/_common.scss
+++ b/common/gtk-3.0/3.16/sass/_common.scss
@@ -441,7 +441,7 @@ $_dot_color: $selected_bg_color;
 
     &.image-button { padding: 10px; }
 
-    &:hover { @include button(osd-hover); border-color: transparentize($osd_fg_color, 0.7)}
+    &:hover { @include button(osd-hover); background-color: $osd_bg_color; }
     &:active, &:checked { @include button(osd-active); }
     &:insensitive { @include button(osd-insensitive); }
   }
@@ -970,9 +970,9 @@ GtkComboBox {
   background-color: $bg_color;
   .osd &, &.osd {
     padding: 7px;
-    border: none;
-    border-radius: 4px;
-    background-color: $osd_bg_color;
+    border: 1px solid transparentize(black, 0.4);
+    border-radius: 3px;
+    background-color: transparentize($osd_bg_color, 0.1);
   }
 }
 
@@ -2291,15 +2291,15 @@ GtkScrolledWindow {
 
 .app-notification,
 .app-notification.frame {
-  @extend %osd;
   padding: 10px;
-  background-color: $osd_bg_color;
+  color: $dark_sidebar_fg;
+  background-color: $dark_sidebar_bg;
   background-clip: border-box;
   border-radius: 0 0 2px 2px;
   border-width: 0 1px 1px 1px;
   border-style: solid;
-  border-color: darken($osd_bg_color, 10%);
-  
+  border-color: darken($dark_sidebar_bg, 10%);
+
   .button {
     @include button(osd);
     &.flat {
@@ -2570,11 +2570,11 @@ GtkInfoBar {
   &.background {
     // background-color needs to be set this way otherwise it gets drawn twice
     // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
-    background-color: $tooltip_bg;
+    background-color: $osd_bg_color;
     background-clip: padding-box;
   }
 
-  color: $tooltip_fg;
+  color: $osd_fg_color;
   border-radius: 2px;
 
   &.window-frame.csd {
diff --git a/common/gtk-3.0/3.16/sass/_drawing.scss b/common/gtk-3.0/3.16/sass/_drawing.scss
index 378e5d9..c073126 100644
--- a/common/gtk-3.0/3.16/sass/_drawing.scss
+++ b/common/gtk-3.0/3.16/sass/_drawing.scss
@@ -87,30 +87,30 @@
 
   @else if $t==osd {
   //
-  // normal osd button
+  // normal osd entry
   //
     color: $osd_fg_color;
-    border-color: transparentize($osd_fg_color, 0.7);
+    border-color: transparentize(black, 0.6);
     background-color: transparent;
-    background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%));
+    background-image: linear-gradient(to bottom, transparentize(black, 0.8));
   }
 
   @else if $t==osd-focus {
   //
-  // active osd button
+  // active osd entry
   //
-    color: $selected_bg_color;
+    color: $osd_fg_color;
     border-color: $selected_bg_color;
-    background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%));
+    background-image: linear-gradient(to bottom, transparentize(black, 0.8));
   }
 
   @else if $t==osd-insensitive {
   //
-  // insensitive osd button
+  // insensitive osd entry
   //
     color: $osd_insensitive_fg_color;
-    border-color: transparentize($osd_fg_color, 0.8);
-    background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
+    border-color: transparentize(black, 0.6);
+    background-image: linear-gradient(to bottom, transparentize(black, 0.9));
   }
 }
 
@@ -237,19 +237,18 @@
   //
     color: $osd_fg_color;
     outline-color: transparentize($osd_fg_color, 0.7);
-    border-color: transparentize($osd_fg_color, 0.7);
-    background-color: transparent;
-    background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%));
+    border-color: transparentize(black, 0.55);
+    background-color: transparentize(black, 0.7);
   }
 
   @else if $t==osd-hover {
   //
   // active osd button
   //
-    color: $selected_bg_color;
+    color: $osd_fg_color;
     outline-color: transparentize($osd_fg_color, 0.7);
     border-color: $selected_bg_color;
-    background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%));
+    background-color: transparentize(black, 0.7);
   }
 
   @else if $t==osd-active {
@@ -259,7 +258,7 @@
     color: $selected_fg_color;
     outline-color: transparentize($selected_fg_color, 0.7);
     border-color: $selected_bg_color;
-    background-image: linear-gradient(to bottom, $selected_bg_color);
+    background-color: $selected_bg_color;
   }
 
   @else if $t==osd-insensitive {
@@ -267,8 +266,8 @@
   // insensitive osd button
   //
     color: $osd_insensitive_fg_color;
-    border-color: transparentize($osd_fg_color, 0.8);
-    background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
+    border-color: transparentize(black, 0.55);
+    background-color: transparentize(black, 0.85);
   }
 
   @else if $t==suggested_destructive {
diff --git a/common/gtk-3.0/3.16/sass/_lightdm.scss b/common/gtk-3.0/3.16/sass/_lightdm.scss
index 9b14d09..9b2fa76 100644
--- a/common/gtk-3.0/3.16/sass/_lightdm.scss
+++ b/common/gtk-3.0/3.16/sass/_lightdm.scss
@@ -14,7 +14,7 @@
   }
 
   .menubar .menuitem:insensitive {
-    color: darken($panel_fg, 20%);
+    color: transparentize($panel_fg, 0.5);
 
     GtkLabel { color: inherit; }
   }
@@ -34,9 +34,11 @@
 /* the top half of the login-window, in GtkDialog terms, the content */
 #content_frame {
   padding-bottom: 14px;
-  background-color: transparentize($bg_color, 0.05);
+  background-color: if($variant == 'light', $bg_color, $base_color);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
+  border: solid transparentize(black, 0.9);
+  border-width: 1px 1px 0 1px;
 }
 
 #content_frame .button {
@@ -53,8 +55,11 @@
   padding-bottom: 0px;
   border-style: none;
   background-color: $osd_bg_color;
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border: solid transparentize(black, 0.9);
+  border-width: 0 1px 1px 1px;
+  box-shadow: inset 0 1px darken($osd_bg_color, 10%);
 }
 
 #buttonbox_frame .button{
@@ -76,7 +81,7 @@
 /* the user's avatar box */
 #user_image {
   padding: 3px;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 
 /* the border around the user's avatar box */
@@ -84,54 +89,18 @@
 
 /* the shutdown button */
 #shutdown_button.button {
-  color: $selected_fg_color;
-  outline-color: transparentize($selected_fg_color, 0.7);
-  border-color: $destructive_color;
-  background-color: $destructive_color;
-  background-image: none;
-  background-clip: border-box;
-
-  &:hover {
-    color: $selected_fg_color;
-    outline-color: transparentize($selected_fg_color, 0.7);
-    border-color: lighten($destructive_color, 9%);
-    background-color: lighten($destructive_color, 9%);
-    background-image: none;
-  }
-  &:active, &:checked {
-    color: $selected_fg_color;
-    outline-color: transparentize($selected_fg_color, 0.7);
-    border-color: darken($destructive_color, 7%);
-    background-color: darken($destructive_color, 7%);
-    background-image: none;
-  }
+  @include button(suggested_destructive, $destructive_color);
+
+  &:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); }
+  &:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); }
 }
 
 /* the restart button */
 #restart_button.button {
-  $_restart_bg: #51CF74;
-
-  color: $selected_fg_color;
-  outline-color: transparentize($selected_fg_color, 0.7);
-  border-color: $_restart_bg;
-  background-color: $_restart_bg;
-  background-image: none;
-  background-clip: border-box;
-
-  &:hover {
-    color: $selected_fg_color;
-    outline-color: transparentize($selected_fg_color, 0.7);
-    border-color: lighten($_restart_bg, 9%);
-    background-color: lighten($_restart_bg, 9%);
-    background-image: none;
-  }
-  &:active, &:checked {
-    color: $selected_fg_color;
-    outline-color: transparentize($selected_fg_color, 0.7);
-    border-color: darken($_restart_bg, 7%);
-    background-color: darken($_restart_bg, 7%);
-    background-image: none;
-  }
+  @include button(suggested_destructive, $suggested_color);
+
+  &:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); }
+  &:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); }
 }
 
 /* the warning, in case a wrong password is entered or something else goes wrong according to PAM */
diff --git a/common/gtk-3.0/3.16/sass/_transparent_widgets.scss b/common/gtk-3.0/3.16/sass/_transparent_widgets.scss
index f734c0c..16bbb1e 100644
--- a/common/gtk-3.0/3.16/sass/_transparent_widgets.scss
+++ b/common/gtk-3.0/3.16/sass/_transparent_widgets.scss
@@ -36,7 +36,7 @@ MarlinViewWindow {
       background-color: transparent;
       color: $dark_sidebar_fg;
 
-      &.image { color: transparentize($dark_sidebar_fg, 0.4); }
+      &.image { color: transparentize($dark_sidebar_fg, 0.3); }
 
       &.cell:selected {
         background-color: $selected_bg_color;