[gnome-themes-standard] Proper vertical spinbuttons styling.

[Lapo Calamandrei <lapo src gnome org>]

commit 88a2651d6c60f99a8a0cfe8ab222394fbfb1bdac
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Fri Sep 14 16:54:10 2012 +0200

    Proper vertical spinbuttons styling.

 themes/Adwaita/gtk-3.0/gtk-main-dark.css           |    3 +-
 themes/Adwaita/gtk-3.0/gtk-main.css                |    3 +-
 themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css |    7 ++-
 .../Adwaita/gtk-3.0/gtk-widgets-borders-dark.css   |    6 ++-
 themes/Adwaita/gtk-3.0/gtk-widgets-borders.css     |    6 ++-
 .../Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css |   12 +++
 themes/Adwaita/gtk-3.0/gtk-widgets.css             |   71 ++++++++++++++++---
 7 files changed, 90 insertions(+), 18 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/gtk-main-dark.css b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
index 8354997..35f5ff3 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
@@ -50,7 +50,8 @@
 
 @define-color insensitive_fg_color #535555;
 @define-color insensitive_bg_color mix(@theme_bg_color, @theme_base_color, 0.6);
- define-color insensitive_borders #535555;
+ define-color insensitive_borders @borders;
+ define-color insensitive_scale_borders #535555;
 
 @define-color trough_bg_color_a #30312f;
 @define-color trough_bg_color_b #41433f;
diff --git a/themes/Adwaita/gtk-3.0/gtk-main.css b/themes/Adwaita/gtk-3.0/gtk-main.css
index 961b6ab..c536c16 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main.css
@@ -50,7 +50,8 @@
 
 @define-color insensitive_bg_color #f4f4f2;
 @define-color insensitive_fg_color #a7aba7;
- define-color insensitive_borders shade (@internal_element_color, 1.37);
+ define-color insensitive_borders shade(@internal_element_color, 1.37);
+ define-color insensitive_scale_borders @insensitive_borders;
 
 @define-color trough_bg_color_a #bcbcb7;
 @define-color trough_bg_color_b #e0e0dd;
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css b/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css
index dbb484c..d97d4b6 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css
@@ -79,6 +79,7 @@
 
 /* Insensitive button background */
 .button:insensitive,
+.spinbutton.vertical .button:insensitive,
 .toolbar GtkComboBox .button:insensitive {
     background-image: none;
     background-color: @insensitive_bg_color;
@@ -177,7 +178,8 @@ column-header.button:backdrop,
 column-header .button:backdrop,
 column-header.button:insensitive:backdrop,
 column-header .button:insensitive:backdrop,
-.level-bar.trough:backdrop {
+.level-bar.trough:backdrop,
+.spinbutton.vertical.entry:backdrop {
     background-image: none;
     background-color: @theme_unfocused_base_color;
     box-shadow: none;
@@ -186,7 +188,8 @@ column-header .button:insensitive:backdrop,
 /* Unfocused windows insensitive entry background */
 .entry:insensitive:backdrop,
 GtkComboBox.combobox-entry .button:insensitive:backdrop,
-.level-bar.trough:insensitive:backdrop {
+.level-bar.trough:insensitive:backdrop,
+.spinbutton.vertical.entry:insensitive:backdrop {
     background-image: none;
     background-color: @unfocused_insensitive_bg_color;
 }
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css b/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css
index b4220c9..f1f0dd7 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css
@@ -7,6 +7,8 @@ GtkComboBox.combobox-entry .button,
 .button:active,
 .button:insensitive,
 .button.default:insensitive,
+.spinbutton.vertical .button:active,
+.spinbutton.vertical .button:insensitive,
 .trough,
 .trough.highlight,
 GtkSwitch.trough {
@@ -38,7 +40,8 @@ GtkSwitch.trough:active {
 }
 
 /* generic button borders */
-.button {
+.button,
+.spinbutton.vertical .button {
     border-image: url("borders/button-border-dark.svg") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
     border-width: 1px 1px 2px 1px;
@@ -186,6 +189,7 @@ column-header:last-child .button:active:hover {
 
 /* unfocused window: generic element borders */
 .button:backdrop,
+.spinbutton.vertical .button:backdrop,
 GtkComboBox.combobox-entry .entry:backdrop,
 GtkComboBox.combobox-entry .button:backdrop,
 .entry:backdrop,
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
index e8dfb82..c6ddda7 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
@@ -7,6 +7,8 @@ GtkComboBox.combobox-entry .button,
 .button:active,
 .button:insensitive,
 .button.default:insensitive,
+.spinbutton.vertical .button:active,
+.spinbutton.vertical .button:insensitive,
 .trough,
 .trough.highlight,
 GtkSwitch.trough {
@@ -38,7 +40,8 @@ GtkSwitch.trough:active {
 }
 
 /* generic button borders */
-.button {
+.button,
+.spinbutton.vertical .button {
     border-image: url("borders/button-border.svg") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
     border-width: 1px 1px 2px 1px;
@@ -188,6 +191,7 @@ column-header:last-child .button:active:hover {
 
 /* unfocused window: generic element borders */
 .button:backdrop,
+.spinbutton.vertical .button:backdrop,
 GtkComboBox.combobox-entry .entry:backdrop,
 GtkComboBox.combobox-entry .button:backdrop,
 .entry:backdrop,
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css b/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
index 8f3ed66..26c37d5 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-dark-overrides.css
@@ -150,6 +150,18 @@ GtkComboBox.combobox-entry .entry:focus:last-child {
                 inset -1px -1px alpha(lighter(@theme_selected_bg_color), 0.7);
 }
 
+.spinbutton.vertical .button {
+    icon-shadow: 0 -1px @button_text_shadow;
+}
+
+.spinbutton.vertical .button:active {
+    icon-shadow: 0 1px @button_active_text_shadow;
+}
+
+.spinbutton.vertical .button:backdrop {
+    icon-shadow: none;
+}
+
 GtkColorSwatch,
 GtkColorSwatch:selected,
 GtkColorSwatch:hover,
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index 3809e8c..e26c23d 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -478,25 +478,39 @@ GtkTreeView.separator:backdrop,
 
 .spinbutton.vertical .button {
     padding: 4px;
+    icon-shadow: 0 1px @button_text_shadow;
+}
 
-    border-color: @borders;
-    border-style: solid;
-    border-width: 1px;
+.spinbutton.vertical .button:active {
+    color: @button_active_text;
+    icon-shadow: 0 1px @button_active_text_shadow;
+}
+
+/* :insensitive:insensitive to override the dark overriden style for
+   normal spinbutton buttons, yeah we lack !important */
+.spinbutton.vertical .button:insensitive:insensitive {
+    icon-shadow: none;
 }
 
 .spinbutton.vertical .button,
-.spinbutton.vertical .button:active {
+/* :active:active to override the dark overriden style for
+   normal spinbutton buttons, yeah we lack !important */
+.spinbutton.vertical .button:active:active {
     box-shadow: none;
 }
 
 .spinbutton.vertical .button:first-child {
-    border-radius: 3px 3px 0 0;
-    border-bottom-color: shade(@borders, 1.10);
+    border-image-width: 3px 3px 0 3px;
+    border-width: 1px 1px 0 1px;
+    border-bottom-left-radius: 0; 
+    border-bottom-right-radius: 0;
 }
 
 .spinbutton.vertical .button:last-child {
-    border-top-color: shade(@borders, 1.10);
-    border-radius: 0 0 3px 3px;
+    border-image-width: 0 3px 4px 3px;
+    border-width: 0 1px 2px 1px;
+    border-top-left-radius: 0; 
+    border-top-right-radius: 0;
 }
 
 .spinbutton.vertical.entry {
@@ -505,14 +519,46 @@ GtkTreeView.separator:backdrop,
     border-width: 0 1px;
     border-style: solid;
     border-radius: 0;
+    box-shadow: inset 0 2px @entry_inset, 
+                inset 0 3px alpha(@entry_inset, 0.4),
+                inset 0 1px @borders, 
+                inset 0 -1px @borders;
+
+    /* I'm using box-shadow as borders, so I need to compensate
+       with padding. Those two values need to be entry padding +1 */
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.spinbutton.vertical.entry:insensitive {
+    border-color: @insensitive_borders;
+    box-shadow: inset 0 1px @insensitive_borders, 
+                inset 0 -1px @insensitive_borders;
 }
 
 .spinbutton.vertical.entry:focus {
-    box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.2),
-                inset 1px 1px alpha(@theme_selected_bg_color, 0.5),
-                inset -1px -1px alpha(@theme_selected_bg_color, 0.5);
+    border-color: @theme_selected_bg_color;
+    box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1), 
+                inset 1px 3px alpha(@theme_selected_bg_color, 0.1),
+                inset -1px -2px alpha(@theme_selected_bg_color, 0.2),
+                inset 0 1px @theme_selected_bg_color,
+                inset 0 -1px @theme_selected_bg_color;
 }
 
+.spinbutton.vertical.entry:backdrop {
+    /* Adding back box-shadow for borders */
+    border-color: @unfocused_borders;
+    box-shadow: inset 0 1px @unfocused_borders,
+                inset 0 -1px @unfocused_borders;
+}
+
+.spinbutton.vertical.entry:insensitive:backdrop {
+    /* Adding back box-shadow for borders */
+    box-shadow: inset 0 1px @unfocused_insensitive_borders,
+                inset 0 -1px @unfocused_insensitive_borders;
+}
+
+
 /*****************
  * Color Chooser *
  *****************/
@@ -853,7 +899,7 @@ GtkLevelBar.vertical {
 
 .scale.trough:insensitive {
     background-color: @insensitive_bg_color;
-    border-color: @insensitive_borders;
+    border-color: @insensitive_scale_borders;
     box-shadow: none;
     background-image: none;
 }
@@ -3247,3 +3293,4 @@ GsmFailWhaleDialog .button:active {
     border-color: @borders;
     border-width: 1px;
 }
+