Planned tag color issue when scrolled down

Here on Meta the planned tag is blue. It works properly when view a topic from /latest, as well as when scrolled to the top of the topic, but is currently not working when viewing the topic itself and the header has “collapsed”. In this instance the color is black, and only turns blue on mouse hover.

Latest: (works)

Top of topic: (works)

Scrolled down: (broken)

4 Likes

Interesting is this a bug @sam?

Probably, my guess is that a class is missing

1 Like

header .discourse-tag is overriding .tag-planned, .tag-planned:visited, .tag-planned:hover because it is being more specific.

Both items have !important which is why that isn’t taking effect.

2 Likes

Some days I wish for !super-super-important CSS modifier, and then I gently lay my crack pipe down on the table and exhale

4 Likes

So playing around with this, removing the !important at
https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/base/tagging.scss#L139

Seems to solve the issue.

I’ve been navigating Meta for a while with it removed and haven’t noticed anything obvious yet. I have a feeling that !important is unnecessary.

Sure submit a PR for it, as a general rule NONE of our stock CSS should ever include !important ever.

3 Likes

That is very true, there are a few places though it does make sense, when overriding select2 styles and anything else from a third party vendor. But stock elements that discourse creates, I 100% agree, it shouldn’t use !important.

PR submitted
https://github.com/discourse/discourse/pull/4579

6 Likes