Changing color of text for `status-ignored` [atom-dark-ui]

In my stylesheet, .status-ignored { background-color: whitesmoke; } works well contrary to .status-ignored { color: blue; }. What am I doing wrong ?

Most likely it is a specificity problem. You may want to use this specificity calculator to help out.

I have take a little to look for some clue inside the atom-dark-ui repository where I found git.less having the following content.

@import "ui-mixins";
@import "ui-variables";

.status { .text(normal); }
.status-added { .text(success); }
.status-ignored { .text(subtle); }
.status-modified { .text(warning); }
.status-removed { .text(error); }
.status-renamed { .text(info); }

So I think that the problem comes from the way the personal CSS is imported. No ?

No, it doesn’t have anything to do with the way the styles.less is imported. If you add .status-ignored { color: blue; } to your styles.less, open the Dev Tools and go to an ignored element in the Elements view (in my case it was a folder), you’ll see something like this:

If you look at the computed style for the li element, you’ll see something like this:

But if you look at the style rules that apply to the text itself, you’ll see something like this:

Which shows that the winning rule is much more specific than the losing one. So yep, specificity problem :grinning:

Which means that if you want to change the color of the text you have to match or beat the specificity of the one controlling the color of the text. So, this works:

.list-group li:not(.list-nested-item).selected.status-ignored, 
.list-tree li:not(.list-nested-item).selected.status-ignored, 
.list-group li.list-nested-item.selected.status-ignored > .list-item, 
.list-tree li.list-nested-item.selected.status-ignored > .list-item { 
  color: blue; 

So easy to fix… :grin: Thanks for the time passing to explain me how to do and how this works. Thanks a lot !

PS : color: #666; gives a better result.

1 Like