Farbe der Header-Icons bei Mauszeiger-Hover-Problem

[Canapin (Coin-coin le Canapin)]

Hallo!

Lange Zeit wurden die Symbole auf meiner Website beim Darüberfahren grau, obwohl ich sie mit einer benutzerdefinierten Farbe (einem Hellblau) überschrieben hatte:

Wegen dieses Discourse CSS:

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

Das Hellblau funktionierte anfangs, und ich glaube, es hörte nach einem Discourse-Upgrade auf zu funktionieren. Ich habe mich vielleicht ein Jahr lang nicht darum gekümmert.

Dann habe ich vor kurzem auf 2.9.0 aktualisiert (ich aktualisiere jedes Mal, wenn die Benutzeroberfläche mich dazu auffordert, und manchmal auch öfter), und die benutzerdefinierte Farbe, die ich zuvor eingestellt hatte, kam wie von Zauberhand zurück

Allerdings stelle ich jetzt fest, dass die graue Farbe wieder da ist

Es ist möglich, dass ich Discourse inzwischen wieder aktualisiert habe.
Auf jeden Fall weiß ich nicht, warum die richtige Farbe zurückkam und dann wieder verschwand, da ich mein Forum-CSS nicht bearbeitet habe.

Hier sind also die aktuellen CSS-Regelreihenfolgen:

Ich möchte mein Hellblau zurück.

Mein aktuelles benutzerdefiniertes 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);
}

Ich benutze lieber kein !important, wenn es anders geht, und ich habe oft Schwierigkeiten, Discourse’s CSS auf einfache Weise zu überschreiben, wegen der übergeordneten Klasse .discourse-no-touch, die mich zwingt, eine echte Kette von Selektoren zu erstellen, um mein Ziel zu erreichen.

1. Irgendeine Idee, warum mein Farb-Override für ein paar Tage wieder funktionierte und dann nicht mehr?

2. Wie überschreibe ich Discourse’s Klassen richtig mit diesem nervigen Urgroßeltern-Selektor .discourse-no-touch?

---

Hinweis: Die blaue Farbe funktioniert jedoch auf Smartphones. Gibt es eine einfache Zielregel, um CSS-Änderungen sowohl auf Touch- als auch auf Nicht-Touch-Geräten zu berücksichtigen?

[Don]

Hallo,

Das ist ein wenig knifflig, aber ich benutze auch etwas Ähnliches auf meiner Website, daher könnte das auch für Sie nützlich sein.

Allgemein

// Header-Schaltflächen

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

Vielen Dank für deine Antwort!

Aus irgendeinem Grund scheinen die Farben für die nativen Header-Icons die richtige (mein liebes Hellblau) gewesen zu sein, aber nicht für meine anderen Icons, die durch eine Theme-Komponente festgelegt wurden.

Die Hamburger- und Such-Icons hatten also die richtige hellblaue Farbe, vielleicht wegen ihrer .header-dropdown-toggle-Klasse.
Die Theme-Komponente, die meine zusätzlichen Icons hinzufügt, fügt auch einen .custom-header-icon-link-Selektor auf der gleichen Ebene wie die .header-dropdown-toggle-Klasse hinzu.

Vielleicht bieten diese Selektoren genug Präzision, um jede Regel zu überschreiben, die .discourse-no-touch verwendet? Ehrlich gesagt, bin ich mir nicht sicher, ob ich alles verstehe, was hier in CSS passiert.

Aber dein Vorschlag hat mir geholfen, mein CSS zu refaktorieren. Hier ist das Ergebnis:

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

Es funktioniert perfekt und ich verwende .discourse-no-touch nicht.