Fix arc theme label backgrounds #13267
Conversation
* Add specific style to yellow labels (background + border color) * Remove !important from label's background rule to avoid breaking user defined labels. Make the rule more specific to override fomantic UI default white background
6543
added
type/bug
skip-changelog
GiteaBot
added
the
lgtm/need 1
| @@ -614,10 +620,11 @@ footer { | |||
| } | |||
|
|
|||
| .ui.label, | |||
| .ui.label.basic { | |||
| .ui.label.basic, | |||
| .theme-arc-green .ui.label.basic { | |||
There was a problem hiding this comment.
I think this selector may be unnecessary. You generally always want to match the selector used in the light theme (so it overrules by CSS rule order) and this file is only included if theme is set to arc-green.
There was a problem hiding this comment.
You're right it's not necessary, I was trying to avoid the precending rule from Fomantic UI, but all of those .ui.ui.ui make it more specific and override even having the .theme-arc-green selector:
Result:
Which forces the white background, and it makes it hard to read bright colors.
Would a good be to specify each of the possible background colors for the Fomantic UI base colors?
(reference: https://fomantic-ui.com/elements/label.html, removing the inverted class from the labels)
Or would that be out of the scope of the theme, as seems like those colors are not being used at all?
There was a problem hiding this comment.
Those white backgrounds are bugs and should be overridden with the exact same selector fomantic uses, even if it has all those .ui. Feel free to do that in another PR.
GiteaBot
added
lgtm/done
Codecov Report
@@ Coverage Diff @@
## master #13267 +/- ##
=======================================
Coverage 42.16% 42.16%
=======================================
Files 684 684
Lines 75536 75536
=======================================
+ Hits 31847 31849 +2
+ Misses 38466 38463 -3
- Partials 5223 5224 +1
Continue to review full report at Codecov.
|
|
🚀 |
I introduced this bug with #13181, and this was reported in #13263, sorry about that. I didn't realize that the style was shared with the user-defined labels and the yellow label was hard to read as the default background color is white.
!importantfrom the label's background rule to avoid breaking user-defined labels. Make the rule more specific to override Fomantic UI's default white backgroundScreenshots:
Yellow label style, added to match existent green, red and blue
Background for default basic labels
Outdated label
User-defined labels
Other places where the label class is used (adding to make sure this issue is not breaking them)
Adding even more screenshots
Fixes #13263