Header icons color on mouse hovering issue

[Canapin (Coin-coin le Canapin)]

Hi!

For a long time, hovering the icons on my website made them grey despite I overrode it with a custom color (a light blue):

Because of this Discourse CSS:

.discourse-no-touch .d-header-icons .icon:hover .d-icon, .discourse-no-touch .d-header-icons .icon:focus .d-icon {
    color: #919191;
}

The light blue worked at the very beginning, and I think it stopped working after a Discourse upgrade, and I didn’t take a look at this for maybe a year.

Then, I upgraded to 2.9.0 very recently (I upgrade each time the interface tells me to do so, and sometimes a bit more often), and the custom color that I previously set came back by itself, like magic

However, I notice now that the grey color came back again

It is possible that I upgraded Discourse again in the meantime.
Anyway, I don’t know why the right color came back and went away again since I didn’t edit my forum CSS.

So, here’s the current CSS rules order:

I want my light blue back.

My current custom CSS:

.d-header-icons .d-icon {
    color: white;
}
.d-header-icons .icon:hover, .d-header-icons .icon:focus {
    background: white;
}
.d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon {
    color: var(--tertiary-medium);
}
.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: var(--tertiary);
}

I prefer not to use !important when I can do otherwise, and I have often trouble overriding Discourse’s CSS in a simple way because of the parent .discourse-no-touch class that requires me to create a real train of selectors to achieve my goal.

1. Any idea why my color override worked again for a few days, and then not anymore?

2. How to override properly Discourse’s classes with this annoying great grandparent .discourse-no-touch?

---

Note: The blue color works on smartphones though. Is there a simple target rule to make CSS changes affect both touch and no-touch devices?

[Don]

Hello,

This is a little tricky but I also use something like this on my site, so this might be useful for you too.

Common

// Header buttons

.d-header-icons {
  .icon {
    &:hover,
    &:focus,
    &:active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
    .discourse-no-touch &:hover,
    .discourse-no-touch &:focus {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
  }
  .d-icon {
    color: #fff;
  }
  .header-dropdown-toggle {
    &:hover {
      background: #fff;
    }
    &.active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
      &:hover {
        background: #fff;
        .d-icon {
          color: var(--tertiary-medium);
        }
      }
    }
  }
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
  color: var(--tertiary);
}

[Canapin (Coin-coin le Canapin)]

Thanks for your reply!

For some reason, it appears that the colors were the right one (my dear light blue) for the native header icons, but not my other icons, set by a theme component.

So, the hamburger and the search icons’ light blue color worked, maybe because of their .header-dropdown-toggle class.
The theme component that adds my additional icons also adds a .custom-header-icon-link selector at the same level as the .header-dropdown-toggle class.

Maybe these selectors add enough precision to override whatever rule used .discourse-no-touch? Honestly, I’m not sure to understand all that’s happening here in CSS.

But your suggestion helped me to refactor my CSS. Here’s the result:

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: white;
                .d-icon {
                    color: var(--tertiary-medium);
                }
            }
        }
        &.active .icon .d-icon {
            color: var(--tertiary-medium);
        }
    }
}

It works perfectly and I don’t make use of .discourse-no-touch.