[gnome-shell] theme: make modal dialog buttons match the mockups



commit dec55a3291d8e5be6a73f4f8fb4f96e54e8e19b5
Author: Allan Day <allanpday gmail com>
Date:   Tue Aug 2 16:29:02 2011 +0100

    theme: make modal dialog buttons match the mockups
    
    The buttons should have a glassy transparent look. Also, they should not
    be as tall, should light up on hover, and their labels should be white
    in order to stand out. Making the labels solid white requires removing the
    transparency set in modalDialog.js. Also, add a separate color setting
    for the dialog as a whole - this avoids having a white icon.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=655428

 data/theme/gnome-shell.css |   20 +++++++++++++-------
 js/ui/modalDialog.js       |    1 -
 2 files changed, 13 insertions(+), 8 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 8ed13c5..9a6218d 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1505,7 +1505,7 @@ StTooltip StLabel {
     border-radius: 24px;
     background-color: rgba(0.0, 0.0, 0.0, 0.9);
     border: 2px solid #868686;
-    color: #ffffff;
+    color: #babdb6;
 
     padding-right: 42px;
     padding-left: 42px;
@@ -1521,25 +1521,31 @@ StTooltip StLabel {
     border: 1px solid #8b8b8b;
     border-radius: 18px;
     font-size: 10.5pt;
+    color: white;
 
     margin-left: 10px;
     margin-right: 10px;
 
     padding-left: 32px;
     padding-right: 32px;
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-top: 6px;
+    padding-bottom: 6px;
 
     background-gradient-direction: vertical;
-    background-gradient-start: #29323b;
-    background-gradient-end: #121a24;
+    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: #121a24;
-    background-gradient-end: #29323b;
+    background-gradient-start: rgba(255, 255, 255, 0);
+    background-gradient-end: rgba(255, 255, 255, 0.2);
 }
 
 .modal-dialog-button:focus {
diff --git a/js/ui/modalDialog.js b/js/ui/modalDialog.js
index ce943b9..ab637e6 100644
--- a/js/ui/modalDialog.js
+++ b/js/ui/modalDialog.js
@@ -82,7 +82,6 @@ ModalDialog.prototype = {
                                  y_align: St.Align.START });
 
         this._buttonLayout = new St.BoxLayout({ style_class: 'modal-dialog-button-box',
-                                                opacity:     220,
                                                 vertical:    false });
         this._dialogLayout.add(this._buttonLayout,
                                { expand:  true,



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]