[gnome-themes-standard] fix spin buttons

[William Jon McCann <mccann src gnome org>]

commit 4c75f9f47986787fa1e14e730d97aa426608c57f
Author: William Jon McCann <william jon mccann gmail com>
Date:   Tue May 6 14:55:49 2014 -0400

    fix spin buttons

 themes/Adwaita/gtk-3.0/gtk-widgets.css |  351 +++++++++++++++-----------------
 1 files changed, 162 insertions(+), 189 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index b2261e4..cf5750b 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -525,10 +525,11 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
 /*****************
  * GtkSpinButton *
  *****************/
-.spinbutton .button {
+.spinbutton .button,
+.spinbutton .button:insensitive {
     color: @internal_element_color;
     padding: 2px 6px;
-    border-width: 0;
+    border-width: 0 0 1px;
     border-radius: 0;
     border-style: none;
     border-image: none;
@@ -558,8 +559,9 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
     color: @internal_element_prelight;
 }
 
-.spinbutton .button:first-child {
-    border-radius: 2px 0 0 2px;
+.spinbutton .button:first-child,
+.spinbutton .button:insensitive:first-child {
+    border-radius: 0;
     box-shadow: none;
 }
 
@@ -572,23 +574,39 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
 }
 
 /* Add back the glowy effect from the entry covered by the pushed button background*/
-.spinbutton .button:active {
+.spinbutton .button:active,
+.spinbutton .button:active:hover {
+    border-radius: 0;
+    border-width: 0;
     box-shadow: inset 1px 0 @inset_dark_color,
-                inset 0 1px alpha(@theme_selected_bg_color, 0.2),
-                inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
+                inset 0 .5px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset 0 -1px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset 0 .5px alpha(@theme_selected_bg_color, 0.9),
+                inset 0 -1px alpha(@theme_selected_bg_color, 0.9);
 }
 
-.spinbutton .button:first-child:active {
-    box-shadow: inset 1px 1px alpha(@theme_selected_bg_color, 0.2),
-                inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
+.spinbutton .button:first-child:active,
+.spinbutton .button:first-child:active:hover {
+    border-radius: 0;
+    border-width: 0;
+    box-shadow: inset .5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset .5px -1px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset .5px .5px alpha(@theme_selected_bg_color, 0.9),
+                inset .5px -1px alpha(@theme_selected_bg_color, 0.9);
 }
 
-.spinbutton .button:last-child:active {
+.spinbutton .button:last-child:active,
+.spinbutton .button:last-child:active:hover {
+    border-radius: 0 3.5px 3.5px 0;
+    border-width: 0;
     box-shadow: inset 1px 0 @inset_dark_color,
-                inset 0 1px alpha(@theme_selected_bg_color, 0.2),
-                inset -1px -1px alpha(@theme_selected_bg_color, 0.2);
+                inset -.5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset -.5px -1px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset -.5px .5px alpha(@theme_selected_bg_color, 0.9),
+                inset -.5px -1px alpha(@theme_selected_bg_color, 0.9);
 }
 
+/* Vertical */
 
 .spinbutton.vertical .button {
     padding: 4px;
@@ -625,72 +643,82 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
 }
 
 .spinbutton.vertical .button,
+.spinbutton.vertical .button:insensitive,
+.spinbutton.vertical .button:backdrop,
+.spinbutton.vertical .button:insensitive:backdrop,
 /* :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-image-width: 3px 3px 0 3px;
-    border-width: 1px 1px 0 1px;
-    border-bottom-left-radius: 0; 
-    border-bottom-right-radius: 0;
+    border-width: 0;
+    border-radius: 3.5px 3.5px 0 0;
+    border-image: none;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
 }
 
-.spinbutton.vertical .button:last-child {
-    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 .button:first-child,
+.spinbutton.vertical .button:first-child:insensitive,
+.spinbutton.vertical .button:first-child:backdrop,
+.spinbutton.vertical .button:first-child:insensitive:backdrop {
+    border-width: 0;
+    border-radius: 3.5px 3.5px 0 0;
+    border-image: none;
+    border-style: solid;
+    box-shadow: inset .5px .5px shade(@borders, 0.8),
+                inset -.5px .5px shade(@borders, 0.8);
 }
 
-.spinbutton.vertical.entry {
+.spinbutton.vertical .button:last-child,
+.spinbutton.vertical .button:last-child:insensitive,
+.spinbutton.vertical .button:last-child:backdrop,
+.spinbutton.vertical .button:last-child:insensitive:backdrop {
+    border-width: 0 0 1px;
+    border-radius: 0 0 3.5px 3.5px;
     border-image: none;
-    border-color: @borders;
-    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;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset .5px -.5px shade(@borders, 0.8),
+                inset -.5px -.5px shade(@borders, 0.8);
 }
 
-.spinbutton.vertical.entry:insensitive {
-    border-color: @insensitive_borders;
-    box-shadow: inset 0 1px @insensitive_borders, 
-                inset 0 -1px @insensitive_borders;
+.spinbutton.vertical.entry,
+.spinbutton.vertical.entry:insensitive,
+.spinbutton.vertical.entry:backdrop,
+.spinbutton.vertical.entry:insensitive:backdrop {
+    border-image: none;
+    border-width: 0;
+    border-radius: 0;
+    box-shadow: inset 0 2px 2px alpha(@borders, 0.3),
+                inset .5px .5px alpha(@borders, 0.9),
+                inset -.5px .5px alpha(@borders, 0.9),
+                inset .5px -.5px alpha(@borders, 0.9),
+                inset -.5px -.5px alpha(@borders, 0.9);
 }
 
 .spinbutton.vertical.entry:focus {
     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;
+    box-shadow: inset .5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset -.5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset .5px -.5px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset -.5px -.5px 2px alpha(@theme_selected_bg_color, 0.3),
+                inset .5px .5px alpha(@theme_selected_bg_color, 0.9),
+                inset -.5px .5px alpha(@theme_selected_bg_color, 0.9),
+                inset .5px -.5px alpha(@theme_selected_bg_color, 0.9),
+                inset -.5px -.5px alpha(@theme_selected_bg_color, 0.9);
+    transition: all 200ms ease-in;
 }
 
-.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 .button:first-child:active,
+.spinbutton.vertical .button:first-child:active:hover {
+    border-radius: 3.5px 3.5px 0 0;
 }
 
-.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;
+.spinbutton.vertical .button:last-child:active,
+.spinbutton.vertical .button:last-child:active:hover {
+    border-radius: 0 0 3.5px 3.5px;
+    border-width: 0 0 1px;
 }
 
-
 /*****************
  * Color Chooser *
  *****************/
@@ -1199,8 +1227,6 @@ GtkComboBox.combobox-entry .button {
 .button:active,
 .button:insensitive,
 .button.default:insensitive,
-.spinbutton.vertical .button:active,
-.spinbutton.vertical .button:insensitive,
 .inline-toolbar.toolbar.vertical .button:active,
 .inline-toolbar.toolbar.vertical .button:insensitive,
 .inline-toolbar.toolbar.vertical .button.default:insensitive,
@@ -1334,19 +1360,12 @@ GtkSwitch.trough:backdrop,
 }
 
 /* linked entries/buttons */
-.linked {
-    border: 20px;
-    background-color: red;
-    background-image: none;
-}
-
 .linked .entry {
     border-radius: 3.5px 0 0 3.5px;
     border-image: none;
     border-width: 0px 0px 1px;
     border-style: solid;
     border-color: alpha(white, 0.5);
-    padding: 20px;
 }
 
 .linked .entry:first-child {
@@ -1382,145 +1401,91 @@ GtkSwitch.trough:backdrop,
 }
 
 /* Set up shadows and hilights for button visual separation */
+
+/* Middle button */
 .linked .button,
+.linked .button:insensitive,
 .toolbar .button.raised.linked,
 .toolbar .raised.linked .button,
 .inline-toolbar.toolbar .button,
 .inline-toolbar.toolbar GtkToolButton > .button {
-    box-shadow: inset 1px 0 @inset_light_color, inset -1px 0 @inset_dark_color;
+    border-radius: 0;
+    border-image: none;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset 1px 0 @inset_light_color,
+                inset -1px 0 @inset_dark_color,
+                inset 0 .5px shade(@borders, 0.8),
+                inset 0 -.5px shade(@borders, 0.8);
+}
+.linked .button:active,
+.linked .button:active:hover {
+    border-radius: 0;
+    border-image: none;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset 0 .5px shade(@borders, 0.8),
+                inset 0 -.5px shade(@borders, 0.8);
+}
+
+.linked .button:insensitive {
+border: 20px;
 }
 
+/* Leftmost button */
 .linked .button:first-child,
+.linked .button:insensitive:first-child,
 .toolbar .button.raised.linked:first-child,
 .toolbar .raised.linked .button:first-child,
 .inline-toolbar.toolbar .button:first-child,
 .inline-toolbar.toolbar GtkToolButton:first-child > .button {
-    box-shadow: inset -1px 0 @inset_dark_color;
+    border-radius: 3.5px 0 0 3.5px;
+    border-image: none;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset -1px 0 @inset_dark_color,
+                inset .5px .5px shade(@borders, 0.8),
+                inset .5px -.5px shade(@borders, 0.8);
+}
+.linked .button:active:first-child,
+.linked .button:active:hover:first-child {
+    border-radius: 3.5px 0 0 3.5px;
+    border-image: none;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset .5px .5px shade(@borders, 0.8),
+                inset .5px -.5px shade(@borders, 0.8);
 }
 
+/* Rightmost button */
 .linked .button:last-child,
+.linked .button:insensitive:last-child,
 .toolbar .button.raised.linked:last-child,
 .toolbar .raised.linked .button:last-child,
 .inline-toolbar.toolbar .button:last-child,
 .inline-toolbar.toolbar GtkToolButton:last-child > .button {
-    box-shadow: inset 1px 0 @inset_light_color;
-}
-
-.linked .button:active,
-.toolbar .button.raised.linked:active,
-.toolbar .raised.linked .button:active,
-.inline-toolbar.toolbar .button:active,
-.inline-toolbar.toolbar GtkToolButton > .button:active {
-    box-shadow: inset 0 1px 1px alpha(black, 0.1),
-                inset 1px 0 @inset_dark_color;
-}
-
-.linked .button:insensitive,
-.toolbar .button.raised.linked:insensitive,
-.toolbar .raised.linked .button:insensitive,
-.inline-toolbar.toolbar .button:insensitive,
-.inline-toolbar.toolbar GtkToolButton > .button:insensitive {
-    box-shadow: inset -1px 0 @inset_dark_color;
-}
-
-.linked .button:backdrop,
-.toolbar .button.raised.linked:backdrop,
-.toolbar .raised.linked .button:backdrop,
-.inline-toolbar.toolbar .button:backdrop,
-.inline-toolbar.toolbar GtkToolButton > .button:backdrop {
-    box-shadow: inset -1px 0 @unfocused_borders;
-}
-
-.linked .button:insensitive:backdrop,
-.toolbar .button.raised.linked:insensitive:backdrop,
-.toolbar .raised.linked .button:insensitive:backdrop,
-.inline-toolbar.toolbar .button:insensitive:backdrop,
-.inline-toolbar.toolbar GtkToolButton > .button:insensitive:backdrop {
-    box-shadow: inset -1px 0 @unfocused_insensitive_borders;
-}
-
-/* remove box shadow from last-child and only-child */
-.linked .button:backdrop:last-child,
-.linked .button:insensitive:last-child,
-.linked .button:backdrop:insensitive:last-child,
-.linked .button:only-child,
-.linked .button:backdrop:only-child,
-.linked .button:backdrop:insensitive:only-child,
-.toolbar .button.raised.linked:backdrop:last-child,
-.toolbar .button.raised.linked:insensitive:last-child,
-.toolbar .button.raised.linked:backdrop:insensitive:last-child,
-.toolbar .button.raised.linked:backdrop:only-child,
-.toolbar .button.raised.linked:backdrop:insensitive:only-child,
-.toolbar .raised.linked .button:insensitive:last-child,
-.toolbar .raised.linked .button:backdrop:last-child,
-.toolbar .raised.linked .button:insensitive:backdrop:last-child,
-.toolbar .raised.linked .button:backdrop:only-child,
-.toolbar .raised.linked .button:backdrop:insensitive:only-child,
-.inline-toolbar.toolbar .button:backdrop:last-child,
-.inline-toolbar.toolbar .button:insensitive:last-child,
-.inline-toolbar.toolbar .button:backdrop:insensitive:last-child,
-.inline-toolbar.toolbar .button:only-child,
-.inline-toolbar.toolbar .button:backdrop:only-child,
-.inline-toolbar.toolbar .button:backdrop:insensitive:only-child,
-.inline-toolbar.toolbar GtkToolButton:last-child > .button:backdrop,
-.inline-toolbar.toolbar GtkToolButton:last-child > .button:insensitive,
-.inline-toolbar.toolbar GtkToolButton:last-child > .button:backdrop:insensitive,
-.inline-toolbar.toolbar GtkToolButton:only-child > .button,
-.inline-toolbar.toolbar GtkToolButton:only-child > .button:backdrop,
-.inline-toolbar.toolbar GtkToolButton:only-child > .button:backdrop:insensitive {
-    box-shadow: inset .5px .5px @borders,
-                inset -.5px .5px @borders,
-                inset .5px -.5px @borders,
-                inset -.5px -.5px @borders;
-}
-
-/* remove inset from first-child and only-child active buttons */
-.linked .button:only-child:active,
-.toolbar .button.raised.linked:only-child:active,
-.toolbar .raised.linked .button:only-child:active,
-.inline-toolbar.toolbar .button:only-child:active,
-.inline-toolbar.toolbar GtkToolButton > .button:only-child:active,
-.linked .button:first-child:active,
-.toolbar .button.raised.linked:first-child:active,
-.toolbar .raised.linked .button:first-child:active,
-.inline-toolbar.toolbar .button:first-child:active,
-.inline-toolbar.toolbar GtkToolButton > .button:first-child:active  {
-    box-shadow: inset 0 1px 1px alpha(black, 0.1);
-}
-
-/* Middle button */
-.linked .button,
-.linked .button:active,
-.linked .button:active:hover,
-.linked .button:insensitive {
-    border-right-width: 0;
-    border-left-width: 0;
-    border-image-width: 3px 0 4px 0;
-    border-radius: 0;
-}
-
-/* Leftmost button */
-.linked .button:first-child,
-.linked .button:active:first-child,
-.linked .button:active:hover:first-child,
-.linked .button:insensitive:first-child {
-    border-right-width: 0;
-    border-left-width: 1px;
-    border-image-width: 3px 0 4px 3px;
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
+    border-radius: 0 3.5px 3.5px 0;
+    border-image: none;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset 1px 0 @inset_light_color,
+                inset -.5px .5px shade(@borders, 0.8),
+                inset -.5px -.5px shade(@borders, 0.8);
 }
-
-/* Rightmost button */
-.linked .button:last-child,
 .linked .button:active:last-child,
-.linked .button:active:hover:last-child,
-.linked .button:insensitive:last-child {
-    border-right-width: 1px;
-    border-left-width: 0;
-    border-image-width: 3px 3px 4px 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+.linked .button:active:hover:last-child {
+    border-radius: 0 3.5px 3.5px 0;
+    border-image: none;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset -.5px .5px shade(@borders, 0.8),
+                inset -.5px -.5px shade(@borders, 0.8);
 }
 
 /* Linked single button */
@@ -1528,12 +1493,20 @@ GtkSwitch.trough:backdrop,
 .linked .button:active:only-child,
 .linked .button:active:hover:only-child,
 .linked .button:insensitive:only-child {
-    border-right-width: 1px;
-    border-left-width: 1px;
-    border-image-width: 3px 3px 4px 3px;
     border-radius: 3.5px;
+    border-image: none;
+    border-width: 0px 0px 1px;
+    border-style: solid;
+    border-color: alpha(white, 0.5);
+    box-shadow: inset .5px .5px @borders,
+                inset -.5px .5px @borders,
+                inset .5px -.5px @borders,
+                inset -.5px -.5px @borders;
 }
 
+
+/* Vertical linked buttons */
+
 /* Middle button (vertical) */
 .linked.vertical .button,
 .linked.vertical .button:active,
@@ -1883,7 +1856,7 @@ GtkLinkButton.button:active {
     text-shadow: none;
 }
 
-.button .separator { 
+.button .separator {
     color: shade(@internal_element_color, 1.30);
 }