From 6eb90434f00aaaa2644632d4cf1b7c8cf025f41b Mon Sep 17 00:00:00 2001
From: Marina Zhurakhinskaya <marinaz@redhat.com>
Date: Wed, 21 Jul 2010 02:41:45 -0400
Subject: [PATCH] Update the look of various message tray components

The following changes make message tray look more polished:
 - all notifications are now same width (no min and max width)
 - there is an equal padding all around the notification (which resulted in
   the increased tray height)
 - action buttons are now nicely styled
 - chat text box glows when focused (nevermind the unfocused look because
   we'll soon always have it focused when it is showing)
 - chat text has padding on the left and rounded background
 - summary source buttons no longer have a border

https://bugzilla.gnome.org/show_bug.cgi?id=624584
---
 data/theme/gnome-shell.css | 72 ++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 766ff8eec..cd271346f 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -807,7 +807,7 @@ StTooltip {
     background-gradient-direction: vertical;
     background-gradient-start: rgba(0,0,0,0.01);
     background-gradient-end: rgba(0,0,0,0.95);
-    height: 28px;
+    height: 36px;
 }
 
 #notification {
@@ -815,15 +815,15 @@ StTooltip {
     border-radius: 5px 5px 0px 0px;
     background: rgba(0,0,0,0.9);
     color: white;
-    padding: 2px 10px 10px 10px;
-    spacing-rows: 5px;
+    padding: 8px 8px 8px 8px;
+    spacing-rows: 10px;
     spacing-columns: 10px;
-    max-width: 40em;
+    width: 34em;
 }
 
 #summary-notification-bin #notification {
     /* message-tray.height + notification.padding-bottom */
-    padding-bottom: 38px;
+    padding-bottom: 44px;
 }
 
 #notification-scrollview {
@@ -843,21 +843,19 @@ StTooltip {
 }
 
 .notification-button {
-    border: 2px rgba(0,0,0,0.0);
-    border-radius: 5px;
-    padding: 5px;
-    background: #c0c0c0;
-    color: black;
-    font-weight: bold;
+    background-color: #3c3c3c;
+    padding: 2px 14px;
+    border-radius: 12px;
+    border: 1px solid #181818;
 }
 
 .notification-button:hover {
-    border: 2px solid white;
+    border: 1px solid #a1a1a1;
 }
 
 .notification-button:active {
-    border: 2px solid white;
-    background: #808080;
+    border: 1px solid #a1a1a1;
+    background-color: #2b2b2b;
 }
 
 .notification-icon-button {
@@ -865,6 +863,7 @@ StTooltip {
     border-radius: 5px;
     padding: 5px;
 }
+
 .notification-icon-button:hover {
     background: rgba(192,192,192,0.7);
 }
@@ -875,20 +874,39 @@ StTooltip {
 
 .chat-received {
     background-gradient-direction: horizontal;
-    background-gradient-start: #606060;
-    background-gradient-end: #000000;
+    background-gradient-start: rgba(255, 255, 255, 0.2);
+    background-gradient-end: rgba(255, 255, 255, 0);
 
-    min-width: 20em;
+    padding-left: 4px;
+    border-radius: 4px;
 }
 
 .chat-sent {
     background-gradient-direction: horizontal;
-    background-gradient-start: #000000;
-    background-gradient-end: #606060;
+    background-gradient-start: rgba(255, 255, 255, 0);
+    background-gradient-end: rgba(255, 255, 255, 0.2);
+
+    padding-left: 4px;
+    border-radius: 4px;
 }
 
 .chat-response {
-    border: 1px solid white;
+    padding: 4px;
+    border-radius: 4px;
+    border: 1px solid #565656;
+    color: #a8a8a8;
+    background-color: #404040;
+    caret-color: #ffffff;
+    caret-size: 1px;
+    height: 18px;
+}
+
+.chat-response:focus {
+    border: 1px solid #3a3a3a;
+    color: #545454;
+    background-color: #e8e8e8;
+    caret-color: #545454;
+    -st-shadow: 0px 0px 6px 2px rgba(255,255,255,0.9);
 }
 
 /* The spacing and padding on the summary is tricky; we want to keep
@@ -905,17 +923,9 @@ StTooltip {
  * pseudo-class we could fix that...
  */
 #summary-mode {
-    spacing: 4px;
-    padding: 2px 0px 0px 4px;
-}
-
-.summary-source-button  {
-    padding: 0px 2px 0px 2px;
-    border: 1px solid transparent;
-}
-
-.summary-source-button:hover {
-    border: 1px solid #ffffff;
+    spacing: 6px;
+    padding: 2px 12px 0px 4px;
+    height: 36px;
 }
 
 .summary-source {