[Sugar-devel] [PATCH sugar-artwork] Remove colors, borders and paddings set for all the widgets, fix Button borders

[Manuel Quiñones]

The * {} and *:active {} CSS rules apply to all the widgets so they
have to be overriden many times.  We should do that for each widget
when needed instead.

Also fix the border for the GtkButton.  We have a white outline in its
focused state.  This is implemented as a CSS border in the GTK3+
version.  But if the button doesn't have a border in the normal state,
we get a resize in the parent widget.  This patch adds a border that
is the same color than the button background for the normal state.
Also adds a white background to the active (pressed) state.

Signed-off-by: Manuel Quiñones <manuq at laptop.org>
---
 gtk3/theme/gtk-widgets.css.em | 32 ++++++++++++--------------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index 5549970..fda6279 100644
--- a/gtk3/theme/gtk-widgets.css.em
+++ b/gtk3/theme/gtk-widgets.css.em
@@ -54,15 +54,6 @@ icon_large = icon_base * 5
 * {
     -sugar-focus-line: @white;
 
-    background-color: @button_grey;
-    color: @black;
-
-    border-color: transparent;
-    border-radius: 0px;
-    border-style: none;
-
-    padding: $(thickness)px;
-
     /* A lot of these will probably need to be changed, but this has to
        be done when the exact sizes are known */
     -GtkWidget-interior-focus: 0;
@@ -120,11 +111,6 @@ icon_large = icon_base * 5
     -GtkCheckButton-indicator-spacing: 3;
 }
 
-*:active {
-    background-color: @white;
-    color: @black;
-}
-
 /* Backgrounds and windows */
 
 .background {
@@ -154,19 +140,21 @@ icon_large = icon_base * 5
     -GtkButton-inner-border: 0 0 0 0;
     padding: $(border)px $(border)px $(border)px $(border)px;
 
+    border-width: $(thickness)px;
+    border-color: @button_grey;
+    border-style: solid;
     border-radius: $(2*subcell_size)px;
     background-color: @button_grey;
     color: @white;
 }
 
-.button * {
-    color: @white;
-}
-
 .button:focused {
-    border-width: $(thickness)px;
     border-color: @white;
-    border-style: solid;
+}
+
+.button:active {
+    background-color: @white;
+    color: @black;
 }
 
 /* Spin buttons */
@@ -588,6 +576,10 @@ GtkScale.slider:active {
 
 /* Radio and check buttons */
 
+GtkCheckButton {
+    color: @black;
+}
+
 GtkCheckButton:prelight {
     background-color: alpha(@theme_base_color, 0.0);
 }
-- 
1.7.11.4