Symbole in der Unified Toolbar färben

Alphatier

Hallo zusammen,

ich habe in meinem Thunderbird die Symbole in der Unified Toolbar dauerhaft (siehe Screenshot) eingefärbt.

Soweit funktioniert das ganze. Jedoch habe ich dabei jedes Symbol einzeln angesprochen. Siehe unten. ↓

Gibt es eine elegante Lösung die sämtliche Einträge auf einmal erfasst?

CSS

.unified-toolbar .quick-filter-bar .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .get-messages .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .write-message .button-icon { 
  content: var(--icon-new-mail);
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .reply .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .forward-inline .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .tag-message .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .junk .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .delete .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .mark-as .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
} 
.unified-toolbar .print .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
}

Alles anzeigen

Bastler

Zitat von Alphatier

Gibt es eine elegante Lösung die sämtliche Einträge auf einmal erfasst?

Hallo,

vielleicht nicht alle. Für die, die absolut gleiche Eigenschaften erhalten sollen, werden die Bezeichner gestapelt

und mit Komma abgeschlossen. Der letzte Bezeichner erhält die offene geschweifte Klammer.

Beispiel:

CSS

.unified-toolbar .quick-filter-bar .button-icon,
.unified-toolbar .write-message .button-icon,
.unified-toolbar .reply .button-icon,
.unified-toolbar .forward-inline .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
}

milupo

Probiert mal diese Kurzschreibweise. Bei mir funktioniert sie. Sie sollte auch funktionieren, da es sich bei den Selektoren nicht um direkte Kinder handelt.

CSS

.unified-toolbar-button, .quick-filter-bar, .write-message,
.reply, .forward-inline, .button-icon {
    background-color: #00BBFF !important;
    color: black !important;
}

Alphatier

Zitat von Bastler

Zitat von Alphatier

Gibt es eine elegante Lösung die sämtliche Einträge auf einmal erfasst?

Hallo,
vielleicht nicht alle. Für die, die absolut gleiche Eigenschaften erhalten sollen, werden die Bezeichner gestapelt
und mit Komma abgeschlossen. Der letzte Bezeichner erhält die offene geschweifte Klammer.

Hallo Bastler,

das funktioniert in diesem Fall hervorragend. Mein Code in der userChrome.css sieht jetzt so aus. ↓

CSS

/* Unified Toolbar: Icons blau */ 
.unified-toolbar .quick-filter-bar .button-icon, 
.get-messages .button-icon,
.write-message .button-icon,
.reply .button-icon,
.forward-inline .button-icon,
.tag-message .button-icon,
.junk .button-icon,
.delete .button-icon, 
.mark-as .button-icon, 
.print .button-icon {
    background-color: #00BBFF !important;
  color: black !important;
}

Alles anzeigen

Damit habe ich alle Icons in der Unified Toolbar dauerhaft blau. Statt 40 Zeilen Code nur mehr 14.

Zusätzlich habe ich dann noch diesen Code ↓ hinzugefügt.

CSS

/* Unified Toolbar: Farbe beim hovern */
.unified-toolbar-button:hover,
:is(.chromeclass-toolbar,#header-view-toolbox,#attachmentView,.lightning-notification-bar,#quick-filter-bar) .toolbarbutton-1:hover {
      background-color: #00BBFF !important;
      color: black !important;
}

Jetzt werden die Felder blau wenn ich mit der Maus drüber fahre. Ich bedanke mich für die schnelle und kompetente Hilfe.

Alphatier

Zitat von milupo

Probiert mal diese Kurzschreibweise. Bei mir funktioniert sie. Sie sollte auch funktionieren, da es sich bei den Selektoren nicht um direkte Kinder handelt

Der Eintrag funktioniert, jedoch wird dabei das Icon und das Feld mit der Schrift daneben dauerhaft blau. Ich hab's mit @Bastlers Hilfe ein wenig anders gelöst. Nichtsdestotrotz auch dir ein herzliches Danke für deinen Vorschlag.

milupo

Zitat von Alphatier

Der Eintrag funktioniert, jedoch wird dabei das Icon und das Feld mit der Schrift daneben dauerhaft blau.

Mein Code basiert ja auch nur auf Bastlers Code aus Beitrag #2 und es ging mir nur um die Kurzschreibweise, wie auch in diesem Beitrag von Bastler.

Bastler

Zitat von Alphatier

Statt 40 Zeilen Code nur mehr 14

Hallo,

in Summe doch 20, aber es geht noch kürzer. Das erste Päckchen spendiert einen Rahmen. Ohne Rahmen, natürlich noch kürzer!

CSS

/* ---Unified Toolbar Buttons anpassen--- */
.unified-toolbar-button {
appearance: none !important;
  border: 0.1px solid black !important;
}
.unified-toolbar-button .button-icon {
appearance: none !important;
  background-color: #00BBFF !important;
}
.unified-toolbar-button:hover {
  background-color: #00BBFF !important;
}

Alles anzeigen

Symbole in der Unified Toolbar färben

Alphatier 24. August 2023 um 12:43

Community-Bot 3. September 2024 um 21:00

Thunderbird 138.0.2 veröffentlicht

Thunderbird 128.10.2 ESR veröffentlicht

Ähnliche Themen

TB 115 was soll neu sein an der Oberfläche?

Button per Script aus FolderPane in UnifiedToolbar umhängen (cross-document)

Diskussionsthread für Benutzerskripts

Hauptleiste Button löschen fehlt

Betterbird 102.3.2 (Linux) beendet sich unkontrolliert