Thunderbird 141 – userChrome.css: Farbverläufe, Ordnerbaum & Scrollbalken un vieles mehr nicht anpassbar.

dharkness21

Zitat von Neddy

Wäre es möglich, dass die 6 Kopfzeilen-Buttons auch dann sichtbar bleiben, wenn der VON-Pfeil zugeklappt ist? D. h., dass wir hier 2 Zeilen haben könnten.

Ich habe das Problem nicht, vielleicht haut da eine andere Erweiterung dazwischen, welche Erweiterungen hast Du also installiert?

dharkness21

Hallo Neddy,

teste bitte die ↓ Version.

CSS

/* ====================================================================
? 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

dharkness21

Hallo Neddy,

ich habe noch ein klein wenig gebastelt, schau Dir doch mal die ↓ Variante an.

CSS

/* ====================================================================
? 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

Neddy

Zitat von dharkness21

ich habe noch ein klein wenig gebastelt,

Ich habe in der neuen CSS-Code-Listen-Block oben folgendes geändert:
/* =====================================================
? Thunderbird Benutzeroberfläche – Benutzerdefiniertes Design
?? Version: TB 141 esr) Gesamtfassung Stand: 05.08.2025 20:03h (bereinigt)
?? Basis: Code vom 08.01.2025 + Umstellungen/Ergänzungen TB-Forum Beitrag: 23
?? Hinweis: about:config
- toolkit.legacyUserProfileCustomizations.stylesheets` ? true
- devtools.chrome.enabled` ? true
============================================== */
Was bedeuten die vielen Fragezeichen ??? - Sind es Fehler, oder habe ich die Antwort übersehen?
----------------------------------------------------------------------------------
Die Idee von dir, die Mail-Adressen links im Ordnerbaum einfarbig zu belassen, finde ich sehr gut. Ich habe dabei auch den Farbcode #8888C1 getestet, welcher auch sehr gut aussieht. Der Farbverlauf ist trotzdem geblieben.

Scrollbalken alle leider ohne die 2 Farben
-------------------------------------------------------
Aus TB-Forum Beitrag: 23 (267).png

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
5. Schriftgröße der 6 Button richtig.

Grüße Neddy

dharkness21

Zitat von Neddy

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.

Zitat von Neddy

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.

Zitat von Neddy

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.

Thunderbird 141 – userChrome.css: Farbverläufe, Ordnerbaum & Scrollbalken un vieles mehr nicht anpassbar.

Thunderbird 141.0 veröffentlicht

Thunderbird 140.1.1 ESR veröffentlicht

Thunderbird 128.13.0 ESR veröffentlicht