[Sugar-devel] [PATCH sugar-artwork 3/4] Remove colors, borders and paddings set for all the widgets, fix Button borders - SL #3837

[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.

Also fix the label in the Browse notebook, SL #3837 .

Signed-off-by: Manuel Quiñones <manuq at laptop.org>

----

v2: fix regressions in the toolbar buttons
---
 gtk3/theme/gtk-widgets.css.em | 68 ++++++++++++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 27 deletions(-)

diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index c0749e2..5606f8b 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 {
@@ -158,19 +144,26 @@ GtkLabel, GtkLabel:insensitive {
     -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,
+.button:active {
+    border-color: @white;
 }
 
-.button:focused {
-    border-width: $(thickness)px;
-    border-color: @white;
-    border-style: solid;
+.button:active {
+    background-color: @white;
+}
+
+.button:focused,
+.button:active {
+    color: @black;
 }
 
 /* Spin buttons */
@@ -180,7 +173,6 @@ GtkLabel, GtkLabel:insensitive {
     border-width: 0px;
     border-style: solid;
     background-color: @button_grey;
-    color: @white;
 }
 
 .spinbutton.button:last-child {
@@ -203,9 +195,6 @@ GtkLabel, GtkLabel:insensitive {
 
 GtkToggleButton.button:active {
     background-color: @white;
-}
-
-GtkToggleButton.button:active GtkLabel {
     color: @black;
 }
 
@@ -217,6 +206,7 @@ GtkToggleButton.button:active GtkLabel {
     border-radius: 0px;
     padding: 0px;
     background-color: @white;
+    color: @black;
 }
 
 GtkTreeView row:nth-child(even) {
@@ -275,7 +265,7 @@ GtkScrolledWindow.frame {
 
 /* Combo boxes */
 
-GtkComboBox * {
+GtkComboBox {
     color: @white;
 }
 
@@ -288,13 +278,13 @@ GtkComboBox .separator {
 
 .notebook {
     background-color: @selection_grey;
+    color: @black;
     padding: 0px;
     -GtkNotebook-tab-overlap: -2;
     -GtkNotebook-tab-curvature: $default_padding;
 }
 
-.notebook tab,
-.notebook tab GtkLabel {
+.notebook tab {
     background-color: @button_grey;
     color: @white;
 }
@@ -309,6 +299,10 @@ BrowseNotebook.notebook tab {
     background-color: @selection_grey;
 }
 
+BrowseNotebook.notebook tab GtkLabel {
+    color: @white;
+}
+
 BrowseNotebook.notebook tab .button {
     border-radius: $(toolbutton_padding)px;
 }
@@ -447,6 +441,10 @@ GtkMenuItem {
     padding: $(subcell_size)px $((subcell_size * 3 - font_height) / 2)px;
 }
 
+GtkMenuItem:prelight {
+    background-color: @button_grey;
+}
+
 .tooltip {
     background-color: @black;
     border-style: solid;
@@ -524,6 +522,13 @@ background-color: @black;
     color: @white;
 }
 
+.toolbar .button,
+SugarPaletteWindowWidget SugarRadioToolButton .button {
+    border-color: transparent;
+    border-radius: 0px;
+    border-style: none;
+}
+
 .toolbar GtkToolButton .button,
 .toolbar SugarRadioToolButton *,
 SugarPaletteWindowWidget SugarRadioToolButton *,
@@ -557,6 +562,10 @@ SugarPaletteWindowWidget GtkScrolledWindow * {
     background-color: @black;
 }
 
+.toolbar GtkComboBox .button {
+    border-radius: $(2*subcell_size)px;
+}
+
 /* Scales */
 
 GtkScale {
@@ -565,6 +574,7 @@ GtkScale {
 }
 
 GtkScale.trough {
+    background-color: @button_grey;
     border-style: solid;
     border-radius: 30px;
     border-color: @button_grey;
@@ -592,6 +602,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