Remove colors, borders and paddings set for all the widgets, fix Button borders - SL #3837 #3837

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
- use .menuitem class instead of GtkMenuItem

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

----

v2: fix regressions in the toolbar buttons
v3: use .menuitem class, fix color for .button:active:focused

1 files changed, 41 insertions, 28 deletions

diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index c0749e2..c1579ad 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,25 @@ 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:active:focused {
+    color: @black;
 }
 
 /* Spin buttons */
@@ -180,7 +172,6 @@ GtkLabel, GtkLabel:insensitive {
     border-width: 0px;
     border-style: solid;
     background-color: @button_grey;
-    color: @white;
 }
 
 .spinbutton.button:last-child {
@@ -203,9 +194,6 @@ GtkLabel, GtkLabel:insensitive {
 
 GtkToggleButton.button:active {
     background-color: @white;
-}
-
-GtkToggleButton.button:active GtkLabel {
     color: @black;
 }
 
@@ -217,6 +205,7 @@ GtkToggleButton.button:active GtkLabel {
     border-radius: 0px;
     padding: 0px;
     background-color: @white;
+    color: @black;
 }
 
 GtkTreeView row:nth-child(even) {
@@ -275,7 +264,7 @@ GtkScrolledWindow.frame {
 
 /* Combo boxes */
 
-GtkComboBox * {
+GtkComboBox {
     color: @white;
 }
 
@@ -288,13 +277,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 +298,10 @@ BrowseNotebook.notebook tab {
     background-color: @selection_grey;
 }
 
+BrowseNotebook.notebook tab GtkLabel {
+    color: @white;
+}
+
 BrowseNotebook.notebook tab .button {
     border-radius: $(toolbutton_padding)px;
 }
@@ -443,10 +436,14 @@ SugarPaletteWindow SugarGroupBox *:insensitive {
     color: @white;
 }
 
-GtkMenuItem {
+.menuitem {
     padding: $(subcell_size)px $((subcell_size * 3 - font_height) / 2)px;
 }
 
+.menuitem:prelight {
+    background-color: @button_grey;
+}
+
 .tooltip {
     background-color: @black;
     border-style: solid;
@@ -524,6 +521,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 +561,10 @@ SugarPaletteWindowWidget GtkScrolledWindow * {
     background-color: @black;
 }
 
+.toolbar GtkComboBox .button {
+    border-radius: $(2*subcell_size)px;
+}
+
 /* Scales */
 
 GtkScale {
@@ -565,6 +573,7 @@ GtkScale {
 }
 
 GtkScale.trough {
+    background-color: @button_grey;
     border-style: solid;
     border-radius: 30px;
     border-color: @button_grey;
@@ -592,6 +601,10 @@ GtkScale.slider:active {
 
 /* Radio and check buttons */
 
+GtkCheckButton {
+    color: @black;
+}
+
 GtkCheckButton:prelight {
     background-color: alpha(@theme_base_color, 0.0);
 }