[gnome-shell/wip/sass: 12/29] theme: Adapt screenshield to mockups

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit 61e11dfc7666b6afa0301271e588edae7bc8552c
Author: Carlos Soriano <csoriano gnome org>
Date:   Sun Feb 8 18:56:37 2015 +0100

    theme: Adapt screenshield to mockups

 data/theme/_common.scss                  |   11 +++++++----
 data/theme/gnome-shell-high-contrast.css |   12 ++++++++----
 data/theme/gnome-shell.css               |   12 ++++++++----
 js/ui/screenShield.js                    |    7 ++++---
 4 files changed, 27 insertions(+), 15 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 2f9ae53..b6e12a9 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -1153,7 +1153,7 @@ StScrollBar {
   .app-well-app-running-dot { //running apps indicator
     width: 10px; height: 3px;
     background-color: $selected_bg_color;
-    margin-bottom: 2px; //FIXME will happen :)
+    margin-bottom: 2px;
   }
   
   %icon_tile {
@@ -1660,8 +1660,6 @@ StScrollBar {
     -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
 }
 
-.screen-shield-contents-box { spacing: 48px; }
-
 .screen-shield-clock {
   color: white;
   text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
@@ -1678,6 +1676,7 @@ StScrollBar {
 .screen-shield-clock-date { font-size: 28pt; }
 
 .screen-shield-notifications-container {
+  spacing: 20px;
   width: 30em;
   background-color: transparent;
   max-height: 500px;
@@ -1697,7 +1696,11 @@ StScrollBar {
 }
 
 .screen-shield-notification-source {
-  padding: 3px 6px;
+  padding: 12px 6px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: white;
+  background-color: transparentize($bg_color,0.7);
   spacing: 5px;
 }
 
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index e1df947..dcaf7cd 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1541,9 +1541,6 @@ StScrollBar {
   -arrow-thickness: 12px;
   -arrow-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
 
-.screen-shield-contents-box {
-  spacing: 48px; }
-
 .screen-shield-clock {
   color: white;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
@@ -1559,6 +1556,7 @@ StScrollBar {
   font-size: 28pt; }
 
 .screen-shield-notifications-container {
+  spacing: 20px;
   width: 30em;
   background-color: transparent;
   max-height: 500px; }
@@ -1576,7 +1574,11 @@ StScrollBar {
     spacing: 24px; }
 
 .screen-shield-notification-source {
-  padding: 3px 6px;
+  padding: 12px 6px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: white;
+  background-color: rgba(0, 0, 0, 0.3);
   spacing: 5px; }
 
 .screen-shield-notification-label {
@@ -1685,3 +1687,5 @@ StScrollBar {
 
 stage {
   -st-icon-style: symbolic; }
+
+/*# sourceMappingURL=gnome-shell-high-contrast.css.map */
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 2ea846a..f8d55d1 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1541,9 +1541,6 @@ StScrollBar {
   -arrow-thickness: 12px;
   -arrow-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
 
-.screen-shield-contents-box {
-  spacing: 48px; }
-
 .screen-shield-clock {
   color: white;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
@@ -1559,6 +1556,7 @@ StScrollBar {
   font-size: 28pt; }
 
 .screen-shield-notifications-container {
+  spacing: 20px;
   width: 30em;
   background-color: transparent;
   max-height: 500px; }
@@ -1576,7 +1574,11 @@ StScrollBar {
     spacing: 24px; }
 
 .screen-shield-notification-source {
-  padding: 3px 6px;
+  padding: 12px 6px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: white;
+  background-color: rgba(57, 63, 63, 0.3);
   spacing: 5px; }
 
 .screen-shield-notification-label {
@@ -1682,3 +1684,5 @@ StScrollBar {
   border: 2px solid grey;
   border-radius: 4px;
   padding: 6px; }
+
+/*# sourceMappingURL=gnome-shell.css.map */
diff --git a/js/ui/screenShield.js b/js/ui/screenShield.js
index 9fc5343..d82c607 100644
--- a/js/ui/screenShield.js
+++ b/js/ui/screenShield.js
@@ -103,13 +103,13 @@ const NotificationsBox = new Lang.Class({
                                         name: 'screenShieldNotifications',
                                         style_class: 'screen-shield-notifications-container' });
 
-        this._musicBin = new St.Bin({ style_class: 'screen-shield-notifications-box',
+        this._musicBin = new St.Bin({ style_class: 'screen-shield-notifications-container',
                                       visible: false });
 
         this._scrollView = new St.ScrollView({ x_fill: false, x_align: St.Align.START,
                                                hscrollbar_policy: Gtk.PolicyType.NEVER });
         this._notificationBox = new St.BoxLayout({ vertical: true,
-                                                   style_class: 'screen-shield-notifications-box' });
+                                                   style_class: 'screen-shield-notifications-container' });
         this._scrollView.add_actor(this._notificationBox);
 
         this.actor.add(this._musicBin);
@@ -253,7 +253,8 @@ const NotificationsBox = new Lang.Class({
             countLabel: null,
         };
 
-        obj.sourceBox = new St.BoxLayout({ style_class: 'screen-shield-notification-source' });
+        obj.sourceBox = new St.BoxLayout({ style_class: 'screen-shield-notification-source',
+                                           x_expand: true });
         this._showSource(source, obj, obj.sourceBox);
         this._notificationBox.add(obj.sourceBox, { x_fill: false, x_align: St.Align.START });