Grazie per la tua risposta!
Per qualche motivo, sembra che i colori fossero quelli giusti (il mio caro azzurro) per le icone native dell’header, ma non per le mie altre icone, impostate da un componente tema.
Quindi, il colore azzurro delle icone hamburger e di ricerca ha funzionato, forse a causa della loro classe .header-dropdown-toggle.
Il componente tema che aggiunge le mie icone aggiuntive aggiunge anche un selettore .custom-header-icon-link allo stesso livello della classe .header-dropdown-toggle.
Forse questi selettori aggiungono abbastanza precisione da sovrascrivere qualsiasi regola che utilizzava .discourse-no-touch? Onestamente, non sono sicuro di capire tutto quello che sta succedendo qui in CSS.
Ma il tuo suggerimento mi ha aiutato a rifattorizzare il mio CSS. Ecco il risultato:
.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);
}
}
}
Funziona perfettamente e non utilizzo .discourse-no-touch.
