[gnome-shell/wip/sass: 51/51] theme: OSD app/workspace switcher

[Jakub Steiner <jimmac src gnome org>]

commit 3f56e8cfbec3941738d04e1447f65532d003c37d
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Jan 13 00:33:58 2015 +0100

    theme: OSD app/workspace switcher

 data/theme/_common.scss          |  112 ++++++++++++++++++++++
 data/theme/_gnome-shell-old.scss |  122 ------------------------
 data/theme/gnome-shell.css       |  191 +++++++++++++++++---------------------
 3 files changed, 199 insertions(+), 226 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 4436b4d..3fcd089 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -241,6 +241,106 @@ StScrollBar {
 */
 
 
+/* OSD */
+.osd-window {
+  text-align: center;
+  font-weight: bold;
+  spacing: 1em;
+
+  .level {
+    height: 0.6em;
+    border-radius: 0.3em;
+    background-color: $selected_bg_color;
+  }
+}
+
+/* App Switcher */
+.switcher-popup {
+    padding: 8px;
+    spacing: 16px;
+}
+
+.osd-window,
+.switcher-list {
+  @extend %osd-panel;
+}
+
+  .switcher-list-item-container { spacing: 8px;  }
+
+  .switcher-list .item-box {
+    padding: 8px;
+    border-radius: 4px;
+  }
+
+  .switcher-list .item-box:outlined {
+    padding: 6px;
+    border: 2px solid darken($borders_color,10%);
+  }
+
+  .switcher-list .item-box:selected {
+    background: $selected_bg_color;
+  }
+
+  .switcher-list .thumbnail-box {
+    padding: 2px;
+    spacing: 4px;
+  }
+
+  .switcher-list .thumbnail {
+    width:  256px;
+  }
+
+  .switcher-list .separator {
+    width: 1px;
+    background: $borders_color;
+  }
+
+  .switcher-arrow {
+    border-color: rgba(0,0,0,0);
+    color: $borders_color;
+  }
+
+  .switcher-arrow:highlighted {
+    color: $fg_color;
+  }
+
+/* Workspace Switcher */
+.workspace-switcher-group { padding: 12px; }
+
+  .workspace-switcher-container {
+    @extend %osd-panel;
+  }
+
+  .workspace-switcher {
+    background: transparent;
+    border: 0px;
+    border-radius: 0px;
+    padding: 0px;
+    spacing: 8px;
+  }
+
+  .ws-switcher-active-up, .ws-switcher-active-down {
+    height: 50px;
+    background-color: $selected_bg_color;
+    //background-image: url("ws-switch-arrow-up.png");
+    background-size: 32px;
+    border-radius: 8px;
+  }
+
+  .ws-switcher-box {
+      height: 50px;
+      border: 1px solid transparentize($fg_color,0.5);
+      background: transparent;
+      border-radius: 8px;
+  }
+
+%osd-panel {
+  color: $fg_color;
+  background-color: transparentize($bg_color,0.2);
+  border: 1px solid transparentize($fg_color,0.8);
+  border-radius: 12px;
+  padding: 12px;
+}
 
 /* TOP BAR */
 
@@ -466,6 +566,18 @@ StScrollBar {
     & > StIcon { icon-size: 16px; }
   }
 
+//Activities Ripples
+.ripple-box {
+    width: 52px;
+    height: 52px;
+    background-image: url("corner-ripple-ltr.png");
+    background-size: contain;
+}
+
+.ripple-box:rtl {
+    background-image: url("corner-ripple-rtl.png");
+}
+
 // not really top bar only
 .popup-menu-arrow { width: 16px; height: 16px; }
 .popup-menu-icon { icon-size: 1.09em; }
diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss
index 6ed364e..164584a 100644
--- a/data/theme/_gnome-shell-old.scss
+++ b/data/theme/_gnome-shell-old.scss
@@ -21,128 +21,6 @@
 
 
 
-/* OSD */
-.osd-window {
-    text-align: center;
-    font-weight: bold;
-    spacing: 1em;
-}
-
-.osd-window .level {
-    height: 0.6em;
-    border-radius: 0.3em;
-    background-color: rgba(190,190,190,0.2);
-}
-
-/* App Switcher */
-.switcher-popup {
-    padding: 8px;
-    spacing: 16px;
-}
-
-.osd-window,
-.switcher-list {
-    background: rgba(0,0,0,0.8);
-    border: 1px solid rgba(128,128,128,0.40);
-    border-radius: 24px;
-    padding: 20px;
-}
-
-.switcher-list-item-container {
-    spacing: 8px;
-}
-
-.switcher-list .item-box {
-    padding: 8px;
-    border-radius: 8px;
-}
-
-.switcher-list .item-box:outlined {
-    padding: 6px;
-    border: 2px solid rgba(85,85,85,1.0);
-}
-
-.switcher-list .item-box:selected {
-    background: rgba(255,255,255,0.33);
-}
-
-.switcher-list .thumbnail-box {
-    padding: 2px;
-    spacing: 4px;
-}
-
-.switcher-list .thumbnail {
-    width:  256px;
-}
-
-.switcher-list .separator {
-    width: 1px;
-    background: rgba(255,255,255,0.33);
-}
-
-.ripple-box {
-    width: 52px;
-    height: 52px;
-    background-image: url("corner-ripple-ltr.png");
-    background-size: contain;
-}
-
-.ripple-box:rtl {
-    background-image: url("corner-ripple-rtl.png");
-}
-
-.switcher-arrow {
-    border-color: rgba(0,0,0,0);
-    color: #808080;
-}
-
-.switcher-arrow:highlighted {
-    border-color: rgba(0,0,0,0);
-    color: white;
-}
-
-/* Workspace Switcher */
-.workspace-switcher-group {
-    padding: 12px;
-}
-
-.workspace-switcher-container {
-    background: rgba(0,0,0,0.8);
-    border: 1px solid rgba(128,128,128,0.40);
-    border-radius: 24px;
-    padding: 20px;
-}
-
-.workspace-switcher {
-    background: transparent;
-    border: 0px;
-    border-radius: 0px;
-    padding: 0px;
-    spacing: 8px;
-}
-
-.ws-switcher-active-up {
-    height: 100px;
-    border: 0px;
-    background: rgba(255,255,255,0.5);
-    background-image: url("ws-switch-arrow-up.png");
-    border-radius: 8px;
-}
-
-.ws-switcher-active-down {
-    height: 100px;
-    border: 0px;
-    background: rgba(255,255,255,0.5);
-    background-image: url("ws-switch-arrow-down.png");
-    border-radius: 8px;
-}
-
-.ws-switcher-box {
-    height: 96px;
-    border: 2px solid rgba(85,85,85,0.5);
-    background: transparent;
-    border-radius: 8px;
-}
 
 /* Tile previews */
 .tile-preview {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 516e908..f0999e2 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -16,108 +16,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  */
-/* OSD */
-.osd-window {
-  text-align: center;
-  font-weight: bold;
-  spacing: 1em; }
-
-.osd-window .level {
-  height: 0.6em;
-  border-radius: 0.3em;
-  background-color: rgba(190, 190, 190, 0.2); }
-
-/* App Switcher */
-.switcher-popup {
-  padding: 8px;
-  spacing: 16px; }
-
-.osd-window,
-.switcher-list {
-  background: rgba(0, 0, 0, 0.8);
-  border: 1px solid rgba(128, 128, 128, 0.4);
-  border-radius: 24px;
-  padding: 20px; }
-
-.switcher-list-item-container {
-  spacing: 8px; }
-
-.switcher-list .item-box {
-  padding: 8px;
-  border-radius: 8px; }
-
-.switcher-list .item-box:outlined {
-  padding: 6px;
-  border: 2px solid #555555; }
-
-.switcher-list .item-box:selected {
-  background: rgba(255, 255, 255, 0.33); }
-
-.switcher-list .thumbnail-box {
-  padding: 2px;
-  spacing: 4px; }
-
-.switcher-list .thumbnail {
-  width: 256px; }
-
-.switcher-list .separator {
-  width: 1px;
-  background: rgba(255, 255, 255, 0.33); }
-
-.ripple-box {
-  width: 52px;
-  height: 52px;
-  background-image: url("corner-ripple-ltr.png");
-  background-size: contain; }
-
-.ripple-box:rtl {
-  background-image: url("corner-ripple-rtl.png"); }
-
-.switcher-arrow {
-  border-color: transparent;
-  color: #808080; }
-
-.switcher-arrow:highlighted {
-  border-color: transparent;
-  color: white; }
-
-/* Workspace Switcher */
-.workspace-switcher-group {
-  padding: 12px; }
-
-.workspace-switcher-container {
-  background: rgba(0, 0, 0, 0.8);
-  border: 1px solid rgba(128, 128, 128, 0.4);
-  border-radius: 24px;
-  padding: 20px; }
-
-.workspace-switcher {
-  background: transparent;
-  border: 0px;
-  border-radius: 0px;
-  padding: 0px;
-  spacing: 8px; }
-
-.ws-switcher-active-up {
-  height: 100px;
-  border: 0px;
-  background: rgba(255, 255, 255, 0.5);
-  background-image: url("ws-switch-arrow-up.png");
-  border-radius: 8px; }
-
-.ws-switcher-active-down {
-  height: 100px;
-  border: 0px;
-  background: rgba(255, 255, 255, 0.5);
-  background-image: url("ws-switch-arrow-down.png");
-  border-radius: 8px; }
-
-.ws-switcher-box {
-  height: 96px;
-  border: 2px solid rgba(85, 85, 85, 0.5);
-  background: transparent;
-  border-radius: 8px; }
-
 /* Tile previews */
 .tile-preview {
   background-color: rgba(74, 144, 217, 0.35);
@@ -965,6 +863,84 @@ StScrollBar {
 - odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
   app menu inside the main app window itself rather than the top bar
 */
+/* OSD */
+.osd-window {
+  text-align: center;
+  font-weight: bold;
+  spacing: 1em; }
+  .osd-window .level {
+    height: 0.6em;
+    border-radius: 0.3em;
+    background-color: #215d9c; }
+
+/* App Switcher */
+.switcher-popup {
+  padding: 8px;
+  spacing: 16px; }
+
+.switcher-list-item-container {
+  spacing: 8px; }
+
+.switcher-list .item-box {
+  padding: 8px;
+  border-radius: 4px; }
+
+.switcher-list .item-box:outlined {
+  padding: 6px;
+  border: 2px solid #040404; }
+
+.switcher-list .item-box:selected {
+  background: #215d9c; }
+
+.switcher-list .thumbnail-box {
+  padding: 2px;
+  spacing: 4px; }
+
+.switcher-list .thumbnail {
+  width: 256px; }
+
+.switcher-list .separator {
+  width: 1px;
+  background: #1c1f1f; }
+
+.switcher-arrow {
+  border-color: transparent;
+  color: #1c1f1f; }
+
+.switcher-arrow:highlighted {
+  color: #eeeeec; }
+
+/* Workspace Switcher */
+.workspace-switcher-group {
+  padding: 12px; }
+
+.workspace-switcher {
+  background: transparent;
+  border: 0px;
+  border-radius: 0px;
+  padding: 0px;
+  spacing: 8px; }
+
+.ws-switcher-active-up, .ws-switcher-active-down {
+  height: 50px;
+  background-color: #215d9c;
+  background-size: 32px;
+  border-radius: 8px; }
+
+.ws-switcher-box {
+  height: 50px;
+  border: 1px solid rgba(238, 238, 236, 0.5);
+  background: transparent;
+  border-radius: 8px; }
+
+.osd-window,
+.switcher-list, .workspace-switcher-container {
+  color: #eeeeec;
+  background-color: rgba(57, 63, 63, 0.8);
+  border: 1px solid rgba(238, 238, 236, 0.2);
+  border-radius: 12px;
+  padding: 12px; }
+
 /* TOP BAR */
 #panel {
   background-color: black;
@@ -1148,6 +1124,15 @@ StScrollBar {
   .system-menu-action > StIcon {
     icon-size: 16px; }
 
+.ripple-box {
+  width: 52px;
+  height: 52px;
+  background-image: url("corner-ripple-ltr.png");
+  background-size: contain; }
+
+.ripple-box:rtl {
+  background-image: url("corner-ripple-rtl.png"); }
+
 .popup-menu-arrow {
   width: 16px;
   height: 16px; }
@@ -1773,5 +1758,3 @@ StScrollBar {
   border: 2px solid grey;
   border-radius: 4px;
   padding: 6px; }
-
-/*# sourceMappingURL=gnome-shell.css.map */