From e7b9933036d9c971077f053cdc12c61c8f5e4561 Mon Sep 17 00:00:00 2001 From: Allan Day Date: Thu, 4 Aug 2011 14:52:41 +0100 Subject: [PATCH] theme: consistent button appearance and behaviour Update modal dialog, notification and search result buttons to use the same style. This improves the look of notification buttons and also ensures that all buttons change appearance when they are focused or pressed. Also change all buttons so that their labels are correctly vertically centered. https://bugzilla.gnome.org/show_bug.cgi?id=655974 --- data/theme/gnome-shell.css | 147 +++++++++++++++---------------------- 1 file changed, 58 insertions(+), 89 deletions(-) diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 458e5a503..f65e76f2f 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -223,6 +223,39 @@ StTooltip StLabel { spacing: .5em; } +/* Shared button properties */ + +.dash-search-button, .notification-button, .notification-icon-button, +.hotplug-notification-item, .hotplug-resident-eject-button, +.modal-dialog-button { + color: white; + border: 1px solid #8b8b8b; + background-gradient-direction: vertical; + background-gradient-start: rgba(255, 255, 255, 0.2); + background-gradient-end: rgba(255, 255, 255, 0); +} + +.dash-search-button:hover, .notification-button:hover, +.notification-icon-button:hover, .hotplug-notification-item:hover, +.hotplug-resident-eject-button:hover, .modal-dialog-button:hover { + background-gradient-start: rgba(255, 255, 255, 0.3); + background-gradient-end: rgba(255, 255, 255, 0.1); +} + +.dash-search-button:selected, .notification-button:focus, +.notification-icon-button:focus, .hotplug-notification-item:focus, +.modal-dialog-button:focus { + border: 2px solid #8b8b8b; +} + +.dash-search-button:active, .dash-search-button:pressed, +.notification-button:active, .notification-icon-button:active, +.hotplug-notification-item:active, .hotplug-resident-eject-button:active, +.modal-dialog-button:active, .modal-dialog-button:pressed { + background-gradient-start: rgba(255, 255, 255, 0); + background-gradient-end: rgba(255, 255, 255, 0.2); +} + /* Panel */ #panel { @@ -556,27 +589,26 @@ StTooltip StLabel { spacing: 12px; } +/* Text labels are an odd number of pixels tall. The uneven top and bottom + * padding compensates for this and ensures that the label is vertically + * centered */ .dash-search-button { - background-gradient-direction: vertical; - background-gradient-start: rgba(255, 255, 255, 0.2); - background-gradient-end: rgba(255, 255, 255, 0); - border: 1px solid #808080; border-radius: 16px; - height: 32px; + padding-top: 4px; + padding-bottom: 5px; width: 300px; font-weight: bold; } -.dash-search-button:selected, -.dash-search-button:hover { - background-gradient-direction: vertical; - background-gradient-start: rgba(255, 255, 255, 0.4); - background-gradient-end: rgba(255, 255, 255, 0.2); +.dash-search-button:selected { + padding-top: 3px; + padding-bottom: 4px; + width: 298px; } .dash-search-button-label { - color: #cccccc; - font-size: 12pt; + color: white; + font-size: 11pt; } /* Apps */ @@ -1099,45 +1131,26 @@ StTooltip StLabel { } #notification-actions { - spacing: 5px; + spacing: 10px; } .notification-button { - background-color: #3c3c3c; - padding: 2px 14px; - border-radius: 12px; - border: 1px solid #181818; -} - -.notification-button:hover { - border: 1px solid #a1a1a1; + border-radius: 18px; + font-size: 11pt; + padding: 4px 42px 5px; } .notification-button:focus { - background-color: #666666; -} - -.notification-button:active { - border: 1px solid #a1a1a1; - background-color: #2b2b2b; + padding: 3px 41px 4px; } .notification-icon-button { - border: 2px rgba(0,0,0,0.0); border-radius: 5px; padding: 5px; } -.notification-icon-button:hover { - border: 2px rgba(161,161,161,0.7); -} - .notification-icon-button:focus { - background: rgba(192,192,192,0.7); -} - -.notification-icon-button:active { - background: rgba(128,128,128,0.7); + padding: 4px; } .notification-icon-button > StIcon { @@ -1150,23 +1163,13 @@ StTooltip StLabel { } .hotplug-notification-item { - background-color: #3c3c3c; - padding: 0px 10px; - border-radius: 8px; - border: 1px solid #181818; -} - -.hotplug-notification-item:hover { - border: 1px solid #a1a1a1; + padding: 2px 10px; + border-radius: 18px; + font-size: 10.5pt; } .hotplug-notification-item:focus { - background-color: #666666; -} - -.hotplug-notification-item:active { - border: 1px solid #a1a1a1; - background-color: #2b2b2b; + padding: 1px 71px 1px 11px; } .hotplug-notification-item-icon { @@ -1208,19 +1211,11 @@ StTooltip StLabel { } .hotplug-resident-eject-button { - padding: 2px; - border: 1px solid #2b2b2b; + padding: 7px; border-radius: 5px; - color: #ccc; } -.hotplug-resident-eject-button:hover { - color: #fff; - background-color: #2b2b2b; - border: 1px solid #a1a1a1; -} - .chat-log-message { color: #888888; } @@ -1526,43 +1521,17 @@ StTooltip StLabel { } .modal-dialog-button { - border: 1px solid #8b8b8b; border-radius: 18px; - font-size: 10.5pt; + font-size: 11pt; color: white; margin-left: 10px; margin-right: 10px; - - padding-left: 32px; - padding-right: 32px; - padding-top: 6px; - padding-bottom: 6px; - - background-gradient-direction: vertical; - background-gradient-start: rgba(255, 255, 255, 0.2); - background-gradient-end: rgba(255, 255, 255, 0); -} - -.modal-dialog-button:hover { - background-gradient-start: rgba(255, 255, 255, 0.3); - background-gradient-end: rgba(255, 255, 255, 0.1); -} - -.modal-dialog-button:active, -.modal-dialog-button:pressed { - border-color: #a5a5a5; - background-gradient-start: rgba(255, 255, 255, 0); - background-gradient-end: rgba(255, 255, 255, 0.2); + padding: 4px 32px 5px; } .modal-dialog-button:focus { - border: 2px solid #a5a5a5; - - padding-left: 31px; - padding-right: 31px; - padding-top: 7px; - padding-bottom: 7px; + padding: 3px 31px 4px; } /* Run Dialog */