Problème de couleur des icônes d'en-tête au survol de la souris

Soutien
1

Salut !

Pendant longtemps, le survol des icônes sur mon site web les rendait grises, bien que je les aie remplacées par une couleur personnalisée (un bleu clair) :

image

À cause de ce CSS Discourse :

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

Le bleu clair fonctionnait au tout début, et je pense que cela a cessé de fonctionner après une mise à niveau de Discourse, et je n’y avais pas prêté attention pendant peut-être un an.

Ensuite, j’ai récemment mis à niveau vers la version 2.9.0 (je mets à niveau à chaque fois que l’interface me le dit, et parfois un peu plus souvent), et la couleur personnalisée que j’avais définie précédemment est revenue d’elle-même, comme par magie :magic_wand:

image

Cependant, je remarque maintenant que la couleur grise est revenue :grey_question: :weary:

Il est possible que j’aie mis à niveau Discourse à nouveau entre-temps.
Quoi qu’il en soit, je ne sais pas pourquoi la bonne couleur est revenue puis a disparu à nouveau, car je n’ai pas modifié le CSS de mon forum.

Voici donc l’ordre actuel des règles CSS :

image
image305×173 4.37 KB

Je veux retrouver mon bleu clair. :relieved:

Mon CSS personnalisé actuel :

.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);
}

Je préfère ne pas utiliser !important quand je peux faire autrement, et j’ai souvent du mal à remplacer le CSS de Discourse de manière simple à cause de la classe parente .discourse-no-touch qui me demande de créer un véritable train :train: :train: :train: de sélecteurs pour atteindre mon objectif.

  1. Une idée de pourquoi mon remplacement de couleur a fonctionné à nouveau pendant quelques jours, puis plus du tout ?

  2. Comment remplacer correctement les classes de Discourse avec ce désagréable arrière-grand-parent .discourse-no-touch ?

Remarque : La couleur bleue fonctionne sur les smartphones. Existe-t-il une règle cible simple pour que les modifications CSS affectent à la fois les appareils tactiles et non tactiles ?

1 « J'aime »
2

Bonjour,

C’est un peu délicat mais j’utilise aussi quelque chose de similaire sur mon site, donc cela pourrait vous être utile aussi. :slightly_smiling_face:

Commun

// Boutons d'en-tête

.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);
}
1 « J'aime »
3

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.

chrome_Q7W3Tsm9BU

1 « J'aime »
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.