Problema colore icone header al passaggio del mouse

[Canapin (Coin-coin le Canapin)]

Ciao!

Per molto tempo, passando il mouse sopra le icone sul mio sito web, queste diventavano grigie nonostante le avessi sovrascritte con un colore personalizzato (un azzurro):

A causa di questo CSS di Discourse:

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

L’azzurro funzionava all’inizio, e penso che abbia smesso di funzionare dopo un aggiornamento di Discourse, e non ci ho guardato per circa un anno.

Poi, ho aggiornato alla versione 2.9.0 molto recentemente (aggiorno ogni volta che l’interfaccia me lo dice, e a volte anche più spesso), e il colore personalizzato che avevo impostato in precedenza è tornato da solo, come per magia

Tuttavia, ora noto che il colore grigio è tornato di nuovo

È possibile che abbia aggiornato di nuovo Discourse nel frattempo.
Comunque, non so perché il colore giusto sia tornato e poi sia scomparso di nuovo dato che non ho modificato il CSS del mio forum.

Quindi, ecco l’ordine attuale delle regole CSS:

Voglio il mio azzurro indietro.

Il mio attuale CSS personalizzato:

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

Preferisco non usare !important quando posso fare altrimenti, e spesso ho problemi a sovrascrivere il CSS di Discourse in modo semplice a causa della classe genitore .discourse-no-touch che richiede di creare un vero treno di selettori per raggiungere il mio obiettivo.

1. Hai qualche idea sul perché la mia sovrascrittura del colore ha funzionato di nuovo per qualche giorno, e poi non più?

2. Come sovrascrivere correttamente le classi di Discourse con questo fastidioso bis-nonno .discourse-no-touch?

---

Nota: Il colore blu funziona sugli smartphone. Esiste una regola di destinazione semplice per far sì che le modifiche CSS influenzino sia i dispositivi touch che quelli non touch?

[Don]

Ciao,

Questo è un po’ complicato ma uso anche qualcosa di simile sul mio sito, quindi potrebbe esserti utile anche a te.

Comune

// Pulsanti dell'intestazione

.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)]

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.