Ja stimmt... manchmal dauert es etwas länger. Aber ich habe dabei auch ne Menge über CSS gelernt, wobei ich da vorher völliger Laie war 
Was meinst Du dharkness21 mit dem Verfassenfenster?
Das sieht bei mir sehr gut aus. Oben das kleine Menü funktioniert ebenfalls gut und hovert auch korrekt. Und da springt nix etc.
Grüße,
imebro
so, jetzt hab ich´s 
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
margin: 1px -1px 0px 0px !important; /* oben, rechts, unten links */
}bei rechts musste ich einfach -1px eingeben... das war´s dann.
Danke auf jedenfall an:
@Bastler
...für Eure super Unterstützung 
Grüße,
imebro
OK, werde ich berücksichtigen. Danke auch...
Wo kann ich denn nun dieses eine od. 2 Pixcel eintragen, welches das Kreuz beim Aktivieren des Tabs nicht nach links springen läßt?
Habe bisher noch nicht gefunden, wo das funktioniert... 
Grüße,
imebro
Hallo und danke für die Erläuterungen.
@Bastler Aber ich hatte es vorher so verstanden, dass ich ja die beiden margin-Werte auskommentieren sollte. Das hatte ich getan, aber damit ging es nicht. Dann erst habe ich mit dem margin (siehe Zeile 11 im obigen Code) herumprobiert. Aber damit bekomme ich es nicht hin. Vielleicht hatte ich Dich aber auch falsch verstanden. 
dharkness21 Ja, ich kenne die Reihenfolge und deshalb habe ich ja auch mit der Zeile 11 getestet mit vielen unterschiedlichen Einstellungen. Aber bisher hat nichts davon so gewirkt, dass das Kreuz nicht mehr nach links springt. Es ist vielleicht 1 od. 2 Pixcel.
Grüße,
imebro
Danke Dir @Bastler für Deine Hilfe.
Ich habe jetzt die o.g. Zeilen auskommentiert und zunächst beide margin-Angaben ebenfalls.
Das passte jedoch nicht. Dann habe ich lange hin- und her probiert und jetzt bleibt die Schrift schon mal an gleicher Stelle.
Allerdings springt nun das [x] einen Tick nach links. Hier nochmal der aktuelle Code:
/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-button {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 20px !important;
height: 20px !important;
/* margin: 0 3px 0 -3px !important; */
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
margin: 1px 0px 0px 0px !important;
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-button {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 20px !important;
height: 20px !important;
/* margin: 0 4px 0 -3px !important; */
}Vor allem habe ich mit der Code-Zeile 11 aus dem obigen Block lange herum experimentiert. Aber das Kreuz springt noch immer ca. 1 - 2 px nach links. Das bekomme ich nicht weg.
Schöne Grüße,
imebro
Hallo,
ja, ich habe Deinen Grisu2099 Code auch ausprobiert und auch den Tipp von dharkness21 berücksichtigt.
Nun sieht mein Code so aus und hier springt das Kreuz nicht mehr:
/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-button {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 20px !important;
height: 20px !important;
margin: 0 3px 0 -3px !important;
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
/* margin: 0px 4px 0 -3px !important; */
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-button {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 20px !important;
height: 20px !important;
margin: 0 4px 0 -3px !important;
}Das erste margin von 4 auf 3px verringert und das zweite margin auskommentiert. Und natürlich "icon" durch "button" ersetzt. So gehts.
Jetzt muss ich nur noch schauen, wieso die Schrift innerhalb der Tabs noch springt, wenn man einen Tab wechselt.
Sobald man auf einen Tab geklickt hat, springt die Schrift etwas nach unten.
Werde morgen mal versuchen, in dem entspr. Code-Bereich ein margin bei der dritten Zahl auch um 1 px zu verringern... muss dann nur noch schauen, wo ich das mache. Aber erst mal schlafen 
Danke Euch und schöne Grüße,
imebro
Hmmm... jetzt bin ich doch etwas sehr verwirrt...
Bie dharkness21 steht immer .tab-close-button. Bei mir steht da .tab-close-icon.
Und das .tab-close-button:hover habe ich überhaupt nicht in meinem CSS.
Ich stelle hier nochmal meinen kompletten Code für das Kreuz-Icon ein. Vielleicht klärt es sich dann, denn ich weiß gerade nicht, was ich nun ändern soll, da die Code-Bezeichnungen ja bei mir anders sind. Aber vielleicht kapiere ich ja auch was nicht 
/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-icon {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-icon-image {
margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-icon {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: 0px 4px 0 -3px !important;
}Wie gesagt, ist das kleine Springen des Kreuzes um vielleicht 1/2 mm nicht wirklich schlimm und das mit diesem "Schatten" ja auch nicht.
Aber dennoch würde ich nun gerne wissen, woran das Problem noch liegt - einfach auch, um was dazu zu lernen 
Grüße und vielen Dank an Euch 3 again...
imebro
Danke Euch Grisu2099 &
@Bastler - ist ja wirklich super interessant, was bei CSS so alles passieren kann
Ich habe jetzt mal bei .tabmailtab das min- u. max-heigt von 26px auf 36 gestellt und so passt es genau. Jetzt sieht es so aus wie vorher... nur ohne das zusätzliche }-Zeichen.
Die Dichte steht bei mir ja auf "Entspannt". Hoffe das ist dann auch OK so.
Beim Kreuz-Icon habe ich auch einen Erfolg erzielt, indem ich jetzt überall die margin-Werte "0px 4px 0 -3px eingesetzt habe. Vorher waren die ja alle unterschiedlich. So passt es zu 98% Wenn ich auf einen der Tabs klicke, springt das Kreuz noch einen halben mm nach rechts. Aber das sieht man wirklich nur, wenn man drauf schaut. Wieso das so ist, verstehe ich nicht, denn alle margin-Werte sind ja jetzt gleich.
Und einen border-Wert habe ich noch entfernt, was auch noch etwas gebracht hat.
Hier mal der jetzige Code dazu:
/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-icon {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-icon-image {
margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-icon {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: 0px 4px 0 -3px !important;
}Und... wenn ich jetzt mit der Maus direkt auf eines der Tab-Kreuze gehe (ohne zu klicken), dann erscheint hinter dem Kreuz irgendwie eine Art Schatten. Es ist ein etwas dunkleres Rechteck, welches rechts neben dem Kreuz rausschaut und ein ganz kleines bisschen versetzt ist nach oben. Ich habe mal einen Screenshot davon gemacht, damit man besser versteht, was ich hier labere 
...man muss schon genau hinschauen, um das zu sehen. Es ist dieser dunkle Schatten re. neben dem Kreuz.
Ist auch überhaupt nicht schlimm und kann man ruhig so lassen. Ich wollte es nur geschrieben haben.
Schöne Grüße,
imebro
oh ja... sorry, da hast Du ( Grisu2099 ) natürlich Recht 
/* ORDNERFARBEN: */
/* nicht neue, aber ungelesene Mails, wenn Posteingang NICHT markiert ist */
li.unread > .container > .name {
color: maroon !important;
}
/* neue Mails, wenn Posteingang beim Start von TB NICHT ausgewählt (markiert) ist */
li.new-messages > .container > .name {
color: #c30052 !important;
}
/* nicht neue, aber ungelesene Mails, wenn Posteingang markiert ist */
li.unread.selected > .container > .name {
color: maroon !important;
}
/* neue Mails, wenn Posteingang beim Start von TB ausgewählt (markiert) ist */
li.new-messages.selected.current > .container > .name {
color: #c30052 !important;
}
/* hellroter Hintergrund bei der ganzen Zeile der neu eingegangenen Email */
tr[data-properties~="new"] :where(td) {
appearance: none !important;
background-color: #ecd0de !important;
}
/* ========================================================================== */
/* ---Fuehrungslinien im Verzeichnisbaum 128.x--- */
li:not([data-server-type]) > .container div.twisty {
border-right: 1px solid #c30052 !important; /* Linie Dicke und Farbe */
margin-right: 8px !important;
margin-left: -8px !important;
margin-top: -16px !important; /* negativer schiebt Linie hoch */
}
li:not([data-server-type]) > .container .icon::before {
content: '--' !important;
color: #c30052 !important; /* Farbe der Querlinie */
margin-left: -9px !important;
}
li:not([data-server-type]) > .container div.twisty img.twisty-icon {
margin-bottom: -16px !important; /* negativer zieht Winkel Icon runter */
}
/* ========================================================================== */
} /* ohne dieses Zeichen wird das untere Menü (Tabs) zu flach - ist wohl ein Fehler!! */
/* AKTIVE Reiter (Tabs) >> Menü: "Posteingang, Kalender..." */
.tabmail-tab {
border-radius: 1px 1px 0 0 !important;
min-height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
}
/* Hintergrundfarbe Reiter/Tabs (dunkelrot) */
.tabmail-tab[selected="true"] .tab-background {
background-color: #c30052 !important;
background-image: none !important;
}
/* Schriftfarbe */
.tabmail-tab[selected="true"] .tab-text.tab-label {
color: #ffffff !important;
}
/* Schriftfarbe */
.tabmail-tab:not([selected]) .tab-text.tab-label {
color: #c30052 !important;
/* font-weight: bold !important; */ /* Schrift fett */
}
/* NICHT aktive Reiter (Tabs( >> Menü: "Posteingang, Kalender..." */
/* Hintergrundfarbe (mittelrot) */
.tabmail-tab:not([selected]) .tab-background {
background-color: #ecd0de !important;
}
.tabmail-tab:not([selected]) .tab-label-container {
margin: -4px 0 0 !important;
}
/* Farben und Linien der Ränder um die Reiter (Tabs) herum */
.tabmail-tab:not([selected]) {
border-right: 1px solid #c30052 !important;
}
.tab-line {
display: none !important;
}
/* Nicht aktive Tabs bei HOVER */
.tabmail-tab:not([selected]):hover .tab-background {
background-color: #c30052 !important;
}
/* Schriftfarbe */
.tabmail-tab:not([selected]):hover .tab-text {
color: #FFFFFF !important;
}
/* ========================================================================== */
/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-icon {
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: -5px -5px 0 0 !important;
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-icon-image {
margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-icon {
border: 1px solid #ecd0de !important;
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: -2px -3px 0 0 !important;
}
/* ========================================================================== */
/***** mittleres Menü "Datei, Bearbeiten, Ansicht..." *****/
/* >> hier wird der Hintergrund re. NEBEN diesem Menü eingefärbt */
/* >> ebenso wird die Höhe des Menüs angepaßt */
#toolbar-menubar {
background-color: #ecd0de !important;
color: #c30052 !important;
min-height: 28px !important; /* Höhe dieses Menüs */
max-height: 28px !important;
}
/***** mittleres Menü "Datei, Bearbeiten, Ansicht..." anpassen. *****/
/* >> Anpassung der Farben u. Hintergrund des eigentlichen Menüs */
#mail-menubar > menu,
#viewSource-main-menubar > menu {
border-right: 1px solid #c30052 !important;
background-color: #ecd0de !important;
color: #c30052 !important;
}
/* Hintergrund bei hover */
#mail-menubar > menu:hover,
#viewSource-main-menubar > menu:hover {
background-color: #c30052 !important;
color: #FFFFFF !important;
}
/* ========================================================================== */
/***** oberes Menü (Abrufen, Verfassen, Chat... etc. *****/
/* >> hier wird der komplette Hintergrund (Container) des oberen Menüs eingefärbt */
#unifiedToolbarContainer {
background-color: #c30052 !important;
}
/***** oberes Menü: Button und Toolbarbutton von #unifiedToolbar anpassen. *****/
/* >> die Schaltfläche links und das Hamburgermenü rechts (3 Striche) */
#unifiedToolbar > toolbarbutton {
background-color: #c30052 !important;
color: #FFFFFF !important;
}
/* die beiden Schaltflächen li + re bei hover */
#unifiedToolbar > toolbarbutton:hover {
background-color: #ecd0de !important;
color: #c30052 !important;
}
/* Hintergrund und Schriftfarbe des oberen Menüs (Abrufen, Verfassen, Chat...) */
#unifiedToolbarContent > li > div > button {
color: #FFFFFF !important;
}
/* Hintergrund und Schriftfarbe des oberen Menüs (Abrufen, Verfassen, Chat...) bei hover */
#unifiedToolbarContent > li > div > button:hover {
background-color: #ecd0de !important;
color: #c30052 !important;
}
/* ========================================================================== */
/* Hintergrund um das untere Menü herum (Posteingang, Kalender, Adressbuch...) */
#tabs-toolbar {
background-image: none !important;
background-color: #ecd0de !important;
}
/* ========================================================================== */
/* Hintergrund des Bereichs bei eingegangener Email --> "Von, An, Betreff" */
#messageHeader {
border-bottom: 1px solid #c30052 !important;
border-top: 1px solid #c30052 !important;
background-color: #e6bfd2 !important;
color: #000 !important;
}
/* ========================================================================== */
/* Hintergrund und Farbe der Buttons rechts bei "Antworten, Weiterleiten, Archivieren..." */
#starMessageButton,
#header-view-toolbar > toolbarbutton,
#header-view-toolbar > toolbaritem > toolbarbutton {
background-color: #c30052 !important;
color: #FFF !important;
}
#starMessageButton:hover,
#header-view-toolbar > toolbarbutton:hover,
#header-view-toolbar > toolbaritem > toolbarbutton:hover {
background-color: #ecd0de !important;
color: #c30052 !important;
}Hier ist es dann Codezeile 44.
Ich habe übrigens den Tipp von
@Bastler durchgeführt und den TB jetzt immer so gestartet. Danke für den Tipp 
Grüße und vielen Dank...
imebro
Hallo,
bei Ansicht > Dichte steht es bei mir auf "Entspannt".
Aber ich habe eben etwas völlig verrücktes festgestellt.
Nach meinem Aufräumen war die Tableiste wieder zu flach.
Dann habe ich mal verglichen und einen kleinen Unterschied festgestellt, der eigentlich völlig unlogisch ist.
Schaut mal hier:
li:not([data-server-type]) > .container div.twisty img.twisty-icon {
margin-bottom: -16px !important; /* negativer zieht Winkel Icon runter */
}
/* ========================================================================== */
} /* ohne dieses Zeichen wird das untere Menü (Tabs) zu flach - ist wohl ein Fehler!! */
/* AKTIVE Reiter (Tabs) >> Menü: "Posteingang, Kalender..." */
.tabmail-tab {
border-radius: 1px 1px 0 0 !important;
min-height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
}Das sind in meinem aufgeräumten "userChrome.css" die Zeilen 38 - 52.
Und über dem auskommentierten Satz "AKTIVE Reiter...." seht Ihr das Zeichen } (hier Zeile 7)
Entferne ich das, ist die Tableiste flach // füge ich es wieder ein, ist die Tableiste in der korrekten Höhe formatiert.
Eigentlich gehört das Ding ja da nicht hin... aber so funktioniert es 
Wie Ihr im Code seht, habe ich es nun auskommentiert, damit ich es nicht mal wieder versehentlich lösche 
Habt Ihr da ne Idee?
Grüße,
imebro
Hmmm... tja, das ist ja seltsam, dass sich mein CSS bei Euch anders auswirkt.
Vielleicht habe ich ja auch irgendwelche Einstellungen anders gesetzt als Du, bzw. Ihr.
Allerdings sieht es ja jetzt gut aus bei mir und so bin ich sehr zufrieden.
Das ist quasi jetzt wie ein eigenes Theme 
Ich werde jetzt die CSS-Datei noch etwas aufräumen. Z.B. gleiche Abstände der Einträge vom Rand, bessere Beschreibungen und ggf. auch löschen der auskommentierten Zeilen. Und natürlich auch die einzelnen Code-Blöcke so zusammen kopieren, wie sie auch in Tb zu sehen sind. Hoffe das wirft mir am Ende nicht noch das Ergebnis durcheinander
Werde also eine Kopie der "userChrome.css" machen, bevor ich beginne
Danke und Grüße an Euch...
imebro
Hallo und danke für die weiteren Tipps.
Das CSS hat auch nicht funktioniert. Gleicher Effekt wie vorher - also Tabs zu flach und halb ins darüberliegende Menü verschoben.
Ich habe es aber jetzt tatsächlich selbst hinbekommen, durch (planloses) Herumprobieren
Und zwar habe ich einfach die folgenden Angaben auskommentiert:
/* Höhe der Reiter / Tabs (Posteingang, Kalender...) anpassen. */
/* #tabs-toolbar {
min-height: 38px !important;
max-height: 45px !important; */
}und
.tabmail-tab:not([selected]) .tab-background {
background-color: #ecd0de !important;
/* min-height: 26px !important; */ /* Höhe dieser Tabs */
/* max-height: 26px !important; */
/* margin: 0 0 3px !important; */
}Offenbar waren die Höhenangaben das Problem. Jetzt haben die Tabs die volle Höhe und das ist auch so beim Hovern.
Tja, ist sicher ein Zufallstreffer
Danke aber nochmals für Eure super Unterstützung hier
Grüße,
imebro
oh danke. Ich habe das Sternchen und / entfernt, aber dann auch mal mit "margin: -1 px bis -12 px" etwas probiert. Aber da habe ich keine Veränderung irgendwo feststellen können. Aber - wie Du schon geschrieben hast - hat wohl nichts mit diesem Problem zu tun.
Aber ist nicht so schlimm. So wie es jetzt ist, ist es auch OK. Dann sind diese Tabs eben ein bisschen flacher. No Problem 
Jetzt suche ich noch eine Lösung für das Problem weiter oben... also mit den 4 Sekunden fett in weißer Schrift. Ich möchte diese 4 Sekunden ja belassen, aber die Schrift soll halt nicht zu weiß wechseln, wenn ich die neue Mail editiere. Aber auch das ist jetzt kein wirklich dickes Problem...
Grüße,
imebro
OK und danke für die Mühe... mal wieder
Hier mein kompletter CSS-Code:
/* ORDNERFARBEN: */
/* nicht neue, aber ungelesene Mails, wenn Posteingang NICHT markiert ist */
li.unread > .container > .name {
color: maroon !important;
}
/* neue Mails, wenn Posteingang beim Start von TB NICHT ausgewählt (markiert) ist */
li.new-messages > .container > .name {
color: #c30052 !important;
}
/* nicht neue, aber ungelesene Mails, wenn Posteingang markiert ist */
li.unread.selected > .container > .name {
color: maroon !important;
}
/* neue Mails, wenn Posteingang beim Start von TB ausgewählt (markiert) ist */
li.new-messages.selected.current > .container > .name {
color: #c30052 !important;
}
/* hellroter Hintergrund bei der ganzen Zeile der neu eingegangenen Email */
tr[data-properties~="new"] :where(td) {
appearance: none !important;
background-color: #ecd0de !important;
}
/* ========================================================== */
/* ---Fuehrungslinien im Verzeichnisbaum 128.x--- */
li:not([data-server-type]) > .container div.twisty {
border-right: 1px solid #c30052 !important; /* Linie Dicke und Farbe */
margin-right: 8px !important;
margin-left: -8px !important;
margin-top: -16px !important; /* negativer schiebt Linie hoch */
}
li:not([data-server-type]) > .container .icon::before {
content: '--' !important;
color: #c30052 !important; /* Farbe der Querlinie */
margin-left: -9px !important;
}
li:not([data-server-type]) > .container div.twisty img.twisty-icon {
margin-bottom: -16px !important; /* negativer zieht Winkel Icon runter */
}
/* ========================================================== */
/* Höhe der Tabbar reduzieren. */
#tabs-toolbar {
min-height: 38px !important;
max-height: 45px !important;
}
/* AKTIVE Reiter (Tabs) >> Menü: "Posteingang, Kalender..." */
.tabmail-tab {
border-radius: 1px 1px 0 0 !important;
min-height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
}
/* Hintergrundfarbe (dunkelrot) */
.tabmail-tab[selected="true"] .tab-background {
background-color: #c30052 !important;
background-image: none !important;
}
/* Schriftfarbe */
.tabmail-tab[selected="true"] .tab-text.tab-label {
color: #ffffff !important;
}
/* Schriftfarbe */
.tabmail-tab:not([selected]) .tab-text.tab-label {
color: #c30052 !important;
/* font-weight: bold !important; */ /* Schrift fett */
}
/* NICHT aktive Reiter (Tabs( >> Menü: "Posteingang, Kalender..." */
/* Hintergrundfarbe (mittelrot) */
.tabmail-tab:not([selected]) .tab-background {
background-color: #ecd0de !important;
min-height: 26px !important;
max-height: 26px !important;
margin: 0 0 3px !important;
}
.tabmail-tab:not([selected]) .tab-label-container {
margin: -4px 0 0 !important; */
}
/* Farben und Linien der Ränder um die Reiter (Tabs) herum */
.tabmail-tab:not([selected]) {
/* border-bottom: 1px solid #c30052 !important; */
/* border-top: 1px solid #c30052 !important; */
border-right: 1px solid #c30052 !important;
border-radius: 1px 1px 0 0 !important;
}
.tab-line {
display: none !important;
}
/* Nicht aktive Tabs bei HOVER */
.tabmail-tab:not([selected]):hover .tab-background {
background-color: #c30052 !important;
}
/* Schriftfarbe */
.tabmail-tab:not([selected]):hover .tab-text {
color: #FFFFFF !important;
}
/* ========================================================== */
/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-icon {
/* border: 1px solid #c30052 !important; /* Farbe Linie um das Kreuz herum */
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: -5px -5px 0 0 !important;
}
/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-icon-image {
margin: 0px 4px 0 -3px !important;
}
/* Kreuz-Icon Hintergrund (aktiv) ist hellrot */
.tabmail-tab[selected] .tab-close-icon {
border: 1px solid #ecd0de !important;
border-radius: 4px !important;
background-color: #ecd0de !important;
width: 16px !important;
height: 16px !important;
margin: -2px -3px 0 0 !important;
}
/* ========================================================== */
/***** mittleres Menü "Datei, Bearbeiten, Ansicht..." *****/
/* >> hier wird der Hintergrund re. NEBEN diesem Menü eingefärbt */
#toolbar-menubar {
/* border-bottom: 1px solid #c30052 !important; */
background-color: #ecd0de !important;
color: #c30052 !important;
}
/***** oberes Menü (Abrufen, Verfassen, Chat... etc. *****/
/* >> hier wird der komplette Hintergrund des oberen Menüs eingefärbt */
#unifiedToolbarContainer {
/* border-bottom: 1px solid #c30052 !important; */
background-color: #c30052 !important;
color: #FFFFFF !important;
}
/* ========================================================== */
/***** mittleres Menü "Datei, Bearbeiten, Ansicht..." anpassen. *****/
/* >> Anpassung der Farben u. Hintergrund des eigentlichen Menüs */
#mail-menubar > menu,
#viewSource-main-menubar > menu {
border-right: 1px solid #c30052 !important;
/* font-weight: bold !important; /* Fettschrift von "Datei, Bearbeiten..." */
background-color: #ecd0de !important;
color: #c30052 !important;
}
/* Hintergrund bei hover */
#mail-menubar > menu:hover,
#viewSource-main-menubar > menu:hover {
background-color: #c30052 !important;
color: #FFFFFF !important;
}
/* ========================================================== */
/* Hintergrund um das untere Menü herum (Posteingang, Kalender, Adressbuch...) */
#tabs-toolbar {
background-image: none !important;
background-color: #ecd0de !important;
}
/* Hintergrund des Bereichs bei eingegangener Email --> "Von, An, Betreff" */
#messageHeader {
border-bottom: 1px solid #c30052 !important;
border-top: 1px solid #c30052 !important;
background-color: #e6bfd2 !important;
color: #000 !important;
}
/* ========================================================== */
/* Button und Toolbarbutton von #unifiedToolbar anpassen. */
/* >> die Schaltfläche links und das Hamburgermenü rechts (3 Striche) */
#unifiedToolbar > toolbarbutton {
background-color: #c30052 !important;
color: #ecd0de !important;
}
/* die beiden Schaltflächen li + re bei hover */
#unifiedToolbar > toolbarbutton:hover {
background-color: #ecd0de !important;
color: #c30052 !important;
}
/* Hintergrund und Schriftfarbe des oberen Menüs (Abrufen, Verfassen, Chat...) */
#unifiedToolbarContent > li > div > button {
/* border: 1px solid #ecd0de !important; */
/* background-color: #ecd0de !important; */
color: #FFFFFF !important;
}
/* Hintergrund und Schriftfarbe des oberen Menüs (Abrufen, Verfassen, Chat...) bei hover */
#unifiedToolbarContent > li > div > button:hover {
background-color: #ecd0de !important;
color: #c30052 !important;
}
/* ========================================================== */
/* Hintergrund und Farbe der Buttons rechts bei "Antworten, Weiterleiten, Archivieren..." */
#starMessageButton,
#header-view-toolbar > toolbarbutton,
#header-view-toolbar > toolbaritem > toolbarbutton {
background-color: #c30052 !important;
color: #FFF !important;
}
#starMessageButton:hover,
#header-view-toolbar > toolbarbutton:hover,
#header-view-toolbar > toolbaritem > toolbarbutton:hover {
background-color: #ecd0de !important;
color: #c30052 !important;
}Grüße,
imebro
Danke Dir nochmal dharkness21
Ich habe den Code jetzt ausgetauscht.
Allerdings ist es noch nicht ganz perfekt, wie Du am folgenden Screenshot sehen kannst:
Oben fehlt jetzt etwas bei den Tabs. Unten passt es dafür jetzt...
Ich habe jetzt mal die min- u. max-height bei "tabs-toolbar" von 29 px auf 38 px verändert. Damit wird es schon besser. Siehe hier:
Aber eigentlich müssten die Tabs noch etwas weiter runter. Aber wenn ich z.B. 40 px bei Beiden Werten eingebe oder gar 43 px, verändert sich nichts mehr. Habe auch mal nur bei max-height 45 px eingegeben, aber auch hier bleibt es so, wie auf Foto 2.
Grüße,
imebro
Ich hatte den ursprünglichen Code ja etwas verändert.
Vor allem hatte ich die Radien "entschärft", wie man auf dem Foto sieht.
Hier nochmal mein jetziger Code zu den aktiven und inaktiven Tabs:
/**** AKTIVE Reiter (Tabs) >> Menü: "Posteingang, Kalender..." ****/
.tabmail-tab {
border-radius: 1px 1px 0 0 !important;
min-height: 30px !important;
max-height: 30px !important;
padding-inline: 0 !important;
}
/* Hintergrundfarbe (dunkelrot) */
.tabmail-tab .tab-background[selected="true"] {
background-color: #c30052 !important;
background-image: none !important;
}
/* Schriftfarbe */
.tab-text.tab-label[selected="true"] {
color: #ffffff !important;
}
/***** NICHT aktive Reiter (Tabs( >> Menü: "Posteingang, Kalender..." *****/
/* Hintergrundfarbe (mittelrot) */
.tab-background:not([selected]) {
background-color: #ecd0de !important;
min-height: 26px !important;
max-height: 26px !important;
margin: 0 0 3px !important;
}
.tabmail-tab:not([selected]) .tab-label-container {
margin: -4px 0 0 !important; */
}
/* Schriftfarbe */
.tab-text.tab-label:not([selected]) {
color: #c30052 !important;
/* font-weight: bold !important; /* Schrift fett */
}
/* Farben und Linien der Ränder um die Reiter (Tabs) herum */
.tabmail-tab:not([selected]) {
/* border-bottom: 1px solid #c30052 !important; */
/* border-top: 1px solid #c30052 !important; */
border-right: 1px solid #c30052 !important;
border-radius: 1px 1px 0 0 !important;
}
.tab-line {
display: none !important;
}
/***** Nicht aktive Tabs bei HOVER *****/
.tabmail-tab:not([selected]):hover .tab-background {
background-color: #c30052 !important;
}
/* Schriftfarbe */
.tabmail-tab:not([selected]):hover .tab-text {
color: #FFFFFF !important;
}Ich kann jetzt so eigentlich keinen Fehler finden oder einen Auslöser für dieses Problem, dass der gehoverte Tab unten kürzer ist
Grüße,
imebro
Danke Dir dharkness21
Ich habe den Code nun in meine CSS-Datei eingefügt und er funktioniert grds. auch...
Allerdings sind die gehoverten Tabs nun etwas flacher - es fehlt unten ein Stück.
Hier mal ein Screenshot dazu:
Bild entnommen...
Den Kalender-Tab habe ich nur gehovert. Der Posteingang-Tab ist aktiv.
Ich habe im CSS-Code schon geschaut, ob ich vielleicht unter den Tabs noch hellrote Border habe, die dann vielleicht beim hovern nicht umgefärbt werden. Aber dem ist nicht so...
Wäre jetzt auch nicht wirklich schlimm, wenn es so bleiben würde - ist ja nur während des Hover-Vorganges
Grüße,
imebro
Hallo und vielen Dank für die weitere Hilfe.
Ich habe den Code soeben getestet. Allerdings wird der hellrote Hintergrund nicht gehovert, sondern es erscheint unten ein Streifen in dunkelroter Farbe (ich hatte die Farbe schon an mein Dunkelrot angepaßt), wenn ich mit der Maus über den Tab gehe.
Zum besseren Verständnis hier mal ein Screenshot von einem der Tabs:
Falls es nicht möglich ist, den kompletten Tab zu hovern, dann geht es auch so mit diesem Strich... wäre mal was Neues
Dann würde ich die Schrift wieder enthovern... ginge also auch.
Aber mir fiel heute Morgen noch was auf:
Gestern hatte ich ja das Problem mit neuen Emails, die beim Editieren in weißer, fetter Schrift angezeigt und erst nach etwa 4 Sekunden korrekt angezeigt werden. >> Siehe Post #22
Dazu hattest Du ( Grisu2099) mir ja geschrieben, ich solle die Codezeilen 19 - 21 auskommentieren. Also diese hier:
ul > li.new-messages > .container {
background-color: #ecd0de !important;
}Das hatte ich auch gemacht und danach funktionierte alles.
Heute Morgen war es jedoch wieder wie vorher.
Ich könnte natürlich den Tipp von dharkness21 umsetzen... aber ich möchte ja, dass neue Mails erst nach 4 Sekunden als gelesen markiert werden. Was kann ich ansonsten noch versuchen, um das Problem zu lösen? Und... soll ich den Code (Zeilen 19 - 21) auskommentiert lassen?
Danke und Grüße,
imebro
Danke für die Nachricht Sehvornix
Hier mal ein Screenshot meines GUI des Thunderbird 128.x
Ich bin sehr sicher, dass diese Farbgebung, Aufteilung etc. nicht jedem Menschen gefällt...
Aber solche GUIs sind halt individuell und jeder erstellt es halt so, wie es ihm selbst gefällt
Die auswählbaren Menüpunkte, Reiter und Tabs kann man alle hovern (naja... bei den Tabs suche ich ja noch nach einer Lösung ). Und dabei kehren sich dann einfach jeweils die Farben um. Hellroter Hintergrund mit dunkelroter Schrift, wird dann eben zu dunkelrotem Hintergrund mit hellroter (manchmal auch weißer) Schrift. Siehe z.B. bei den Tabs "Posteingang, Kalender... etc.).
Freue mich aber auch noch über Infos zu meinem Problem mit dem Hovern des Hintergrundes der Tabs.
Danke und schöne Grüße,
imebro
Hallo wieder mal...
Ich habe jetzt mal versucht, die nicht aktiven Tabs (Posteingang, Kalender, Adressbuch...) auch zu hovern.
Bei der Schrift hat das funktioniert. Leider jedoch nicht beim Hintergrund.
Hier mein Code, den ich eben ausprobiert habe:
/***** nicht aktive Reiter (Tabs) bei HOVER *****/
.tab-background:not([selected]):hover {
background-color: #c30052 !important;
}
/* Schriftfarbe */
.tab-text.tab-label:not([selected]):hover {
color: #ecd0de !important;
}Könnt Ihr mir sagen, wo mein Fehler ist?
Danke und Grüße,
imebro