[gnome-shell/wip/paging-release2: 11/12] gnome-shell.css: Change Icons style to folow new design

[Carlos Soriano <csoriano src gnome org>]

commit b14a4b89ea3c6d15e23f2be120c3e7cad692de69
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Wed Jul 17 11:03:49 2013 +0200

    gnome-shell.css: Change Icons style to folow new design
    
    Change the background, glow and labels of the Dash and AppDisplay
    to follow the new design, more eye pleasant.

 data/theme/gnome-shell.css |   60 +++++++++++++++++++++++++++++++++----------
 js/ui/iconGrid.js          |    9 ++++--
 2 files changed, 52 insertions(+), 17 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ce7d445..1db58b7 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -47,8 +47,11 @@ stage {
 .window-caption,
 .switcher-list, 
 .app-well-app > .overview-icon,
+.app-well-app > .overview-icon-with-label,
 .show-apps > .overview-icon,
-.grid-search-result .overview-icon {
+.show-apps > .overview-icon-with-label,
+.grid-search-result .overview-icon
+.grid-search-result .overview-icon-with-label {
     font-size: 9pt;
     font-weight: bold;
 }
@@ -871,11 +874,12 @@ StScrollBar StButton#vhandle:active {
 /* Application Launchers, Grid and List results */
 
 .icon-grid {
-    spacing: 36px;
-    -shell-grid-horizontal-item-size: 118px;
-    -shell-grid-vertical-item-size: 118px;
+    spacing: 30px;
+    -shell-grid-horizontal-item-size: 136px;
+    -shell-grid-vertical-item-size: 136px;
 }
 
+.icon-grid .overview-icon-with-label,
 .icon-grid .overview-icon {
     icon-size: 96px;
 }
@@ -947,13 +951,26 @@ StScrollBar StButton#vhandle:active {
     background-image: url("more-results.svg");
 }
 
-.app-well-app > .overview-icon,
-.show-apps > .overview-icon,
+.app-well-app > .overview-icon-with-label,
 .search-provider-icon,
 .list-search-result,
-.grid-search-result .overview-icon {
+.grid-search-result .overview-icon-with-label {
     border-radius: 4px;
-    padding: 3px;
+    /* visually, since the label control its own espacing inside,
+       seems more visual consistent to have diferent padding for
+       top and bottom */
+    padding: 10px 8px 5px 8px;
+    border: 1px rgba(0,0,0,0);
+    transition-duration: 100ms;
+    text-align: center;
+    spacing: 4px;
+}
+
+.app-well-app > .overview-icon,
+.show-apps > .overview-icon,
+.grid-search-result .overview-icon {
+       border-radius: 4px;
+    padding: 6px;
     border: 1px rgba(0,0,0,0);
     transition-duration: 100ms;
     text-align: center;
@@ -961,7 +978,7 @@ StScrollBar StButton#vhandle:active {
 
 .app-folder-popup {
     -arrow-border-radius: 8px;
-    -arrow-background-color: black;
+    -arrow-background-color: rgba(0,0,0,0.3);
     -arrow-base: 24px;
     -arrow-rise: 11px;
 }
@@ -970,29 +987,35 @@ StScrollBar StButton#vhandle:active {
     padding: 15px;
 }
 
+.app-well-app.running > .overview-icon-with-label,
 .app-well-app.running > .overview-icon {
     text-shadow: black 0px 2px 2px;
     background-image: url("running-indicator.svg");
     background-size: contain;
 }
 
+.app-well-app.app-folder > .overview-icon-with-label,
 .app-well-app.app-folder > .overview-icon {
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0,0,0,0.3);
 }
 
+.app-well-app:hover > .overview-icon-with-label,
 .app-well-app:hover > .overview-icon,
 .show-apps:hover > .overview-icon,
+.show-apps:hover > .overview-icon-with-label,
 .search-provider-icon:hover,
 .list-search-result:hover,
-.grid-search-result:hover .overview-icon {
+.grid-search-result:hover .overview-icon,
+.grid-search-result:hover .overview-icon-with-label {
     background-color: rgba(255,255,255,0.1);
     text-shadow: black 0px 2px 2px;
     transition-duration: 100ms;
     color:white;
 }
 
-.app-display .app-well-app > .overview-icon {
-    border-radius: 10px;
+.app-display .app-well-app > .overview-icon,
+.app-display .app-well-app > .overview-icon-with-label {
+    border-radius: 4px;
 }
 
 .list-search-result:hover .list-search-result-description {
@@ -1012,9 +1035,13 @@ StScrollBar StButton#vhandle:active {
 }
 
 .app-well-app:checked > .overview-icon,
+.app-well-app:checked > .overview-icon-with-label,
 .app-well-app:active > .overview-icon,
+.app-well-app:active > .overview-icon-with-label,
 .show-apps:checked > .overview-icon,
-.show-apps:active > .overview-icon {
+.show-apps:checked > .overview-icon-with-label,
+.show-apps:active > .overview-icon,
+.show-apps:active > .overview-icon-with-label {
     background-gradient-start: rgba(255, 255, 255, .05);
     background-gradient-end: rgba(255, 255, 255, .15);
     background-gradient-direction: vertical;
@@ -1030,12 +1057,17 @@ StScrollBar StButton#vhandle:active {
 }
 
 .app-well-app:focus > .overview-icon,
+.app-well-app:focus > .overview-icon-with-label,
 .grid-search-result:focus .overview-icon,
+.grid-search-result:focus .overview-icon-with-label,
 .show-apps:focus > .overview-icon,
+.show-apps:focus > .overview-icon-with-label,
 .search-provider-icon:focus,
 .list-search-result:focus,
 .app-well-app:selected > .overview-icon,
+.app-well-app:selected > .overview-icon-with-label,
 .grid-search-result:selected .overview-icon,
+.grid-search-result:selected .overview-icon-with-label,
 .search-provider-icon:selected,
 .list-search-result:selected {
     background-color: rgba(255,255,255,0.33);
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 95969ed..6b8f00d 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -18,9 +18,12 @@ const BaseIcon = new Lang.Class({
         params = Params.parse(params, { createIcon: null,
                                         setSizeManually: false,
                                         showLabel: true });
-        this.actor = new St.Bin({ style_class: 'overview-icon',
-                                  x_fill: true,
-                                  y_fill: true });
+        let binParams = { style_class: 'overview-icon',
+                          x_fill: true,
+                          y_fill: true };
+        if(params['showLabel'])
+            binParams['style_class'] = 'overview-icon-with-label';
+        this.actor = new St.Bin(binParams);
         this.actor._delegate = this;
         this.actor.connect('style-changed',
                            Lang.bind(this, this._onStyleChanged));