Merci pour votre réponse !
Pour une raison quelconque, il semble que les couleurs étaient correctes (mon cher bleu clair) pour les icônes d’en-tête natives, mais pas pour mes autres icônes, définies par un composant de thème.
Ainsi, la couleur bleu clair des icônes hamburger et de recherche a fonctionné, peut-être à cause de leur classe .header-dropdown-toggle.
Le composant de thème qui ajoute mes icônes supplémentaires ajoute également un sélecteur .custom-header-icon-link au même niveau que la classe .header-dropdown-toggle.
Peut-être que ces sélecteurs ajoutent suffisamment de précision pour remplacer toute règle qui utilisait .discourse-no-touch ? Honnêtement, je ne suis pas sûr de comprendre tout ce qui se passe ici en CSS.
Mais votre suggestion m’a aidé à refactoriser mon CSS. Voici le résultat :
.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);
}
}
}
Cela fonctionne parfaitement et je n’utilise pas .discourse-no-touch.
