CSS hover class of the gear icon on the toolbar?

UX
1

Hi, I come for help on a little css class I can’t seem to find. I’m usually doing ok in these kind of thing but I’m stuck on this one.

I’m looking for the css class on the hover of this button :

image

On my theme, this button always acts differently than the others.

image
(my hover color should be #1395ba on this theme)

I think the class comes from this file : discourse/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss at main · discourse/discourse · GitHub

But everything I try doesn’t take. The hover on this button is always this light grey color

We can see on this forum with the theme Graceful that this button doens’t react like the other.

Anyway, anyone has a clue to help me find the class on this little button?

Nothing urgent at all, it’s a small detail

2 Likes
2

That button is structured a bit differently because it’s a dropdown… but the CSS is definitely too specific and it should have its styling applied like the other buttons. I’ll add improving that to my to-do list so it’s easier in the future, but for now you want:

.toolbar-popup-menu-options .dropdown-select-box-header:hover {
  background: khaki;
    .d-icon {
      color: salmon;
    }
}
7 Likes
4

I just tried it, works perfectly, thanks a lot!

1 Like
5

Just an FYI: I’ve removed some extra specificity here, so now something like this should be enough to simultaneously style all the hover states for the editor buttons

.discourse-no-touch .d-editor-button-bar button:hover {
  background: khaki; 
  color: salmon;
}
6 Likes