Menübereich farblich anpassen

imebro

OK und danke für die Mühe... mal wieder

Hier mein kompletter CSS-Code:

CSS

/* 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;
}

Alles anzeigen

Grüße,

imebro

dharkness21

Zitat von imebro

CSS

.tabmail-tab:not([selected]) .tab-label-container {
    margin: -4px 0 0 !important; */
}

Hat wohl nichts mit dem Problem zu tun, aber finde den Fehler, ist in Dein CSS in Zeile 83-85.

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

dharkness21

Zitat von imebro

Dann sind diese Tabs eben ein bisschen flacher. No Problem

Doch, das ist ein Problem, ich schraube gerade daran, aber wirklich erkennen kann ich das Problem noch nicht wirklich, teste bitte mal die ↓ Variante, ersetze Dein vollständiges CSS, vorher wie immer aber ein Backup der userChrome.css machen.

CSS

/* 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: 28px !important;
    max-height: 28px !important;
	padding: 0 0 0 1px !important;
	margin: 0 !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;
	margin-top: 3px !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;
}

#tabs-toolbar > toolbarbutton,
#restartthunderbird-toolbar {
	min-height: 26px !important;
    max-height: 26px !important;
	min-width: 26px !important;
    max-width: 26px !important;
	border-radius: 0 !important;
	border: 0 !important;
	background-color: #c30052 !important;
    color: #FFF !important;
	padding: 0 !important;
	margin: 1px 1px 1px 0 !important;
}
#restartthunderbird-toolbar {
	min-height: 22px !important;
    max-height: 22px !important;
	min-width: 22px !important;
    max-width: 22px !important;
	margin: 0 0 0 2px !important;
}
#tabs-toolbar > toolbarbutton:hover,
#restartthunderbird-toolbar:hover {
    background-color: #ecd0de !important;
    color: #c30052 !important;
}

Alles anzeigen

Dort eventuell mit dem margin-top spielen.

CSS

/* 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;
	margin-top: 3px !important;
}

dharkness21

Das obige CSS sieht bei mir so ↓ aus.

Bastler

Zitat von imebro

Aber ist nicht so schlimm.

Führe mal die TB Neustarts nicht nur über Beenden, sondern wie im Bild aus. Dann werden evtl. alte Reste geputzt.

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:

CSS

	/* Höhe der Reiter / Tabs (Posteingang, Kalender...) anpassen. */
/* #tabs-toolbar {
	min-height: 38px !important;
    max-height: 45px !important;  */
}

und

CSS

.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

dharkness21

Zitat von imebro

und

Das 2te auskommentierte CSS war mir durchgegangen, da waren die Höhenangaben auch dem .tab-background und nicht auf dem Tab selbst, das ist ein Fehler.

Zitat von imebro

Offenbar waren die Höhenangaben das Problem. Jetzt haben die Tabs die volle Höhe und das ist auch so beim Hovern.

Ja und nein, bei meinem Tb und Bb sind die Höhenanpassungen extrem und ich konnte niemals Dein Problem mir den Tabs, deren Höhe und Position auch nur Ansatzweise in meinen CSS-Anpassungen nachstellen, irgendwas ist bei Dir nicht ganz rund, leider kann ich es nicht nachvollziehen.

Hier mal ein Screenshot meiner Anpassungen der oberen Leisten.

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

dharkness21

Zitat von imebro

Vielleicht habe ich ja auch irgendwelche Einstellungen anders gesetzt als Du, bzw. Ihr.

Gut möglich, was hast Du bei Ansicht → Dichte eingestellt, hier steht es auf Kompakt?

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:

CSS

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

Alles anzeigen

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

Grisu2099

Zitat von imebro

Habt Ihr da ne Idee?

Auch hier kann man nur mit dem kompletten CSS eine Analyse machen...

imebro

oh ja... sorry, da hast Du ( Grisu2099 ) natürlich Recht

CSS

/* 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;
}

Alles anzeigen

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

ggbsde

Diverse Linter sagen, das das } in Zeile 44 falsch ist. Der Code danach wird also vermutlich nicht mehr ausgeführt.

Grisu2099

Doch, wird er - sagt mein kurzer Check. Und zwar tatsächlich korrekter, wenn die überschüssige Klammer da ist.

imebro: Laß sie einfach erstmal drin und beobachte weiter. Rausnehmen kann man sie immer noch wieder - aber an der (falschen) Stelle wieder einfügen, wenn man nicht mehr weiß, wo das war...

Bastler

Zitat von imebro

Hier ist es dann Codezeile 44.

Nimm die Klammer raus (definitiv zuviel) und passe zu .tabmailtab das min-height und max-height entspr. an.
Achtung! Die Werte sind nur für eine vorgewählte Dichte gültig!
Passe ebenso zu .tab-close-icon beide margin Werte an, sonst hüpft das Kreuz-Icon bei Tab Wechsel.
Die Schriftzüge im Tab hüpfen auch noch.

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:

CSS

/* 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;
}

Alles anzeigen

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

Grisu2099

Du könntest mal folgende Version testen:

CSS

/* Kreuz-Icon (nicht aktiv) - mit hellrotem Hintergrund */
.tab-close-button {
	border-radius: 4px !important;
	background-color: #ecd0de !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 4px 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: 18px !important;
	height: 18px !important;
	margin: 0 4px 0 -3px !important;
}

Alles anzeigen

Bei den margin-Werten ggf. noch etwas anpassen.

Ich habe nach einer ähnlichen Anpassung diesen Schatten nicht mehr (war mir auch vorher nicht aufgefallen...)

dharkness21

Zitat von Grisu2099

CSS

/* Kreuz-Icon (aktiv) bei selektiertem Tab */
.tabmail-tab[selected] .tab-close-button {
    margin: 0px 4px 0 -3px !important;
}

Wofür noch die Anpassung für margin beim selektierten Tab, da wirkt doch auch die ursprüngliche Anpassung die Du gesetzt hast?

Grisu2099

Nicht selektierter Tab mit der bei mir verwendeten Anpassung:

Selektierter Tab mit gleicher Anpassung:

Frag mich nicht, warum...

Menübereich farblich anpassen

Thunderbird 128.4.3 ESR veröffentlicht

Thunderbird 115.16.2 ESR veröffentlicht