[gnome-shell-sass] _common: Add transparency when free-floating

[Alessandro Bono <abono src gnome org>]

commit 4c361179a1d45544dcbfbac209c1842aae171a01
Author: Alessandro Bono <abono gnome org>
Date:   Mon Apr 24 21:25:17 2017 +0200

    _common: Add transparency when free-floating
    
    The solid black top bar we currently use works well for maximized
    or tiled windows, as it puts focus on the application content by
    blending into the monitor bezel. However it also visually reduces
    the screen space, which is particularly noticeable when no window
    is located nearby. Having the top bar blend with the background is
    a better option in that case, so track window positions and add
    some transparency when the top bar is free-floating.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=747163

 _common.scss |   47 ++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 44 insertions(+), 3 deletions(-)
---
diff --git a/_common.scss b/_common.scss
index 30e3cdd..80e81fe 100644
--- a/_common.scss
+++ b/_common.scss
@@ -755,7 +755,9 @@ StScrollBar {
 /* TOP BAR */
 
 #panel {
-  background-color: black;
+  background-color: rgba(0, 0, 0, 0.2);
+  /* transition from solid to transparent */
+  transition-duration: 500ms;
   font-weight: bold;
   height: 1.86em;
 
@@ -771,7 +773,7 @@ StScrollBar {
 
   .panel-corner {
     -panel-corner-radius: $panel-corner-radius;
-    -panel-corner-background-color: black;
+    -panel-corner-background-color: rgba(0, 0, 0, 0.2);
     -panel-corner-border-width: 2px;
     -panel-corner-border-color: transparent;
 
@@ -790,7 +792,8 @@ StScrollBar {
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
     font-weight: bold;
-    color: #ccc;
+    color: #eee;
+    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
     transition-duration: 100ms;
 
     .app-menu-icon {
@@ -800,8 +803,21 @@ StScrollBar {
       //dimensions of the icon are hardcoded
     }
 
+    .system-status-icon,
+    .app-menu-icon > StIcon,
+    .popup-menu-arrow {
+      icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
+    }
+
     &:hover {
       color: lighten($fg_color, 10%);
+      text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
+
+      .system-status-icon,
+      .app-menu-icon > StIcon,
+      .popup-menu-arrow {
+        icon-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
+      }
     }
 
     &:active, &:overview, &:focus, &:checked {
@@ -834,6 +850,31 @@ StScrollBar {
   }
 
   .screencast-indicator { color: $warning_color; }
+
+  &.solid {
+    background-color: black;
+    /* transition from transparent to solid */
+    transition-duration: 300ms;
+
+    .panel-corner {
+      -panel-corner-background-color: black;
+    }
+
+    .panel-button {
+      color: #ccc;
+      text-shadow: none;
+
+      &:hover {
+        color: lighten($fg_color, 10%);
+      }
+    }
+
+    .system-status-icon,
+    .app-menu-icon > StIcon,
+    .popup-menu-arrow {
+      icon-shadow: none;
+    }
+  }
 }
 
   // calendar popover