How to Change Header Icon Color?

Development
5

I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.

I tried this

and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:

image
image196×105 3.89 KB

So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.

I tried

.d-header-icons .d-icon:hover {
   background-color: #b0cee8; 
   color: #fff;
}

but it gives me this:

image
image162×104 3.78 KB

How do I get the whole box to change color? And I don’t understand why the icon itself doesn’t stay white…

And while I’m at it: My new topic button also suffered. The colour of the + icon is no longer the same as the text:

image

My CSS for the button is (and has always been):

@import "common/foundation/variables";

#create-topic {
    background-color: $tertiary;
    color: $secondary;
}

#create-topic:hover {
    background-color: $tertiary-high;
    color: $secondary;
}