[gnome-themes-standard] osd: imporve theming support for OSD toolbars and buttons

[Cosimo Cecchi <cosimoc src gnome org>]

commit 156b95a2a5161d8215fb14399f3f0eace53ecf00
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Fri May 25 12:31:28 2012 -0400

    osd: imporve theming support for OSD toolbars and buttons
    
    - add theming for backdrop state
    - fix borders of toolbar buttons as used in different scenarios
    - tweak active/insensitive/hover background and foreground colors
    - tweak button/toolbar padding according to mockups

 themes/Adwaita/gtk-3.0/gtk-main-common.css |   22 +++-
 themes/Adwaita/gtk-3.0/gtk-widgets.css     |  156 ++++++++++++++++++++--------
 2 files changed, 130 insertions(+), 48 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/gtk-main-common.css b/themes/Adwaita/gtk-3.0/gtk-main-common.css
index 64ba3d0..b177baf 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main-common.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main-common.css
@@ -10,9 +10,9 @@
 @define-color osd_fg #ededed;
 @define-color osd_bg alpha(@osd_base, 0.80);
 
- define-color osd_text_shadow alpha(black, 0.75);
+ define-color osd_bg_backdrop alpha(shade(@osd_base, 1.40), 0.90);
 
- define-color osd_active_fg shade(@osd_fg, 1.10);
+ define-color osd_text_shadow alpha(black, 0.75);
 
 @define-color osd_toolbar_bg_a alpha(@osd_base, 0.80);
 @define-color osd_toolbar_bg_b alpha(#101010, 0.80);
@@ -22,6 +22,9 @@
 @define-color osd_button_bg_b alpha(@osd_lowlight, 0.05);
 @define-color osd_button_bg_c alpha(@osd_highlight, 0.12);
 
+ define-color osd_button_bg_insensitive alpha(@osd_highlight, 0.25);
+ define-color osd_button_bg_insensitive_active alpha(@osd_highlight, 0.16);
+
 @define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28);
 @define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14);
 @define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14);
@@ -30,10 +33,21 @@
 @define-color osd_button_bg_active_b alpha(@osd_highlight, 0.23);
 @define-color osd_button_bg_active_c alpha(@osd_lowlight, 0.17);
 
- define-color osd_button_border alpha(@osd_highlight, 0.40);
+ define-color osd_button_bg_backdrop alpha(@osd_highlight, 0.18);
+ define-color osd_button_bg_backdrop_hover alpha(@osd_highlight, 0.25);
+ define-color osd_button_bg_backdrop_active alpha(@osd_highlight, 0.35);
+ define-color osd_button_bg_backdrop_insensitive alpha(@osd_highlight, 0.08);
+
+ define-color osd_button_fg_backdrop shade(@osd_fg, 0.70);
+ define-color osd_button_fg_backdrop_active shade(@osd_fg, 0.95);
+
 @define-color osd_button_fg shade(@osd_fg, 0.80);
- define-color osd_button_inset shade(@osd_fg, 0.67);
+ define-color osd_button_fg_hover shade(@osd_fg, 0.96);
+ define-color osd_button_fg_active shade(@osd_fg, 1.10);
+ define-color osd_button_fg_insensitive shade(@osd_fg, 0.70);
 
+ define-color osd_button_border alpha(@osd_highlight, 0.40);
+ define-color osd_button_inset shade(@osd_fg, 0.67);
 @define-color osd_button_shadow alpha(black, 0.35);
 
 @define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index c4c1268..74242cd 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -2030,22 +2030,23 @@ GtkCheckButton:selected:focus {
     text-shadow: 0 1px @osd_text_shadow;
 }
 
+.osd:backdrop {
+    background-color: @osd_bg_backdrop;
+}
+
 GtkOverlay.osd {
     background-color: transparent;
 }
 
-.osd.toolbar {
-    padding: 16px;
-    border-style: none;
+.osd .button,
+.osd .button:active,
+.osd .button:focus,
+.osd .button:focus:active {
+    border-width: 1px;
+    border-style: solid;
+    border-image: none;
+    border-color: @osd_button_border;
     border-radius: 5px;
-
-    background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(@osd_toolbar_bg_a),
-                                    color-stop(0.63, @osd_toolbar_bg_b),
-                                    to(@osd_toolbar_bg_c));
-    background-color: transparent;
-
-    -GtkToolbar-button-relief: normal;
 }
 
 .osd .button {
@@ -2055,17 +2056,11 @@ GtkOverlay.osd {
                                     from(@osd_button_bg_a),
                                     color-stop(0.68, @osd_button_bg_b),
                                     to(@osd_button_bg_c));
-    border-width: 1px 0;
-    border-style: solid;
-    border-image: none;
-    border-color: @osd_button_border;
-    border-radius: 0;
 
     color: @osd_button_fg;
 
     text-shadow: 0 -1px @osd_button_shadow;
     icon-shadow: 0 -1px @osd_button_shadow;
-    box-shadow: inset -1px 0 @osd_button_inset;
 }
 
 .osd .button,
@@ -2074,49 +2069,67 @@ GtkOverlay.osd {
     background-color: transparent;
 }
 
-.osd .button:nth-child(first) {
-    border-radius: 4px 0 0 4px;
-    border-left-width: 1px;
-    box-shadow: inset -1px 0 @osd_button_inset;
+.osd .button:insensitive {
+    background-image: none;
+    background-color: @osd_button_bg_insensitive;
 }
 
-.osd .button:nth-child(last) {
-    box-shadow: none;
-    border-radius: 0 4px 4px 0;
-    border-right-width: 1px;
+.osd .button:active:insensitive {
+    background-image: none;
+    background-color: @osd_button_bg_insensitive_active;
 }
 
-.osd GtkToolButton .button,
-.osd .button:only-child {
-    border-width: 1px;
-    border-radius: 4px;
-    border-style: solid;
+.osd .button:backdrop {
+    background-image: none;
+    background-color: @osd_button_bg_backdrop;
+}
 
-    box-shadow: none;
+.osd .button:backdrop:hover,
+.osd .button:backdrop:active:hover {
+    background-image: none;
+    background-color: @osd_button_bg_backdrop_hover;
 }
 
-.osd .separator {
-    color: shade(@osd_lowlight, 0.80);
+.osd .button:backdrop:active {
+    background-image: none;
+    background-color: @osd_button_bg_backdrop_active;
 }
 
-.osd .button:hover {
-    background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(@osd_button_bg_hover_a),
-                                    color-stop(0.68, @osd_button_bg_hover_b),
-                                    to(@osd_button_bg_hover_c));
+.osd .button:backdrop:insensitive,
+.osd .button:backdrop:insensitive:active {
+    background-image: none;
+    background-color: @osd_button_bg_backdrop_insensitive;
 }
 
 .osd .button *:hover {
-    color: shade(@osd_button_fg, 1.20);
+    color: @osd_button_fg_hover;
+}
+
+.osd .button *:active
+.osd .button *:hover:active {
+    color: @osd_button_fg_active;
 }
 
-.osd .button *:hover:active,
-.osd .button *:active {
-    color: @osd_active_fg;
+.osd .button *:insensitive,
+.osd .button *:insensitive:active {
+    color: @osd_button_fg_insensitive;
 }
 
-.osd .button *:insensitive {
-    color: shade(@osd_button_fg, 0.75);
+.osd .button *:backdrop,
+.osd .button *:backdrop:insensitive,
+.osd .button *:backdrop:insensitive:active {
+    color: @osd_button_fg_backdrop;
+}
+
+.osd .button *:backdrop:active {
+    color: @osd_button_fg_backdrop_active;
+}
+
+.osd .button:hover {
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(@osd_button_bg_hover_a),
+                                    color-stop(0.68, @osd_button_bg_hover_b),
+                                    to(@osd_button_bg_hover_c));
 }
 
 .osd .button:active,
@@ -2127,6 +2140,61 @@ GtkOverlay.osd {
                                     to(@osd_button_bg_active_c));
 }
 
+.osd.toolbar {
+    padding: 10px;
+    border-style: none;
+    border-radius: 7px;
+
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(@osd_toolbar_bg_a),
+                                    color-stop(0.63, @osd_toolbar_bg_b),
+                                    to(@osd_toolbar_bg_c));
+    background-color: transparent;
+
+    -GtkToolbar-button-relief: normal;
+}
+
+.osd.toolbar:backdrop {
+    background-image: none;
+    background-color: @osd_bg_backdrop;
+}
+
+.osd.toolbar .button,
+.osd.toolbar .button:focus {
+    padding: 8px;
+    border-width: 1px 0;
+    border-radius: 0;
+    box-shadow: inset -1px 0 @osd_button_inset;
+}
+
+.osd.toolbar .button:first-child {
+    border-radius: 5px 0 0 5px;
+    border-width: 1px 0 1px 1px;
+    box-shadow: inset -1px 0 @osd_button_inset;
+}
+
+.osd.toolbar .button:last-child {
+    box-shadow: none;
+    border-radius: 0 5px 5px 0;
+    border-width: 1px 1px 1px 0;
+}
+
+.osd.toolbar .button:only-child,
+.osd.toolbar GtkToolButton .button,
+.osd.toolbar GtkToolButton:only-child .button,
+.osd.toolbar GtkToolButton:last-child .button,
+.osd.toolbar GtkToolButton:first-child .button {
+    border-width: 1px;
+    border-radius: 5px;
+    border-style: solid;
+
+    box-shadow: none;
+}
+
+.osd .separator {
+    color: shade(@osd_lowlight, 0.80);
+}
+
 /* used by gnome-settings-daemon's media-keys OSD */
 .osd.trough {
     background-color: @osd_trough_bg;