Ubuntu
ubuntu-themes package

properties of state pseudo-classes are not applied successfully

Bug #1211831 reported by Andres G. Aragoneses on 2013-08-13

This bug affects 1 person

Affects		Status	Importance	Assigned to	Milestone
	ubuntu-themes (Ubuntu)	Fix Released	Low	Unassigned

Bug Description

The file Ambiance/gtk-3.0/gtk-widgets.css (and I presume it happens the same with other themes) has a *states* section, which contains CSS rules that use the * (asterisk) selector. These rules are mainly not respected across many widgets (or parts of widgets) because of how CSS precedence works.

Example: http://stackoverflow.com/questions/18210656/whats-more-precedent-a-css-class-or-a-pseudo-class-with-a-selector

A very obvious consequence of this is that in order for the theme to render things properly, in many cases the theme creator has been forced to repeat this state rules, but in specific widgets or classes.

I am attaching a patch which fixes this problem (moving the states section at the end of the file), and, as a result, also eliminates a lot of redundant CSS rules which had to be there before the patch, but are not needed after it.

Tags:

Related branches

lp:~knocte/ubuntu-themes/bug1211831-fix-gtk3-css-state-pseudoclasses-precedence

Merged into lp:ubuntu-themes at revision 311

PS Jenkins bot (community): Approve (continuous-integration) on 2013-09-12

Andrea Cimitan: Approve on 2013-09-12

lp:ubuntu/saucy-proposed/ubuntu-themes

lp:ubuntu/trusty-proposed/ubuntu-themes

Revision history for this message

Andres G. Aragoneses (knocte) wrote on 2013-08-13:

Proposed patch Edit (3.5 KiB, text/plain)

Revision history for this message

Ubuntu Foundations Team Bug Bot (crichton) wrote on 2013-08-13:

The attachment "Proposed patch" seems to be a patch. If it isn't, please remove the "patch" flag from the attachment, remove the "patch" tag, and if you are a member of the ~ubuntu-reviewers, unsubscribe the team.

[This is an automated message performed by a Launchpad user owned by ~brian-murray, for any issues please contact him.]

tags:

added: patch

Revision history for this message

Andres G. Aragoneses (knocte) wrote on 2013-08-14:

Previous patch was not entirely correct, because it removed some property-assignments such as 'background-color: @backdrop_selected_bg_color;' which were not exactly the same as the ones in the states section ('background-color: alpha (@selected_bg_color, 0.9);').

I have corrected this, and I pushed my new patch into my personal launchpad branch (so this way it can be easily merged), which is here: https://code.launchpad.net/~knocte/ubuntu-themes/bug1211831-fix-state-selectors-precedence

The particular commit:

http://bazaar.launchpad.net/~knocte/ubuntu-themes/bug1211831-fix-state-selectors-precedence/revision/309#Ambiance/gtk-3.0/gtk-widgets.css

As you can see there, this also helps the rendering of Banshee with GTK3 (which I'm currently working on, maintainer here).

I'm going to post some screenshots so this is more clear.

Revision history for this message

Andres G. Aragoneses (knocte) wrote on 2013-08-14:

Theme bug which affects Banshee GTK3 Edit (112.6 KiB, image/png)

You can see that all 3 listviews have white-rendered selection rows. This is wrong.

Revision history for this message

Andres G. Aragoneses (knocte) wrote on 2013-08-14:

Screenshot after workaround is applied Edit (124.3 KiB, image/png)

I added a workaround for this in banshee (well, actually, hyena, the widget-library used by Banshee), just in case some people want to run BansheeGTK3 in Ubuntu 13.04 (before this bug is fixed):

https://git.gnome.org/browse/hyena/commit/?h=gtk3&id=2ad445774ebd6a20f46e113ce11e1847fd77ca19

This screenshot is the result: it fixes 2 of the 3 cases (unfortunately, the 3rd case uses a treeview, not a custom widget, so I'm unable to fix it from the banshee code).

Revision history for this message

Andres G. Aragoneses (knocte) wrote on 2013-08-14:

Screenshot after ubuntu theme is fixed Edit (142.2 KiB, image/png)

But if this bug is fixed (if my merge request is accepted), then this is the screenshot result (it fixes all 3 of 3 widgets selection rows background).

Revision history for this message

Andres G. Aragoneses (knocte) wrote on 2013-08-19:

New (different) merge request that doesn't include removal of redundancies (this can be committed later):

https://code.launchpad.net/~knocte/ubuntu-themes/bug1211831-fix-gtk3-css-state-pseudoclasses-precedence/+merge/180901

Adolfo Jayme Barrientos (fitojb) on 2013-09-18

Changed in ubuntu-themes (Ubuntu):
status:	New → Fix Committed
importance:	Undecided → Low

Revision history for this message

Launchpad Janitor (janitor) wrote on 2013-09-18:

This bug was fixed in the package ubuntu-themes - 13.04+13.10.20130917.1-0ubuntu1

---------------
ubuntu-themes (13.04+13.10.20130917.1-0ubuntu1) saucy; urgency=low

  [ Andrés G. Aragoneses ]
  * Fix Ambiance's gtk3 appearance for readonly Entry widgets. (LP:
    #1219205)
  * Change CSS state pseudoclasses precedence. (LP: #1211831)

  [ Matthieu James ]
  * Various updates for the network and bluetooth indicators (new
    bluetooth-paired icon, new icons for different types of cellular
    network, some icons renamed with proper names, etc) and the network
    menu. (LP: #1212184)

[ Ubuntu daily release ]
* Automatic snapshot from revision 311
-- Ubuntu daily release <email address hidden> Tue, 17 Sep 2013 22:03:57 +0000