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