CSS Code für Message Header Symbolleiste

Liebe Mitstreiter,

ich arbeitete einige Jahr lang mit den folgenden CSS Code zur Anpassung der Nachrichten-Header, bei gleichzeitiger Nutzung des Add-ons CompactHeaders

/* :::: Message headers tweaks :::: */

#msgHeaderView {
background-color: #c9d8e2 !important;
font-family: Palatino !important;
font-size: 12px !important;
font-weight: bold !important; }

#header-view-toolbar {
background: #c9d8e2 !important; }

Die Message Headers mit der Symbolleiste sahen bislang wie folgt aus:

Nachdem Update fehlen die Rahmen der Buttons und erscheinen nur beim Uberfahren (hover) mit der Maus:

Das ist natürlich nicht weiter dramatisch, denn die von mir nicht versteckten Buttons werden weiterhin angezeigt und funktionieren.
Aber ich habe mit dem Entwickler-Werkzeugkasten keinen Code gefunden, um sie wie vorher anzuzeigen.... was mich etwas sprachlos macht

Quote from dharkness21

Teste bitte folgendes CSS-Schnipsel.

Danke für deinen Vorschlag! Leider wirkt der obere Code nur auf den Button "Antworten" ganz links. Genau dieses Ergebnis hatte ich ständig bei allen meinen verschiedenen Versuchen...

Merkwürdigerweise brauche ich keinen Hover-Code, denn das Hovern über dieser Toolbar zeigt automatisch den jeweiligen Button mit Rahmen an.

Quote from Grisu2099

Teste bitte:

Danke, das funktioniert!
Ich brauche jetzt nur noch den Code für drei anderen Buttons erweitern und die Ecken etwas abrunden...
Merci

Quote from Grisu2099

im obigen Code hinzufügen

Kannte ich schon, trotzdem Dank!

Quote from Grisu2099

Welche Buttons noch?

Ich glaube hier liegt ein Missverständnis vor:
ich möchte die vier Buttons Antworten, Weiterleiten, Löschen und Mehr (alle anderen habe ich ausgeblendet!) anzeigen, wie es bei mir in der Version 139 noch der Fall war und wie es in meinem ersten Beitrag in dem kleinen Bild angezeigt wird.

Dein Code und der von dharkness21 haben aber nur Wirkung auf den linken Button #hdrSmartReplyButton, auch wenn ich den Code wiederhole mit #hdrForwardButton oder #hdrTrashButton. Es wird immer nur der linke Button als solcher mit Umrandung angezeigt.

So weit war ich vorher auch schon, und da ich keinen Code fand, der auf alle vier Buttons wirkt, habe ich dieses Thema begonnen.

Quote from dharkness21

und zeigen uns das Ergebnis in den Werkzeugen*

Ich glaube nicht, dass das anders ist bei euch, aber voilà

Ihr braucht nicht mein komplettes userChrome, es genügt wenn ich einzig und allein deinen Code teste. Das mache ich meistens, wenn ich meine, dass ein Konflikt mit dem Test-Code vorliegt.

Hier das Ergebnis mit deinem Code

....und hier das Ergebnis mit dem Code von Grisu2099

Um endlich Klarheit zu erhalten, habe ich jetzt nochmals die beiden Versionen 138 und 141 in neuen Profilen getestet.

Hier die nackte Version 138 ohne CSS:

Wie man sieht haben alle Buttons in der Header-Toolbar die Form mit der klassischen Umrandung.

Nun ein Sprung zur v141, ebenfalls in einem neuen Profil ohne CSS:

Du Buttons haben sich - zumindest in der Mac-Version - geändert, da sie ihre "Hülle" verloren haben.
Und gleich noch ein Bild mit deinem Code im selben Profil:

Quote from dharkness21

wie Du an meinem Screenshot siehst, funktioniert der Schnipsel hier einwandfrei

Wenn ich dein Bild in Beitrag #8 betrachte, dann sind all deine Buttons umrahmt und haben farbigen Hintergrund. Ist das Standard oder hast du das per CSS geändert? Ich weiß auch nicht, welche TB Version du benutzt, auch nicht ob das, was ich in deinem Bild sehe, das Standard-Thema ist.

OK, nach meinen letzten Tests steht eindeutig fest, dass nur die Mac-Version diese Änderung der Toolbar erhalten hat.

Quote from dharkness21

deshalb die Frage nach Deinem kompletten CSS.

Das erübrigt sich doch wohl im Hinblick darauf, dass ich Tests in neuen Profilen und mit euren Code gemacht habe, die bestätigen, dass es sich um eine Änderung der UI handelt.

Quote from dharkness21

noch ein appearance: none !important; hinzu, klappt es dann?

Das gibt's doch gar nicht! Das war der entscheidende Hinweis

Das ist überhaupt das erst Mal, dass ich diesen Zusatz für einen CSS Code brauche. Und so sieht es aus mit euren etwas abgewandelten Code

#header-view-toolbar > toolbarbutton,
#header-view-toolbar > toolbaritem {
border: 1px solid gray !important;
appearance: none !important;
border-radius: 5px !important;
}

Das appearance: none !important; ist entscheidend dafür, dass der Code in allen vier Buttons wirkt. Ohne den Zusatz wird immer nur der linke Button geändert.

Nochmals ein großes MERCI für eure Hilfe