isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the look of various message tray components

Browse Source 
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
This commit is contained in:
Marina Zhurakhinskaya 2010-07-21 02:41:45 -04:00
parent 65991cc057
commit 6eb90434f0
1 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
data/theme/gnome-shell.css
View File

@ -807,7 +807,7 @@ StTooltip {
background-gradient-direction: vertical; background-gradient-direction: vertical;
background-gradient-start: rgba(0,0,0,0.01); background-gradient-start: rgba(0,0,0,0.01);
background-gradient-end: rgba(0,0,0,0.95); background-gradient-end: rgba(0,0,0,0.95);
height: 28px; height: 36px;
} }
#notification { #notification {
@ -815,15 +815,15 @@ StTooltip {
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
background: rgba(0,0,0,0.9); background: rgba(0,0,0,0.9);
color: white; color: white;
padding: 2px 10px 10px 10px; padding: 8px 8px 8px 8px;
spacing-rows: 5px; spacing-rows: 10px;
spacing-columns: 10px; spacing-columns: 10px;
max-width: 40em; width: 34em;
} }
#summary-notification-bin #notification { #summary-notification-bin #notification {
/* message-tray.height + notification.padding-bottom */ /* message-tray.height + notification.padding-bottom */
padding-bottom: 38px; padding-bottom: 44px;
} }
#notification-scrollview { #notification-scrollview {
@ -843,21 +843,19 @@ StTooltip {
} }
.notification-button { .notification-button {
border: 2px rgba(0,0,0,0.0); background-color: #3c3c3c;
border-radius: 5px; padding: 2px 14px;
padding: 5px; border-radius: 12px;
background: #c0c0c0; border: 1px solid #181818;
color: black;
font-weight: bold;
} }
.notification-button:hover { .notification-button:hover {
border: 2px solid white; border: 1px solid #a1a1a1;
} }
.notification-button:active { .notification-button:active {
border: 2px solid white; border: 1px solid #a1a1a1;
background: #808080; background-color: #2b2b2b;
} }
.notification-icon-button { .notification-icon-button {
@ -865,6 +863,7 @@ StTooltip {
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
} }
.notification-icon-button:hover { .notification-icon-button:hover {
background: rgba(192,192,192,0.7); background: rgba(192,192,192,0.7);
} }
@ -875,20 +874,39 @@ StTooltip {
.chat-received { .chat-received {
background-gradient-direction: horizontal; background-gradient-direction: horizontal;
background-gradient-start: #606060; background-gradient-start: rgba(255, 255, 255, 0.2);
background-gradient-end: #000000; background-gradient-end: rgba(255, 255, 255, 0);
min-width: 20em; padding-left: 4px;
border-radius: 4px;
} }
.chat-sent { .chat-sent {
background-gradient-direction: horizontal; background-gradient-direction: horizontal;
background-gradient-start: #000000; background-gradient-start: rgba(255, 255, 255, 0);
background-gradient-end: #606060; background-gradient-end: rgba(255, 255, 255, 0.2);
padding-left: 4px;
border-radius: 4px;
} }
.chat-response { .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 /* The spacing and padding on the summary is tricky; we want to keep
@ -905,17 +923,9 @@ StTooltip {
* pseudo-class we could fix that... * pseudo-class we could fix that...
*/ */
#summary-mode { #summary-mode {
spacing: 4px; spacing: 6px;
padding: 2px 0px 0px 4px; padding: 2px 12px 0px 4px;
} height: 36px;
.summary-source-button {
padding: 0px 2px 0px 2px;
border: 1px solid transparent;
}
.summary-source-button:hover {
border: 1px solid #ffffff;
} }
.summary-source { .summary-source {