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

dharkness21

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.

Neddy

Hallo,

1. kann die Menü-Leiste insgesamt verkleinert werden?
Wäre es möglich, die Hintergrundfarbe der Tableiste auch in Blaugrau, wie die Menüleiste, zu ändern? Ich glaube, sie ist im HG Beige.
3. In der Nachrichten liste, ist oben ein ICON für ungelesene Nachrichten.
Dort befindet sich ein schwacher, grüner Punkt. Könnte man ihn auf dunkelrot setzen, wenn Nachrichten neu hereinkommen?
4. Die Scrollbalken konnte ich einstellen, aber leider nicht unten für die Nachrichten.

Der Kopfbereich ist jetzt richtig.
Die weiße Farbe für - VON -Betreff - AN ist auf Weiß umgestellt.
Auch die 6 Button (Blaugrau)
Nur konnte man beim Zuklappen vor dem VON keine 2. Zeile mit Mailadresse und Betreff gebildet werden.

Wie im Firefox war mir es nicht möglich, die Überhangliste mit meinem Farbverlauf zu versehen.

Grüße Neddy

dharkness21

Hallo Neddy,

bitte teste 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-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

Neddy

Zitat von dharkness21

bitte teste die ↓ Version.

Der Farbverlauf ist in der Tab-Überhangliste da.
Dafür sind meine Scrollbalken-Doppelfarben weg wieder weg.
In der Kopfleiste ist leider die weiße Farbe - VON - Betreff - An auch wieder weg

Vielleicht wäre es gut gewesen, dass du meine aktuelle CSS als Grundlage oder Vorlage überprüfen könntest, und darauf weiter aufbauen. Vielleicht wären dann meine positiven Umsetzungen mit deinen jetzigen
kombinierbar. Dazu müsste ich wissen, welche von deinen funktioniert haben

Grüße Neddy

dharkness21

Zitat von Neddy

dass du meine aktuelle CSS als Grundlage oder Vorlage überprüfen könntest

Natürlich, dann stelle sie wieder hier ein.

Neddy

Welcher Code ist es im Beitrag 28, der dazu führte, dass die Tab-Überhangliste den Farbverlauf erhalten hat.
Ebenso muss ich vorher wissen, welcher Code es ist, der den Hintergrund der Tableiste mit einem dunkleren Blaugrauton versehen ist.
Diese beiden Code funktionieren und möchte sie gleich in meiner korrigierten Liste mit übernehmen. Habe lange danach gesucht.
Aber ich konnte sie leider nicht finden, weil sie keinen Titel oder Namen haben. Es dauert ein wenig, bis ich mit allem durch bin. Code richtig zu interpretieren, ist nicht einfach für mich.
Grüße Neddy

dharkness21

Zitat von Neddy

Welcher Code ist es im Beitrag 28, der dazu führte, dass die Tab-Überhangliste den Farbverlauf erhalten hat.

CSS

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

Zitat von Neddy

Ebenso muss ich vorher wissen, welcher Code es ist, der den Hintergrund der Tableiste mit einem dunkleren Blaugrauton versehen ist.

CSS

/* Die verschiedenen Leisten farblich anpassen. */
#unifiedToolbar,
#tabs-toolbar {
  background-image: none !important;
  background-color: #666699 !important;
}

#toolbar-menubar {
  background-color: #9FA2D5 !important;
}

Neddy

CSS

Im Bild ist zuerkennen, dass unten der Scrollbalken keine Farbe hat.
Ungelesene Nachrichten haben leider nur einen schwachen grünen Punkt. Könnte man ihn auch dunkelrot machen und damit sehbarer?
Diese beiden Punkte wären noch offen.
Die aktuelle Code-Liste ist auf den neuesten Stand und hat nach meiner Einschätzung gut funktioniert. Sollten später Rückfragen kommen, bitte ich darum, diese als Vorlage zu berücksichtigen. Auch würde ich gerne wissen, ob die CSS doppelte Einträge hat und in den Abschnitten richtig zugeordnet ist.

Neddy

CSS

/* -----------------------------------------------------------------------------------------------------------
🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout
-------------------------------------------------------------------------------------------------------------- */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code  haben --- */

/* Abschnitt 1 – Hauptleisten & Tabzeile (Farben & Popup-Stil) */

/* Hintergrundfarbe für Unified Toolbar & Tableiste */
#unifiedToolbar,
#tabs-toolbar {
  background-image: none !important;
  background-color: #666699 !important;
}

/* Tab-Überhangliste (rechter Pfeil) mit Farbverlauf */
/* Achtung: Färbt auch andere Popups */
.menupopup-arrowscrollbox {
  background: linear-gradient(#BA78AB, #666699) !important;
}

/* Schriftgröße im Überhang-Menü */
#alltabs-popup > menuitem > .menu-text {
  font-size: 14px !important;
}
/* Abschnitt 1 – Ende */



/* Gesamter Nachrichtenkopf mit Farbverlauf und Layout */
#msgHeaderView {
  background: linear-gradient(#BA78AB, #666699) !important;
  min-height: 90px !important;
  padding: 12px 20px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 16px !important;
  align-items: center !important;
}

/* ✳️ Feldnamen: „Von“, „Betreff“, „An“ – weiß & fett */
#msgHeaderView label,
#msgHeaderView .headerName,
#msgHeaderView .headerValue label {
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* 🖤 Feldwerte: Namen, Betrefftext etc. – schwarz & fett */
#msgHeaderView .headerValue {
  color: black !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  text-align: left !important;
}

/* ⚪️ Buttons im Nachrichtenkopf – weiße Schrift, Standard-Hintergrund */
#msgHeaderView toolbarbutton {
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  background-color: transparent !important; /* Kein eigener Hintergrund */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 🖌️ Hover-Effekt für Buttons – optional */
#msgHeaderView toolbarbutton:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
}



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



/* -------------------------------------------------------------------------------------------------------------------
? 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 (#DBA2CC) 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: #8888C1 !important;
  color: black !important;
}
li[title="Lokale Ordner"] > .container {
  background-color: #8888C1 !important;
  color: black !important;
}

/* Abschnitt 2 – Schriftarten & Textgestaltung */

/* 📑 Schriftgröße der Tableiste (Tabs) verkleinern */
tab {
  font-size: 11px !important;
}

/* 🗂️ Schriftgröße der Menüleiste (Datei, Bearbeiten, Ansicht ...) verkleinern */
menubar > menu {
  font-size: 11px !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 */
}

/* Scrollbar (Neu - Bildlaufleisten 2 Farben, #CC6699, #666699) */
/* Farbe 1: Thumb (Daumen) - Farbe 2: Hintergrund*/
:root {
scrollbar-color: #CC6699 #666699 !important;
}

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

/* 🎯 Buttons im Nachrichtenkopf – Neu - blaugrauer Hintergrund + weiße Schrift */
#msgHeaderView toolbarbutton {
  background-color: #8888C1 !important; /* Blaugrau */
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* 🖱️ Optional: Neu - Hover-Effekt für Buttons */
#msgHeaderView toolbarbutton:hover {
  background-color: #666699 !important; /* dunkleres Blaugrau beim Hover */
  cursor: pointer !important;
}



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

/* Neu - Abschnitt 3 – Rahmen & Abstände */
/* Menüleiste verkleinern */
menubar {
  font-size: 12px !important;
  padding: 2px 6px !important;
  min-height: 20px !important;
}

/* Tableiste verkleinern */
tab {
  font-size: 12px !important;
  padding: 2px 8px !important;
  min-height: 24px !important;
}

/* Tabbar kompakter */
#tabbar-toolbar {
  min-height: 28px !important;
  padding: 0px !important;
}
/* Abschnitt 3 – Ende */

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

ist das CSS wirklich vollständig? Hier werden z.B. die Tabs nicht umgestaltet.

Zitat von Neddy

Im Bild ist zuerkennen, dass unten der Scrollbalken keine Farbe hat.

Funktioniert hier merkwürdigerweise ohne Probleme.

Neddy

Zitat von dharkness21

Zitat von dharkness21

Ist das CSS wirklich vollständig? Hier werden z.B. die Tabs nicht umgestaltet.

Das weiß ich nicht, kannst du mir sagen, was genau gemeint ist. Wie viel sind es, oder kannst du Bilder oder die code senden?

Zitat von dharkness21

Funktioniert hier merkwürdigerweise ohne Probleme

1. Welche Codes sind unvollständig? Wenn sie bei dir funktionieren, dann muss ich schauen, was bei mir blockieren könnte. Zurzeit wird unten im Nachrichtenbereich der Scrollbalken noch nicht farbig angezeigt. Die dunkelroten Punkte für die ungelesenen Nachrichten sind auch nicht vorhanden.

2. In TB wirkt alles zu groß.
Früher gab es dafür das "Theme Font & Size Changer" Man konnte dadurch insgesamt alles kleiner stellen. So auch oben die Menü- und auch die Tableiste und hatte eine bessere Übersicht.

Grüße Neddy

dharkness21

Zitat von Neddy

1. Welche Codes sind unvollständig?

Der Code für die Tabbar und Tabs fehlte z.B..

So ↓ sehen die Scrollbars bei mir aus.

dharkness21

Das ↓ ist das aktuelle CSS.

CSS

/* -----------------------------------------------------------------------------------------------------------
🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout
-------------------------------------------------------------------------------------------------------------- */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code  haben --- */

/* Abschnitt 1 – Hauptleisten & Tabzeile (Farben & Popup-Stil) */

/* Hintergrundfarbe für Unified Toolbar & Tableiste */
#unifiedToolbar,
#tabs-toolbar {
  background-image: none !important;
  background-color: #666699 !important;
}

unified-toolbar[class="icons-beside-text"] {
  border: 0 !important;
}

/* Tab-Überhangliste (rechter Pfeil) mit Farbverlauf */
/* Achtung: Färbt auch andere Popups */
.menupopup-arrowscrollbox {
  background: linear-gradient(#BA78AB, #666699) !important;
}

/* Schriftgröße im Überhang-Menü */
#alltabs-popup > menuitem > .menu-text {
  font-size: 14px !important;
}
/* Abschnitt 1 – Ende */



/* Gesamter Nachrichtenkopf mit Farbverlauf und Layout */
#msgHeaderView {
  background: linear-gradient(#BA78AB, #666699) !important;
  /* min-height: 90px !important;
  padding: 12px 20px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 16px !important;
  align-items: center !important; */
}

/* ✳️ Feldnamen: „Von“, „Betreff“, „An“ – weiß & fett */
#msgHeaderView label,
#msgHeaderView .headerName,
#msgHeaderView .headerValue label {
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* 🖤 Feldwerte: Namen, Betrefftext etc. – schwarz & fett */
#msgHeaderView .headerValue {
  color: black !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  text-align: left !important;
}

/* ⚪️ Buttons im Nachrichtenkopf – weiße Schrift, Standard-Hintergrund */
#msgHeaderView toolbarbutton {
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  background-color: transparent !important; /* Kein eigener Hintergrund */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 🖌️ Hover-Effekt für Buttons – optional */
#msgHeaderView toolbarbutton:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
}

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

/* -------------------------------------------------------------------------------------------------------------------
? 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;
  border: 1px solid #C8A2C8 !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;
}
input[type="search"][aria-label="Nachrichten filtern"] {
  background-color: #C8A2C8 !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;
}
#threadPaneHeaderBar > 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 */
}
#threadPaneHeaderBar > div > button:hover {
  border: 1px solid #967996 !important;
  /* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}

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

/* 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 (#DBA2CC) 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[data-server-type="none"] > .container {
  background-color: #DBA2CC !important;
  color: black !important;
}

/* Abschnitt 2 – Schriftarten & Textgestaltung */

/* 📑 Schriftgröße der Tableiste (Tabs) verkleinern */
tab {
  font-size: 11px !important;
}

/* 🗂️ Schriftgröße der Menüleiste (Datei, Bearbeiten, Ansicht ...) verkleinern */
menubar > menu {
  font-size: 11px !important;
}

tab {
  min-width: 100px !important;
  height: 26px !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: 13px !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;
}

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

/* Scrollbar (Neu - Bildlaufleisten 2 Farben, #CC6699, #666699) */
/* Farbe 1: Thumb (Daumen) - Farbe 2: Hintergrund*/
:root {
scrollbar-color: #CC6699 #666699 !important;
}

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

/* 🎯 Buttons im Nachrichtenkopf – Neu - blaugrauer Hintergrund + weiße Schrift */
#msgHeaderView toolbarbutton {
  background-color: #8888C1 !important; /* Blaugrau */
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* 🖱️ Optional: Neu - Hover-Effekt für Buttons */
#msgHeaderView toolbarbutton:hover {
  background-color: #666699 !important; /* dunkleres Blaugrau beim Hover */
  cursor: pointer !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
========================== */
#toolbar-menubar {
  background-color: #9FA2D5 !important;
}
menubar {
  padding: 0 0 0 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 */
}

/* Neu - Abschnitt 3 – Rahmen & Abstände */
/* Menüleiste verkleinern */
menubar {
  font-size: 12px !important;
  padding: 2px 6px !important;
  min-height: 20px !important;
}

/* Tableiste verkleinern */
tab {
  font-size: 12px !important;
  padding: 1px 8px 2px 8px !important;
  min-height: 26px !important;
}

/* Tabbar kompakter */
#tabs-toolbar {
  padding: 3px 3px 0 3px !important;
}
#tabbar-toolbar {
  min-height: 28px !important;
  padding: 0 !important;
}
/* Abschnitt 3 – Ende */

/* Tagesplan */
#mini-day-box,
#agenda-toolbar,
#agenda {
  appearance: none !important;
  background: linear-gradient(#BA78AB, #666699) !important;
  /* ? Erklärung: Gestaltung des Tagesplan. */
}

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

Der Code für die Tabbar und Tabs fehlte z.B..

Kannst du mir die Codes genauer benennen, damit ich sie korrigieren kann? Oder ist es in der aktuellen CSS - im Beitrag: 38 schon erledigt?

Die CSS habe ich eben getestet. Besagte Srollleiste ist bei mir nicht farbig. Alle anderen sind Ok.
Ungelesene Mails haben zwar keinen dunkelroten Punkt, aber dafür einen blauen Unterstrich. Wenn du mir den Code sagts, kann ich die Farbe ändern in dunkelrot. Also kann ich davon ausgehen, dass die dafür vorgesehenen schwachen grünen Punkte nicht veränderbar sind?

Grüße Neddy

dharkness21

Zitat von Neddy

Kannst du mir die Codes genauer benennen, damit ich sie korrigieren kann? Oder ist es in der aktuellen CSS - im Beitrag: 38 schon erledigt?

Ist in der aktuellen CSS enthalten.

Zitat von Neddy

Besagte Srollleiste ist bei mir nicht farbig. Alle anderen sind Ok.

Fahre mal mit dem Mauszeiger über besagte Scrollbar, vielleicht wird sie nur nicht korrekt farbig aktualisiert.

Zitat von Neddy

Ungelesene Mails haben zwar keinen dunkelroten Punkt

Den habe ich IIRC vergessen, schaue ich mir an.

Neddy

Zitat von dharkness21

Fahre mal mit dem Mauszeiger über besagte Scrollbar, vielleicht wird sie nur nicht korrekt farbig aktualisiert.

Habe ich gemacht - keine Veränderung. Da steckt der Wurm drin.
Ich weiß auch nicht, was ich noch machen könnte.
Ich hatte mal erwähnt, dass oben die Menüleiste (Datei, Bearbeiten usw,...), die darunterliegende Tableiste ebenso insgesamt zu groß ausfallen. Wurde man es mit dem folgenden Code verkleinern können, oder sind mehrere Codes beteiligt?

img[data-l10n-id="threadpane-message-new"] {
width: 16px !important;
height: 16px !important;
fill: #F20 !important;
stroke: #900 !important;
}

Früher gab es ein tolles Tool dafür - "Theme Font & Size Changer". Dieses deckte alle Bereiche ab.

Grüße Neddy

dharkness21

Zitat von Neddy

Ich hatte mal erwähnt, dass oben die Menüleiste (Datei, Bearbeiten usw,...), die darunterliegende Tableiste ebenso insgesamt zu groß ausfallen. Wurde man es mit dem folgenden Code verkleinern können, oder sind mehrere Codes beteiligt?

Teste bitte die Version, ich habe das mal alle font-size:-Einträge auskommentiert und die 3 Leisten oben noch verkleinert.

CSS

/* 🧩 Abschnitt 1/6 – Kommentarstruktur, Tabs & allgemeines Layout */
/* --- Hier beginnen die CSS ohne obige Notizen, da sie keine Relevanz für die Code  haben --- */

/* Abschnitt 1 – Hauptleisten & Tabzeile (Farben & Popup-Stil) */

/* Hintergrundfarbe für Unified Toolbar & Tableiste */
#unifiedToolbar,
#tabs-toolbar {
  background-image: none !important;
  background-color: #666699 !important;
}

unified-toolbar[class="icons-beside-text"] {
  border: 0 !important;
}

/* Tab-Überhangliste (rechter Pfeil) mit Farbverlauf */
/* Achtung: Färbt auch andere Popups */
.menupopup-arrowscrollbox {
  background: linear-gradient(#BA78AB, #666699) !important;
}

/* Schriftgröße im Überhang-Menü */
#alltabs-popup > menuitem > .menu-text {
  /* font-size: 14px !important; */
}
/* Abschnitt 1 – Ende */

/* Gesamter Nachrichtenkopf mit Farbverlauf und Layout */
#msgHeaderView {
  background: linear-gradient(#BA78AB, #666699) !important;
}

/* ✳️ Feldnamen: „Von“, „Betreff“, „An“ – weiß & fett */
#msgHeaderView label,
#msgHeaderView .headerName,
#msgHeaderView .headerValue label {
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* 🖤 Feldwerte: Namen, Betrefftext etc. – schwarz & fett */
#msgHeaderView .headerValue {
  color: black !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  text-align: left !important;
}

/* ⚪️ Buttons im Nachrichtenkopf – weiße Schrift, Standard-Hintergrund */
#msgHeaderView toolbarbutton {
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  background-color: transparent !important; /* Kein eigener Hintergrund */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 🖌️ Hover-Effekt für Buttons – optional */
#msgHeaderView toolbarbutton:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
}

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

/*  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;
  border: 1px solid #C8A2C8 !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;
}
input[type="search"][aria-label="Nachrichten filtern"] {
  background-color: #C8A2C8 !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;
}
#threadPaneHeaderBar > 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 */
}
#threadPaneHeaderBar > div > button:hover {
  border: 1px solid #967996 !important;
  /* ? Erklärung: Klare Buttons mit auffälliger Hintergrundfarbe */
}

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

/* 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 (#DBA2CC) hervor */
/* #folderTree treechildren::-moz-tree-cell-text(isServer-true) */
#folderPane {
  font-family: Arial Black !important;
  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[data-server-type="none"] > .container {
  background-color: #DBA2CC !important;
  color: black !important;
}

/* Abschnitt 2 – Schriftarten & Textgestaltung */

/* 📑 Schriftgröße der Tableiste (Tabs) verkleinern */
tab {
  /* font-size: 11px !important; */
}

/* 🗂️ Schriftgröße der Menüleiste (Datei, Bearbeiten, Ansicht ...) verkleinern */
menubar > menu {
  /* font-size: 11px !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 */
}

/* Scrollbar (Neu - Bildlaufleisten 2 Farben, #CC6699, #666699) */
/* Farbe 1: Thumb (Daumen) - Farbe 2: Hintergrund*/
:root {
scrollbar-color: #CC6699 #666699 !important;
}

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

/* 🎯 Buttons im Nachrichtenkopf – Neu - blaugrauer Hintergrund + weiße Schrift */
#msgHeaderView toolbarbutton {
  background-color: #8888C1 !important; /* Blaugrau */
  color: white !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: bold !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* 🖱️ Optional: Neu - Hover-Effekt für Buttons */
#msgHeaderView toolbarbutton:hover {
  background-color: #666699 !important; /* dunkleres Blaugrau beim Hover */
  cursor: pointer !important;
}

#messageHeader #header-view-toolbar {
  min-height: 1.4em !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#unifiedToolbarContent {
  padding: 0 3px !important;
}

#unifiedToolbarContent > li > div > button,
li.extension-action > div > button {
  font-family: Arial Black !important;
  color: black !important;
  background-color: #C8A2C8 !important;
  margin-top: 1px !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
========================== */
/* Menüleiste verkleinern */
#toolbar-menubar {
  min-height: 26px !important;
  min-height: 26px !important;
  background-color: #9FA2D5 !important;
}
menubar {
  /* font-size: 12px !important; */
  padding: 0 0 0 3px !important;
  min-height: 26px !important;
  min-height: 26px !important;
}
menubar > menu {
  min-height: 24px !important;
  max-height: 24px !important;
  /* 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 */
}

#toolbar-menubar > toolbarbutton,
menubar > toolbarbutton {
  margin: 2px !important;
}
/* Neu - Abschnitt 3 – Rahmen & Abstände */

/* Tableiste verkleinern */
tab {
  /* font-size: 12px !important; */
  padding: 1px 8px 2px 8px !important;
  min-height: 26px !important;
}

/* Tabbar kompakter */
#tabs-toolbar {
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 3px 0 3px !important;
}
#tabbar-toolbar {
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 !important;
}

tab {
  min-width: 100px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  margin-top: 4px !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: 13px !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;
}
/* Abschnitt 3 – Ende */

/* Tagesplan */
#mini-day-box,
#agenda-toolbar,
#agenda {
  appearance: none !important;
  background: linear-gradient(#BA78AB, #666699) !important;
  /* ? Erklärung: Gestaltung des Tagesplan. */
}

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

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