Hallo Neddy,
ist das CSS wirklich vollständig? Hier werden z.B. die Tabs nicht umgestaltet.
Im Bild ist zuerkennen, dass unten der Scrollbalken keine Farbe hat.
Funktioniert hier merkwürdigerweise ohne Probleme.
Hallo Neddy,
ist das CSS wirklich vollständig? Hier werden z.B. die Tabs nicht umgestaltet.
Im Bild ist zuerkennen, dass unten der Scrollbalken keine Farbe hat.
Funktioniert hier merkwürdigerweise ohne Probleme.
Welcher Code ist es im Beitrag 28, der dazu führte, dass die Tab-Überhangliste den Farbverlauf erhalten hat.
/* Eigentlich nur #alltabs-popup, färbt allerdings alle Popups entsprechend um. */
.menupopup-arrowscrollbox {
background: linear-gradient(#BA78AB, #7f7fbe) !important;
}
#alltabs-popup > menuitem > .menu-text {
font-family: Arial Black !important;
}
Ebenso muss ich vorher wissen, welcher Code es ist, der den Hintergrund der Tableiste mit einem dunkleren Blaugrauton versehen ist.
Hallo Neddy,
bitte teste die ↓ Version.
/* ====================================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 140.0.1 | (128.13.0 esr) Gesamtfassung Stand: 31.07.2025 (bereinigt)
?? Basis: Code vom 08.01.2025 + Ergänzungen
?? Hinweis: about:config
- toolkit.legacyUserProfileCustomizations.stylesheets` ? true
- devtools.chrome.enabled` ? true
===================================================================== */
/* ===========================================================
? Anleitung: Div. Mails zus. als Tabs öffnen
Ordnerbaum > Posteingang je Mail-Kto. Anzahl: Div. ? > anklicken
= Nachrichtenliste > Strg + A + Enter
Bestätigungs-Fenster div. Nachrichten bestätigen ? OK
Tabs erscheinen oben > Senkrecht-Dreieck (rechts) >
Überhangliste mit Scrolli (Scrollbar-color: #CC6699 #666699) erscheint.
=========================================================== */
/* Die verschiedenen Leisten farblich anpassen. */
#unifiedToolbar,
#tabs-toolbar {
background-image: none !important;
background-color: #666699 !important;
}
#toolbar-menubar {
background-color: #9FA2D5 !important;
}
.icons-beside-text {
min-height: 32px !important;
max-height: 32px !important;
}
/* ====================================================
??? ? 1. Variante – TEST: Tabs scrollbar & kompakt ???
==================================================== */
tab {
min-width: 100px !important; /* Tabbreite verringert */
height: 30px !important; /* Tabhöhe kompakter */
margin-right: 2px !important; /* Abstand zwischen Tabs */
}
tabs {
overflow-x: auto !important; /* horizontales Scrollen */
scroll-behavior: smooth !important;
display: flex !important; /* Flexbox aktivieren */
}
tabpanels {
padding: 0 !important; /* Abstand zu Inhalt minimieren */
}
/* =================================================
???? Ende 1. Variante – Tabs scrollbar & kompakt ???
================================================= */
/* =====================================================
? 2. Variante – Tabs scrollbar & kompakt (kompakt-Stil)
===================================================== */
tab {
min-width: 100px !important;
height: 30px !important;
margin-right: 2px !important;
}
tab {
.tab-background {
background: none !important;
background-color: #DBA2CC !important;
}
}
tab[selected="true"] {
.tab-background {
background-color: #BA78AB !important;
}
}
.tab-text {
font-family: Arial Black !important;
font-size: 14px !important;
color: #000 !important;
}
.tab-line {
display: none !important;
}
tabs {
overflow-x: auto !important;
scroll-behavior: smooth !important;
display: flex !important;
}
tabpanels {
padding: 0 !important;
}
/* Eigentlich nur #alltabs-popup, färbt allerdings alle Popups entsprechend um. */
.menupopup-arrowscrollbox {
background: linear-gradient(#BA78AB, #7f7fbe) !important;
}
#alltabs-popup > menuitem > .menu-text {
font-size: 14px !important;
}
/* ===========================================
? Ende 2. Variante – Tabs scrollbar & kompakt
=========================================== */
/* ??? Begriffstabelle für CSS-Tests (intern) ??? */
/*
? Bereich | Tabs, Baum, Menü
? Status | Funktioniert stabil & gewünscht
? Status | Noch fehlerhaft oder unsicher
? Testcode | Neuer Versuch, Beobachtung läuft
? Datum | Wann getestet / ergänzt
? Notizen | Verhalten, Besonderheiten
*/
/* -----------------------------------------------------------------------------------------------------------
🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout
----------------------------------------------------------------------------------------------------------- */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code haben --- */
/* ? Farbverläufe */
/* Farbverlauf TB-Kopfzeile im Nachrichtenbereich (z.?B. Betreff, Von, An) */
#msgHeaderView {
background: linear-gradient(#BA78AB, #666699) !important;
min-height: 72px !important;
/* ? Erklärung: Verleiht dem Nachrichtenkopf ein visuelles Highlight in TB */
}
/* Hintergrund-Farbverlauf links TB Ordnerbaum */
#folderPane {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ? Account Central – TB-Farbgestaltung der Startseite */
/* Gestaltung der Begrüßungsseite / Accountübersicht */
#accountCentral,
.account-central-section,
.account-central-section > h2,
.account-central-section > div,
#accountCentral > *:first-child {
background-color: #BA78AB !important;
color: #ffffff !important;
/* ? Erklärung: Einheitliche Farbgestaltung der Account-Übersicht */
}
/* Tagesplan */
#agenda {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* -----------------------------------------------------------------------------------------------------------
? Abschnitt 2/6 – Schriftgrößen, Composer (Verfassen)-Fenster, Nachrichtenliste & Ordnerbaum
------------------------------------------------------------------------------------------------------------ */
/* ================================================
? Ordnerbaum-Konten: Schriftart, - Größe & -Höhe
Schrift in Ordnernamen (Posteingang, Gesendet etc.)
================================================ */
#folderPaneHeaderBar {
border-bottom: 1px solid #D4D4D8 !important;
padding: 3px 6px 2px 6px !important;
}
/* Button in der Folderpane. */
#folderPaneHeaderBar > button {
font-family: Arial Black !important;
background-color: #C8A2C8 !important;
color: black !important;
}
#folderPaneHeaderBar > button:hover {
border: 1px solid #967996 !important;
}
#folderPaneHeaderBar,
#today-pane-panel > .sidebar-header {
appearance: none !important;
background-color: #9FA2D5 !important;
}
#today-pane-panel > .sidebar-header {
height: 1.4em !important;
min-height: 31px !important;
}
.sidebar-panel-scroll {
@media not (prefers-contrast) {
&::before, &::after {
height: 0 !important;
}
}
}
/* Höhe der einzelnen Ordnerzeilen */
#folderTree li > .container {
height: 10px !important; /* ?? Ursprüngliche Zeilenhöhe – wird durch folgende Regel überschrieben */
/* ? Erklärung: Verringert die Zeilenhöhe, damit mehr Ordner auf einmal sichtbar sind */
}
/* ?? Geändert: Höhe auf sinnvolle 24px angepasst (10px ist zu wenig für die Darstellung) */
#folderTree li > .container {
height: 24px !important; /* ?? geändert: von 10 auf 24px Schrifthöhe angepasst */
/* ? Erklärung: Optimierte Zeilenhöhe für gute Lesbarkeit der Ordner */
}
/* =========================================================
? Nachrichten-Eingabefeld oder Kopfzeile - (Compose-Fenster)
Betreffzeile im Composer-Fenster (neue Nachricht)
========================================================= */
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
#msgSubject {
font-size: 21px !important;
font-weight: bold !important;
font-family: Arial Black !important;
/* ? Erklärung: Der Betreff wird prominent und deutlich dargestellt */
}
}
/* Schnellfilterleiste */
#quick-filter-bar {
background-color: #a66b99 !important;
}
.quickFilterButtons {
border: 0 !important;
}
#quickFilterBarContainer > button,
#quickFilterBarContainer > div > button {
font-family: Arial Black !important;
border: 1px solid #C8A2C8 !important;
background-color: #C8A2C8 !important;
color: black !important;
border-radius: 4px !important;
margin-right: 2px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
#quickFilterBarContainer > button:hover,
#quickFilterBarContainer > div > button:hover {
border: 1px solid #967996 !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
/* ====================================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
==================================================== */
#threadPaneHeaderBar {
background-color: #9FA2D5 !important;
}
#threadTree {
font-size: 30px !important;
font-family: Arial Black !important;
background-color: #9FA2D5 !important;
/* ? Erklärung: Große Schrift in der Mail-Liste sorgt für bessere Lesbarkeit */
}
/* Geändert: Zeilenhöhe ebenfalls auf 24px angepasst */
#threadTree > treechildren::-moz-tree-row {
font-family: Arial Black !important;
height: 24px !important; /* ?? geändert: Höhe von 10 auf 24px korrigiert für Darstellung */
/* ? Erklärung: Kompakte Ansicht innerhalb der Mail-Liste mit besserem Platz für Inhalte */
}
/* Alt - Deaktiviert – Funktioniert nicht: `fill` wirkt nicht auf Tree-Icons in TB */
#threadTree treechildren::-moz-tree-image(unread) {
fill: #990000 !important;
/* ?? deaktiviert – siehe Hinweis: keine Wirkung unter aktuellen TB-Versionen */
}
/* Neu durch Dharkness */
/* Ungelesene Mails, Threads mit ungelesenen Mails und neue Mails */
#threadTree tbody {
& .table-layout[data-properties~="unread"] :where(td, .subject-line) {
text-decoration: underline blue !important;
text-decoration-thickness: 2px !important;
}
}
#threadTree tbody {
& .table-layout[data-properties~="read"][data-properties~="hasUnread"] :where(td, .subject-line) {
text-decoration: underline blue !important;
text-decoration-thickness: 2px !important;
}
}
#threadTree tbody {
& .table-layout[data-properties~="read"][data-properties~="hasNew"] :where(td, .subject-line) {
text-decoration: underline red !important;
text-decoration-thickness: 2px !important;
}
}
img[data-l10n-id="threadpane-message-new"] {
width: 16px !important;
height: 16px !important;
fill: #F20 !important;
stroke: #900 !important;
}
/* ? Hinzugefügt: funktionierender SVG-Punkt für ungelesene Nachrichten */
#threadTree treechildren::-moz-tree-image(unread) {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23990000'/></svg>") !important;
/* ? Erklärung: Roter Punkt erscheint zuverlässig bei ungelesener Mail */
}
/* Kopfleiste der ThreadPane */
th[is="tree-view-table-header-cell"] > div > button,
thead[is="tree-view-table-header"] > tr > [is="tree-view-table-column-picker"] {
background: none !important;
background-color: #DBA2CC !important;
color: black !important;
}
/* =============================================
? HG-Farbe für Server-Zeile in Konten (optional)
============================================= */
/* ? Hebt die Hauptkonto-Zeile im Ordnerbaum farblich hervor */
/* #folderTree treechildren::-moz-tree-cell-text(isServer-true) */
#folderPane {
color: #000 !important;
}
li[data-server-type="imap"] > .container {
margin-top: 2px !important;
}
li[data-server-type="imap"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
li[title="Lokale Ordner"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
li> div > .name {
font-size: 14px !important;
}
/* ----------------------------------------------------------------------------------------------
? Abschnitt 3/6 – Scrollbars, Nachrichtenvorschau, Toolbars & Menüleisten
----------------------------------------------------------------------------------------------- */
/* ?? Scrollbars (Scrollbar-Stil im gesamten Thunderbird) */
scrollbar {
-moz-appearance: none !important;
background-color: #BCA5D4 !important;
width: 16px !important;
/* ? Erklärung: Einheitlicher Look für Scrollbars – helle violette Farbe */
}
scrollbar thumb {
background-color: #673A95 !important;
border-radius: 6px !important;
/* ? Erklärung: Dunkler Scrollbalken mit abgerundeten Ecken für eleganten Look */
}
/* ? Vorschau-Fenster (Nachrichtenvorschau unten) */
#messagepane {
font-size: 22px !important;
font-family: Arial Black !important;
background-color: #F1E5FF !important;
/* ? Erklärung: Vorschau leserlich mit großer Schrift & hellem Hintergrund */
}
#messageHeader #header-view-toolbar {
min-height: 1.4em !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
#unifiedToolbarContent > li > div > button,
li.extension-action > div > button {
font-family: Arial Black !important;
background-color: #C8A2C8 !important;
color: black !important;
border-radius: 4px !important;
margin-bottom: 1px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton {
font-size: 14px !important;
font-family: Arial Black !important;
background-color: #C8A2C8 !important;
color: black !important;
border-radius: 4px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton.message-header-view-button,
toolbarbutton.message-header-view-button > toolbarbutton {
font-size: 14px !important;
}
/* =============================
? Menüleisten: Schrift und Farbe
============================= */
menubar {
padding-left: 3px !important;
}
menubar > menu {
font-size: 14px !important;
font-family: Arial Black !important;
border-radius: 5px !important;
border: 1px solid #D2B9D3 !important;
background-color: #D2B9D3 !important;
color: #000000 !important;
padding-top: 0 !important;
padding-bottom: 1px !important;
margin-top: 2px !important;
margin-right: 3px !important;
margin-bottom: 2px !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
menubar > menu:hover {
border: 1px solid #967996 !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
/* ----------------------------------------------------------------------------------------------
? Abschnitt 4/6 – Tooltip-Stil, Fensterrahmen & Statusleiste
---------------------------------------------------------------------------------------------- */
/* ============================================================
? Tooltip-Stil (z. B. wenn man mit der Maus über Buttons fährt)
============================================================ */
tooltip {
font-size: 16px !important;
font-family: Arial Black !important;
color: #000000 !important;
background-color: #F2DFFF !important;
border: 1px solid #673A95 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Tooltips werden gut lesbar und visuell angenehm dargestellt */
}
/* ====================================
? Rahmen um das Hauptfenster (optional)
Kann das Gesamtlayout visuell begrenzen
==================================== */
/* #messengerWindow {
border: 5px solid #C0A0D0 !important;
border-radius: 10px !important;
? Erklärung: Verleiht dem Hauptfenster einen dekorativen Rahmen
} */
/* =====================================================
? Statusleiste unten (ganz unten im Thunderbird-Fenster)
===================================================== */
statusbar {
font-size: 15px !important;
font-family: Arial Black !important;
background-color: #EADCF2 !important;
color: #000000 !important;
border-top: 2px solid #BCA5D4 !important;
/* ? Erklärung: Klarer Kontrast zur Statusleiste mit eleganter Farbgebung */
}
/* -----------------------------------------------------------------------------------------------
? Abschnitt 5/6 – Kalenderansicht, Adressbuch & Suchleiste
------------------------------------------------------------------------------------------------ */
/* ===================================================
? Kalender: Tagesansicht, Wochenansicht, Monatsansicht
=================================================== */
.calendar-day-view, .calendar-week-view, .calendar-month-view {
font-size: 18px !important;
font-family: Arial Black !important;
background-color: #F7F0FF !important;
color: black !important;
/* ? Erklärung: Einheitliche Optik im Kalender mit gut lesbarer Schrift */
}
/* =====================================
??? Adressbuch: Listenansicht & Kontakte
===================================== */
#abResultsTree {
font-size: 16px !important;
font-family: Arial Black !important;
background-color: #EFE0F8 !important;
color: black !important;
/* ? Erklärung: Kontaktliste mit großer, kontrastreicher Schrift */
}
#abResultsBox {
border: 2px solid #BCA5D4 !important;
border-radius: 8px !important;
/* ? Erklärung: Visuelle Rahmung des Adressbuch-Bereichs */
}
/* =========================================
? Suchleiste (oberhalb der Nachrichtenliste)
========================================= */
#searchInput {
font-size: 16px !important;
font-family: Arial Black !important;
background-color: #F0DDF9 !important;
color: black !important;
border: 1px solid #673A95 !important;
border-radius: 4px !important;
/* ? Erklärung: Suchfeld wird deutlich sichtbar und optisch eingebettet */
}
/* ---------------------------------------------------------------------------------------------------------
? Abschnitt 6/6 – Systemfarben, E-Mail-Buttons & Spezialelemente
------------------------------------------------------------------------------------------------------------ */
/* ================================================
? Systemfarben überschreiben (z.B. Dialoge, Rahmen)
================================================ */
:root {
--system-color-background: #F9F0FF !important;
--system-color-text: #000000 !important;
--system-color-accent: #A175D1 !important;
/* ? Erklärung: Einheitliche Farbpalette für Thunderbird-Systemelemente */
}
/* ===========================================================
? Buttons innerhalb von E-Mails (Antworten, Weiterleiten etc.)
=========================================================== */
.mail-action-button {
font-size: 16px !important;
font-family: Arial Black !important;
background-color: #D3A3E1 !important;
color: black !important;
border-radius: 5px !important;
padding: 6px 12px !important;
/* ? Erklärung: Klare und visuell hervorgehobene Buttons für Mailaktionen */
}
/* =========================================================
? Anhangsbereich (Attachment Pane bei empfangener Nachricht)
========================================================= */
.attachmentList {
font-size: 16px !important;
font-family: Arial Black !important;
background-color: #F0E3FF !important;
border: 1px solid #BCA5D4 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Anhangsliste übersichtlich und optisch eingebettet */
}
/* ============================================
? Ladeindikator / Fortschrittsbalken (optional)
============================================ */
progress {
background-color: #E0CCE8 !important;
}
progress::-moz-progress-bar {
background-color: #673A95 !important;
/* ? Erklärung: Ladeleisten im Design integriert – harmonisch in der Farbpalette */
}
/* ------------------------------------------
Abschnitte: 1 bis 6 Ende !!!
------------------------------------------ */
Alles anzeigen
Was bedeuten die vielen Fragezeichen ??? - Sind es Fehler, oder habe ich die Antwort übersehen?
Die sind sicherlich aufgrund von Zeichen entstanden, die meine Font nicht wiedergeben kann.
Scrollbalken alle leider ohne die 2 Farben
Das geht nicht mehr per CSS-Voodoo, das hatte ich aber IIRC auch schon früher hier zu Thread geschrieben.
1 Überhangliste - Farbverlauf fehlt
2. Schrift zu groß, wie auch in der 3. Menüleiste (oben).
4 Kopfleiste - in Bereich: VON - BETREFF- AN weiße Farbe fehlt
Schaue ich mir an.
Hallo Neddy,
ich habe noch ein klein wenig gebastelt, schau Dir doch mal die ↓ Variante an.
/* ====================================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 140.0.1 | (128.13.0 esr) Gesamtfassung Stand: 31.07.2025 (bereinigt)
?? Basis: Code vom 08.01.2025 + Ergänzungen
?? Hinweis: about:config
- toolkit.legacyUserProfileCustomizations.stylesheets` ? true
- devtools.chrome.enabled` ? true
===================================================================== */
/* ===========================================================
? Anleitung: Div. Mails zus. als Tabs öffnen
Ordnerbaum > Posteingang je Mail-Kto. Anzahl: Div. ? > anklicken
= Nachrichtenliste > Strg + A + Enter
Bestätigungs-Fenster div. Nachrichten bestätigen ? OK
Tabs erscheinen oben > Senkrecht-Dreieck (rechts) >
Überhangliste mit Scrolli (Scrollbar-color: #CC6699 #666699) erscheint.
=========================================================== */
/* Die verschiedenen Leisten farblich anpassen. */
#unifiedToolbar,
#tabs-toolbar {
background-image: none !important;
background-color: #666699 !important;
}
#toolbar-menubar {
background-color: #9FA2D5 !important;
}
.icons-beside-text {
min-height: 32px !important;
max-height: 32px !important;
}
/* ====================================================
??? ? 1. Variante – TEST: Tabs scrollbar & kompakt ???
==================================================== */
tab {
min-width: 100px !important; /* Tabbreite verringert */
height: 30px !important; /* Tabhöhe kompakter */
margin-right: 2px !important; /* Abstand zwischen Tabs */
}
tabs {
overflow-x: auto !important; /* horizontales Scrollen */
scroll-behavior: smooth !important;
display: flex !important; /* Flexbox aktivieren */
}
tabpanels {
padding: 0 !important; /* Abstand zu Inhalt minimieren */
}
/* =================================================
???? Ende 1. Variante – Tabs scrollbar & kompakt ???
================================================= */
/* =====================================================
? 2. Variante – Tabs scrollbar & kompakt (kompakt-Stil)
===================================================== */
tab {
min-width: 100px !important;
height: 30px !important;
margin-right: 2px !important;
}
tab {
.tab-background {
background: none !important;
background-color: #DBA2CC !important;
}
}
tab[selected="true"] {
.tab-background {
background-color: #BA78AB !important;
}
}
.tab-text {
font-family: Arial Black !important;
font-size: 16px !important;
color: #000 !important;
}
.tab-line {
display: none !important;
}
tabs {
overflow-x: auto !important;
scroll-behavior: smooth !important;
display: flex !important;
}
tabpanels {
padding: 0 !important;
}
/* ===========================================
? Ende 2. Variante – Tabs scrollbar & kompakt
=========================================== */
/* ??? Begriffstabelle für CSS-Tests (intern) ??? */
/*
? Bereich | Tabs, Baum, Menü
? Status | Funktioniert stabil & gewünscht
? Status | Noch fehlerhaft oder unsicher
? Testcode | Neuer Versuch, Beobachtung läuft
? Datum | Wann getestet / ergänzt
? Notizen | Verhalten, Besonderheiten
*/
/* -----------------------------------------------------------------------------------------------------------
🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout
----------------------------------------------------------------------------------------------------------- */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code haben --- */
/* ? Farbverläufe */
/* Farbverlauf TB-Kopfzeile im Nachrichtenbereich (z.?B. Betreff, Von, An) */
#msgHeaderView {
background: linear-gradient(#BA78AB, #666699) !important;
min-height: 72px !important;
/* ? Erklärung: Verleiht dem Nachrichtenkopf ein visuelles Highlight in TB */
}
/* Hintergrund-Farbverlauf links TB Ordnerbaum */
#folderPane {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ? Account Central – TB-Farbgestaltung der Startseite */
/* Gestaltung der Begrüßungsseite / Accountübersicht */
#accountCentral,
.account-central-section,
.account-central-section > h2,
.account-central-section > div,
#accountCentral > *:first-child {
background-color: #BA78AB !important;
color: #ffffff !important;
/* ? Erklärung: Einheitliche Farbgestaltung der Account-Übersicht */
}
/* Tagesplan */
#agenda {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* -------------------------------------------------------------------------------------------------------------------
? Abschnitt 2/6 – Schriftgrößen, Composer (Verfassen)-Fenster, Nachrichtenliste & Ordnerbaum
------------------------------------------------------------------------------------------------------------------- */
/* =========================`=================
? Ordnerbaum-Konten: Schriftart, - Größe & -Höhe
Schrift in Ordnernamen (Posteingang, Gesendet etc.)
============================================ */
#folderPaneHeaderBar {
border-bottom: 1px solid #D4D4D8 !important;
padding: 3px 6px !important;
}
#folderPaneHeaderBar,
#today-pane-panel > .sidebar-header {
appearance: none !important;
background-color: #9FA2D5 !important;
}
#today-pane-panel > .sidebar-header {
height: 1.4em !important;
min-height: 31px !important;
}
.sidebar-panel-scroll {
@media not (prefers-contrast) {
&::before, &::after {
height: 0 !important;
}
}
}
/* Höhe der einzelnen Ordnerzeilen */
#folderTree li > .container {
height: 10px !important; /* ?? Ursprüngliche Zeilenhöhe – wird durch folgende Regel überschrieben */
/* ? Erklärung: Verringert die Zeilenhöhe, damit mehr Ordner auf einmal sichtbar sind */
}
/* ?? Geändert: Höhe auf sinnvolle 24px angepasst (10px ist zu wenig für die Darstellung) */
#folderTree li > .container {
height: 24px !important; /* ?? geändert: von 10 auf 24px Schrifthöhe angepasst */
/* ? Erklärung: Optimierte Zeilenhöhe für gute Lesbarkeit der Ordner */
}
/* =========================================================
? Nachrichten-Eingabefeld oder Kopfzeile - (Compose-Fenster)
Betreffzeile im Composer-Fenster (neue Nachricht)
========================================================= */
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
#msgSubject {
font-size: 21px !important;
font-weight: bold !important;
font-family: Arial Black !important;
/* ? Erklärung: Der Betreff wird prominent und deutlich dargestellt */
}
}
/* ====================================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
==================================================== */
#threadPaneHeaderBar {
background-color: #9FA2D5 !important;
}
#threadTree {
font-size: 30px !important;
font-family: Arial Black !important;
background-color: #9FA2D5 !important;
/* ? Erklärung: Große Schrift in der Mail-Liste sorgt für bessere Lesbarkeit */
}
/* ?? Geändert: Zeilenhöhe ebenfalls auf 24px angepasst */
#threadTree > treechildren::-moz-tree-row {
font-family: Arial Black !important;
height: 24px !important; /* ?? geändert: Höhe von 10 auf 24px korrigiert für Darstellung */
/* ? Erklärung: Kompakte Ansicht innerhalb der Mail-Liste mit besserem Platz für Inhalte */
}
/* ?? Deaktiviert – Funktioniert nicht: `fill` wirkt nicht auf Tree-Icons in TB */
#threadTree treechildren::-moz-tree-image(unread) {
fill: #990000 !important;
/* ?? deaktiviert – siehe Hinweis: keine Wirkung unter aktuellen TB-Versionen */
}
/* ? Hinzugefügt: funktionierender SVG-Punkt für ungelesene Nachrichten */
#threadTree treechildren::-moz-tree-image(unread) {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23990000'/></svg>") !important;
/* ? Erklärung: Roter Punkt erscheint zuverlässig bei ungelesener Mail */
}
/* Kopfleiste der ThreadPane */
th[is="tree-view-table-header-cell"] > div > button,
thead[is="tree-view-table-header"] > tr > [is="tree-view-table-column-picker"] {
background: none !important;
background-color: #DBA2CC !important;
color: black !important;
}
/* =============================================
? HG-Farbe für Server-Zeile in Konten (optional)
============================================= */
/* ? Hebt die Hauptkonto-Zeile im Ordnerbaum farblich hervor */
/* #folderTree treechildren::-moz-tree-cell-text(isServer-true) */
li[data-server-type="imap"] > .container {
margin-top: 2px !important;
}
li[data-server-type="imap"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
li[title="Lokale Ordner"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
/* ----------------------------------------------------------------------------------------------
? Abschnitt 3/6 – Scrollbars, Nachrichtenvorschau, Toolbars & Menüleisten
----------------------------------------------------------------------------------------------- */
/* ===================================================
?? Scrollbars (Scrollbar-Stil im gesamten Thunderbird)
=================================================== */
scrollbar {
-moz-appearance: none !important;
background-color: #BCA5D4 !important;
width: 16px !important;
/* ? Erklärung: Einheitlicher Look für Scrollbars – helle violette Farbe */
}
scrollbar thumb {
background-color: #673A95 !important;
border-radius: 6px !important;
/* ? Erklärung: Dunkler Scrollbalken mit abgerundeten Ecken für eleganten Look */
}
/* ===========================================
? Vorschau-Fenster (Nachrichtenvorschau unten)
=========================================== */
#messagepane {
font-size: 22px !important;
font-family: Arial Black !important;
background-color: #F1E5FF !important;
/* ? Erklärung: Vorschau leserlich mit großer Schrift & hellem Hintergrund */
}
/* ============================================
? Toolbars: Button-Schrift und Hintergrundfarbe
============================================ */
/* #header-view-toolbar {
background: none !important;
}
#messageHeader #header-view-toolbox {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#messageHeader #expandedfromRow {
margin-top: -12px !important;
}
#messageHeader[compact="compact"] #header-view-toolbox {
padding-top: 0 !important;
padding-bottom: 10px !important;
margin-top: -6px !important;
}
#messageHeader[compact="compact"] #expandedfromRow {
margin-top: 26px !important;
} */
#messageHeader #header-view-toolbar {
min-height: 1.4em !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
#unifiedToolbarContent > li > div > button,
li.extension-action > div > button {
font-family: Arial Black !important;
color: black !important;
background-color: #C8A2C8 !important;
border-radius: 4px !important;
margin-bottom: 1px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton {
font-size: 18px !important;
font-family: Arial Black !important;
color: black !important;
background-color: #C8A2C8 !important;
border-radius: 4px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton.message-header-view-button,
toolbarbutton.message-header-view-button > toolbarbutton {
font-size: 14px !important;
}
/* =============================
? Menüleisten: Schrift und Farbe
============================= */
menubar {
padding-left: 3px !important;
}
menubar > menu {
font-size: 16px !important;
font-family: Arial Black !important;
border-radius: 5px !important;
border: 1px solid #D2B9D3 !important;
background-color: #D2B9D3 !important;
color: #000000 !important;
padding-top: 0 !important;
padding-bottom: 1px !important;
margin-top: 2px !important;
margin-right: 3px !important;
margin-bottom: 2px !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
menubar > menu:hover {
border: 1px solid #967996 !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
/* ----------------------------------------------------------------------------------------------
? Abschnitt 4/6 – Tooltip-Stil, Fensterrahmen & Statusleiste
---------------------------------------------------------------------------------------------- */
/* ============================================================
? Tooltip-Stil (z. B. wenn man mit der Maus über Buttons fährt)
============================================================ */
tooltip {
font-size: 16px !important;
font-family: Arial Black !important;
color: #000000 !important;
background-color: #F2DFFF !important;
border: 1px solid #673A95 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Tooltips werden gut lesbar und visuell angenehm dargestellt */
}
/* ====================================
? Rahmen um das Hauptfenster (optional)
Kann das Gesamtlayout visuell begrenzen
==================================== */
/* #messengerWindow {
border: 5px solid #C0A0D0 !important;
border-radius: 10px !important;
? Erklärung: Verleiht dem Hauptfenster einen dekorativen Rahmen
} */
/* =====================================================
? Statusleiste unten (ganz unten im Thunderbird-Fenster)
===================================================== */
statusbar {
font-size: 15px !important;
font-family: Arial Black !important;
background-color: #EADCF2 !important;
color: #000000 !important;
border-top: 2px solid #BCA5D4 !important;
/* ? Erklärung: Klarer Kontrast zur Statusleiste mit eleganter Farbgebung */
}
/* -----------------------------------------------------------------------------------------------
? Abschnitt 5/6 – Kalenderansicht, Adressbuch & Suchleiste
------------------------------------------------------------------------------------------------ */
/* ===================================================
? Kalender: Tagesansicht, Wochenansicht, Monatsansicht
=================================================== */
.calendar-day-view, .calendar-week-view, .calendar-month-view {
font-size: 18px !important;
font-family: Arial Black !important;
background-color: #F7F0FF !important;
color: black !important;
/* ? Erklärung: Einheitliche Optik im Kalender mit gut lesbarer Schrift */
}
/* =====================================
??? Adressbuch: Listenansicht & Kontakte
===================================== */
#abResultsTree {
font-size: 20px !important;
font-family: Arial Black !important;
background-color: #EFE0F8 !important;
color: black !important;
/* ? Erklärung: Kontaktliste mit großer, kontrastreicher Schrift */
}
#abResultsBox {
border: 2px solid #BCA5D4 !important;
border-radius: 8px !important;
/* ? Erklärung: Visuelle Rahmung des Adressbuch-Bereichs */
}
/* =========================================
? Suchleiste (oberhalb der Nachrichtenliste)
========================================= */
#searchInput {
font-size: 18px !important;
font-family: Arial Black !important;
background-color: #F0DDF9 !important;
color: black !important;
border: 1px solid #673A95 !important;
border-radius: 4px !important;
/* ? Erklärung: Suchfeld wird deutlich sichtbar und optisch eingebettet */
}
/* ---------------------------------------------------------------------------------------------------------
? Abschnitt 6/6 – Systemfarben, E-Mail-Buttons & Spezialelemente
--------------------------------------------------------------------------------------------------------- */
/*
==============================================
? Systemfarben überschreiben (z.B. Dialoge, Rahmen)
==============================================
*/
:root {
--system-color-background: #F9F0FF !important;
--system-color-text: #000000 !important;
--system-color-accent: #A175D1 !important;
/* ? Erklärung: Einheitliche Farbpalette für Thunderbird-Systemelemente */
}
/* ===========================================================
? Buttons innerhalb von E-Mails (Antworten, Weiterleiten etc.)
=========================================================== */
.mail-action-button {
font-size: 17px !important;
font-family: Arial Black !important;
background-color: #D3A3E1 !important;
color: black !important;
border-radius: 5px !important;
padding: 6px 12px !important;
/* ? Erklärung: Klare und visuell hervorgehobene Buttons für Mailaktionen */
}
/* =========================================================
? Anhangsbereich (Attachment Pane bei empfangener Nachricht)
========================================================= */
.attachmentList {
font-size: 16px !important;
font-family: Arial Black !important;
background-color: #F0E3FF !important;
border: 1px solid #BCA5D4 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Anhangsliste übersichtlich und optisch eingebettet */
}
/* ============================================
? Ladeindikator / Fortschrittsbalken (optional)
============================================ */
progress {
background-color: #E0CCE8 !important;
}
progress::-moz-progress-bar {
background-color: #673A95 !important;
/* ? Erklärung: Ladeleisten im Design integriert – harmonisch in der Farbpalette */
}
/* ------------------------------------------
Abschnitte: 1 bis 6 Ende !!!
--------------------------------------------- */
Alles anzeigen
Hallo Neddy,
teste bitte die ↓ Version.
/* ====================================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 140.0.1 | (128.13.0 esr) Gesamtfassung Stand: 31.07.2025 (bereinigt)
?? Basis: Code vom 08.01.2025 + Ergänzungen
?? Hinweis: about:config
- toolkit.legacyUserProfileCustomizations.stylesheets` ? true
- devtools.chrome.enabled` ? true
===================================================================== */
/* ===========================================================
? Anleitung: Div. Mails zus. als Tabs öffnen
Ordnerbaum > Posteingang je Mail-Kto. Anzahl: Div. ? > anklicken
= Nachrichtenliste > Strg + A + Enter
Bestätigungs-Fenster div. Nachrichten bestätigen ? OK
Tabs erscheinen oben > Senkrecht-Dreieck (rechts) >
Überhangliste mit Scrolli (Scrollbar-color: #CC6699 #666699) erscheint.
=========================================================== */
/* Die verschiedenen Leisten farblich anpassen. */
#unifiedToolbar,
#tabs-toolbar {
background-image: none !important;
background-color: #666699 !important;
}
#toolbar-menubar {
background-color: #9FA2D5 !important;
}
.icons-beside-text {
min-height: 32px !important;
max-height: 32px !important;
}
/* ===============================================
??? ? 1. Variante – TEST: Tabs scrollbar & kompakt ???
=============================================== */
tab {
min-width: 100px !important; /* Tabbreite verringert */
height: 30px !important; /* Tabhöhe kompakter */
margin-right: 2px !important; /* Abstand zwischen Tabs */
}
tabs {
overflow-x: auto !important; /* horizontales Scrollen */
scroll-behavior: smooth !important;
display: flex !important; /* Flexbox aktivieren */
}
tabpanels {
padding: 0 !important; /* Abstand zu Inhalt minimieren */
}
/* ===========================================
???? Ende 1. Variante – Tabs scrollbar & kompakt ???
======================================?====== */
/* ============================================
? 2. Variante – Tabs scrollbar & kompakt (kompakt-Stil)
============================================== */
tab {
min-width: 100px !important;
height: 30px !important;
margin-right: 2px !important;
}
tab {
.tab-background {
background: none !important;
background-color: #DBA2CC !important;
}
}
tab[selected="true"] {
.tab-background {
background-color: #BA78AB !important;
}
}
.tab-line {
display: none !important;
}
tabs {
overflow-x: auto !important;
scroll-behavior: smooth !important;
display: flex !important;
}
tabpanels {
padding: 0 !important;
}
/* ===========================================
? Ende 2. Variante – Tabs scrollbar & kompakt
=========================================== */
/* ??? Begriffstabelle für CSS-Tests (intern) ??? */
/*
? Bereich | Tabs, Baum, Menü
? Status | Funktioniert stabil & gewünscht
? Status | Noch fehlerhaft oder unsicher
? Testcode | Neuer Versuch, Beobachtung läuft
? Datum | Wann getestet / ergänzt
? Notizen | Verhalten, Besonderheiten
*/
/* -----------------------------------------------------------------------------------------------------------
🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout
---------------------------------------------------------------------------------------------- ---------------- */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code haben --- */
/* ? Farbverläufe */
/* Farbverlauf TB-Kopfzeile im Nachrichtenbereich (z.?B. Betreff, Von, An) */
#msgHeaderView {
background: linear-gradient(#BA78AB, #666699) !important;
min-height: 72px !important;
/* ? Erklärung: Verleiht dem Nachrichtenkopf ein visuelles Highlight in TB */
}
/* Hintergrund-Farbverlauf links TB Ordnerbaum */
#folderPane {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ? Account Central – TB-Farbgestaltung der Startseite */
/* Gestaltung der Begrüßungsseite / Accountübersicht */
#accountCentral,
.account-central-section,
.account-central-section > h2,
.account-central-section > div,
#accountCentral > *:first-child {
background-color: #BA78AB !important;
color: #ffffff !important;
/* ? Erklärung: Einheitliche Farbgestaltung der Account-Übersicht */
}
/* Tagesplan */
#agenda {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------
? Abschnitt 2/6 – Schriftgrößen, Composer (Verfassen)-Fenster, Nachrichtenliste & Ordnerbaum
------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* =========================`=================
? Ordnerbaum-Konten: Schriftart, - Größe & -Höhe
Schrift in Ordnernamen (Posteingang, Gesendet etc.)
============================================ */
/* Höhe der einzelnen Ordnerzeilen */
#folderTree li > .container {
height: 10px !important; /* ?? Ursprüngliche Zeilenhöhe – wird durch folgende Regel überschrieben */
/* ? Erklärung: Verringert die Zeilenhöhe, damit mehr Ordner auf einmal sichtbar sind */
}
/* ?? Geändert: Höhe auf sinnvolle 24px angepasst (10px ist zu wenig für die Darstellung) */
#folderTree li > .container {
height: 24px !important; /* ?? geändert: von 10 auf 24px Schrifthöhe angepasst */
/* ? Erklärung: Optimierte Zeilenhöhe für gute Lesbarkeit der Ordner */
}
/*
===================================================
? Nachrichten-Eingabefeld oder Kopfzeile - (Compose-Fenster)
Betreffzeile im Composer-Fenster (neue Nachricht)
===================================================
*/
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
#msgSubject {
font-size: 21px !important;
font-weight: bold !important;
font-family: Arial Black !important;
/* ? Erklärung: Der Betreff wird prominent und deutlich dargestellt */
}
}
/*
============================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
============================================
*/
#threadTree {
font-size: 30px !important;
font-family: Arial Black !important;
background-color: #9FA2D5 !important;
/* ? Erklärung: Große Schrift in der Mail-Liste sorgt für bessere Lesbarkeit */
}
/* ?? Geändert: Zeilenhöhe ebenfalls auf 24px angepasst */
#threadTree > treechildren::-moz-tree-row {
font-family: Arial Black !important;
height: 24px !important; /* ?? geändert: Höhe von 10 auf 24px korrigiert für Darstellung */
/* ? Erklärung: Kompakte Ansicht innerhalb der Mail-Liste mit besserem Platz für Inhalte */
}
/* ?? Deaktiviert – Funktioniert nicht: `fill` wirkt nicht auf Tree-Icons in TB */
#threadTree treechildren::-moz-tree-image(unread) {
fill: #990000 !important;
/* ?? deaktiviert – siehe Hinweis: keine Wirkung unter aktuellen TB-Versionen */
}
/* ? Hinzugefügt: funktionierender SVG-Punkt für ungelesene Nachrichten */
#threadTree treechildren::-moz-tree-image(unread) {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23990000'/></svg>") !important;
/* ? Erklärung: Roter Punkt erscheint zuverlässig bei ungelesener Mail */
}
/* =============================================
? HG-Farbe für Server-Zeile in Konten (optional)
============================================= */
/* ? Hebt die Hauptkonto-Zeile im Ordnerbaum farblich hervor */
/* #folderTree treechildren::-moz-tree-cell-text(isServer-true) */
li[data-server-type="imap"] > .container {
margin-top: 2px !important;
}
li[data-server-type="imap"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
/* ----------------------------------------------------------------------------------------------
? Abschnitt 3/6 – Scrollbars, Nachrichtenvorschau, Toolbars & Menüleisten
----------------------------------------------------------------------------------------------- */
/* ===================================================
?? Scrollbars (Scrollbar-Stil im gesamten Thunderbird)
=================================================== */
scrollbar {
-moz-appearance: none !important;
background-color: #BCA5D4 !important;
width: 16px !important;
/* ? Erklärung: Einheitlicher Look für Scrollbars – helle violette Farbe */
}
scrollbar thumb {
background-color: #673A95 !important;
border-radius: 6px !important;
/* ? Erklärung: Dunkler Scrollbalken mit abgerundeten Ecken für eleganten Look */
}
/* ===========================================
? Vorschau-Fenster (Nachrichtenvorschau unten)
=========================================== */
#messagepane {
font-size: 22px !important;
font-family: Arial Black !important;
background-color: #F1E5FF !important;
/* ? Erklärung: Vorschau leserlich mit großer Schrift & hellem Hintergrund */
}
/* ============================================
? Toolbars: Button-Schrift und Hintergrundfarbe
============================================ */
/* #header-view-toolbar {
background: none !important;
}
#messageHeader #header-view-toolbox {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#messageHeader #expandedfromRow {
margin-top: -12px !important;
}
#messageHeader[compact="compact"] #header-view-toolbox {
padding-top: 0 !important;
padding-bottom: 10px !important;
margin-top: -6px !important;
}
#messageHeader[compact="compact"] #expandedfromRow {
margin-top: 26px !important;
} */
#messageHeader #header-view-toolbar {
min-height: 1.4em !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
li.extension-action > div > button {
font-family: Arial Black !important;
color: black !important;
background-color: #C8A2C8 !important;
border-radius: 4px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton {
font-size: 18px !important;
font-family: Arial Black !important;
color: black !important;
background-color: #C8A2C8 !important;
border-radius: 4px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton.message-header-view-button,
toolbarbutton.message-header-view-button > toolbarbutton {
font-size: 14px !important;
}
/* =============================
? Menüleisten: Schrift und Farbe
============================= */
menubar {
padding-left: 3px !important;
}
menubar > menu {
font-size: 16px !important;
font-family: Arial Black !important;
border-radius: 5px !important;
background-color: #D2B9D3 !important;
color: #000000 !important;
padding-top: 0 !important;
padding-bottom: 1px !important;
margin-top: 2px !important;
margin-right: 3px !important;
margin-bottom: 2px !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
/* ----------------------------------------------------------------------------------------------
? Abschnitt 4/6 – Tooltip-Stil, Fensterrahmen & Statusleiste
---------------------------------------------------------------------------------------------- */
/* ============================================================
? Tooltip-Stil (z. B. wenn man mit der Maus über Buttons fährt)
============================================================ */
tooltip {
font-size: 16px !important;
font-family: Arial Black !important;
color: #000000 !important;
background-color: #F2DFFF !important;
border: 1px solid #673A95 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Tooltips werden gut lesbar und visuell angenehm dargestellt */
}
/* ====================================
? Rahmen um das Hauptfenster (optional)
Kann das Gesamtlayout visuell begrenzen
==================================== */
/* #messengerWindow {
border: 5px solid #C0A0D0 !important;
border-radius: 10px !important;
? Erklärung: Verleiht dem Hauptfenster einen dekorativen Rahmen
} */
/* =====================================================
? Statusleiste unten (ganz unten im Thunderbird-Fenster)
===================================================== */
statusbar {
font-size: 15px !important;
font-family: Arial Black !important;
background-color: #EADCF2 !important;
color: #000000 !important;
border-top: 2px solid #BCA5D4 !important;
/* ? Erklärung: Klarer Kontrast zur Statusleiste mit eleganter Farbgebung */
}
/* -----------------------------------------------------------------------------------------------
? Abschnitt 5/6 – Kalenderansicht, Adressbuch & Suchleiste
------------------------------------------------------------------------------------------------ */
/* ==============================================
? Kalender: Tagesansicht, Wochenansicht, Monatsansicht
================================================ */
.calendar-day-view, .calendar-week-view, .calendar-month-view {
font-size: 18px !important;
font-family: Arial Black !important;
background-color: #F7F0FF !important;
color: black !important;
/* ? Erklärung: Einheitliche Optik im Kalender mit gut lesbarer Schrift */
}
/* =====================================
??? Adressbuch: Listenansicht & Kontakte
===================================== */
#abResultsTree {
font-size: 20px !important;
font-family: Arial Black !important;
background-color: #EFE0F8 !important;
color: black !important;
/* ? Erklärung: Kontaktliste mit großer, kontrastreicher Schrift */
}
#abResultsBox {
border: 2px solid #BCA5D4 !important;
border-radius: 8px !important;
/* ? Erklärung: Visuelle Rahmung des Adressbuch-Bereichs */
}
/* =========================================
? Suchleiste (oberhalb der Nachrichtenliste)
========================================= */
#searchInput {
font-size: 18px !important;
font-family: Arial Black !important;
background-color: #F0DDF9 !important;
color: black !important;
border: 1px solid #673A95 !important;
border-radius: 4px !important;
/* ? Erklärung: Suchfeld wird deutlich sichtbar und optisch eingebettet */
}
/* ---------------------------------------------------------------------------------------------------------
? Abschnitt 6/6 – Systemfarben, E-Mail-Buttons & Spezialelemente
------------------------------------------------------------------------------------------------------------ */
/* ================================================
? Systemfarben überschreiben (z.B. Dialoge, Rahmen)
================================================ */
:root {
--system-color-background: #F9F0FF !important;
--system-color-text: #000000 !important;
--system-color-accent: #A175D1 !important;
/* ? Erklärung: Einheitliche Farbpalette für Thunderbird-Systemelemente */
}
/* ===========================================================
? Buttons innerhalb von E-Mails (Antworten, Weiterleiten etc.)
=========================================================== */
.mail-action-button {
font-size: 17px !important;
font-family: Arial Black !important;
background-color: #D3A3E1 !important;
color: black !important;
border-radius: 5px !important;
padding: 6px 12px !important;
/* ? Erklärung: Klare und visuell hervorgehobene Buttons für Mailaktionen */
}
/* =========================================================
? Anhangsbereich (Attachment Pane bei empfangener Nachricht)
========================================================= */
.attachmentList {
font-size: 16px !important;
font-family: Arial Black !important;
background-color: #F0E3FF !important;
border: 1px solid #BCA5D4 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Anhangsliste übersichtlich und optisch eingebettet */
}
/* ============================================
? Ladeindikator / Fortschrittsbalken (optional)
============================================ */
progress {
background-color: #E0CCE8 !important;
}
progress::-moz-progress-bar {
background-color: #673A95 !important;
/* ? Erklärung: Ladeleisten im Design integriert – harmonisch in der Farbpalette */
}
/* ------------------------------------------
Abschnitte: 1 bis 6 Ende !!!
--------------------------------------------- */
Alles anzeigen
Hallo Neddy,
hier mal ein erster Versuch, ist aber noch nicht wirklich fertig, schau bitte mal, was passt und was nicht.
/* ====================================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 140.0.1 | (128.13.0 esr) Gesamtfassung Stand: 31.07.2025 (bereinigt)
?? Basis: Code vom 08.01.2025 + Ergänzungen
?? Hinweis: about:config
- toolkit.legacyUserProfileCustomizations.stylesheets` ? true
- devtools.chrome.enabled` ? true
===================================================================== */
/* ===========================================================
? Anleitung: Div. Mails zus. als Tabs öffnen
Ordnerbaum > Posteingang je Mail-Kto. Anzahl: Div. ? > anklicken
= Nachrichtenliste > Strg + A + Enter
Bestätigungs-Fenster div. Nachrichten bestätigen ? OK
Tabs erscheinen oben > Senkrecht-Dreieck (rechts) >
Überhangliste mit Scrolli (Scrollbar-color: #CC6699 #666699) erscheint.
=========================================================== */
/* Die verschiedenen Leisten farblich anpassen. */
#unifiedToolbar,
#tabs-toolbar {
background-image: none !important;
background-color: #666699 !important;
}
#toolbar-menubar {
background-color: #9FA2D5 !important;
}
.icons-beside-text {
min-height: 32px !important;
max-height: 32px !important;
}
/* ===============================================
??? ? 1. Variante – TEST: Tabs scrollbar & kompakt ???
=============================================== */
tab {
min-width: 100px !important; /* Tabbreite verringert */
height: 30px !important; /* Tabhöhe kompakter */
margin-right: 2px !important; /* Abstand zwischen Tabs */
}
tabs {
overflow-x: auto !important; /* horizontales Scrollen */
scroll-behavior: smooth !important;
display: flex !important; /* Flexbox aktivieren */
}
tabpanels {
padding: 0 !important; /* Abstand zu Inhalt minimieren */
}
/* ====================================================
???? ? Ende 1. Variante – Tabs scrollbar & kompakt ????
==================================================== */
/* ====================================================
? 2. Variante – Tabs scrollbar & kompakt (kompaktstil)
==================================================== */
tab {
min-width: 100px !important;
height: 30px !important;
margin-right: 2px !important;
}
tab {
.tab-background {
background: none !important;
background-color: #DBA2CC !important;
}
}
tab[selected="true"] {
.tab-background {
background-color: #BA78AB !important;
}
}
.tab-line {
display: none !important;
}
tabs {
overflow-x: auto !important;
scroll-behavior: smooth !important;
display: flex !important;
}
tabpanels {
padding: 0 !important;
}
/* ===========================================
? Ende 2. Variante – Tabs scrollbar & kompakt
=========================================== */
/* ??? ? Begriffstabelle für CSS-Tests (intern) ??? */
/*
? Bereich | Tabs, Baum, Menü
? Status | Funktioniert stabil & gewünscht
? Status | Noch fehlerhaft oder unsicher
? Testcode | Neuer Versuch, Beobachtung läuft
? Datum | Wann getestet / ergänzt
? Notizen | Verhalten, Besonderheiten
*/
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code haben --- */
/* ? Farbverläufe */
/* Farbverlauf TB-Kopfzeile im Nachrichtenbereich (z.?B. Betreff, Von, An) */
#msgHeaderView {
background: linear-gradient(#BA78AB, #666699) !important;
min-height: 72px !important;
/* ? Erklärung: Verleiht dem Nachrichtenkopf ein visuelles Highlight in TB */
}
/* Hintergrund-Farbverlauf links TB Ordnerbaum */
#folderPane {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ? Account Central – TB-Farbgestaltung der Startseite */
/* Gestaltung der Begrüßungsseite / Accountübersicht */
#accountCentral,
.account-central-section,
.account-central-section > h2,
.account-central-section > div,
#accountCentral > *:first-child {
background-color: #BA78AB !important;
color: #ffffff !important;
/* ? Erklärung: Einheitliche Farbgestaltung der Account-Übersicht */
}
/* Tagesplan */
#agenda {
appearance: none !important;
background: linear-gradient(#BA78AB, #666699) !important;
/* ? Erklärung: Gestaltung des linken Bereichs für Ordnerübersicht */
}
/* ---------------------------------------------------------------------------------------------------------------
? Abschnitt 2/6 – Schriftgrößen, Composer (Verfassen)-Fenster, Nachrichtenliste & Ordnerbaum
---------------------------------------------------------------------------------------------------------------- */
/* ===================================
? Ordnerbaum-Konten: Schriftart, -Größe & -Höhe
Schrift in Ordnernamen (Posteingang, Gesendet etc.)
===================================== */
/* Höhe der einzelnen Ordnerzeilen */
#folderTree li > .container {
height: 10px !important; /* ?? Ursprüngliche Zeilenhöhe – wird durch folgende Regel überschrieben */
/* ? Erklärung: Verringert die Zeilenhöhe, damit mehr Ordner auf einmal sichtbar sind */
}
/* ?? Geändert: Höhe auf sinnvolle 24px angepasst (10px ist zu wenig für die Darstellung) */
#folderTree li > .container {
height: 24px !important; /* ?? geändert: von 10 auf 24px Schrifthöhe angepasst */
/* ? Erklärung: Optimierte Zeilenhöhe für gute Lesbarkeit der Ordner */
}
/*
===================================================
? Nachrichten-Eingabefeld oder Kopfzeile - (Compose-Fenster)
Betreffzeile im Composer-Fenster (neue Nachricht)
===================================================
*/
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml") {
#msgSubject {
font-size: 21px !important;
font-weight: bold !important;
font-family: Arial Black !important;
/* ? Erklärung: Der Betreff wird prominent und deutlich dargestellt */
}
}
/*
============================================
? Nachrichtenliste / ThreadPane
Farb-Alternative: #BA78AB, #DBA2CC
Liste aller E-Mails in einem Ordner (z.?B. Posteingang)
============================================
*/
#threadTree {
font-size: 30px !important;
font-family: Arial Black !important;
background-color: #9FA2D5 !important;
/* ? Erklärung: Große Schrift in der Mail-Liste sorgt für bessere Lesbarkeit */
}
/* ?? Geändert: Zeilenhöhe ebenfalls auf 24px angepasst */
#threadTree > treechildren::-moz-tree-row {
font-family: Arial Black !important;
height: 24px !important; /* ?? geändert: Höhe von 10 auf 24px korrigiert für Darstellung */
/* ? Erklärung: Kompakte Ansicht innerhalb der Mail-Liste mit besserem Platz für Inhalte */
}
/* ?? Deaktiviert – Funktioniert nicht: `fill` wirkt nicht auf Tree-Icons in TB */
#threadTree treechildren::-moz-tree-image(unread) {
fill: #990000 !important;
/* ?? deaktiviert – siehe Hinweis: keine Wirkung unter aktuellen TB-Versionen */
}
/* ? Hinzugefügt: funktionierender SVG-Punkt für ungelesene Nachrichten */
#threadTree treechildren::-moz-tree-image(unread) {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><circle cx='4' cy='4' r='4' fill='%23990000'/></svg>") !important;
/* ? Erklärung: Roter Punkt erscheint zuverlässig bei ungelesener Mail */
}
/*
========================================
? HG-Farbe für Server-Zeile in Konten (optional)
========================================
/* ? Hebt die Hauptkonto-Zeile im Ordnerbaum farblich hervor */
/* #folderTree treechildren::-moz-tree-cell-text(isServer-true) */
li[data-server-type="imap"] > .container {
margin-top: 2px !important;
}
li[data-server-type="imap"] > .container {
background-color: #DBA2CC !important;
color: black !important;
}
/* ----------------------------------------------------------------------
? Abschnitt 3/6 – Scrollbars, Nachrichtenvorschau, Toolbars & Menüleisten
---------------------------------------------------------------------- */
/* ===================================================
?? Scrollbars (Scrollbar-Stil im gesamten Thunderbird)
=================================================== */
scrollbar {
-moz-appearance: none !important;
background-color: #BCA5D4 !important;
width: 16px !important;
/* ? Erklärung: Einheitlicher Look für Scrollbars – helle violette Farbe */
}
scrollbar thumb {
background-color: #673A95 !important;
border-radius: 6px !important;
/* ? Erklärung: Dunkler Scrollbalken mit abgerundeten Ecken für eleganten Look */
}
/* ===========================================
? Vorschau-Fenster (Nachrichtenvorschau unten)
=========================================== */
#messagepane {
font-size: 22px !important;
font-family: Arial Black !important;
background-color: #F1E5FF !important;
/* ? Erklärung: Vorschau leserlich mit großer Schrift & hellem Hintergrund */
}
/* ============================================
? Toolbars: Button-Schrift und Hintergrundfarbe
============================================ */
#header-view-toolbar {
background: none !important;
}
#messageHeader #header-view-toolbox {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#messageHeader #expandedfromRow {
margin-top: -12px !important;
}
#messageHeader[compact="compact"] #header-view-toolbox {
padding-top: 0 !important;
padding-bottom: 10px !important;
margin-top: -6px !important;
}
#messageHeader[compact="compact"] #expandedfromRow {
margin-top: 26px !important;
}
li.extension-action > div > button {
font-family: Arial Black !important;
color: black !important;
background-color: #C8A2C8 !important;
border-radius: 4px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
toolbarbutton {
font-size: 18px !important;
font-family: Arial Black !important;
color: black !important;
background-color: #C8A2C8 !important;
border-radius: 4px !important;
/* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}
/*
===========================
? Menüleisten: Schrift und Farbe
===========================
*/
menubar {
font-size: 18px !important;
font-family: Arial Black !important;
color: #000000 !important;
background-color: #D2B9D3 !important;
/* ? Erklärung: Menüleiste mit klarer Struktur und gut lesbarer Schrift */
}
/* ---------------------------------------------------------------------------------------------------------
? Abschnitt 4/6 – Tooltip-Stil, Fensterrahmen & Statusleiste
--------------------------------------------------------------------------------------------------------- */
/* ============================================================
? Tooltip-Stil (z.?B. wenn man mit der Maus über Buttons fährt)
============================================================ */
tooltip {
font-size: 16px !important;
font-family: Arial Black !important;
color: #000000 !important;
background-color: #F2DFFF !important;
border: 1px solid #673A95 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Tooltips werden gut lesbar und visuell angenehm dargestellt */
}
/* ====================================
? Rahmen um das Hauptfenster (optional)
Kann das Gesamtlayout visuell begrenzen
==================================== */
/* #messengerWindow {
border: 5px solid #C0A0D0 !important;
border-radius: 10px !important;
? Erklärung: Verleiht dem Hauptfenster einen dekorativen Rahmen
} */
/* =====================================================
? Statusleiste unten (ganz unten im Thunderbird-Fenster)
===================================================== */
statusbar {
font-size: 15px !important;
font-family: Arial Black !important;
background-color: #EADCF2 !important;
color: #000000 !important;
border-top: 2px solid #BCA5D4 !important;
/* ? Erklärung: Klarer Kontrast zur Statusleiste mit eleganter Farbgebung */
}
/* -------------------------------------------------------
? Abschnitt 5/6 – Kalenderansicht, Adressbuch & Suchleiste
------------------------------------------------------- */
/* ===================================================
? Kalender: Tagesansicht, Wochenansicht, Monatsansicht
=================================================== */
.calendar-day-view, .calendar-week-view, .calendar-month-view {
font-size: 18px !important;
font-family: Arial Black !important;
background-color: #F7F0FF !important;
color: black !important;
/* ? Erklärung: Einheitliche Optik im Kalender mit gut lesbarer Schrift */
}
/* ====================================
?? Adressbuch: Listenansicht & Kontakte
==================================== */
#abResultsTree {
font-size: 20px !important;
font-family: Arial Black !important;
background-color: #EFE0F8 !important;
color: black !important;
/* ? Erklärung: Kontaktliste mit großer, kontrastreicher Schrift */
}
#abResultsBox {
border: 2px solid #BCA5D4 !important;
border-radius: 8px !important;
/* ? Erklärung: Visuelle Rahmung des Adressbuch-Bereichs */
}
/*
=====================================
? Suchleiste (oberhalb der Nachrichtenliste)
=====================================
*/
#searchInput {
font-size: 18px !important;
font-family: Arial Black !important;
background-color: #F0DDF9 !important;
color: black !important;
border: 1px solid #673A95 !important;
border-radius: 4px !important;
/* ? Erklärung: Suchfeld wird deutlich sichtbar und optisch eingebettet */
}
/*
--------------------------------------------------------------------------------------------------------------------
? Abschnitt 6/6 – Systemfarben, E-Mail-Buttons & Spezialelemente
---------------------------------------------------------------------------------------------------------------------
*/
/*
==============================================
? Systemfarben überschreiben (z.?B. Dialoge, Rahmen)
==============================================
*/
:root {
--system-color-background: #F9F0FF !important;
--system-color-text: #000000 !important;
--system-color-accent: #A175D1 !important;
/* ? Erklärung: Einheitliche Farbpalette für Thunderbird-Systemelemente */
}
/*
===================================================
? Buttons innerhalb von E-Mails (Antworten, Weiterleiten etc.)
===================================================
*/
.mail-action-button {
font-size: 17px !important;
font-family: Arial Black !important;
background-color: #D3A3E1 !important;
color: black !important;
border-radius: 5px !important;
padding: 6px 12px !important;
/* ? Erklärung: Klare und visuell hervorgehobene Buttons für Mailaktionen */
}
/*
======================================================
? Anhangsbereich (Attachment Pane bei empfangener Nachricht)
======================================================
*/
.attachmentList {
font-size: 16px !important;
font-family: Arial Black !important;
background-color: #F0E3FF !important;
border: 1px solid #BCA5D4 !important;
border-radius: 5px !important;
padding: 4px !important;
/* ? Erklärung: Anhangsliste übersichtlich und optisch eingebettet */
}
/*
======================================
? Ladeindikator / Fortschrittsbalken (optional)
======================================
*/
progress {
background-color: #E0CCE8 !important;
}
progress::-moz-progress-bar {
background-color: #673A95 !important;
/* ? Erklärung: Ladeleisten im Design integriert – harmonisch in der Farbpalette */
}
/* --------------------------------------------
Abschnitte: 1 bis 6 Ende !!!
----------------------------------------------- */
Alles anzeigen
Ist der Schalter eingeschaltet wird der farbige Text angezeigt
Ist er ausgeschaltet wird der Text nur weiß auf schwarz angezeigt
Ich sehe das als Bug an, welchen Grund sollte es geben, das der Text nicht auch im dunklen Modus farbig angezeigt wird.
Neddy,
jetzt fehlt uns noch ein anonymisierter Screenshot, wir müssen den Ist-Zustand sehen, dann können wir uns ans Werk machen.
Wieder was gelernt.
Das tue ich selbst im höheren Alter jeden Tag ein wenig, das hält die Rübe frisch.
Versteh nur den Unterschied zwischen "ungelesene" und "neue ungelesene" nicht. Sind doch beide "ungelesen", oder?
Der Unterschied besteht darin, das die eine Mail nur ungelesen ist ist die andere gerade neu eingetroffen ist und logischerweise natürlich auch ungelesen ist, wenn man also [data-properties~="new"] zusätzlich verwendet, kann man ungelesen, sprich [data-properties~="unread"], und neu und ungelesen, sprich [data-properties~="unread"][data-properties~="new"], eindeutig unterscheiden.
Scheint sich zu überschneiden.
Teste bitte mal die ↓ Variante.
#threadTree[rows="thread-card"] tbody [data-properties~="unread"] {
background-color: orange !important;
color: black !important;
}
#threadTree[rows="thread-card"] tbody [data-properties~="unread"]:hover {
color: black !important;
}
P.S.: Diese Schnipsel ist allerdings nur für ungelesene Mails, für neue ungelesene Mails ist das Schnipsel nicht zuständig.
Ist mir unbekannt. Bitte ein Bild zeigen.
Oder meist du vielleicht den Pfeil > links im Nachrichten-Header Bereich? Dieser Pfeil erscheint nur, wenn man die Erweiterung CompactHeaders installiert hat.
Die Wahrscheinlichkeit ist ausgesprochen hoch, das die Erweiterung CompactHeaders gemeint ist, denn ohne entsprechende Erweiterung gibt es dort keinen Twisty.