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

[Simon Schampijer]

On 08/27/2012 08:12 PM, Manuel Quiñones wrote:
> 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>


Thanks for that one.

There is one regression:

- run sugar-toolkit-gtk3/tests/graphics/toolbuttons.py

- hover over the 'list-view' icon

---> the background should be just black, it has a gray outline though

Simon



> ---
>   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);
>   }
>