Theme GtkSpinButton buttons SL #3406

- Set border radius to the buttons, so the layout is like
(value [-|+)) .

- Add a border between the buttons.

- Remove unneeded padding.

- Sets the active state colors, so the button blinks in black and
  white.

- Remove unneeded variables and calculations.

Signed-off-by: Manuel Quiñones <manuq@laptop.org>
Acked-by: Simon Schampijer <simon@laptop.org>

1 files changed, 13 insertions, 20 deletions

diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index 7186651..4323e6e 100644
--- a/gtk3/theme/gtk-widgets.css.em
+++ b/gtk3/theme/gtk-widgets.css.em
@@ -171,37 +171,30 @@ icon_large = icon_base * 5
 
 /* Spin buttons */
 
-${ spin_ythickness = my_ceil(3*subcell_size - font_height) }
-${ spin_xthickness = subcell_size }
-${ spin_btn_ythickness = spin_ythickness }
-${ spin_btn_xthickness = subcell_size * 2 }
-
-.spinbutton.button,
-.spinbutton.button:focused,
-.spinbutton.button:active {
-    padding: $(spin_ythickness)px $(spin_xthickness)px;
-    border-color: @button_grey;
-    border-width: $(thickness)px;
+.spinbutton.button {
+    border-radius: 0px;
+    border-width: 0px;
+    border-style: solid;
     background-color: @button_grey;
     color: @white;
 }
 
+.spinbutton.button:last-child {
+    border-radius: 0px $(2*subcell_size)px $(2*subcell_size)px 0px;
+    border-width: 0px 0px 0px $(thickness)px;
+    border-style: solid;
+    border-color: @selection_grey;
+}
+
+
 .spinbutton.button:active {
-    background-color: @white;
-    color: @black;
-    border-color: @white;
+    background-color: @black;
 }
 
 .spinbutton.button:insensitive {
     background-color: @selection_grey;
 }
 
-.spinbutton.button:focused,
-.spinbutton.button:focused:prelight,
-.spinbutton.button:focused:insensitive {
-    border-color: @white;
-}
-
 /* Toggle buttons */
 
 GtkToggleButton.button:active {