From a53e5932f1d19ad189056776979bc17a14d72d54 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 08:52:12 +0200 Subject: [PATCH 01/49] Fix Linux Wayland transparency and headerbar colors --- custom.css | 8 +++++- userChrome.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 69 insertions(+), 6 deletions(-) diff --git a/custom.css b/custom.css index 76a044d..fb33d63 100644 --- a/custom.css +++ b/custom.css @@ -1 +1,7 @@ -/* CUSTOM CSS - PLACE YOUR CUSTOM OVERRIDES BELOW */ \ No newline at end of file +/* CUSTOM CSS - PLACE YOUR CUSTOM OVERRIDES BELOW */ +/* + FluentBird Linux Solid Background Config: + - Window & Tabs background: #cde0ee + - Spaces Toolbar background: #cde0ee + - Messenger Body background: #f1f3f4 (opacity 1.0) +*/ \ No newline at end of file diff --git a/userChrome.css b/userChrome.css index 7e911af..b46024d 100644 --- a/userChrome.css +++ b/userChrome.css @@ -17,9 +17,16 @@ LAYOUT & WINDOW CHROME ===================================================== */ +:root, +body, +#messengerWindow { + background-color: #cde0ee !important; +} + /* Rounded top-left clip on main content area */ #messengerBody { - opacity: 90%; + opacity: 1 !important; + background-color: #f1f3f4 !important; border-top-left-radius: 12px !important; overflow: hidden !important; } @@ -58,13 +65,31 @@ /* ===================================================== - TAB BAR + HEADER, UNIFIED TOOLBAR & TAB BAR ===================================================== */ -#tabs-toolbar { - background-color: #fff0 !important; +:root:not([lwtheme]) #navigation-toolbox, +#navigation-toolbox, +#titlebar, +#titlebar > *, +unified-toolbar, +#unifiedToolbarContainer, +#unifiedToolbar, +#unifiedToolbarContent, +#toolbar-menubar, +#tabs-toolbar, +toolbar#tabs-toolbar, +#tabmail-tabs, +#tabmail-arrowscrollbox { + background-color: #cde0ee !important; background-image: none !important; + border: none !important; + border-bottom: none !important; + border-block-end: none !important; box-shadow: none !important; +} + +#tabs-toolbar { margin-bottom: 8px !important; } @@ -105,7 +130,7 @@ ===================================================== */ #spacesToolbar { - background-color: #fff0 !important; + background-color: #cde0ee !important; background-image: none !important; border: 0px !important; } @@ -1038,6 +1063,38 @@ global-search-bar { @media (prefers-color-scheme: dark) { + :root, + body, + #messengerWindow { + background-color: #202023 !important; + } + + :root:not([lwtheme]) #navigation-toolbox, + #navigation-toolbox, + #titlebar, + #titlebar > *, + unified-toolbar, + #unifiedToolbarContainer, + #unifiedToolbar, + #unifiedToolbarContent, + #toolbar-menubar, + #tabs-toolbar, + toolbar#tabs-toolbar, + #tabmail-tabs, + #tabmail-arrowscrollbox, + #spacesToolbar { + background-color: #202023 !important; + background-image: none !important; + border: none !important; + border-bottom: none !important; + border-block-end: none !important; + box-shadow: none !important; + } + + #messengerBody { + background-color: #1c1c1f !important; + } + /* Custom maximise icon — dark (Windows only) */ @media (-moz-platform: windows) { .titlebar-max { From 8458c57f3802dbee27240e1a3b41f7e6791861cb Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 10:16:39 +0200 Subject: [PATCH 02/49] Enhance headerbar and toolbox colors using CSS variables and lwtheme selectors --- userChrome.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/userChrome.css b/userChrome.css index b46024d..bea62fa 100644 --- a/userChrome.css +++ b/userChrome.css @@ -17,6 +17,13 @@ LAYOUT & WINDOW CHROME ===================================================== */ +:root { + --toolbox-background-color: #cde0ee !important; + --toolbar-background-color: #cde0ee !important; + --tabs-toolbar-background-color: #cde0ee !important; + --lwt-accent-color: #cde0ee !important; +} + :root, body, #messengerWindow { @@ -68,6 +75,8 @@ body, HEADER, UNIFIED TOOLBAR & TAB BAR ===================================================== */ +:root #navigation-toolbox, +:root[lwtheme] #navigation-toolbox, :root:not([lwtheme]) #navigation-toolbox, #navigation-toolbox, #titlebar, @@ -1063,12 +1072,21 @@ global-search-bar { @media (prefers-color-scheme: dark) { + :root { + --toolbox-background-color: #202023 !important; + --toolbar-background-color: #202023 !important; + --tabs-toolbar-background-color: #202023 !important; + --lwt-accent-color: #202023 !important; + } + :root, body, #messengerWindow { background-color: #202023 !important; } + :root #navigation-toolbox, + :root[lwtheme] #navigation-toolbox, :root:not([lwtheme]) #navigation-toolbox, #navigation-toolbox, #titlebar, From 4391e5f8d34ade283f96c4df50ffc1dadf11949c Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 22:47:53 +0200 Subject: [PATCH 03/49] Add Apple macOS Calendar theme styles for Thunderbird --- userChrome.css | 464 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 464 insertions(+) diff --git a/userChrome.css b/userChrome.css index bea62fa..8dccf2f 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1215,3 +1215,467 @@ global-search-bar { .card-layout:not([data-properties~="dummy"]) .card-container { min-height: 50px !important; } + +/* ===================================================== + APPLE / macOS CALENDAR THEME FOR THUNDERBIRD + ===================================================== */ + +/* Base Font & Calendar Layout */ +#calendarTabPanel, +#calendarContent, +calendar-minimonth, +calendar-month-view, +calendar-week-view, +calendar-day-view, +calendar-multiweek-view { + font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important; +} + +/* 1. Left Sidebar (calSidebar) */ +#calSidebar { + background-color: #f7f7f9 !important; + border-inline-end: 1px solid rgba(0, 0, 0, 0.08) !important; +} + +#calSidebar .sidebar-panel-header { + background-color: transparent !important; + border: none !important; + padding: 10px 14px 6px 14px !important; +} + +/* New Event button styled as Apple "+" pill / button */ +#sidePanelNewEvent { + background-color: #007aff !important; + color: #ffffff !important; + border-radius: 8px !important; + border: none !important; + font-weight: 600 !important; + box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3) !important; + transition: background-color 0.15s ease !important; +} +#sidePanelNewEvent:hover { + background-color: #0062cc !important; +} + +/* Calendar list styling */ +#calendar-list-pane { + background: transparent !important; +} + +#calendarListHeader { + font-size: 0.75rem !important; + font-weight: 700 !important; + text-transform: uppercase !important; + letter-spacing: 0.5px !important; + color: #8e8e93 !important; + padding: 8px 14px 4px 14px !important; +} + +#calendar-list > li { + border-radius: 8px !important; + padding: 5px 10px !important; + margin: 2px 8px !important; + font-size: 0.88rem !important; + font-weight: 500 !important; + color: #1d1d1f !important; + transition: background-color 0.15s ease !important; +} + +#calendar-list > li:hover { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +#calendar-list > li.selected { + background-color: rgba(0, 122, 255, 0.12) !important; +} + +/* Calendar Checkbox circles */ +#calendar-list > li input[type="checkbox"], +#calendar-list > li .checkbox-icon { + border-radius: 50% !important; +} + +/* 2. Mini-Month Calendar Picker (Apple style) */ +calendar-minimonth { + --mmMainBackground: transparent !important; + --mmMainBorderColor: transparent !important; + --mmDayTodayColor: #ffffff !important; + --mmDayTodayBackground: #ff3b30 !important; + --mmDayTodayBorderColor: transparent !important; + --mmDayBorderRadius: 50% !important; + --mmDaySelectedColor: #1d1d1f !important; + --mmDaySelectedBackground: rgba(0, 0, 0, 0.08) !important; + --mmDaySelectedBorderColor: transparent !important; + --mmDaySelectedTodayBackground: #ff3b30 !important; + --mmDaySelectedTodayBorderColor: transparent !important; + --mmHighlightBackground: #ff3b30 !important; + --mmHighlightColor: #ffffff !important; + padding: 8px !important; +} + +.minimonth-month-box { + font-size: 0.95rem !important; + font-weight: 700 !important; + color: #1d1d1f !important; + margin-bottom: 6px !important; +} + +/* 3. Top Navigation Header & Segmented View Switcher (#calendarViewHeader) */ +#calendarViewHeader { + background-color: #ffffff !important; + border-block-end: 1px solid rgba(0, 0, 0, 0.08) !important; + padding: 10px 18px !important; + min-height: 48px !important; +} + +/* Month / Interval Title (e.g. "April 2025") */ +#intervalDescription { + font-size: 1.35rem !important; + font-weight: 700 !important; + color: #1d1d1f !important; + letter-spacing: -0.3px !important; + margin-inline-start: 12px !important; +} + +/* Navigation buttons (< Today >) */ +#calendarControls .button-group { + display: inline-flex !important; + align-items: center !important; + gap: 4px !important; +} + +#previousViewButton, +#nextViewButton { + background-color: rgba(0, 0, 0, 0.04) !important; + border: 1px solid rgba(0, 0, 0, 0.08) !important; + border-radius: 50% !important; + width: 28px !important; + height: 28px !important; + min-width: 28px !important; + min-height: 28px !important; + padding: 0 !important; + cursor: pointer !important; + transition: background-color 0.15s ease !important; +} + +#previousViewButton:hover, +#nextViewButton:hover { + background-color: rgba(0, 0, 0, 0.09) !important; +} + +#todayViewButton { + background-color: #ffffff !important; + border: 1px solid rgba(0, 0, 0, 0.15) !important; + border-radius: 6px !important; + padding: 3px 12px !important; + font-size: 0.82rem !important; + font-weight: 600 !important; + color: #1d1d1f !important; + cursor: pointer !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; + transition: background-color 0.15s ease !important; +} + +#todayViewButton:hover { + background-color: rgba(0, 0, 0, 0.04) !important; +} + +/* macOS Segmented Control for Views (Day | Week | Multiweek | Month) */ +#viewToggle.calview-toggle { + background-color: rgba(0, 0, 0, 0.06) !important; + border-radius: 8px !important; + padding: 2px !important; + display: inline-flex !important; + border: none !important; +} + +.calview-toggle-item { + background-color: transparent !important; + border: none !important; + border-radius: 6px !important; + padding: 4px 14px !important; + font-size: 0.82rem !important; + font-weight: 500 !important; + color: #555558 !important; + cursor: pointer !important; + transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important; +} + +.calview-toggle-item:hover { + color: #1d1d1f !important; +} + +.calview-toggle-item[aria-selected="true"] { + background-color: #ffffff !important; + color: #1d1d1f !important; + font-weight: 600 !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08) !important; +} + +/* 4. Calendar Main Grid & Views (#view-box) */ +#view-box { + background-color: #ffffff !important; +} + +calendar-day-view, +calendar-week-view, +calendar-multiweek-view, +calendar-month-view { + background-color: #ffffff !important; + --viewBackground: #ffffff !important; + --viewBorderColor: rgba(0, 0, 0, 0.07) !important; +} + +/* Day column headers */ +.day-column-heading { + background-color: #ffffff !important; + border-block: 1px solid rgba(0, 0, 0, 0.07) !important; + border-inline-start: 1px solid rgba(0, 0, 0, 0.07) !important; + font-size: 0.85rem !important; + font-weight: 600 !important; + color: #8e8e93 !important; + padding: 6px 4px !important; +} + +/* Today column header (macOS Red accent) */ +.day-column-today .day-column-heading { + color: #ff3b30 !important; + font-weight: 700 !important; +} + +/* Time column on the left */ +.multiday-timebar { + background-color: #ffffff !important; + border-inline-end: 1px solid rgba(0, 0, 0, 0.07) !important; +} + +.multiday-timebar-time { + font-size: 0.78rem !important; + font-weight: 500 !important; + color: #8e8e93 !important; + padding-inline-end: 8px !important; +} + +/* Grid hour lines */ +.multiday-hour-box { + border-block-end: 1px solid rgba(0, 0, 0, 0.05) !important; +} + +/* Current Time Indicator (Red line & Dot) */ +.timeIndicator { + border-block-start: 2px solid #ff3b30 !important; + opacity: 1 !important; + z-index: 10 !important; +} + +.multiday-timebar-now-indicator { + background-color: #ff3b30 !important; + border: none !important; + border-radius: 50% !important; + inline-size: 8px !important; + block-size: 8px !important; + margin-block-start: -4px !important; + z-index: 11 !important; +} + +/* 5. Event Cards (Pastel Apple Calendar style) */ +calendar-event-box:not([hidden]) { + margin-inline: 2px !important; +} + +.calendar-color-box { + min-block-size: 18px !important; + border-radius: 6px !important; + /* Soft pastel background from calendar color */ + background-color: color-mix(in srgb, var(--item-backcolor) 18%, #ffffff) !important; + color: #1d1d1f !important; + /* Vibrant solid left accent bar */ + border-inline-start: 4px solid var(--item-backcolor) !important; + border-block: 1px solid color-mix(in srgb, var(--item-backcolor) 25%, transparent) !important; + border-inline-end: 1px solid color-mix(in srgb, var(--item-backcolor) 25%, transparent) !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; + padding: 2px 4px !important; + transition: transform 0.1s ease, box-shadow 0.1s ease !important; +} + +.calendar-color-box:hover { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; +} + +/* Selected Event Card */ +calendar-month-day-box-item[selected="true"].calendar-color-box, +calendar-event-box[selected="true"].calendar-color-box, +calendar-editable-item[selected="true"].calendar-color-box { + background-color: color-mix(in srgb, var(--item-backcolor) 28%, #ffffff) !important; + outline: 2px solid #007aff !important; + outline-offset: -1px !important; + box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important; +} + +/* Event Title & Details */ +.event-name-label { + font-weight: 600 !important; + font-size: 0.85rem !important; + color: #1d1d1f !important; +} + +.item-time-label { + font-weight: 500 !important; + font-size: 0.78rem !important; + color: color-mix(in srgb, var(--item-backcolor) 80%, #1d1d1f) !important; +} + +.location-desc { + font-size: 0.78rem !important; + color: #6e6e73 !important; +} + +/* All-Day Events in Week/Day View */ +.allday-events-list .calendar-color-box { + border-radius: 4px !important; + border: none !important; + border-inline-start: none !important; + background-color: var(--item-backcolor) !important; + color: #ffffff !important; + font-weight: 600 !important; + padding: 2px 6px !important; + margin-block: 1px !important; +} + +/* 6. Event Info / Summary Popover (macOS Info Card) */ +#calendar-summary-dialog, +#calendar-item-summary, +.calendar-invitation-panel-wrapper { + border-radius: 14px !important; + box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important; + background-color: #ffffff !important; + border: 1px solid rgba(0, 0, 0, 0.08) !important; +} + +#calendar-summary-dialog-custom-button-footer button, +.calendar-invitation-panel-response-buttons button { + border-radius: 8px !important; + padding: 5px 14px !important; + font-size: 0.85rem !important; + font-weight: 500 !important; + background-color: rgba(0, 0, 0, 0.06) !important; + border: none !important; + color: #1d1d1f !important; + cursor: pointer !important; + transition: background-color 0.15s ease !important; +} + +#calendar-summary-dialog-custom-button-footer button:hover, +.calendar-invitation-panel-response-buttons button:hover { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* 7. Dark Mode Overrides for Calendar */ +@media (prefers-color-scheme: dark) { + #calSidebar { + background-color: #1c1c1e !important; + border-inline-end: 1px solid rgba(255, 255, 255, 0.1) !important; + } + + #calendar-list > li { + color: #f5f5f7 !important; + } + + #calendar-list > li:hover { + background-color: rgba(255, 255, 255, 0.08) !important; + } + + calendar-minimonth { + --mmDaySelectedColor: #f5f5f7 !important; + --mmDaySelectedBackground: rgba(255, 255, 255, 0.15) !important; + } + + .minimonth-month-box { + color: #f5f5f7 !important; + } + + #calendarViewHeader, + #view-box, + calendar-day-view, + calendar-week-view, + calendar-multiweek-view, + calendar-month-view { + background-color: #1c1c1e !important; + --viewBackground: #1c1c1e !important; + --viewBorderColor: rgba(255, 255, 255, 0.1) !important; + } + + #calendarViewHeader { + border-block-end: 1px solid rgba(255, 255, 255, 0.1) !important; + } + + #intervalDescription { + color: #f5f5f7 !important; + } + + #viewToggle.calview-toggle { + background-color: rgba(255, 255, 255, 0.1) !important; + } + + .calview-toggle-item { + color: #a1a1a6 !important; + } + + .calview-toggle-item:hover { + color: #ffffff !important; + } + + .calview-toggle-item[aria-selected="true"] { + background-color: #2c2c2e !important; + color: #ffffff !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; + } + + #todayViewButton { + background-color: #2c2c2e !important; + border: 1px solid rgba(255, 255, 255, 0.15) !important; + color: #f5f5f7 !important; + } + + .day-column-heading, + .multiday-timebar { + background-color: #1c1c1e !important; + border-color: rgba(255, 255, 255, 0.08) !important; + } + + .multiday-hour-box { + border-block-end: 1px solid rgba(255, 255, 255, 0.06) !important; + } + + .calendar-color-box { + background-color: color-mix(in srgb, var(--item-backcolor) 25%, #2c2c2e) !important; + color: #f5f5f7 !important; + border-block: 1px solid color-mix(in srgb, var(--item-backcolor) 40%, transparent) !important; + border-inline-end: 1px solid color-mix(in srgb, var(--item-backcolor) 40%, transparent) !important; + } + + .event-name-label { + color: #ffffff !important; + } + + .item-time-label { + color: color-mix(in srgb, var(--item-backcolor) 60%, #ffffff) !important; + } + + .location-desc { + color: #a1a1a6 !important; + } + + #calendar-summary-dialog, + #calendar-item-summary, + .calendar-invitation-panel-wrapper { + background-color: #2c2c2e !important; + border-color: rgba(255, 255, 255, 0.12) !important; + } + + #calendar-summary-dialog-custom-button-footer button, + .calendar-invitation-panel-response-buttons button { + background-color: rgba(255, 255, 255, 0.1) !important; + color: #f5f5f7 !important; + } +} From cebd237e28d9d3b0a9d3595c9bc5a10345923ad9 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 22:48:00 +0200 Subject: [PATCH 04/49] Ignore fluent backup files --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ae701c4 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.fluent-backup From d3acb8452dfbaa752c6db51c158fbd4ad75b6790 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 22:55:59 +0200 Subject: [PATCH 05/49] Fix event summary dialog sizing, symmetry and background padding --- userChrome.css | 100 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 84 insertions(+), 16 deletions(-) diff --git a/userChrome.css b/userChrome.css index 8dccf2f..09150c6 100644 --- a/userChrome.css +++ b/userChrome.css @@ -30,11 +30,12 @@ body, background-color: #cde0ee !important; } -/* Rounded top-left clip on main content area */ +/* Rounded clip on main content area with background frame */ #messengerBody { opacity: 1 !important; background-color: #f1f3f4 !important; - border-top-left-radius: 12px !important; + border-radius: 12px !important; + margin: 0 8px 8px 0 !important; overflow: hidden !important; } @@ -1542,23 +1543,76 @@ calendar-editable-item[selected="true"].calendar-color-box { margin-block: 1px !important; } -/* 6. Event Info / Summary Popover (macOS Info Card) */ -#calendar-summary-dialog, -#calendar-item-summary, -.calendar-invitation-panel-wrapper { +/* 6. Event Info / Summary Dialog (macOS Info Card & Fixed Width) */ +#calendar-summary-dialog { + width: 620px !important; + max-width: 650px !important; + min-width: 540px !important; +} + +#calendar-summary-dialog body { + background-color: #cde0ee !important; + padding: 10px !important; + box-sizing: border-box !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; +} + +#calendar-summary-dialog dialog { + background-color: #ffffff !important; border-radius: 14px !important; - box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important; + border: 1px solid rgba(0, 0, 0, 0.1) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; + margin: 0 !important; + padding: 0 !important; +} + +#calendar-summary-dialog #summary-toolbox { + background-color: #f6f6f8 !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; + padding: 4px 8px !important; +} + +#calendar-summary-dialog #summary-toolbar { + background: transparent !important; + border: none !important; +} + +#calendar-summary-dialog #calendar-item-summary { background-color: #ffffff !important; - border: 1px solid rgba(0, 0, 0, 0.08) !important; + border: none !important; + box-shadow: none !important; + border-radius: 0 !important; + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; + padding: 14px 18px !important; +} + +#calendar-summary-dialog .calendar-summary-table { + width: 100% !important; + table-layout: fixed !important; +} + +#calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { + background-color: #f6f6f8 !important; + border-top: 1px solid rgba(0, 0, 0, 0.08) !important; + margin: 0 !important; + padding: 10px 16px !important; } #calendar-summary-dialog-custom-button-footer button, .calendar-invitation-panel-response-buttons button { border-radius: 8px !important; - padding: 5px 14px !important; + padding: 6px 16px !important; font-size: 0.85rem !important; font-weight: 500 !important; - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(0, 0, 0, 0.07) !important; border: none !important; color: #1d1d1f !important; cursor: pointer !important; @@ -1567,7 +1621,7 @@ calendar-editable-item[selected="true"].calendar-color-box { #calendar-summary-dialog-custom-button-footer button:hover, .calendar-invitation-panel-response-buttons button:hover { - background-color: rgba(0, 0, 0, 0.1) !important; + background-color: rgba(0, 0, 0, 0.12) !important; } /* 7. Dark Mode Overrides for Calendar */ @@ -1666,16 +1720,30 @@ calendar-editable-item[selected="true"].calendar-color-box { color: #a1a1a6 !important; } - #calendar-summary-dialog, - #calendar-item-summary, - .calendar-invitation-panel-wrapper { - background-color: #2c2c2e !important; + #calendar-summary-dialog body { + background-color: #202023 !important; + } + + #calendar-summary-dialog dialog { + background-color: #1c1c1e !important; border-color: rgba(255, 255, 255, 0.12) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; + } + + #calendar-summary-dialog #summary-toolbox, + #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { + background-color: #2c2c2e !important; + border-color: rgba(255, 255, 255, 0.1) !important; + } + + #calendar-summary-dialog #calendar-item-summary { + background-color: #1c1c1e !important; + color: #f5f5f7 !important; } #calendar-summary-dialog-custom-button-footer button, .calendar-invitation-panel-response-buttons button { - background-color: rgba(255, 255, 255, 0.1) !important; + background-color: rgba(255, 255, 255, 0.12) !important; color: #f5f5f7 !important; } } From c92a25baf2a4b022579316fd98807609677302cc Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 22:58:34 +0200 Subject: [PATCH 06/49] Revert intrusive dialog layout overrides causing table overlap --- userChrome.css | 93 ++++++++------------------------------------------ 1 file changed, 14 insertions(+), 79 deletions(-) diff --git a/userChrome.css b/userChrome.css index 09150c6..c51c48c 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1543,67 +1543,23 @@ calendar-editable-item[selected="true"].calendar-color-box { margin-block: 1px !important; } -/* 6. Event Info / Summary Dialog (macOS Info Card & Fixed Width) */ -#calendar-summary-dialog { - width: 620px !important; - max-width: 650px !important; - min-width: 540px !important; -} - -#calendar-summary-dialog body { - background-color: #cde0ee !important; - padding: 10px !important; - box-sizing: border-box !important; - display: flex !important; - flex-direction: column !important; - align-items: center !important; -} - -#calendar-summary-dialog dialog { - background-color: #ffffff !important; - border-radius: 14px !important; - border: 1px solid rgba(0, 0, 0, 0.1) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - overflow: hidden !important; - margin: 0 !important; - padding: 0 !important; -} - -#calendar-summary-dialog #summary-toolbox { - background-color: #f6f6f8 !important; - border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; - padding: 4px 8px !important; -} - -#calendar-summary-dialog #summary-toolbar { - background: transparent !important; - border: none !important; -} - -#calendar-summary-dialog #calendar-item-summary { - background-color: #ffffff !important; +/* 6. Event Info / Summary Dialog */ +#calendar-summary-dialog-custom-button-footer button, +.calendar-invitation-panel-response-buttons button { + border-radius: 8px !important; + padding: 5px 14px !important; + font-size: 0.85rem !important; + font-weight: 500 !important; + background-color: rgba(0, 0, 0, 0.06) !important; border: none !important; - box-shadow: none !important; - border-radius: 0 !important; - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - padding: 14px 18px !important; -} - -#calendar-summary-dialog .calendar-summary-table { - width: 100% !important; - table-layout: fixed !important; + color: #1d1d1f !important; + cursor: pointer !important; + transition: background-color 0.15s ease !important; } -#calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { - background-color: #f6f6f8 !important; - border-top: 1px solid rgba(0, 0, 0, 0.08) !important; - margin: 0 !important; - padding: 10px 16px !important; +#calendar-summary-dialog-custom-button-footer button:hover, +.calendar-invitation-panel-response-buttons button:hover { + background-color: rgba(0, 0, 0, 0.1) !important; } #calendar-summary-dialog-custom-button-footer button, @@ -1720,27 +1676,6 @@ calendar-editable-item[selected="true"].calendar-color-box { color: #a1a1a6 !important; } - #calendar-summary-dialog body { - background-color: #202023 !important; - } - - #calendar-summary-dialog dialog { - background-color: #1c1c1e !important; - border-color: rgba(255, 255, 255, 0.12) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; - } - - #calendar-summary-dialog #summary-toolbox, - #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { - background-color: #2c2c2e !important; - border-color: rgba(255, 255, 255, 0.1) !important; - } - - #calendar-summary-dialog #calendar-item-summary { - background-color: #1c1c1e !important; - color: #f5f5f7 !important; - } - #calendar-summary-dialog-custom-button-footer button, .calendar-invitation-panel-response-buttons button { background-color: rgba(255, 255, 255, 0.12) !important; From b2193c67a1e781285b54343813ff72c268ad90af Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:03:16 +0200 Subject: [PATCH 07/49] Eliminate horizontal scrollbar and add min-width to event summary dialog --- userChrome.css | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/userChrome.css b/userChrome.css index c51c48c..8ff1aad 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1544,31 +1544,37 @@ calendar-editable-item[selected="true"].calendar-color-box { } /* 6. Event Info / Summary Dialog */ -#calendar-summary-dialog-custom-button-footer button, -.calendar-invitation-panel-response-buttons button { - border-radius: 8px !important; - padding: 5px 14px !important; - font-size: 0.85rem !important; - font-weight: 500 !important; - background-color: rgba(0, 0, 0, 0.06) !important; - border: none !important; - color: #1d1d1f !important; - cursor: pointer !important; - transition: background-color 0.15s ease !important; +#calendar-summary-dialog { + min-width: 600px !important; + min-inline-size: 600px !important; + overflow-x: hidden !important; } -#calendar-summary-dialog-custom-button-footer button:hover, -.calendar-invitation-panel-response-buttons button:hover { - background-color: rgba(0, 0, 0, 0.1) !important; +#calendar-summary-dialog body, +#calendar-event-summary-dialog { + overflow-x: hidden !important; +} + +#calendar-item-summary { + overflow-x: hidden !important; + max-width: 100% !important; +} + +#calendar-item-summary .item-description, +#calendar-item-summary .item-description-box, +#calendar-item-summary .calendar-summary-table td, +#calendar-item-summary .calendar-summary-table th { + overflow-wrap: anywhere !important; + word-break: break-word !important; } #calendar-summary-dialog-custom-button-footer button, .calendar-invitation-panel-response-buttons button { border-radius: 8px !important; - padding: 6px 16px !important; + padding: 5px 14px !important; font-size: 0.85rem !important; font-weight: 500 !important; - background-color: rgba(0, 0, 0, 0.07) !important; + background-color: rgba(0, 0, 0, 0.06) !important; border: none !important; color: #1d1d1f !important; cursor: pointer !important; @@ -1577,7 +1583,7 @@ calendar-editable-item[selected="true"].calendar-color-box { #calendar-summary-dialog-custom-button-footer button:hover, .calendar-invitation-panel-response-buttons button:hover { - background-color: rgba(0, 0, 0, 0.12) !important; + background-color: rgba(0, 0, 0, 0.1) !important; } /* 7. Dark Mode Overrides for Calendar */ From d908ca180f64bda1db5c8b5f11e1a6dbc92fd90e Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:06:22 +0200 Subject: [PATCH 08/49] Restore macOS card styling for summary dialog without layout breakage --- userChrome.css | 72 +++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 59 insertions(+), 13 deletions(-) diff --git a/userChrome.css b/userChrome.css index 8ff1aad..791fc42 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1545,27 +1545,52 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { - min-width: 600px !important; - min-inline-size: 600px !important; + max-width: 650px !important; + min-width: 580px !important; overflow-x: hidden !important; } -#calendar-summary-dialog body, -#calendar-event-summary-dialog { +#calendar-summary-dialog body { + background-color: #cde0ee !important; + padding: 12px !important; + box-sizing: border-box !important; overflow-x: hidden !important; } -#calendar-item-summary { - overflow-x: hidden !important; - max-width: 100% !important; +#calendar-event-summary-dialog { + background-color: #ffffff !important; + border-radius: 14px !important; + border: 1px solid rgba(0, 0, 0, 0.1) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; + margin: 0 auto !important; + width: 100% !important; + box-sizing: border-box !important; + overflow: hidden !important; +} + +#calendar-summary-dialog #summary-toolbox { + background-color: #f6f6f8 !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; + padding: 4px 8px !important; +} + +#calendar-summary-dialog #summary-toolbar { + background: transparent !important; + border: none !important; } -#calendar-item-summary .item-description, -#calendar-item-summary .item-description-box, -#calendar-item-summary .calendar-summary-table td, -#calendar-item-summary .calendar-summary-table th { - overflow-wrap: anywhere !important; - word-break: break-word !important; +#calendar-summary-dialog #calendar-item-summary { + background-color: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 14px 18px !important; +} + +#calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { + background-color: #f6f6f8 !important; + border-top: 1px solid rgba(0, 0, 0, 0.08) !important; + margin: 0 !important; + padding: 10px 16px !important; } #calendar-summary-dialog-custom-button-footer button, @@ -1682,6 +1707,27 @@ calendar-editable-item[selected="true"].calendar-color-box { color: #a1a1a6 !important; } + #calendar-summary-dialog body { + background-color: #202023 !important; + } + + #calendar-event-summary-dialog { + background-color: #1c1c1e !important; + border-color: rgba(255, 255, 255, 0.12) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; + } + + #calendar-summary-dialog #summary-toolbox, + #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { + background-color: #2c2c2e !important; + border-color: rgba(255, 255, 255, 0.1) !important; + } + + #calendar-summary-dialog #calendar-item-summary { + background-color: transparent !important; + color: #f5f5f7 !important; + } + #calendar-summary-dialog-custom-button-footer button, .calendar-invitation-panel-response-buttons button { background-color: rgba(255, 255, 255, 0.12) !important; From a378b3efdc73c38e6799b058bb7418d27bc23572 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:10:32 +0200 Subject: [PATCH 09/49] Fix summary dialog symmetric width, attendees wrapping, and remove bottom scrollbar --- userChrome.css | 23 ++++++++++++++++++----- userContent.css | 9 +++++++++ 2 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 userContent.css diff --git a/userChrome.css b/userChrome.css index 791fc42..de740de 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1545,8 +1545,9 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { - max-width: 650px !important; - min-width: 580px !important; + width: 780px !important; + max-width: 820px !important; + min-width: 750px !important; overflow-x: hidden !important; } @@ -1557,13 +1558,14 @@ calendar-editable-item[selected="true"].calendar-color-box { overflow-x: hidden !important; } -#calendar-event-summary-dialog { +#calendar-summary-dialog dialog { background-color: #ffffff !important; border-radius: 14px !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; - margin: 0 auto !important; + margin: 0 !important; width: 100% !important; + max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } @@ -1586,6 +1588,17 @@ calendar-editable-item[selected="true"].calendar-color-box { padding: 14px 18px !important; } +#calendar-summary-dialog .item-attendees-list-container, +#calendar-summary-dialog .attendees-list { + flex-wrap: wrap !important; + max-width: 100% !important; +} + +#calendar-summary-dialog iframe, +#calendar-summary-dialog .item-description { + overflow-x: hidden !important; +} + #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { background-color: #f6f6f8 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; @@ -1711,7 +1724,7 @@ calendar-editable-item[selected="true"].calendar-color-box { background-color: #202023 !important; } - #calendar-event-summary-dialog { + #calendar-summary-dialog dialog { background-color: #1c1c1e !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; diff --git a/userContent.css b/userContent.css new file mode 100644 index 0000000..f6ffc69 --- /dev/null +++ b/userContent.css @@ -0,0 +1,9 @@ +/* Thunderbird userContent.css - Content & Editor Window Styling */ + +@-moz-document url-prefix("about:blank") { + html, body { + overflow-x: hidden !important; + overflow-wrap: anywhere !important; + word-break: break-word !important; + } +} From c21f5e7583c9576f02935a3ab02f4cb50f7827f1 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:14:14 +0200 Subject: [PATCH 10/49] Let sizeToContent determine window size, apply symmetric padding via body on all sides --- userChrome.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/userChrome.css b/userChrome.css index de740de..5fcc982 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1544,18 +1544,11 @@ calendar-editable-item[selected="true"].calendar-color-box { } /* 6. Event Info / Summary Dialog */ -#calendar-summary-dialog { - width: 780px !important; - max-width: 820px !important; - min-width: 750px !important; - overflow-x: hidden !important; -} - #calendar-summary-dialog body { background-color: #cde0ee !important; padding: 12px !important; box-sizing: border-box !important; - overflow-x: hidden !important; + margin: 0 !important; } #calendar-summary-dialog dialog { @@ -1567,7 +1560,6 @@ calendar-editable-item[selected="true"].calendar-color-box { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; - overflow: hidden !important; } #calendar-summary-dialog #summary-toolbox { @@ -1602,6 +1594,8 @@ calendar-editable-item[selected="true"].calendar-color-box { #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { background-color: #f6f6f8 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; + border-bottom-left-radius: 14px !important; + border-bottom-right-radius: 14px !important; margin: 0 !important; padding: 10px 16px !important; } From b5f332cc3acc17218e285bb8f75f42032f9b2add Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:17:12 +0200 Subject: [PATCH 11/49] Fix: use dialog margin instead of body padding for symmetric blue frame on all 4 sides --- userChrome.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 5fcc982..08426d8 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1546,8 +1546,7 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog body { background-color: #cde0ee !important; - padding: 12px !important; - box-sizing: border-box !important; + padding: 0 !important; margin: 0 !important; } @@ -1556,9 +1555,7 @@ calendar-editable-item[selected="true"].calendar-color-box { border-radius: 14px !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; - margin: 0 !important; - width: 100% !important; - max-width: 100% !important; + margin: 12px !important; box-sizing: border-box !important; } From 887f804a51d0d199b5ee7648509ff12876d4f57b Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:24:28 +0200 Subject: [PATCH 12/49] Fix: Lock summary dialog size to 850x800 and use strict viewport layout for perfect symmetry --- userChrome.css | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index 08426d8..cfb3e54 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1544,10 +1544,22 @@ calendar-editable-item[selected="true"].calendar-color-box { } /* 6. Event Info / Summary Dialog */ +#calendar-summary-dialog { + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; + overflow: hidden !important; +} + #calendar-summary-dialog body { background-color: #cde0ee !important; - padding: 0 !important; + padding: 12px !important; margin: 0 !important; + width: 100vw !important; + height: 100vh !important; + box-sizing: border-box !important; + overflow: hidden !important; } #calendar-summary-dialog dialog { @@ -1555,14 +1567,20 @@ calendar-editable-item[selected="true"].calendar-color-box { border-radius: 14px !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; - margin: 12px !important; + margin: 0 !important; + width: 100% !important; + height: 100% !important; box-sizing: border-box !important; + display: flex !important; + flex-direction: column !important; + overflow: hidden !important; } #calendar-summary-dialog #summary-toolbox { background-color: #f6f6f8 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; padding: 4px 8px !important; + flex-shrink: 0 !important; } #calendar-summary-dialog #summary-toolbar { @@ -1575,6 +1593,9 @@ calendar-editable-item[selected="true"].calendar-color-box { border: none !important; box-shadow: none !important; padding: 14px 18px !important; + flex: 1 !important; + overflow-y: auto !important; + overflow-x: hidden !important; } #calendar-summary-dialog .item-attendees-list-container, @@ -1591,10 +1612,10 @@ calendar-editable-item[selected="true"].calendar-color-box { #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { background-color: #f6f6f8 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; - border-bottom-left-radius: 14px !important; - border-bottom-right-radius: 14px !important; margin: 0 !important; padding: 10px 16px !important; + margin-top: auto !important; + flex-shrink: 0 !important; } #calendar-summary-dialog-custom-button-footer button, From cef28c3e5cafd7afe0fad57f5c0ce837d7eb62af Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:30:47 +0200 Subject: [PATCH 13/49] Fix: Use bulletproof CSS border layout to prevent sizeToContent margin clipping --- userChrome.css | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/userChrome.css b/userChrome.css index cfb3e54..0acbe4d 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1545,31 +1545,29 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { - min-width: 850px !important; - max-width: 850px !important; - min-height: 800px !important; - max-height: 800px !important; overflow: hidden !important; } #calendar-summary-dialog body { - background-color: #cde0ee !important; - padding: 12px !important; + background-color: transparent !important; + padding: 0 !important; margin: 0 !important; - width: 100vw !important; - height: 100vh !important; - box-sizing: border-box !important; overflow: hidden !important; } #calendar-summary-dialog dialog { background-color: #ffffff !important; - border-radius: 14px !important; - border: 1px solid rgba(0, 0, 0, 0.1) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; + border: 12px solid #cde0ee !important; + border-radius: 20px !important; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; + + /* Fixed size applied directly to dialog so sizeToContent respects it */ + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; + margin: 0 !important; - width: 100% !important; - height: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; @@ -1732,14 +1730,10 @@ calendar-editable-item[selected="true"].calendar-color-box { color: #a1a1a6 !important; } - #calendar-summary-dialog body { - background-color: #202023 !important; - } - #calendar-summary-dialog dialog { background-color: #1c1c1e !important; - border-color: rgba(255, 255, 255, 0.12) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; + border-color: #202023 !important; /* The dark frame */ + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.4) !important; } #calendar-summary-dialog #summary-toolbox, From d96f753f6baba0535500362e63f507dfae06fa67 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:33:00 +0200 Subject: [PATCH 14/49] Revert "Fix: Use bulletproof CSS border layout to prevent sizeToContent margin clipping" This reverts commit cef28c3e5cafd7afe0fad57f5c0ce837d7eb62af. --- userChrome.css | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/userChrome.css b/userChrome.css index 0acbe4d..cfb3e54 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1545,29 +1545,31 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; overflow: hidden !important; } #calendar-summary-dialog body { - background-color: transparent !important; - padding: 0 !important; + background-color: #cde0ee !important; + padding: 12px !important; margin: 0 !important; + width: 100vw !important; + height: 100vh !important; + box-sizing: border-box !important; overflow: hidden !important; } #calendar-summary-dialog dialog { background-color: #ffffff !important; - border: 12px solid #cde0ee !important; - border-radius: 20px !important; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; - - /* Fixed size applied directly to dialog so sizeToContent respects it */ - min-width: 850px !important; - max-width: 850px !important; - min-height: 800px !important; - max-height: 800px !important; - + border-radius: 14px !important; + border: 1px solid rgba(0, 0, 0, 0.1) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; margin: 0 !important; + width: 100% !important; + height: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; @@ -1730,10 +1732,14 @@ calendar-editable-item[selected="true"].calendar-color-box { color: #a1a1a6 !important; } + #calendar-summary-dialog body { + background-color: #202023 !important; + } + #calendar-summary-dialog dialog { background-color: #1c1c1e !important; - border-color: #202023 !important; /* The dark frame */ - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.4) !important; + border-color: rgba(255, 255, 255, 0.12) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; } #calendar-summary-dialog #summary-toolbox, From 0ae10240cdb0010483d752ac1c8e03ce5eb703fd Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:35:52 +0200 Subject: [PATCH 15/49] Reapply "Fix: Use bulletproof CSS border layout to prevent sizeToContent margin clipping" This reverts commit d96f753f6baba0535500362e63f507dfae06fa67. --- userChrome.css | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/userChrome.css b/userChrome.css index cfb3e54..0acbe4d 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1545,31 +1545,29 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { - min-width: 850px !important; - max-width: 850px !important; - min-height: 800px !important; - max-height: 800px !important; overflow: hidden !important; } #calendar-summary-dialog body { - background-color: #cde0ee !important; - padding: 12px !important; + background-color: transparent !important; + padding: 0 !important; margin: 0 !important; - width: 100vw !important; - height: 100vh !important; - box-sizing: border-box !important; overflow: hidden !important; } #calendar-summary-dialog dialog { background-color: #ffffff !important; - border-radius: 14px !important; - border: 1px solid rgba(0, 0, 0, 0.1) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; + border: 12px solid #cde0ee !important; + border-radius: 20px !important; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; + + /* Fixed size applied directly to dialog so sizeToContent respects it */ + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; + margin: 0 !important; - width: 100% !important; - height: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; @@ -1732,14 +1730,10 @@ calendar-editable-item[selected="true"].calendar-color-box { color: #a1a1a6 !important; } - #calendar-summary-dialog body { - background-color: #202023 !important; - } - #calendar-summary-dialog dialog { background-color: #1c1c1e !important; - border-color: rgba(255, 255, 255, 0.12) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; + border-color: #202023 !important; /* The dark frame */ + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.4) !important; } #calendar-summary-dialog #summary-toolbox, From 2698b970f37e29008f24d5240d358ff93e58af73 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:40:09 +0200 Subject: [PATCH 16/49] Fix: Force dialog to 100vw and align-items stretch to prevent right side gap --- userChrome.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 0acbe4d..f23b1f8 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1545,6 +1545,10 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; overflow: hidden !important; } @@ -1561,16 +1565,15 @@ calendar-editable-item[selected="true"].calendar-color-box { border-radius: 20px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; - /* Fixed size applied directly to dialog so sizeToContent respects it */ - min-width: 850px !important; - max-width: 850px !important; - min-height: 800px !important; - max-height: 800px !important; + /* Force the dialog to fill the entire window viewport exactly */ + width: 100vw !important; + height: 100vh !important; margin: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; + align-items: stretch !important; overflow: hidden !important; } From 876ee987a57132f494723b56f8f1e90bf663e44e Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:43:04 +0200 Subject: [PATCH 17/49] Fix: Hardcode dialog dimensions to match root window dimensions exactly to prevent XUL responsive layout bugs --- userChrome.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index f23b1f8..efb44a6 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1565,9 +1565,13 @@ calendar-editable-item[selected="true"].calendar-color-box { border-radius: 20px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; - /* Force the dialog to fill the entire window viewport exactly */ - width: 100vw !important; - height: 100vh !important; + /* HARDCODE the exact dimensions to perfectly match the window client area! */ + width: 850px !important; + height: 800px !important; + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; margin: 0 !important; box-sizing: border-box !important; From 56799dceb2ef6eb57f69f9c61d03c072978580e8 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:47:24 +0200 Subject: [PATCH 18/49] Fix: Enable horizontal scrollbar in event summary description iframe --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index efb44a6..81bfbac 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1611,7 +1611,7 @@ calendar-editable-item[selected="true"].calendar-color-box { #calendar-summary-dialog iframe, #calendar-summary-dialog .item-description { - overflow-x: hidden !important; + overflow-x: auto !important; } #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { From f299ceb2c75562895ea9bbca21b8b3def2d1ebdf Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:49:45 +0200 Subject: [PATCH 19/49] Fix: Allow horizontal scrolling in userContent.css for iframe content --- userContent.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userContent.css b/userContent.css index f6ffc69..7600658 100644 --- a/userContent.css +++ b/userContent.css @@ -2,7 +2,7 @@ @-moz-document url-prefix("about:blank") { html, body { - overflow-x: hidden !important; + overflow-x: auto !important; overflow-wrap: anywhere !important; word-break: break-word !important; } From fc37398e782f839b9eee54cfa8c508bd3239f36d Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:51:12 +0200 Subject: [PATCH 20/49] Fix: Constrain description iframe width to 100% to force internal scrollbar instead of XUL expansion --- userChrome.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/userChrome.css b/userChrome.css index 81bfbac..2f6778d 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1609,9 +1609,13 @@ calendar-editable-item[selected="true"].calendar-color-box { max-width: 100% !important; } +#calendar-summary-dialog .item-description-box, #calendar-summary-dialog iframe, #calendar-summary-dialog .item-description { overflow-x: auto !important; + max-width: 100% !important; + width: 100% !important; + box-sizing: border-box !important; } #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { From 3162faa8bfc4ce268b39ea87c3add291c2d4789c Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:53:39 +0200 Subject: [PATCH 21/49] Fix: Remove forced word wrap to allow horizontal scrolling of long URLs --- userContent.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/userContent.css b/userContent.css index 7600658..d7599e2 100644 --- a/userContent.css +++ b/userContent.css @@ -3,7 +3,5 @@ @-moz-document url-prefix("about:blank") { html, body { overflow-x: auto !important; - overflow-wrap: anywhere !important; - word-break: break-word !important; } } From 654716e547f1dd1faa3e4044a8e23c6a111d712f Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:57:16 +0200 Subject: [PATCH 22/49] Fix: Force visible overflow and no-wrap on links in userContent to guarantee functional horizontal scrollbar --- userContent.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/userContent.css b/userContent.css index d7599e2..8d2c34e 100644 --- a/userContent.css +++ b/userContent.css @@ -4,4 +4,14 @@ html, body { overflow-x: auto !important; } + * { + overflow: visible !important; + } + table, tr, td, div, p, span { + max-width: none !important; + } + a { + max-width: none !important; + white-space: nowrap !important; + } } From 1e4f81802cf724da633aa37d3ee707c97c0e79b4 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Fri, 28 Aug 2026 23:59:20 +0200 Subject: [PATCH 23/49] Fix: Enable BOTH horizontal and vertical scrollbars on the description iframe --- userChrome.css | 2 +- userContent.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index 2f6778d..92289d1 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1612,7 +1612,7 @@ calendar-editable-item[selected="true"].calendar-color-box { #calendar-summary-dialog .item-description-box, #calendar-summary-dialog iframe, #calendar-summary-dialog .item-description { - overflow-x: auto !important; + overflow: auto !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; diff --git a/userContent.css b/userContent.css index 8d2c34e..9b8efcf 100644 --- a/userContent.css +++ b/userContent.css @@ -2,7 +2,7 @@ @-moz-document url-prefix("about:blank") { html, body { - overflow-x: auto !important; + overflow: auto !important; } * { overflow: visible !important; From f2ead293af1081c3d1a1d3cdfaaae34f7c32f366 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 00:25:12 +0200 Subject: [PATCH 24/49] Fix: Add mathematically proven 36px left padding to #calSidebar to prevent overlap with the 44px Spaces Toolbar --- userChrome.css | 1 + 1 file changed, 1 insertion(+) diff --git a/userChrome.css b/userChrome.css index 92289d1..5961eb9 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1236,6 +1236,7 @@ calendar-multiweek-view { #calSidebar { background-color: #f7f7f9 !important; border-inline-end: 1px solid rgba(0, 0, 0, 0.08) !important; + padding-left: 36px !important; } #calSidebar .sidebar-panel-header { From 2adf39815516b76007c8ddf3db27d50f186fad5a Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 00:29:39 +0200 Subject: [PATCH 25/49] Fix: Perfect left alignment and scaling for calendar minimonth --- userChrome.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index 5961eb9..d19b2bb 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1236,7 +1236,7 @@ calendar-multiweek-view { #calSidebar { background-color: #f7f7f9 !important; border-inline-end: 1px solid rgba(0, 0, 0, 0.08) !important; - padding-left: 36px !important; + padding-left: 44px !important; } #calSidebar .sidebar-panel-header { @@ -1312,7 +1312,13 @@ calendar-minimonth { --mmDaySelectedTodayBorderColor: transparent !important; --mmHighlightBackground: #ff3b30 !important; --mmHighlightColor: #ffffff !important; - padding: 8px !important; + padding: 0px !important; + min-inline-size: 100px !important; +} + +.minimonth-day { + padding: 2px !important; + font-size: 0.85rem !important; } .minimonth-month-box { From 4250e3196cd1eb746d553e835338cbe76272722c Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 00:33:22 +0200 Subject: [PATCH 26/49] Fix: Aggressively shrink minimonth and force max-width to eliminate gaps and prevent right-side overflow --- userChrome.css | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index d19b2bb..a4c0a57 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1314,20 +1314,31 @@ calendar-minimonth { --mmHighlightColor: #ffffff !important; padding: 0px !important; min-inline-size: 100px !important; + max-width: 100% !important; } -.minimonth-day { +.minimonth-day, +.minimonth-week { padding: 2px !important; - font-size: 0.85rem !important; + font-size: 0.8rem !important; +} + +.minimonth-cal-box { + padding: 0 !important; } .minimonth-month-box { - font-size: 0.95rem !important; + font-size: 0.75rem !important; font-weight: 700 !important; color: #1d1d1f !important; margin-bottom: 6px !important; } +.minimonth-nav-btn { + padding: 0 !important; + margin: 0 !important; +} + /* 3. Top Navigation Header & Segmented View Switcher (#calendarViewHeader) */ #calendarViewHeader { background-color: #ffffff !important; From 608eb286fcbd3f996c051ab2b115c40904a9676b Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 13:10:29 +0200 Subject: [PATCH 27/49] feat: Apple-design white card tooltip for calendar hover preview (#itemTooltip) --- userChrome.css | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/userChrome.css b/userChrome.css index a4c0a57..eabc907 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1782,3 +1782,83 @@ calendar-editable-item[selected="true"].calendar-color-box { color: #f5f5f7 !important; } } + +/* ===================================================== + CALENDAR EVENT TOOLTIP (hover preview) + Apple-design: white card, subtle shadow, grey labels + ===================================================== */ + +#itemTooltip { + -moz-appearance: none !important; + appearance: none !important; + background: #ffffff !important; + color: #1d1d1f !important; + border: 1px solid rgba(0, 0, 0, 0.10) !important; + border-radius: 12px !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important; + padding: 4px !important; +} + +.tooltipBox { + padding: 10px 14px !important; + max-inline-size: 44em !important; +} + +.tooltipHeaderTable { + border-spacing: 0 !important; +} + +.tooltipHeaderLabel { + color: #8e8e93 !important; + font-size: 0.72rem !important; + font-weight: 600 !important; + text-transform: uppercase !important; + letter-spacing: 0.4px !important; + text-align: end !important; + padding-inline-end: 10px !important; + white-space: nowrap !important; + vertical-align: top !important; + padding-block-start: 3px !important; +} + +.tooltipHeaderValue { + color: #1d1d1f !important; + font-size: 0.88rem !important; + font-weight: 500 !important; + padding-block-end: 4px !important; +} + +.tooltipBodySeparator { + block-size: 8px !important; +} + +.tooltipBody { + color: #3a3a3c !important; + font-size: 0.84rem !important; + font-weight: 400 !important; + line-height: 1.5 !important; + border-block-start: 1px solid rgba(0, 0, 0, 0.07) !important; + padding-block-start: 10px !important; + margin-block-start: 4px !important; + white-space: normal !important; +} + +/* Dark mode */ +@media (prefers-color-scheme: dark) { + #itemTooltip { + background: #2c2c2e !important; + color: #f5f5f7 !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3) !important; + } + .tooltipHeaderLabel { + color: #98989d !important; + } + .tooltipHeaderValue { + color: #f5f5f7 !important; + } + .tooltipBody { + color: #d1d1d6 !important; + border-block-start-color: rgba(255, 255, 255, 0.08) !important; + } +} From 801ed8f23b0e997dd3a3f9abcf4626649e6af47b Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 13:15:45 +0200 Subject: [PATCH 28/49] style: Use soft light-blue tinted card styling (#eef4fb) for event hover tooltip with distinct border and shadow --- userChrome.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/userChrome.css b/userChrome.css index eabc907..756c027 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1791,11 +1791,11 @@ calendar-editable-item[selected="true"].calendar-color-box { #itemTooltip { -moz-appearance: none !important; appearance: none !important; - background: #ffffff !important; + background: #eef4fb !important; color: #1d1d1f !important; - border: 1px solid rgba(0, 0, 0, 0.10) !important; + border: 1px solid rgba(0, 100, 200, 0.18) !important; border-radius: 12px !important; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.08) !important; padding: 4px !important; } @@ -1809,7 +1809,7 @@ calendar-editable-item[selected="true"].calendar-color-box { } .tooltipHeaderLabel { - color: #8e8e93 !important; + color: #637381 !important; font-size: 0.72rem !important; font-weight: 600 !important; text-transform: uppercase !important; @@ -1833,11 +1833,11 @@ calendar-editable-item[selected="true"].calendar-color-box { } .tooltipBody { - color: #3a3a3c !important; + color: #334155 !important; font-size: 0.84rem !important; font-weight: 400 !important; line-height: 1.5 !important; - border-block-start: 1px solid rgba(0, 0, 0, 0.07) !important; + border-block-start: 1px solid rgba(0, 100, 200, 0.14) !important; padding-block-start: 10px !important; margin-block-start: 4px !important; white-space: normal !important; From 1f77346989dac670953738c749a0f1ba4536012d Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 13:29:35 +0200 Subject: [PATCH 29/49] feat: Enable Apple-style blue unread/new dot (#007aff) on cards in message list --- userChrome.css | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 756c027..bf42570 100644 --- a/userChrome.css +++ b/userChrome.css @@ -493,16 +493,29 @@ tr.card-layout.children span.subject { font-size: 0.95em !important; } -/* Unread indicator dot */ +/* Unread indicator dot (hidden on read messages, Apple-blue on unread/new) */ #threadTree[rows="thread-card"] .card-layout td .card-container .read-status { content: var(--read-status-icon) !important; height: var(--read-status-size) !important; width: var(--read-status-size) !important; - fill: #4ade8000 !important; - stroke: #16a34a00 !important; + fill: transparent !important; + stroke: transparent !important; margin-left: 0 !important; } +#threadTree[rows="thread-card"] .card-layout:is([data-properties~="unread"], [data-properties~="new"]) td .card-container .read-status { + content: var(--icon-dot) !important; + fill: #007aff !important; + stroke: #007aff !important; +} + +@media (prefers-color-scheme: dark) { + #threadTree[rows="thread-card"] .card-layout:is([data-properties~="unread"], [data-properties~="new"]) td .card-container .read-status { + fill: #0a84ff !important; + stroke: #0a84ff !important; + } +} + /* Unread indicator inline offset */ #threadTree[rows="thread-card"] .card-layout td .card-container::before { inset-inline-start: calc(var(--indicator-width) * 2 - var(--indicator-gap)) !important; From 94e899fe0ef90dd38e20687ec99fffc40cb12751 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 13:37:06 +0200 Subject: [PATCH 30/49] fix(ui): Add 16px breathing room to Preferences and Account Settings sidebars --- userChrome.css | 11 +++++++++++ userContent.css | 9 +++++++++ 2 files changed, 20 insertions(+) diff --git a/userChrome.css b/userChrome.css index bf42570..4f156a5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1875,3 +1875,14 @@ calendar-editable-item[selected="true"].calendar-color-box { border-block-start-color: rgba(255, 255, 255, 0.08) !important; } } + +/* ===================================================== + PREFERENCES & ACCOUNT SETTINGS SIDEBAR SPACING + Ensure proper breathing room next to Spaces Toolbar + ===================================================== */ + +#pref-category-box, +#accountTreeBox { + padding-inline-start: 16px !important; +} + diff --git a/userContent.css b/userContent.css index 9b8efcf..9bd59f6 100644 --- a/userContent.css +++ b/userContent.css @@ -15,3 +15,12 @@ white-space: nowrap !important; } } + +/* Preferences (Settings) & Account Settings Sidebar Spacing */ +@-moz-document url-prefix("about:preferences"), url-prefix("chrome://messenger/content/preferences/preferences.xhtml"), url-prefix("about:accountsettings"), url-prefix("chrome://messenger/content/messenger/AccountManager.xhtml") { + #pref-category-box, + #accountTreeBox { + padding-inline-start: 16px !important; + } +} + From 6056f94dc857d5c8b5ea69194db9c5f3421bf973 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 13:39:22 +0200 Subject: [PATCH 31/49] fix(ui): Increase preferences sidebar padding to 48px to fully clear Spaces Toolbar --- userChrome.css | 2 +- userContent.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index 4f156a5..341df53 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1883,6 +1883,6 @@ calendar-editable-item[selected="true"].calendar-color-box { #pref-category-box, #accountTreeBox { - padding-inline-start: 16px !important; + padding-inline-start: 48px !important; } diff --git a/userContent.css b/userContent.css index 9bd59f6..63ea0aa 100644 --- a/userContent.css +++ b/userContent.css @@ -20,7 +20,7 @@ @-moz-document url-prefix("about:preferences"), url-prefix("chrome://messenger/content/preferences/preferences.xhtml"), url-prefix("about:accountsettings"), url-prefix("chrome://messenger/content/messenger/AccountManager.xhtml") { #pref-category-box, #accountTreeBox { - padding-inline-start: 16px !important; + padding-inline-start: 48px !important; } } From 225013fa1de4d97e783b3f341f9a7ac345e81c27 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 13:44:32 +0200 Subject: [PATCH 32/49] fix(ui): Shift folderPane right by 18px and reduce account email font-size to 0.92rem --- userChrome.css | 12 ++++++++---- userContent.css | 12 ++++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index 341df53..5a9166e 100644 --- a/userChrome.css +++ b/userChrome.css @@ -226,13 +226,17 @@ toolbar#tabs-toolbar, /* ===================================================== - FOLDER TREE + FOLDER TREE & PANE ===================================================== */ -/* Account-level row: larger text, no icon */ +#folderPane { + padding-inline-start: 18px !important; +} + +/* Account-level row: compact font size, clean hierarchy */ #folderTree li[data-server-type] > .container > .name { - font-weight: normal !important; - font-size: 1.18rem !important; + font-weight: 600 !important; + font-size: 0.92rem !important; } #folderTree li[data-server-type]:not(:first-of-type) > .container { diff --git a/userContent.css b/userContent.css index 63ea0aa..c50b688 100644 --- a/userContent.css +++ b/userContent.css @@ -24,3 +24,15 @@ } } +/* Mail Folder Pane Spacing & Account Font Size */ +@-moz-document url-prefix("chrome://messenger/content/messenger/about3Pane.xhtml"), url-prefix("about:3pane") { + #folderPane { + padding-inline-start: 18px !important; + } + #folderTree li[data-server-type] > .container > .name { + font-weight: 600 !important; + font-size: 0.92rem !important; + } +} + + From d938807a60ec6e643f5570a7eada545c512b9a16 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 13:50:27 +0200 Subject: [PATCH 33/49] fix(ui): Place refresh button to the right of New Message and bump account font size to 1.02rem --- userChrome.css | 25 ++++++++++++++++++++++--- userContent.css | 19 +++++++++++++++++-- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 5a9166e..057d54b 100644 --- a/userChrome.css +++ b/userChrome.css @@ -230,13 +230,32 @@ toolbar#tabs-toolbar, ===================================================== */ #folderPane { - padding-inline-start: 18px !important; + padding-inline-start: 46px !important; } -/* Account-level row: compact font size, clean hierarchy */ +#folderPaneHeaderBar { + flex-direction: row !important; + justify-content: flex-start !important; + gap: 6px !important; +} + +#folderPaneWriteMessage { + order: 1 !important; +} + +#folderPaneGetMessages { + order: 2 !important; +} + +#folderPaneMoreButton { + order: 3 !important; + margin-inline-start: auto !important; +} + +/* Account-level row: 1 font-step larger (1.02rem), clean hierarchy */ #folderTree li[data-server-type] > .container > .name { font-weight: 600 !important; - font-size: 0.92rem !important; + font-size: 1.02rem !important; } #folderTree li[data-server-type]:not(:first-of-type) > .container { diff --git a/userContent.css b/userContent.css index c50b688..ef488b8 100644 --- a/userContent.css +++ b/userContent.css @@ -27,11 +27,26 @@ /* Mail Folder Pane Spacing & Account Font Size */ @-moz-document url-prefix("chrome://messenger/content/messenger/about3Pane.xhtml"), url-prefix("about:3pane") { #folderPane { - padding-inline-start: 18px !important; + padding-inline-start: 46px !important; + } + #folderPaneHeaderBar { + flex-direction: row !important; + justify-content: flex-start !important; + gap: 6px !important; + } + #folderPaneWriteMessage { + order: 1 !important; + } + #folderPaneGetMessages { + order: 2 !important; + } + #folderPaneMoreButton { + order: 3 !important; + margin-inline-start: auto !important; } #folderTree li[data-server-type] > .container > .name { font-weight: 600 !important; - font-size: 0.92rem !important; + font-size: 1.02rem !important; } } From 96a21e84d65e8bb444b8bdd5a9b3b8eb6f1e2559 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 14:07:51 +0200 Subject: [PATCH 34/49] fix(dialog): Ensure box-sizing: border-box, min-width: 0, and width: 100% on calendar-item-summary for perfect symmetry --- userChrome.css | 3661 ++++++++++++++++++++++++------------------------ 1 file changed, 1841 insertions(+), 1820 deletions(-) diff --git a/userChrome.css b/userChrome.css index 057d54b..04e02c4 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,1823 +1,1844 @@ -/* FLUENTBIRD - A FLUENT DESIGN THEME FOR THUNDERBIRD */ -/* Created by Danny King - www.dannyking.co.uk */ -/* v1.1.4 RELEASE */ -/* DISTRIBUTED UNDER THE MIT LICENSE */ - -/* ===================================================== - CUSTOM OVERRIDES - If you want to make your own tweaks, you can - place your own CSS in a file named: - custom.css - in the same folder as this file. - ===================================================== */ - -@import url("custom.css"); - -/* ===================================================== - LAYOUT & WINDOW CHROME - ===================================================== */ - -:root { - --toolbox-background-color: #cde0ee !important; - --toolbar-background-color: #cde0ee !important; - --tabs-toolbar-background-color: #cde0ee !important; - --lwt-accent-color: #cde0ee !important; -} - -:root, -body, -#messengerWindow { - background-color: #cde0ee !important; -} - -/* Rounded clip on main content area with background frame */ -#messengerBody { - opacity: 1 !important; - background-color: #f1f3f4 !important; - border-radius: 12px !important; - margin: 0 8px 8px 0 !important; - overflow: hidden !important; -} - -/* Hide hamburger menu and keyboard shortcut container */ -#button-appmenu { - display: none !important; -} - -.kbd-container { - display: none !important; -} - -/* Windows titlebar button height */ -@media (-moz-platform: windows) { - :root[customtitlebar] .titlebar-button, - :root[customtitlebar] #titlebar-min, - :root[customtitlebar] #titlebar-max, - :root[customtitlebar] #titlebar-close { - height: 29px !important; - } - - /* Close button hover colour */ - :root[customtitlebar] .titlebar-close:hover { - background-color: #c42b1cfa !important; - stroke: white !important; - } - - /* Custom maximise icon — light */ - .titlebar-max { - -moz-default-appearance: -moz-window-button-maximize; - list-style-image: url("Titlebar_Icons/maximize-light.png") !important; - opacity: 0.9 !important; - } -} - - -/* ===================================================== - HEADER, UNIFIED TOOLBAR & TAB BAR - ===================================================== */ - -:root #navigation-toolbox, -:root[lwtheme] #navigation-toolbox, -:root:not([lwtheme]) #navigation-toolbox, -#navigation-toolbox, -#titlebar, -#titlebar > *, -unified-toolbar, -#unifiedToolbarContainer, -#unifiedToolbar, -#unifiedToolbarContent, -#toolbar-menubar, -#tabs-toolbar, -toolbar#tabs-toolbar, -#tabmail-tabs, -#tabmail-arrowscrollbox { - background-color: #cde0ee !important; - background-image: none !important; - border: none !important; - border-bottom: none !important; - border-block-end: none !important; - box-shadow: none !important; -} - -#tabs-toolbar { - margin-bottom: 8px !important; -} - -.tabmail-tab { - border-radius: 6px !important; -} - -.tabmail-tab[selected="true"] { - box-shadow: 0 2px 8px -5px #9c9c9c !important; -} - -.tab-background[selected="true"] { - background-color: #ffffffb8 !important; -} - -/* Remove active-tab indicator line */ -.tab-line { - height: 0px !important; -} - -#tabmail-arrowscrollbox { - margin-left: 0px !important; -} - -/* Remove stroke artifact on tab icons */ -.tab-icon-image { - stroke: #fff0 !important; -} - -/* Suppress compact-mode sort header label */ -.sort-header-details { - display: none !important; -} - - -/* ===================================================== - SPACES TOOLBAR & SIDEBAR ICONS - ===================================================== */ - -#spacesToolbar { - background-color: #cde0ee !important; - background-image: none !important; - border: 0px !important; -} - -/* Hide default icon images; replaced via background-image below */ -#mailButton img, -#addressBookButton img, -#calendarButton img, -#tasksButton img, -#chatButton img, -#settingsButton img, -#folderPaneGetMessages img { - display: none !important; -} - -#mailButton { - background-image: url("Icons/mail-col.svg") !important; - background-repeat: no-repeat !important; - background-size: 20px 20px !important; - background-position: center !important; - width: 30px !important; - filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; -} - -#addressBookButton { - background-image: url("Icons/contact-col.svg") !important; - background-repeat: no-repeat !important; - background-size: 20px 20px !important; - background-position: center !important; - width: 30px !important; - filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; -} - -#calendarButton { - background-image: url("Icons/calendar-col.svg") !important; - background-repeat: no-repeat !important; - background-size: 16px 16px !important; - background-position: center !important; - width: 30px !important; - filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; -} - -#tasksButton { - background-image: url("Icons/tasks-col.svg") !important; - background-repeat: no-repeat !important; - background-size: 20px 20px !important; - background-position: center !important; - width: 30px !important; - filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; -} - -#chatButton { - background-image: url("Icons/chat-col.svg") !important; - background-repeat: no-repeat !important; - background-size: 20px 20px !important; - background-position: center !important; - width: 30px !important; - filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; -} - -#settingsButton { - background-image: url("Icons/settings.svg") !important; - background-repeat: no-repeat !important; - background-size: 20px 20px !important; - background-position: center !important; - width: 30px !important; - filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; -} - -/* Hide settings button label text */ -.settings-btn-container #settingsButton, -.settings-btn-container:hover #settingsButton { - color: #fff0 !important; -} - -#folderPaneGetMessages { - background-image: url("Icons/sync.svg") !important; - background-repeat: no-repeat !important; - background-size: 20px 20px !important; - background-position: center !important; - width: 30px !important; -} - - -/* ===================================================== - FOLDER TREE & PANE - ===================================================== */ - -#folderPane { - padding-inline-start: 46px !important; -} - -#folderPaneHeaderBar { - flex-direction: row !important; - justify-content: flex-start !important; - gap: 6px !important; -} - -#folderPaneWriteMessage { - order: 1 !important; -} - -#folderPaneGetMessages { - order: 2 !important; -} - -#folderPaneMoreButton { - order: 3 !important; - margin-inline-start: auto !important; -} - -/* Account-level row: 1 font-step larger (1.02rem), clean hierarchy */ -#folderTree li[data-server-type] > .container > .name { - font-weight: 600 !important; - font-size: 1.02rem !important; -} - -#folderTree li[data-server-type]:not(:first-of-type) > .container { - margin-top: 10px !important; -} - -/* Folder icon overrides */ -#folderTree li[data-folder-type="inbox"] > .container > .icon { - content: none !important; - mask-image: url("Icons/inbox.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #5aa4ef !important; -} -#folderTree li[data-folder-type="inbox"] > .container > .icon[style*="--icon-color"] { - background-color: var(--icon-color) !important; -} - -#folderTree li[data-folder-type="drafts"] > .container > .icon { - background-image: url("Icons/drafts.svg") !important; - background-repeat: no-repeat !important; - background-size: 16px 16px !important; - background-position: center !important; -} - -#folderTree li[data-folder-type="sent"] > .container > .icon { - background-image: url("Icons/sent.svg") !important; - background-repeat: no-repeat !important; - background-size: 16px 16px !important; - background-position: center !important; -} - -#folderTree li[data-folder-type="junk"] > .container > .icon { - mask-image: url("Icons/junk.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #df4646 !important; -} - -#folderTree li[data-folder-type="trash"] > .container > .icon { - mask-image: url("Icons/trash.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #8785a3 !important; -} - -#folderTree li[data-folder-type="archive"] > .container > .icon { - mask-image: url("Icons/archive.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #8785a3 !important; -} - -#folderTree li[data-folder-type="outbox"] > .container > .icon { - mask-image: url("Icons/outbox.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #6aadb5 !important; -} - -/* Templates Icon */ -#folderTree li[data-folder-type="templates"] > .container > .icon { - content: none !important; - mask-image: url("Icons/templates.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #21a366 !important; /* replace with your preferred colour */ -} -#folderTree li[data-folder-type="templates"] > .container > .icon[style*="--icon-color"] { - background-color: var(--icon-color) !important; -} - -/* Generic folder icon */ -#folderTree li:not([data-folder-type]) > .container > .icon { - content: none !important; - mask-image: url("Icons/folder.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #ffcc42 !important; -} - -/* Search (saved search) folder icon */ -#folderTree li[data-folder-type="virtual"] > .container > .icon { - content: none !important; - mask-image: url("Icons/folder-search.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #1da0e4 !important; -} - -#folderTree li:not([data-folder-type]) > .container > .icon[style*="--icon-color"] { - background-color: var(--icon-color) !important; -} - -/* Tag folder icons — covers ALL tags including custom ones */ -#folderTree li[data-tag-key] > .container > .icon { - display: block !important; - width: 16px !important; - height: 16px !important; - background-color: var(--icon-color) !important; - mask-image: url("Icons/ic_fluent_tag_24_filled.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; -} - -/* Override with tag back-color for the 5 built-in labels */ -#folderTree li[data-tag-key="$label1"] > .container > .icon { background-color: var(--tag-\$label1-backcolor) !important; } -#folderTree li[data-tag-key="$label2"] > .container > .icon { background-color: var(--tag-\$label2-backcolor) !important; } -#folderTree li[data-tag-key="$label3"] > .container > .icon { background-color: var(--tag-\$label3-backcolor) !important; } -#folderTree li[data-tag-key="$label4"] > .container > .icon { background-color: var(--tag-\$label4-backcolor) !important; } -#folderTree li[data-tag-key="$label5"] > .container > .icon { background-color: var(--tag-\$label5-backcolor) !important; } - -/* Mail Account Icon */ - -#folderTree li[data-server-type] > .container > .icon { - content: none !important; - list-style-image: none !important; - display: block !important; - width: 16px !important; - height: 16px !important; - mask-image: url("Icons/ic_fluent_mail_all_24_filled.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #5aa4ef !important; -} - -/* Unread count badge */ -.unread > .container > .unread-count { - display: unset !important; - background-color: #71717a00 !important; - color: #2065b0 !important; - font-size: 1.01rem !important; -} - -/* Twisty indent */ -ul[role="tree"] .container .twisty, -ol[role="tree"] .container .twisty { - margin-left: 6px !important; -} - -/* Selected row indicator offset */ -:is(ul, ol)[role="tree"] li.selected > .container::before { - transform: translateX(3px) !important; -} - -/* Selected/focused folder row */ -:is(ul, ol)[role="tree"] li.selected.current > .container { - border-color: #e1e1e1 !important; - background-color: #e1e1e1 !important; -} - -/* FIX FOR ICON CLASHES IN NAVIGATOR */ - -#folderTree li[data-folder-type="sent"] > .container > .icon { - / content: radial-gradient; / - --icon-color: #FFFFFF00 !important; -} -#folderTree li[data-folder-type="drafts"] > .container > .icon { - / content: var(--icon-draft); / - --icon-color: #FFFFFF00 !important; -} -#folderTree li[data-folder-type="inbox"] > .container > .icon { - / content: var(--icon-inbox); / - --icon-color: #FFFFFF00 !important; -} -#folderTree li[data-folder-type="trash"] > .container > .icon { - / content: var(--icon-trash); */ - --icon-color: #FFFFFF00 !important; -} -#folderTree li[data-folder-type="junk"] > .container > .icon { - content: var(--icon-spam); - --icon-color: #FFFFFF00 !important; -} -#folderTree li .icon { - content: none !important; - display: block !important; - overflow: hidden !important; -} -/* ===================================================== - THREAD PANE - ===================================================== */ - -#threadPaneHeaderBar { - border-bottom: 0px !important; -} - -/* Filter and display button icons */ -#threadPaneQuickFilterButton { - background-image: url("Icons/filter.svg") !important; -} - -#threadPaneDisplayButton, -#displayButton { - background-image: url("Icons/list.svg") !important; -} - -/* Hide thread reply count controls */ -button .replies-icon, -button .thread-replies { - display: none !important; -} - -/* Subject indent for child rows with replies */ -tr.children .thread-card-button:has(.thread-replies[data-l10n-id]) ~ .thread-card-subject-container .subject { - margin-left: 15px !important; -} - -/* Card layout spacing */ -.thread-card-dynamic-row { - gap: 0px !important; - row-gap: 0px !important; - padding-bottom: 0px !important; - margin-bottom: 0px !important; -} - -.thread-card-dynamic-row > .thread-card-button { - align-self: end !important; -} - -/* Card subject text */ -.thread-card-subject-container { - color: #606060; - font-size: 0.96rem !important; - width: 85%; -} - -/* Sender name */ -.sender { - font-size: 1.15rem !important; - font-weight: 500 !important; - margin-top: 8px !important; -} - -& .card-container .sender { - padding-inline-start: 3px !important; -} - -/* Compact sender text for short-height cards */ -tr.card-layout[style*="height: 49px"] .sender, -tr.card-layout[style*="height: 50px"] .sender { - font-size: 1rem !important; - font-weight: 500 !important; - margin-top: 5px !important; -} - -/* Child thread subject font size */ -tr.card-layout.children span.subject { - font-size: 0.95em !important; -} - -/* Unread indicator dot (hidden on read messages, Apple-blue on unread/new) */ -#threadTree[rows="thread-card"] .card-layout td .card-container .read-status { - content: var(--read-status-icon) !important; - height: var(--read-status-size) !important; - width: var(--read-status-size) !important; - fill: transparent !important; - stroke: transparent !important; - margin-left: 0 !important; -} - -#threadTree[rows="thread-card"] .card-layout:is([data-properties~="unread"], [data-properties~="new"]) td .card-container .read-status { - content: var(--icon-dot) !important; - fill: #007aff !important; - stroke: #007aff !important; -} - -@media (prefers-color-scheme: dark) { - #threadTree[rows="thread-card"] .card-layout:is([data-properties~="unread"], [data-properties~="new"]) td .card-container .read-status { - fill: #0a84ff !important; - stroke: #0a84ff !important; - } -} - -/* Unread indicator inline offset */ -#threadTree[rows="thread-card"] .card-layout td .card-container::before { - inset-inline-start: calc(var(--indicator-width) * 2 - var(--indicator-gap)) !important; -} - -/* Remove row highlight behind cards; apply highlight to card itself */ -[is="tree-view-table-body"] tr.selected.current { - background-color: transparent !important; -} - -[is="tree-view-table-body"] .card-layout.selected.current .card-container { - background-color: #cde6f7 !important; - border: 1px solid #bfbfbf !important; -} - -/* Unfocused selected card */ -#threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout.selected.current .card-container, -#threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout[data-properties~="junk"].selected.current .card-container { - background-color: #e1e1e1 !important; - border: 1px solid #bfbfbf !important; -} - -&.selected.current { - --tree-card-background: #e1e1e1; -} - -/* Selected table-layout row colour */ -tr.table-layout.selected.current { - color: #45a0ef !important; -} - -/* Twisty button position fix */ -.button.button-flat.button-reset.twisty.thread-card-button { - margin-top: -38px !important; -} - -.thread-card-icon-info { - margin-top: -15px; -} - -/* Grouped-by-sort child rows */ -tree-view[data-show-grouped-by-sort="true"] .card-layout.children { - height: 30px !important; -} - -tree-view[data-show-grouped-by-sort="true"] .card-layout.children *, -tree-view[data-show-grouped-by-sort="true"] .card-layout.children:hover, -tree-view[data-show-grouped-by-sort="true"] .card-layout.children *:hover { - background: none !important; - background-color: transparent !important; - box-shadow: none !important; - border-color: transparent !important; - color: inherit !important; - filter: none !important; - outline: none !important; - text-decoration: none !important; - transition: none !important; -} - -/* Group header row (e.g. "Today", "Yesterday") — fix missing/misplaced - twisty and vertical centering. - The "Twisty button position fix" rule above only matches buttons that - carry a .button-reset class, which current Thunderbird card twisties - don't have — so it silently never applied here. Rather than guess at - another magic offset, this rebuilds the header row as a single - flex-centered line so the twisty and label sit correctly at any row - height (compact or cozy). */ -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] td { - height: 100% !important; -} - -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .card-container { - display: flex !important; - align-items: center !important; - height: 100% !important; -} - -/* The sender/date line is empty on a header row; drop it so it stops - pushing the twisty + label line down out of the visible 30px band */ -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-row { - display: none !important; -} - -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-column:has(.thread-card-dynamic-row) { - display: flex !important; - align-items: center !important; - height: 100% !important; -} - -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-dynamic-row { - display: flex !important; - align-items: center !important; - height: 100% !important; - margin: 0 !important; - padding: 0 !important; -} - -/* Override the site-wide "align-self: end" rule for just this row, and - make sure the button/icon aren't clipped by the compact height */ -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-dynamic-row > .thread-card-button { - align-self: center !important; - margin: 0 !important; - padding: 0 !important; - width: 16px !important; - height: 16px !important; - min-width: 0 !important; - min-height: 0 !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; -} - -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .twisty-icon { - display: inline-block !important; - width: 10px !important; - height: 10px !important; - margin-right: 5px !important; -} - -tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-subject-container { - align-self: center !important; -} - -/* Empty pane placeholder icon */ -#placeholderNoMessages::before { - background-image: url("Icons/mail.svg") !important; -} - -/* List header indent */ -.list-header-title { - margin-left: 10px !important; -} - - -/* ===================================================== - MESSAGE HEADER & READING PANE - ===================================================== */ - -/* Header label vertical alignment */ -.message-header-label { - align-self: center !important; -} - -#expandedtoLabel, -#expandedccLabel, -#expandedreply-toLabel { - margin-top: 3px !important; -} - -/* Recipient avatar */ -.recipient-avatar { - height: 45px !important; - width: 45px !important; - font-size: 1.3rem !important; - color: #fff !important; - background-color: #69797e !important; -} - -.recipients-list { - margin-top: 5px !important; -} - -.recipient-multi-line-name { - font-size: 1.4rem !important; -} - -/* Address book button in recipient row */ -.recipient-address-book-button { - width: 12px !important; - height: 12px !important; - mask-image: url("Icons/person.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 12px 12px !important; - mask-position: center !important; - background-color: #5aa4ef !important; -} - -.recipient-address-book-button img { - display: none !important; -} - -/* To/Cc/Reply-To headings */ -#toHeading, -#ccHeading, -#reply-toHeading { - margin-top: 5px !important; - font-weight: bolder !important; -} - -/* Info bar (e.g. remote content notice), credit jevandusen */ -.infobar.animated:not([value="maybeScam"]) { - width: 98% !important; - margin-inline: auto !important; - --message-bar-background-color: #e6f2fa !important; - margin-block-end: 10px !important; -} - -.infobar.animated:not([value="maybeScam"]) .notification-button.small-button.footer-button.button-menu-list { - background-color: #fff0 !important; - padding: 3px !important; - padding-right: 20px !important; - padding-left: 10px !important; - border: none !important; -} - -.notification-button.small-button.footer-button.button-menu-list .button-text { - margin-bottom: 3px !important; - margin-right: 1px; -} - - -/* ===================================================== - TOOLBAR ACTION BUTTONS (reply, forward, trash, etc.) - ===================================================== */ - -.toolbarbutton-1 { - background-color: #fff !important; -} - -.toolbarbutton-1:hover { - background-color: #f1f0f0 !important; -} - -.toolbarbutton-1 .toolbarbutton-icon { - box-sizing: border-box !important; - width: 18px !important; - height: 18px !important; - color: #005f99 !important; -} - -.toolbarbutton-icon { - margin-left: 5px; - margin-right: -5px; -} - -/* Borders on message header buttons */ -#messageHeader:not(.message-header-buttons-only-icons) .toolbarbutton-1.message-header-view-button:not([is="toolbarbutton-menu-button"]) { - border-color: #ececee !important; -} - -#hdrReplyAllButton, #hdrReplyListButton { - border-radius: var(--button-border-radius) !important; -} - -#hdrReplyAllButton .toolbarbutton-menubutton-button, -#hdrReplyAllButton .toolbarbutton-menubutton-dropmarker, -#hdrReplyListButton .toolbarbutton-menubutton-button, -#hdrReplyListButton .toolbarbutton-menubutton-dropmarker, -#hdrReplyListButton { - border-color: #ececee !important; -} - -#hdrReplyListButton .toolbarbutton-menubutton-button, -#hdrReplyListButton .toolbarbutton-menubutton-dropmarker { - box-sizing: border-box !important; -} - -.toolbarbutton-menu-dropmarker { - margin-right: 5px; -} - -.message-header-view-button .toolbarbutton-text { - padding-inline-start: 6px !important; - padding: 8px !important; -} - -.icons-beside-text, -.icons-only { - border-bottom: 0px solid rgba(0, 0, 0, 0.15) !important; -} - -/* "More actions" button: hide default icon, inject custom SVG via ::before */ -#otherActionsButton { - position: relative !important; - padding-left: 20px !important; -} - -#otherActionsButton .toolbarbutton-icon { - display: none; -} - -#otherActionsButton::before { - content: "" !important; - display: block !important; - position: absolute !important; - width: 16px; - height: 16px; - left: 6px; - top: 50%; - transform: translateY(-50%); - mask-image: url("Icons/more.svg") !important; - mask-repeat: no-repeat !important; - mask-size: contain !important; - background-color: #5aa4ef !important; - pointer-events: none; -} - -/* Custom masked icons for each header action button */ -#hdrReplyButton .toolbarbutton-icon, -#hdrReplyToSenderButton .toolbarbutton-icon { - list-style-image: none !important; - mask-image: url("Icons/reply.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #b566bf !important; - width: 16px !important; - height: 16px !important; -} - -#hdrReplyAllButton .toolbarbutton-icon { - list-style-image: none !important; - mask-image: url("Icons/reply-all.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #b566bf !important; - width: 16px !important; - height: 16px !important; -} - -#hdrReplyListButton .toolbarbutton-icon { - list-style-image: none !important; - mask-image: url("Icons/list-reply.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #1e8bcd !important; - width: 16px !important; - height: 16px !important; -} - -#hdrForwardButton .toolbarbutton-icon { - list-style-image: none !important; - mask-image: url("Icons/forward.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #1e8bcd !important; - width: 16px !important; - height: 16px !important; -} - -#hdrArchiveButton .toolbarbutton-icon { - list-style-image: none !important; - mask-image: url("Icons/archive.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #8785a3 !important; - width: 16px !important; - height: 16px !important; -} - -#hdrJunkButton .toolbarbutton-icon { - list-style-image: none !important; - mask-image: url("Icons/junk.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #e16060 !important; - width: 16px !important; - height: 16px !important; -} - -#hdrTrashButton .toolbarbutton-icon { - list-style-image: none !important; - mask-image: url("Icons/trash.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #8785a3 !important; - width: 16px !important; - height: 16px !important; -} - - -/* ===================================================== - SEARCH BAR - ===================================================== */ - -global-search-bar { - opacity: 0.7 !important; - padding: 5px !important; -} - -.search-button-icon { - margin-right: 5px !important; -} - - -/* ===================================================== - ADDRESS BOOK PANE - ===================================================== */ - -#booksPaneCreateList { - background-image: url("Icons/book.svg") !important; -} - -.bookRow-icon { - background-image: url("Icons/notepad-person.svg") !important; -} - -/* Remove top border on contacts list */ -#cards[rows="ab-card-row"] { - border-top: 0px solid var(--splitter-color) !important; -} - - -/* ===================================================== - TAB ICONS - ===================================================== */ - -/* Each rule replaces a Thunderbird default tab icon with a custom masked SVG */ - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/inbox.svg"] { - content: none !important; - mask-image: url("Icons/inbox.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/folder.svg"] { - content: none !important; - mask-image: url("Icons/folder.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -#folderTree li[data-folder-type="drafts"] > .container > .icon { - mask-image: url("Icons/drafts.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: var(--folder-color-draft) !important; -} - -#folderTree li[data-folder-type="sent"] > .container > .icon { - mask-image: url("Icons/sent.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: var(--folder-color-sent) !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/spam.svg"] { - content: none !important; - mask-image: url("Icons/junk.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/trash.svg"] { - content: none !important; - mask-image: url("Icons/trash.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/address-book.svg"] { - content: none !important; - mask-image: url("Icons/contact.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/tasks.svg"] { - content: none !important; - mask-image: url("Icons/tasks.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/calendar.svg"] { - content: none !important; - mask-image: url("Icons/calendar.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/chat.svg"] { - content: none !important; - mask-image: url("Icons/chat.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/settings.svg"] { - content: none !important; - mask-image: url("Icons/settings-tab.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/mail-secure.svg"] { - content: none !important; - mask-image: url("Icons/mail.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/account-settings.svg"] { - content: none !important; - mask-image: url("Icons/person-tab.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - -.tab-icon-image[src*="chrome://mozapps/skin/extensions/extension.svg"] { - content: none !important; - mask-image: url("Icons/extention.svg") !important; - mask-repeat: no-repeat !important; - mask-size: 16px 16px !important; - mask-position: center !important; - background-color: #525b65 !important; - width: 16px !important; - height: 16px !important; -} - - -/* ===================================================== - DARK MODE - ===================================================== */ - -@media (prefers-color-scheme: dark) { - - :root { - --toolbox-background-color: #202023 !important; - --toolbar-background-color: #202023 !important; - --tabs-toolbar-background-color: #202023 !important; - --lwt-accent-color: #202023 !important; - } - - :root, - body, - #messengerWindow { - background-color: #202023 !important; - } - - :root #navigation-toolbox, - :root[lwtheme] #navigation-toolbox, - :root:not([lwtheme]) #navigation-toolbox, - #navigation-toolbox, - #titlebar, - #titlebar > *, - unified-toolbar, - #unifiedToolbarContainer, - #unifiedToolbar, - #unifiedToolbarContent, - #toolbar-menubar, - #tabs-toolbar, - toolbar#tabs-toolbar, - #tabmail-tabs, - #tabmail-arrowscrollbox, - #spacesToolbar { - background-color: #202023 !important; - background-image: none !important; - border: none !important; - border-bottom: none !important; - border-block-end: none !important; - box-shadow: none !important; - } - - #messengerBody { - background-color: #1c1c1f !important; - } - - /* Custom maximise icon — dark (Windows only) */ - @media (-moz-platform: windows) { - .titlebar-max { - -moz-default-appearance: -moz-window-button-maximize; - list-style-image: url("Titlebar_Icons/maximize-dark.png") !important; - opacity: 0.9 !important; - } - } - - /* Make unread messages text lighter */ - - .unread > .container > .unread-count { - color: #7cb8fa !important; - } - - #placeholderNoMessages::before { - background-image: url("Icons/mail-dark.svg") !important; - } - - .toolbarbutton-1 { - background-color: #3a3a3a !important; - } - - .toolbarbutton-1:hover { - background-color: #272727 !important; - } - - .tabmail-tab[selected="true"] { - box-shadow: 0 2px 8px -5px #9c9c9c !important; - } - - .tab-background[selected="true"] { - background-color: #262629b8 !important; - } - - .thread-card-subject-container { - color: #d1d1d1; - font-size: 0.96rem !important; - } - - /* Notification button text/icon colour fix */ - .notification-button .button-text, - .notification-button .button-icon { - color: black !important; - fill: black !important; - filter: none !important; - opacity: 1 !important; - } - - .notification-button.button-menu-list { - stroke: #000 !important; - } - - /* Selected folder row */ - :is(ul, ol)[role="tree"] li.selected.current > .container { - border-color: #515151 !important; - background-color: #515151 !important; - } - - /* Unfocused selected card */ - #threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout.selected.current .card-container, - #threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout[data-properties~="junk"].selected.current .card-container { - background-color: #515151 !important; - border: 1px solid #1f1f1f !important; - } - - /* Focused selected card */ - [is="tree-view-table-body"] .card-layout.selected.current .card-container { - background-color: #292929 !important; - border: 1px solid #1f1f1f !important; - } - - /* Message header button borders */ - #messageHeader:not(.message-header-buttons-only-icons) .toolbarbutton-1.message-header-view-button:not([is="toolbarbutton-menu-button"]) { - border-color: #1f1f1f !important; - } - - #hdrReplyAllButton .toolbarbutton-menubutton-button, - #hdrReplyAllButton .toolbarbutton-menubutton-dropmarker, - #hdrReplyListButton .toolbarbutton-menubutton-button, - #hdrReplyListButton .toolbarbutton-menubutton-dropmarker { - border-color: #1f1f1f !important; - } - - /* Filter and display button icons — dark variants */ - #threadPaneQuickFilterButton { - background-image: url("Icons/filter-dark.svg") !important; - } - - #threadPaneDisplayButton { - background-image: url("Icons/list-dark.svg") !important; - } -} - -/* Fix cards in 2-row view */ -.card-layout:not([data-properties~="dummy"]) .thread-card-row { - min-height: 20px; -} - -.card-layout:not([data-properties~="dummy"]) .card-container { - min-height: 50px !important; -} - -/* ===================================================== - APPLE / macOS CALENDAR THEME FOR THUNDERBIRD - ===================================================== */ - -/* Base Font & Calendar Layout */ -#calendarTabPanel, -#calendarContent, -calendar-minimonth, -calendar-month-view, -calendar-week-view, -calendar-day-view, -calendar-multiweek-view { - font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important; -} - -/* 1. Left Sidebar (calSidebar) */ -#calSidebar { - background-color: #f7f7f9 !important; - border-inline-end: 1px solid rgba(0, 0, 0, 0.08) !important; - padding-left: 44px !important; -} - -#calSidebar .sidebar-panel-header { - background-color: transparent !important; - border: none !important; - padding: 10px 14px 6px 14px !important; -} - -/* New Event button styled as Apple "+" pill / button */ -#sidePanelNewEvent { - background-color: #007aff !important; - color: #ffffff !important; - border-radius: 8px !important; - border: none !important; - font-weight: 600 !important; - box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3) !important; - transition: background-color 0.15s ease !important; -} -#sidePanelNewEvent:hover { - background-color: #0062cc !important; -} - -/* Calendar list styling */ -#calendar-list-pane { - background: transparent !important; -} - -#calendarListHeader { - font-size: 0.75rem !important; - font-weight: 700 !important; - text-transform: uppercase !important; - letter-spacing: 0.5px !important; - color: #8e8e93 !important; - padding: 8px 14px 4px 14px !important; -} - -#calendar-list > li { - border-radius: 8px !important; - padding: 5px 10px !important; - margin: 2px 8px !important; - font-size: 0.88rem !important; - font-weight: 500 !important; - color: #1d1d1f !important; - transition: background-color 0.15s ease !important; -} - -#calendar-list > li:hover { - background-color: rgba(0, 0, 0, 0.05) !important; -} - -#calendar-list > li.selected { - background-color: rgba(0, 122, 255, 0.12) !important; -} - -/* Calendar Checkbox circles */ -#calendar-list > li input[type="checkbox"], -#calendar-list > li .checkbox-icon { - border-radius: 50% !important; -} - -/* 2. Mini-Month Calendar Picker (Apple style) */ -calendar-minimonth { - --mmMainBackground: transparent !important; - --mmMainBorderColor: transparent !important; - --mmDayTodayColor: #ffffff !important; - --mmDayTodayBackground: #ff3b30 !important; - --mmDayTodayBorderColor: transparent !important; - --mmDayBorderRadius: 50% !important; - --mmDaySelectedColor: #1d1d1f !important; - --mmDaySelectedBackground: rgba(0, 0, 0, 0.08) !important; - --mmDaySelectedBorderColor: transparent !important; - --mmDaySelectedTodayBackground: #ff3b30 !important; - --mmDaySelectedTodayBorderColor: transparent !important; - --mmHighlightBackground: #ff3b30 !important; - --mmHighlightColor: #ffffff !important; - padding: 0px !important; - min-inline-size: 100px !important; - max-width: 100% !important; -} - -.minimonth-day, -.minimonth-week { - padding: 2px !important; - font-size: 0.8rem !important; -} - -.minimonth-cal-box { - padding: 0 !important; -} - -.minimonth-month-box { - font-size: 0.75rem !important; - font-weight: 700 !important; - color: #1d1d1f !important; - margin-bottom: 6px !important; -} - -.minimonth-nav-btn { - padding: 0 !important; - margin: 0 !important; -} - -/* 3. Top Navigation Header & Segmented View Switcher (#calendarViewHeader) */ -#calendarViewHeader { - background-color: #ffffff !important; - border-block-end: 1px solid rgba(0, 0, 0, 0.08) !important; - padding: 10px 18px !important; - min-height: 48px !important; -} - -/* Month / Interval Title (e.g. "April 2025") */ -#intervalDescription { - font-size: 1.35rem !important; - font-weight: 700 !important; - color: #1d1d1f !important; - letter-spacing: -0.3px !important; - margin-inline-start: 12px !important; -} - -/* Navigation buttons (< Today >) */ -#calendarControls .button-group { - display: inline-flex !important; - align-items: center !important; - gap: 4px !important; -} - -#previousViewButton, -#nextViewButton { - background-color: rgba(0, 0, 0, 0.04) !important; - border: 1px solid rgba(0, 0, 0, 0.08) !important; - border-radius: 50% !important; - width: 28px !important; - height: 28px !important; - min-width: 28px !important; - min-height: 28px !important; - padding: 0 !important; - cursor: pointer !important; - transition: background-color 0.15s ease !important; -} - -#previousViewButton:hover, -#nextViewButton:hover { - background-color: rgba(0, 0, 0, 0.09) !important; -} - -#todayViewButton { - background-color: #ffffff !important; - border: 1px solid rgba(0, 0, 0, 0.15) !important; - border-radius: 6px !important; - padding: 3px 12px !important; - font-size: 0.82rem !important; - font-weight: 600 !important; - color: #1d1d1f !important; - cursor: pointer !important; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; - transition: background-color 0.15s ease !important; -} - -#todayViewButton:hover { - background-color: rgba(0, 0, 0, 0.04) !important; -} - -/* macOS Segmented Control for Views (Day | Week | Multiweek | Month) */ -#viewToggle.calview-toggle { - background-color: rgba(0, 0, 0, 0.06) !important; - border-radius: 8px !important; - padding: 2px !important; - display: inline-flex !important; - border: none !important; -} - -.calview-toggle-item { - background-color: transparent !important; - border: none !important; - border-radius: 6px !important; - padding: 4px 14px !important; - font-size: 0.82rem !important; - font-weight: 500 !important; - color: #555558 !important; - cursor: pointer !important; - transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important; -} - -.calview-toggle-item:hover { - color: #1d1d1f !important; -} - -.calview-toggle-item[aria-selected="true"] { - background-color: #ffffff !important; - color: #1d1d1f !important; - font-weight: 600 !important; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08) !important; -} - -/* 4. Calendar Main Grid & Views (#view-box) */ -#view-box { - background-color: #ffffff !important; -} - -calendar-day-view, -calendar-week-view, -calendar-multiweek-view, -calendar-month-view { - background-color: #ffffff !important; - --viewBackground: #ffffff !important; - --viewBorderColor: rgba(0, 0, 0, 0.07) !important; -} - -/* Day column headers */ -.day-column-heading { - background-color: #ffffff !important; - border-block: 1px solid rgba(0, 0, 0, 0.07) !important; - border-inline-start: 1px solid rgba(0, 0, 0, 0.07) !important; - font-size: 0.85rem !important; - font-weight: 600 !important; - color: #8e8e93 !important; - padding: 6px 4px !important; -} - -/* Today column header (macOS Red accent) */ -.day-column-today .day-column-heading { - color: #ff3b30 !important; - font-weight: 700 !important; -} - -/* Time column on the left */ -.multiday-timebar { - background-color: #ffffff !important; - border-inline-end: 1px solid rgba(0, 0, 0, 0.07) !important; -} - -.multiday-timebar-time { - font-size: 0.78rem !important; - font-weight: 500 !important; - color: #8e8e93 !important; - padding-inline-end: 8px !important; -} - -/* Grid hour lines */ -.multiday-hour-box { - border-block-end: 1px solid rgba(0, 0, 0, 0.05) !important; -} - -/* Current Time Indicator (Red line & Dot) */ -.timeIndicator { - border-block-start: 2px solid #ff3b30 !important; - opacity: 1 !important; - z-index: 10 !important; -} - -.multiday-timebar-now-indicator { - background-color: #ff3b30 !important; - border: none !important; - border-radius: 50% !important; - inline-size: 8px !important; - block-size: 8px !important; - margin-block-start: -4px !important; - z-index: 11 !important; -} - -/* 5. Event Cards (Pastel Apple Calendar style) */ -calendar-event-box:not([hidden]) { - margin-inline: 2px !important; -} - -.calendar-color-box { - min-block-size: 18px !important; - border-radius: 6px !important; - /* Soft pastel background from calendar color */ - background-color: color-mix(in srgb, var(--item-backcolor) 18%, #ffffff) !important; - color: #1d1d1f !important; - /* Vibrant solid left accent bar */ - border-inline-start: 4px solid var(--item-backcolor) !important; - border-block: 1px solid color-mix(in srgb, var(--item-backcolor) 25%, transparent) !important; - border-inline-end: 1px solid color-mix(in srgb, var(--item-backcolor) 25%, transparent) !important; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; - padding: 2px 4px !important; - transition: transform 0.1s ease, box-shadow 0.1s ease !important; -} - -.calendar-color-box:hover { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; -} - -/* Selected Event Card */ -calendar-month-day-box-item[selected="true"].calendar-color-box, -calendar-event-box[selected="true"].calendar-color-box, -calendar-editable-item[selected="true"].calendar-color-box { - background-color: color-mix(in srgb, var(--item-backcolor) 28%, #ffffff) !important; - outline: 2px solid #007aff !important; - outline-offset: -1px !important; - box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important; -} - -/* Event Title & Details */ -.event-name-label { - font-weight: 600 !important; - font-size: 0.85rem !important; - color: #1d1d1f !important; -} - -.item-time-label { - font-weight: 500 !important; - font-size: 0.78rem !important; - color: color-mix(in srgb, var(--item-backcolor) 80%, #1d1d1f) !important; -} - -.location-desc { - font-size: 0.78rem !important; - color: #6e6e73 !important; -} - -/* All-Day Events in Week/Day View */ -.allday-events-list .calendar-color-box { - border-radius: 4px !important; - border: none !important; - border-inline-start: none !important; - background-color: var(--item-backcolor) !important; - color: #ffffff !important; - font-weight: 600 !important; - padding: 2px 6px !important; - margin-block: 1px !important; -} - -/* 6. Event Info / Summary Dialog */ -#calendar-summary-dialog { - min-width: 850px !important; - max-width: 850px !important; - min-height: 800px !important; - max-height: 800px !important; - overflow: hidden !important; -} - -#calendar-summary-dialog body { - background-color: transparent !important; - padding: 0 !important; - margin: 0 !important; - overflow: hidden !important; -} - -#calendar-summary-dialog dialog { - background-color: #ffffff !important; - border: 12px solid #cde0ee !important; - border-radius: 20px !important; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; - - /* HARDCODE the exact dimensions to perfectly match the window client area! */ - width: 850px !important; - height: 800px !important; - min-width: 850px !important; - max-width: 850px !important; - min-height: 800px !important; - max-height: 800px !important; - - margin: 0 !important; - box-sizing: border-box !important; - display: flex !important; - flex-direction: column !important; - align-items: stretch !important; - overflow: hidden !important; -} - -#calendar-summary-dialog #summary-toolbox { - background-color: #f6f6f8 !important; - border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; - padding: 4px 8px !important; - flex-shrink: 0 !important; -} - -#calendar-summary-dialog #summary-toolbar { - background: transparent !important; - border: none !important; -} - -#calendar-summary-dialog #calendar-item-summary { - background-color: transparent !important; - border: none !important; - box-shadow: none !important; - padding: 14px 18px !important; - flex: 1 !important; - overflow-y: auto !important; - overflow-x: hidden !important; -} - -#calendar-summary-dialog .item-attendees-list-container, -#calendar-summary-dialog .attendees-list { - flex-wrap: wrap !important; - max-width: 100% !important; -} - -#calendar-summary-dialog .item-description-box, -#calendar-summary-dialog iframe, -#calendar-summary-dialog .item-description { - overflow: auto !important; - max-width: 100% !important; - width: 100% !important; - box-sizing: border-box !important; -} - -#calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { - background-color: #f6f6f8 !important; - border-top: 1px solid rgba(0, 0, 0, 0.08) !important; - margin: 0 !important; - padding: 10px 16px !important; - margin-top: auto !important; - flex-shrink: 0 !important; -} - -#calendar-summary-dialog-custom-button-footer button, -.calendar-invitation-panel-response-buttons button { - border-radius: 8px !important; - padding: 5px 14px !important; - font-size: 0.85rem !important; - font-weight: 500 !important; - background-color: rgba(0, 0, 0, 0.06) !important; - border: none !important; - color: #1d1d1f !important; - cursor: pointer !important; - transition: background-color 0.15s ease !important; -} - -#calendar-summary-dialog-custom-button-footer button:hover, -.calendar-invitation-panel-response-buttons button:hover { - background-color: rgba(0, 0, 0, 0.1) !important; -} - -/* 7. Dark Mode Overrides for Calendar */ -@media (prefers-color-scheme: dark) { - #calSidebar { - background-color: #1c1c1e !important; - border-inline-end: 1px solid rgba(255, 255, 255, 0.1) !important; - } - - #calendar-list > li { - color: #f5f5f7 !important; - } - - #calendar-list > li:hover { - background-color: rgba(255, 255, 255, 0.08) !important; - } - - calendar-minimonth { - --mmDaySelectedColor: #f5f5f7 !important; - --mmDaySelectedBackground: rgba(255, 255, 255, 0.15) !important; - } - - .minimonth-month-box { - color: #f5f5f7 !important; - } - - #calendarViewHeader, - #view-box, - calendar-day-view, - calendar-week-view, - calendar-multiweek-view, - calendar-month-view { - background-color: #1c1c1e !important; - --viewBackground: #1c1c1e !important; - --viewBorderColor: rgba(255, 255, 255, 0.1) !important; - } - - #calendarViewHeader { - border-block-end: 1px solid rgba(255, 255, 255, 0.1) !important; - } - - #intervalDescription { - color: #f5f5f7 !important; - } - - #viewToggle.calview-toggle { - background-color: rgba(255, 255, 255, 0.1) !important; - } - - .calview-toggle-item { - color: #a1a1a6 !important; - } - - .calview-toggle-item:hover { - color: #ffffff !important; - } - - .calview-toggle-item[aria-selected="true"] { - background-color: #2c2c2e !important; - color: #ffffff !important; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; - } - - #todayViewButton { - background-color: #2c2c2e !important; - border: 1px solid rgba(255, 255, 255, 0.15) !important; - color: #f5f5f7 !important; - } - - .day-column-heading, - .multiday-timebar { - background-color: #1c1c1e !important; - border-color: rgba(255, 255, 255, 0.08) !important; - } - - .multiday-hour-box { - border-block-end: 1px solid rgba(255, 255, 255, 0.06) !important; - } - - .calendar-color-box { - background-color: color-mix(in srgb, var(--item-backcolor) 25%, #2c2c2e) !important; - color: #f5f5f7 !important; - border-block: 1px solid color-mix(in srgb, var(--item-backcolor) 40%, transparent) !important; - border-inline-end: 1px solid color-mix(in srgb, var(--item-backcolor) 40%, transparent) !important; - } - - .event-name-label { - color: #ffffff !important; - } - - .item-time-label { - color: color-mix(in srgb, var(--item-backcolor) 60%, #ffffff) !important; - } - - .location-desc { - color: #a1a1a6 !important; - } - - #calendar-summary-dialog dialog { - background-color: #1c1c1e !important; - border-color: #202023 !important; /* The dark frame */ - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.4) !important; - } - - #calendar-summary-dialog #summary-toolbox, - #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { - background-color: #2c2c2e !important; - border-color: rgba(255, 255, 255, 0.1) !important; - } - - #calendar-summary-dialog #calendar-item-summary { - background-color: transparent !important; - color: #f5f5f7 !important; - } - - #calendar-summary-dialog-custom-button-footer button, - .calendar-invitation-panel-response-buttons button { - background-color: rgba(255, 255, 255, 0.12) !important; - color: #f5f5f7 !important; - } -} +/* FLUENTBIRD - A FLUENT DESIGN THEME FOR THUNDERBIRD */ +/* Created by Danny King - www.dannyking.co.uk */ +/* v1.1.4 RELEASE */ +/* DISTRIBUTED UNDER THE MIT LICENSE */ + +/* ===================================================== + CUSTOM OVERRIDES + If you want to make your own tweaks, you can + place your own CSS in a file named: + custom.css + in the same folder as this file. + ===================================================== */ + +@import url("custom.css"); + +/* ===================================================== + LAYOUT & WINDOW CHROME + ===================================================== */ + +:root { + --toolbox-background-color: #cde0ee !important; + --toolbar-background-color: #cde0ee !important; + --tabs-toolbar-background-color: #cde0ee !important; + --lwt-accent-color: #cde0ee !important; +} + +:root, +body, +#messengerWindow { + background-color: #cde0ee !important; +} + +/* Rounded clip on main content area with background frame */ +#messengerBody { + opacity: 1 !important; + background-color: #f1f3f4 !important; + border-radius: 12px !important; + margin: 0 8px 8px 0 !important; + overflow: hidden !important; +} + +/* Hide hamburger menu and keyboard shortcut container */ +#button-appmenu { + display: none !important; +} + +.kbd-container { + display: none !important; +} + +/* Windows titlebar button height */ +@media (-moz-platform: windows) { + :root[customtitlebar] .titlebar-button, + :root[customtitlebar] #titlebar-min, + :root[customtitlebar] #titlebar-max, + :root[customtitlebar] #titlebar-close { + height: 29px !important; + } + + /* Close button hover colour */ + :root[customtitlebar] .titlebar-close:hover { + background-color: #c42b1cfa !important; + stroke: white !important; + } + + /* Custom maximise icon — light */ + .titlebar-max { + -moz-default-appearance: -moz-window-button-maximize; + list-style-image: url("Titlebar_Icons/maximize-light.png") !important; + opacity: 0.9 !important; + } +} + + +/* ===================================================== + HEADER, UNIFIED TOOLBAR & TAB BAR + ===================================================== */ + +:root #navigation-toolbox, +:root[lwtheme] #navigation-toolbox, +:root:not([lwtheme]) #navigation-toolbox, +#navigation-toolbox, +#titlebar, +#titlebar > *, +unified-toolbar, +#unifiedToolbarContainer, +#unifiedToolbar, +#unifiedToolbarContent, +#toolbar-menubar, +#tabs-toolbar, +toolbar#tabs-toolbar, +#tabmail-tabs, +#tabmail-arrowscrollbox { + background-color: #cde0ee !important; + background-image: none !important; + border: none !important; + border-bottom: none !important; + border-block-end: none !important; + box-shadow: none !important; +} + +#tabs-toolbar { + margin-bottom: 8px !important; +} + +.tabmail-tab { + border-radius: 6px !important; +} + +.tabmail-tab[selected="true"] { + box-shadow: 0 2px 8px -5px #9c9c9c !important; +} + +.tab-background[selected="true"] { + background-color: #ffffffb8 !important; +} + +/* Remove active-tab indicator line */ +.tab-line { + height: 0px !important; +} + +#tabmail-arrowscrollbox { + margin-left: 0px !important; +} + +/* Remove stroke artifact on tab icons */ +.tab-icon-image { + stroke: #fff0 !important; +} + +/* Suppress compact-mode sort header label */ +.sort-header-details { + display: none !important; +} + + +/* ===================================================== + SPACES TOOLBAR & SIDEBAR ICONS + ===================================================== */ + +#spacesToolbar { + background-color: #cde0ee !important; + background-image: none !important; + border: 0px !important; +} + +/* Hide default icon images; replaced via background-image below */ +#mailButton img, +#addressBookButton img, +#calendarButton img, +#tasksButton img, +#chatButton img, +#settingsButton img, +#folderPaneGetMessages img { + display: none !important; +} + +#mailButton { + background-image: url("Icons/mail-col.svg") !important; + background-repeat: no-repeat !important; + background-size: 20px 20px !important; + background-position: center !important; + width: 30px !important; + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; +} + +#addressBookButton { + background-image: url("Icons/contact-col.svg") !important; + background-repeat: no-repeat !important; + background-size: 20px 20px !important; + background-position: center !important; + width: 30px !important; + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; +} + +#calendarButton { + background-image: url("Icons/calendar-col.svg") !important; + background-repeat: no-repeat !important; + background-size: 16px 16px !important; + background-position: center !important; + width: 30px !important; + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; +} + +#tasksButton { + background-image: url("Icons/tasks-col.svg") !important; + background-repeat: no-repeat !important; + background-size: 20px 20px !important; + background-position: center !important; + width: 30px !important; + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; +} + +#chatButton { + background-image: url("Icons/chat-col.svg") !important; + background-repeat: no-repeat !important; + background-size: 20px 20px !important; + background-position: center !important; + width: 30px !important; + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; +} + +#settingsButton { + background-image: url("Icons/settings.svg") !important; + background-repeat: no-repeat !important; + background-size: 20px 20px !important; + background-position: center !important; + width: 30px !important; + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important; +} + +/* Hide settings button label text */ +.settings-btn-container #settingsButton, +.settings-btn-container:hover #settingsButton { + color: #fff0 !important; +} + +#folderPaneGetMessages { + background-image: url("Icons/sync.svg") !important; + background-repeat: no-repeat !important; + background-size: 20px 20px !important; + background-position: center !important; + width: 30px !important; +} + + +/* ===================================================== + FOLDER TREE & PANE + ===================================================== */ + +#folderPane { + padding-inline-start: 46px !important; +} + +#folderPaneHeaderBar { + flex-direction: row !important; + justify-content: flex-start !important; + gap: 6px !important; +} + +#folderPaneWriteMessage { + order: 1 !important; +} + +#folderPaneGetMessages { + order: 2 !important; +} + +#folderPaneMoreButton { + order: 3 !important; + margin-inline-start: auto !important; +} + +/* Account-level row: 1 font-step larger (1.02rem), clean hierarchy */ +#folderTree li[data-server-type] > .container > .name { + font-weight: 600 !important; + font-size: 1.02rem !important; +} + +#folderTree li[data-server-type]:not(:first-of-type) > .container { + margin-top: 10px !important; +} + +/* Folder icon overrides */ +#folderTree li[data-folder-type="inbox"] > .container > .icon { + content: none !important; + mask-image: url("Icons/inbox.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #5aa4ef !important; +} +#folderTree li[data-folder-type="inbox"] > .container > .icon[style*="--icon-color"] { + background-color: var(--icon-color) !important; +} + +#folderTree li[data-folder-type="drafts"] > .container > .icon { + background-image: url("Icons/drafts.svg") !important; + background-repeat: no-repeat !important; + background-size: 16px 16px !important; + background-position: center !important; +} + +#folderTree li[data-folder-type="sent"] > .container > .icon { + background-image: url("Icons/sent.svg") !important; + background-repeat: no-repeat !important; + background-size: 16px 16px !important; + background-position: center !important; +} + +#folderTree li[data-folder-type="junk"] > .container > .icon { + mask-image: url("Icons/junk.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #df4646 !important; +} + +#folderTree li[data-folder-type="trash"] > .container > .icon { + mask-image: url("Icons/trash.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #8785a3 !important; +} + +#folderTree li[data-folder-type="archive"] > .container > .icon { + mask-image: url("Icons/archive.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #8785a3 !important; +} + +#folderTree li[data-folder-type="outbox"] > .container > .icon { + mask-image: url("Icons/outbox.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #6aadb5 !important; +} + +/* Templates Icon */ +#folderTree li[data-folder-type="templates"] > .container > .icon { + content: none !important; + mask-image: url("Icons/templates.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #21a366 !important; /* replace with your preferred colour */ +} +#folderTree li[data-folder-type="templates"] > .container > .icon[style*="--icon-color"] { + background-color: var(--icon-color) !important; +} + +/* Generic folder icon */ +#folderTree li:not([data-folder-type]) > .container > .icon { + content: none !important; + mask-image: url("Icons/folder.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #ffcc42 !important; +} + +/* Search (saved search) folder icon */ +#folderTree li[data-folder-type="virtual"] > .container > .icon { + content: none !important; + mask-image: url("Icons/folder-search.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #1da0e4 !important; +} + +#folderTree li:not([data-folder-type]) > .container > .icon[style*="--icon-color"] { + background-color: var(--icon-color) !important; +} + +/* Tag folder icons — covers ALL tags including custom ones */ +#folderTree li[data-tag-key] > .container > .icon { + display: block !important; + width: 16px !important; + height: 16px !important; + background-color: var(--icon-color) !important; + mask-image: url("Icons/ic_fluent_tag_24_filled.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; +} + +/* Override with tag back-color for the 5 built-in labels */ +#folderTree li[data-tag-key="$label1"] > .container > .icon { background-color: var(--tag-\$label1-backcolor) !important; } +#folderTree li[data-tag-key="$label2"] > .container > .icon { background-color: var(--tag-\$label2-backcolor) !important; } +#folderTree li[data-tag-key="$label3"] > .container > .icon { background-color: var(--tag-\$label3-backcolor) !important; } +#folderTree li[data-tag-key="$label4"] > .container > .icon { background-color: var(--tag-\$label4-backcolor) !important; } +#folderTree li[data-tag-key="$label5"] > .container > .icon { background-color: var(--tag-\$label5-backcolor) !important; } + +/* Mail Account Icon */ + +#folderTree li[data-server-type] > .container > .icon { + content: none !important; + list-style-image: none !important; + display: block !important; + width: 16px !important; + height: 16px !important; + mask-image: url("Icons/ic_fluent_mail_all_24_filled.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #5aa4ef !important; +} + +/* Unread count badge */ +.unread > .container > .unread-count { + display: unset !important; + background-color: #71717a00 !important; + color: #2065b0 !important; + font-size: 1.01rem !important; +} + +/* Twisty indent */ +ul[role="tree"] .container .twisty, +ol[role="tree"] .container .twisty { + margin-left: 6px !important; +} + +/* Selected row indicator offset */ +:is(ul, ol)[role="tree"] li.selected > .container::before { + transform: translateX(3px) !important; +} + +/* Selected/focused folder row */ +:is(ul, ol)[role="tree"] li.selected.current > .container { + border-color: #e1e1e1 !important; + background-color: #e1e1e1 !important; +} + +/* FIX FOR ICON CLASHES IN NAVIGATOR */ + +#folderTree li[data-folder-type="sent"] > .container > .icon { + / content: radial-gradient; / + --icon-color: #FFFFFF00 !important; +} +#folderTree li[data-folder-type="drafts"] > .container > .icon { + / content: var(--icon-draft); / + --icon-color: #FFFFFF00 !important; +} +#folderTree li[data-folder-type="inbox"] > .container > .icon { + / content: var(--icon-inbox); / + --icon-color: #FFFFFF00 !important; +} +#folderTree li[data-folder-type="trash"] > .container > .icon { + / content: var(--icon-trash); */ + --icon-color: #FFFFFF00 !important; +} +#folderTree li[data-folder-type="junk"] > .container > .icon { + content: var(--icon-spam); + --icon-color: #FFFFFF00 !important; +} +#folderTree li .icon { + content: none !important; + display: block !important; + overflow: hidden !important; +} +/* ===================================================== + THREAD PANE + ===================================================== */ + +#threadPaneHeaderBar { + border-bottom: 0px !important; +} + +/* Filter and display button icons */ +#threadPaneQuickFilterButton { + background-image: url("Icons/filter.svg") !important; +} + +#threadPaneDisplayButton, +#displayButton { + background-image: url("Icons/list.svg") !important; +} + +/* Hide thread reply count controls */ +button .replies-icon, +button .thread-replies { + display: none !important; +} + +/* Subject indent for child rows with replies */ +tr.children .thread-card-button:has(.thread-replies[data-l10n-id]) ~ .thread-card-subject-container .subject { + margin-left: 15px !important; +} + +/* Card layout spacing */ +.thread-card-dynamic-row { + gap: 0px !important; + row-gap: 0px !important; + padding-bottom: 0px !important; + margin-bottom: 0px !important; +} + +.thread-card-dynamic-row > .thread-card-button { + align-self: end !important; +} + +/* Card subject text */ +.thread-card-subject-container { + color: #606060; + font-size: 0.96rem !important; + width: 85%; +} + +/* Sender name */ +.sender { + font-size: 1.15rem !important; + font-weight: 500 !important; + margin-top: 8px !important; +} + +& .card-container .sender { + padding-inline-start: 3px !important; +} + +/* Compact sender text for short-height cards */ +tr.card-layout[style*="height: 49px"] .sender, +tr.card-layout[style*="height: 50px"] .sender { + font-size: 1rem !important; + font-weight: 500 !important; + margin-top: 5px !important; +} + +/* Child thread subject font size */ +tr.card-layout.children span.subject { + font-size: 0.95em !important; +} + +/* Unread indicator dot (hidden on read messages, Apple-blue on unread/new) */ +#threadTree[rows="thread-card"] .card-layout td .card-container .read-status { + content: var(--read-status-icon) !important; + height: var(--read-status-size) !important; + width: var(--read-status-size) !important; + fill: transparent !important; + stroke: transparent !important; + margin-left: 0 !important; +} + +#threadTree[rows="thread-card"] .card-layout:is([data-properties~="unread"], [data-properties~="new"]) td .card-container .read-status { + content: var(--icon-dot) !important; + fill: #007aff !important; + stroke: #007aff !important; +} + +@media (prefers-color-scheme: dark) { + #threadTree[rows="thread-card"] .card-layout:is([data-properties~="unread"], [data-properties~="new"]) td .card-container .read-status { + fill: #0a84ff !important; + stroke: #0a84ff !important; + } +} + +/* Unread indicator inline offset */ +#threadTree[rows="thread-card"] .card-layout td .card-container::before { + inset-inline-start: calc(var(--indicator-width) * 2 - var(--indicator-gap)) !important; +} + +/* Remove row highlight behind cards; apply highlight to card itself */ +[is="tree-view-table-body"] tr.selected.current { + background-color: transparent !important; +} + +[is="tree-view-table-body"] .card-layout.selected.current .card-container { + background-color: #cde6f7 !important; + border: 1px solid #bfbfbf !important; +} + +/* Unfocused selected card */ +#threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout.selected.current .card-container, +#threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout[data-properties~="junk"].selected.current .card-container { + background-color: #e1e1e1 !important; + border: 1px solid #bfbfbf !important; +} + +&.selected.current { + --tree-card-background: #e1e1e1; +} + +/* Selected table-layout row colour */ +tr.table-layout.selected.current { + color: #45a0ef !important; +} + +/* Twisty button position fix */ +.button.button-flat.button-reset.twisty.thread-card-button { + margin-top: -38px !important; +} + +.thread-card-icon-info { + margin-top: -15px; +} + +/* Grouped-by-sort child rows */ +tree-view[data-show-grouped-by-sort="true"] .card-layout.children { + height: 30px !important; +} + +tree-view[data-show-grouped-by-sort="true"] .card-layout.children *, +tree-view[data-show-grouped-by-sort="true"] .card-layout.children:hover, +tree-view[data-show-grouped-by-sort="true"] .card-layout.children *:hover { + background: none !important; + background-color: transparent !important; + box-shadow: none !important; + border-color: transparent !important; + color: inherit !important; + filter: none !important; + outline: none !important; + text-decoration: none !important; + transition: none !important; +} + +/* Group header row (e.g. "Today", "Yesterday") — fix missing/misplaced + twisty and vertical centering. + The "Twisty button position fix" rule above only matches buttons that + carry a .button-reset class, which current Thunderbird card twisties + don't have — so it silently never applied here. Rather than guess at + another magic offset, this rebuilds the header row as a single + flex-centered line so the twisty and label sit correctly at any row + height (compact or cozy). */ +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] td { + height: 100% !important; +} + +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .card-container { + display: flex !important; + align-items: center !important; + height: 100% !important; +} + +/* The sender/date line is empty on a header row; drop it so it stops + pushing the twisty + label line down out of the visible 30px band */ +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-row { + display: none !important; +} + +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-column:has(.thread-card-dynamic-row) { + display: flex !important; + align-items: center !important; + height: 100% !important; +} + +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-dynamic-row { + display: flex !important; + align-items: center !important; + height: 100% !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Override the site-wide "align-self: end" rule for just this row, and + make sure the button/icon aren't clipped by the compact height */ +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-dynamic-row > .thread-card-button { + align-self: center !important; + margin: 0 !important; + padding: 0 !important; + width: 16px !important; + height: 16px !important; + min-width: 0 !important; + min-height: 0 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; +} + +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .twisty-icon { + display: inline-block !important; + width: 10px !important; + height: 10px !important; + margin-right: 5px !important; +} + +tree-view[data-show-grouped-by-sort="true"] tr.card-layout[data-properties~="dummy"] .thread-card-subject-container { + align-self: center !important; +} + +/* Empty pane placeholder icon */ +#placeholderNoMessages::before { + background-image: url("Icons/mail.svg") !important; +} + +/* List header indent */ +.list-header-title { + margin-left: 10px !important; +} + + +/* ===================================================== + MESSAGE HEADER & READING PANE + ===================================================== */ + +/* Header label vertical alignment */ +.message-header-label { + align-self: center !important; +} + +#expandedtoLabel, +#expandedccLabel, +#expandedreply-toLabel { + margin-top: 3px !important; +} + +/* Recipient avatar */ +.recipient-avatar { + height: 45px !important; + width: 45px !important; + font-size: 1.3rem !important; + color: #fff !important; + background-color: #69797e !important; +} + +.recipients-list { + margin-top: 5px !important; +} + +.recipient-multi-line-name { + font-size: 1.4rem !important; +} + +/* Address book button in recipient row */ +.recipient-address-book-button { + width: 12px !important; + height: 12px !important; + mask-image: url("Icons/person.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 12px 12px !important; + mask-position: center !important; + background-color: #5aa4ef !important; +} + +.recipient-address-book-button img { + display: none !important; +} + +/* To/Cc/Reply-To headings */ +#toHeading, +#ccHeading, +#reply-toHeading { + margin-top: 5px !important; + font-weight: bolder !important; +} + +/* Info bar (e.g. remote content notice), credit jevandusen */ +.infobar.animated:not([value="maybeScam"]) { + width: 98% !important; + margin-inline: auto !important; + --message-bar-background-color: #e6f2fa !important; + margin-block-end: 10px !important; +} + +.infobar.animated:not([value="maybeScam"]) .notification-button.small-button.footer-button.button-menu-list { + background-color: #fff0 !important; + padding: 3px !important; + padding-right: 20px !important; + padding-left: 10px !important; + border: none !important; +} + +.notification-button.small-button.footer-button.button-menu-list .button-text { + margin-bottom: 3px !important; + margin-right: 1px; +} + + +/* ===================================================== + TOOLBAR ACTION BUTTONS (reply, forward, trash, etc.) + ===================================================== */ + +.toolbarbutton-1 { + background-color: #fff !important; +} + +.toolbarbutton-1:hover { + background-color: #f1f0f0 !important; +} + +.toolbarbutton-1 .toolbarbutton-icon { + box-sizing: border-box !important; + width: 18px !important; + height: 18px !important; + color: #005f99 !important; +} + +.toolbarbutton-icon { + margin-left: 5px; + margin-right: -5px; +} + +/* Borders on message header buttons */ +#messageHeader:not(.message-header-buttons-only-icons) .toolbarbutton-1.message-header-view-button:not([is="toolbarbutton-menu-button"]) { + border-color: #ececee !important; +} + +#hdrReplyAllButton, #hdrReplyListButton { + border-radius: var(--button-border-radius) !important; +} + +#hdrReplyAllButton .toolbarbutton-menubutton-button, +#hdrReplyAllButton .toolbarbutton-menubutton-dropmarker, +#hdrReplyListButton .toolbarbutton-menubutton-button, +#hdrReplyListButton .toolbarbutton-menubutton-dropmarker, +#hdrReplyListButton { + border-color: #ececee !important; +} + +#hdrReplyListButton .toolbarbutton-menubutton-button, +#hdrReplyListButton .toolbarbutton-menubutton-dropmarker { + box-sizing: border-box !important; +} + +.toolbarbutton-menu-dropmarker { + margin-right: 5px; +} + +.message-header-view-button .toolbarbutton-text { + padding-inline-start: 6px !important; + padding: 8px !important; +} + +.icons-beside-text, +.icons-only { + border-bottom: 0px solid rgba(0, 0, 0, 0.15) !important; +} + +/* "More actions" button: hide default icon, inject custom SVG via ::before */ +#otherActionsButton { + position: relative !important; + padding-left: 20px !important; +} + +#otherActionsButton .toolbarbutton-icon { + display: none; +} + +#otherActionsButton::before { + content: "" !important; + display: block !important; + position: absolute !important; + width: 16px; + height: 16px; + left: 6px; + top: 50%; + transform: translateY(-50%); + mask-image: url("Icons/more.svg") !important; + mask-repeat: no-repeat !important; + mask-size: contain !important; + background-color: #5aa4ef !important; + pointer-events: none; +} + +/* Custom masked icons for each header action button */ +#hdrReplyButton .toolbarbutton-icon, +#hdrReplyToSenderButton .toolbarbutton-icon { + list-style-image: none !important; + mask-image: url("Icons/reply.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #b566bf !important; + width: 16px !important; + height: 16px !important; +} + +#hdrReplyAllButton .toolbarbutton-icon { + list-style-image: none !important; + mask-image: url("Icons/reply-all.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #b566bf !important; + width: 16px !important; + height: 16px !important; +} + +#hdrReplyListButton .toolbarbutton-icon { + list-style-image: none !important; + mask-image: url("Icons/list-reply.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #1e8bcd !important; + width: 16px !important; + height: 16px !important; +} + +#hdrForwardButton .toolbarbutton-icon { + list-style-image: none !important; + mask-image: url("Icons/forward.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #1e8bcd !important; + width: 16px !important; + height: 16px !important; +} + +#hdrArchiveButton .toolbarbutton-icon { + list-style-image: none !important; + mask-image: url("Icons/archive.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #8785a3 !important; + width: 16px !important; + height: 16px !important; +} + +#hdrJunkButton .toolbarbutton-icon { + list-style-image: none !important; + mask-image: url("Icons/junk.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #e16060 !important; + width: 16px !important; + height: 16px !important; +} + +#hdrTrashButton .toolbarbutton-icon { + list-style-image: none !important; + mask-image: url("Icons/trash.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #8785a3 !important; + width: 16px !important; + height: 16px !important; +} + + +/* ===================================================== + SEARCH BAR + ===================================================== */ + +global-search-bar { + opacity: 0.7 !important; + padding: 5px !important; +} + +.search-button-icon { + margin-right: 5px !important; +} + + +/* ===================================================== + ADDRESS BOOK PANE + ===================================================== */ + +#booksPaneCreateList { + background-image: url("Icons/book.svg") !important; +} + +.bookRow-icon { + background-image: url("Icons/notepad-person.svg") !important; +} + +/* Remove top border on contacts list */ +#cards[rows="ab-card-row"] { + border-top: 0px solid var(--splitter-color) !important; +} + + +/* ===================================================== + TAB ICONS + ===================================================== */ + +/* Each rule replaces a Thunderbird default tab icon with a custom masked SVG */ + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/inbox.svg"] { + content: none !important; + mask-image: url("Icons/inbox.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/folder.svg"] { + content: none !important; + mask-image: url("Icons/folder.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +#folderTree li[data-folder-type="drafts"] > .container > .icon { + mask-image: url("Icons/drafts.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: var(--folder-color-draft) !important; +} + +#folderTree li[data-folder-type="sent"] > .container > .icon { + mask-image: url("Icons/sent.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: var(--folder-color-sent) !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/spam.svg"] { + content: none !important; + mask-image: url("Icons/junk.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/trash.svg"] { + content: none !important; + mask-image: url("Icons/trash.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/address-book.svg"] { + content: none !important; + mask-image: url("Icons/contact.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/tasks.svg"] { + content: none !important; + mask-image: url("Icons/tasks.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/calendar.svg"] { + content: none !important; + mask-image: url("Icons/calendar.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/chat.svg"] { + content: none !important; + mask-image: url("Icons/chat.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/settings.svg"] { + content: none !important; + mask-image: url("Icons/settings-tab.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/mail-secure.svg"] { + content: none !important; + mask-image: url("Icons/mail.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://messenger/skin/icons/new/compact/account-settings.svg"] { + content: none !important; + mask-image: url("Icons/person-tab.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + +.tab-icon-image[src*="chrome://mozapps/skin/extensions/extension.svg"] { + content: none !important; + mask-image: url("Icons/extention.svg") !important; + mask-repeat: no-repeat !important; + mask-size: 16px 16px !important; + mask-position: center !important; + background-color: #525b65 !important; + width: 16px !important; + height: 16px !important; +} + + +/* ===================================================== + DARK MODE + ===================================================== */ + +@media (prefers-color-scheme: dark) { + + :root { + --toolbox-background-color: #202023 !important; + --toolbar-background-color: #202023 !important; + --tabs-toolbar-background-color: #202023 !important; + --lwt-accent-color: #202023 !important; + } + + :root, + body, + #messengerWindow { + background-color: #202023 !important; + } + + :root #navigation-toolbox, + :root[lwtheme] #navigation-toolbox, + :root:not([lwtheme]) #navigation-toolbox, + #navigation-toolbox, + #titlebar, + #titlebar > *, + unified-toolbar, + #unifiedToolbarContainer, + #unifiedToolbar, + #unifiedToolbarContent, + #toolbar-menubar, + #tabs-toolbar, + toolbar#tabs-toolbar, + #tabmail-tabs, + #tabmail-arrowscrollbox, + #spacesToolbar { + background-color: #202023 !important; + background-image: none !important; + border: none !important; + border-bottom: none !important; + border-block-end: none !important; + box-shadow: none !important; + } + + #messengerBody { + background-color: #1c1c1f !important; + } + + /* Custom maximise icon — dark (Windows only) */ + @media (-moz-platform: windows) { + .titlebar-max { + -moz-default-appearance: -moz-window-button-maximize; + list-style-image: url("Titlebar_Icons/maximize-dark.png") !important; + opacity: 0.9 !important; + } + } + + /* Make unread messages text lighter */ + + .unread > .container > .unread-count { + color: #7cb8fa !important; + } + + #placeholderNoMessages::before { + background-image: url("Icons/mail-dark.svg") !important; + } + + .toolbarbutton-1 { + background-color: #3a3a3a !important; + } + + .toolbarbutton-1:hover { + background-color: #272727 !important; + } + + .tabmail-tab[selected="true"] { + box-shadow: 0 2px 8px -5px #9c9c9c !important; + } + + .tab-background[selected="true"] { + background-color: #262629b8 !important; + } + + .thread-card-subject-container { + color: #d1d1d1; + font-size: 0.96rem !important; + } + + /* Notification button text/icon colour fix */ + .notification-button .button-text, + .notification-button .button-icon { + color: black !important; + fill: black !important; + filter: none !important; + opacity: 1 !important; + } + + .notification-button.button-menu-list { + stroke: #000 !important; + } + + /* Selected folder row */ + :is(ul, ol)[role="tree"] li.selected.current > .container { + border-color: #515151 !important; + background-color: #515151 !important; + } + + /* Unfocused selected card */ + #threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout.selected.current .card-container, + #threadTree[rows="thread-card"]:not(:focus, :focus-within) .card-layout[data-properties~="junk"].selected.current .card-container { + background-color: #515151 !important; + border: 1px solid #1f1f1f !important; + } + + /* Focused selected card */ + [is="tree-view-table-body"] .card-layout.selected.current .card-container { + background-color: #292929 !important; + border: 1px solid #1f1f1f !important; + } + + /* Message header button borders */ + #messageHeader:not(.message-header-buttons-only-icons) .toolbarbutton-1.message-header-view-button:not([is="toolbarbutton-menu-button"]) { + border-color: #1f1f1f !important; + } + + #hdrReplyAllButton .toolbarbutton-menubutton-button, + #hdrReplyAllButton .toolbarbutton-menubutton-dropmarker, + #hdrReplyListButton .toolbarbutton-menubutton-button, + #hdrReplyListButton .toolbarbutton-menubutton-dropmarker { + border-color: #1f1f1f !important; + } + + /* Filter and display button icons — dark variants */ + #threadPaneQuickFilterButton { + background-image: url("Icons/filter-dark.svg") !important; + } + + #threadPaneDisplayButton { + background-image: url("Icons/list-dark.svg") !important; + } +} + +/* Fix cards in 2-row view */ +.card-layout:not([data-properties~="dummy"]) .thread-card-row { + min-height: 20px; +} + +.card-layout:not([data-properties~="dummy"]) .card-container { + min-height: 50px !important; +} + +/* ===================================================== + APPLE / macOS CALENDAR THEME FOR THUNDERBIRD + ===================================================== */ + +/* Base Font & Calendar Layout */ +#calendarTabPanel, +#calendarContent, +calendar-minimonth, +calendar-month-view, +calendar-week-view, +calendar-day-view, +calendar-multiweek-view { + font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important; +} + +/* 1. Left Sidebar (calSidebar) */ +#calSidebar { + background-color: #f7f7f9 !important; + border-inline-end: 1px solid rgba(0, 0, 0, 0.08) !important; + padding-left: 44px !important; +} + +#calSidebar .sidebar-panel-header { + background-color: transparent !important; + border: none !important; + padding: 10px 14px 6px 14px !important; +} + +/* New Event button styled as Apple "+" pill / button */ +#sidePanelNewEvent { + background-color: #007aff !important; + color: #ffffff !important; + border-radius: 8px !important; + border: none !important; + font-weight: 600 !important; + box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3) !important; + transition: background-color 0.15s ease !important; +} +#sidePanelNewEvent:hover { + background-color: #0062cc !important; +} + +/* Calendar list styling */ +#calendar-list-pane { + background: transparent !important; +} + +#calendarListHeader { + font-size: 0.75rem !important; + font-weight: 700 !important; + text-transform: uppercase !important; + letter-spacing: 0.5px !important; + color: #8e8e93 !important; + padding: 8px 14px 4px 14px !important; +} + +#calendar-list > li { + border-radius: 8px !important; + padding: 5px 10px !important; + margin: 2px 8px !important; + font-size: 0.88rem !important; + font-weight: 500 !important; + color: #1d1d1f !important; + transition: background-color 0.15s ease !important; +} + +#calendar-list > li:hover { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +#calendar-list > li.selected { + background-color: rgba(0, 122, 255, 0.12) !important; +} + +/* Calendar Checkbox circles */ +#calendar-list > li input[type="checkbox"], +#calendar-list > li .checkbox-icon { + border-radius: 50% !important; +} + +/* 2. Mini-Month Calendar Picker (Apple style) */ +calendar-minimonth { + --mmMainBackground: transparent !important; + --mmMainBorderColor: transparent !important; + --mmDayTodayColor: #ffffff !important; + --mmDayTodayBackground: #ff3b30 !important; + --mmDayTodayBorderColor: transparent !important; + --mmDayBorderRadius: 50% !important; + --mmDaySelectedColor: #1d1d1f !important; + --mmDaySelectedBackground: rgba(0, 0, 0, 0.08) !important; + --mmDaySelectedBorderColor: transparent !important; + --mmDaySelectedTodayBackground: #ff3b30 !important; + --mmDaySelectedTodayBorderColor: transparent !important; + --mmHighlightBackground: #ff3b30 !important; + --mmHighlightColor: #ffffff !important; + padding: 0px !important; + min-inline-size: 100px !important; + max-width: 100% !important; +} + +.minimonth-day, +.minimonth-week { + padding: 2px !important; + font-size: 0.8rem !important; +} + +.minimonth-cal-box { + padding: 0 !important; +} + +.minimonth-month-box { + font-size: 0.75rem !important; + font-weight: 700 !important; + color: #1d1d1f !important; + margin-bottom: 6px !important; +} + +.minimonth-nav-btn { + padding: 0 !important; + margin: 0 !important; +} + +/* 3. Top Navigation Header & Segmented View Switcher (#calendarViewHeader) */ +#calendarViewHeader { + background-color: #ffffff !important; + border-block-end: 1px solid rgba(0, 0, 0, 0.08) !important; + padding: 10px 18px !important; + min-height: 48px !important; +} + +/* Month / Interval Title (e.g. "April 2025") */ +#intervalDescription { + font-size: 1.35rem !important; + font-weight: 700 !important; + color: #1d1d1f !important; + letter-spacing: -0.3px !important; + margin-inline-start: 12px !important; +} + +/* Navigation buttons (< Today >) */ +#calendarControls .button-group { + display: inline-flex !important; + align-items: center !important; + gap: 4px !important; +} + +#previousViewButton, +#nextViewButton { + background-color: rgba(0, 0, 0, 0.04) !important; + border: 1px solid rgba(0, 0, 0, 0.08) !important; + border-radius: 50% !important; + width: 28px !important; + height: 28px !important; + min-width: 28px !important; + min-height: 28px !important; + padding: 0 !important; + cursor: pointer !important; + transition: background-color 0.15s ease !important; +} + +#previousViewButton:hover, +#nextViewButton:hover { + background-color: rgba(0, 0, 0, 0.09) !important; +} + +#todayViewButton { + background-color: #ffffff !important; + border: 1px solid rgba(0, 0, 0, 0.15) !important; + border-radius: 6px !important; + padding: 3px 12px !important; + font-size: 0.82rem !important; + font-weight: 600 !important; + color: #1d1d1f !important; + cursor: pointer !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; + transition: background-color 0.15s ease !important; +} + +#todayViewButton:hover { + background-color: rgba(0, 0, 0, 0.04) !important; +} + +/* macOS Segmented Control for Views (Day | Week | Multiweek | Month) */ +#viewToggle.calview-toggle { + background-color: rgba(0, 0, 0, 0.06) !important; + border-radius: 8px !important; + padding: 2px !important; + display: inline-flex !important; + border: none !important; +} + +.calview-toggle-item { + background-color: transparent !important; + border: none !important; + border-radius: 6px !important; + padding: 4px 14px !important; + font-size: 0.82rem !important; + font-weight: 500 !important; + color: #555558 !important; + cursor: pointer !important; + transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important; +} + +.calview-toggle-item:hover { + color: #1d1d1f !important; +} + +.calview-toggle-item[aria-selected="true"] { + background-color: #ffffff !important; + color: #1d1d1f !important; + font-weight: 600 !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08) !important; +} + +/* 4. Calendar Main Grid & Views (#view-box) */ +#view-box { + background-color: #ffffff !important; +} + +calendar-day-view, +calendar-week-view, +calendar-multiweek-view, +calendar-month-view { + background-color: #ffffff !important; + --viewBackground: #ffffff !important; + --viewBorderColor: rgba(0, 0, 0, 0.07) !important; +} + +/* Day column headers */ +.day-column-heading { + background-color: #ffffff !important; + border-block: 1px solid rgba(0, 0, 0, 0.07) !important; + border-inline-start: 1px solid rgba(0, 0, 0, 0.07) !important; + font-size: 0.85rem !important; + font-weight: 600 !important; + color: #8e8e93 !important; + padding: 6px 4px !important; +} + +/* Today column header (macOS Red accent) */ +.day-column-today .day-column-heading { + color: #ff3b30 !important; + font-weight: 700 !important; +} + +/* Time column on the left */ +.multiday-timebar { + background-color: #ffffff !important; + border-inline-end: 1px solid rgba(0, 0, 0, 0.07) !important; +} + +.multiday-timebar-time { + font-size: 0.78rem !important; + font-weight: 500 !important; + color: #8e8e93 !important; + padding-inline-end: 8px !important; +} + +/* Grid hour lines */ +.multiday-hour-box { + border-block-end: 1px solid rgba(0, 0, 0, 0.05) !important; +} + +/* Current Time Indicator (Red line & Dot) */ +.timeIndicator { + border-block-start: 2px solid #ff3b30 !important; + opacity: 1 !important; + z-index: 10 !important; +} + +.multiday-timebar-now-indicator { + background-color: #ff3b30 !important; + border: none !important; + border-radius: 50% !important; + inline-size: 8px !important; + block-size: 8px !important; + margin-block-start: -4px !important; + z-index: 11 !important; +} + +/* 5. Event Cards (Pastel Apple Calendar style) */ +calendar-event-box:not([hidden]) { + margin-inline: 2px !important; +} + +.calendar-color-box { + min-block-size: 18px !important; + border-radius: 6px !important; + /* Soft pastel background from calendar color */ + background-color: color-mix(in srgb, var(--item-backcolor) 18%, #ffffff) !important; + color: #1d1d1f !important; + /* Vibrant solid left accent bar */ + border-inline-start: 4px solid var(--item-backcolor) !important; + border-block: 1px solid color-mix(in srgb, var(--item-backcolor) 25%, transparent) !important; + border-inline-end: 1px solid color-mix(in srgb, var(--item-backcolor) 25%, transparent) !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; + padding: 2px 4px !important; + transition: transform 0.1s ease, box-shadow 0.1s ease !important; +} + +.calendar-color-box:hover { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; +} + +/* Selected Event Card */ +calendar-month-day-box-item[selected="true"].calendar-color-box, +calendar-event-box[selected="true"].calendar-color-box, +calendar-editable-item[selected="true"].calendar-color-box { + background-color: color-mix(in srgb, var(--item-backcolor) 28%, #ffffff) !important; + outline: 2px solid #007aff !important; + outline-offset: -1px !important; + box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important; +} + +/* Event Title & Details */ +.event-name-label { + font-weight: 600 !important; + font-size: 0.85rem !important; + color: #1d1d1f !important; +} + +.item-time-label { + font-weight: 500 !important; + font-size: 0.78rem !important; + color: color-mix(in srgb, var(--item-backcolor) 80%, #1d1d1f) !important; +} + +.location-desc { + font-size: 0.78rem !important; + color: #6e6e73 !important; +} + +/* All-Day Events in Week/Day View */ +.allday-events-list .calendar-color-box { + border-radius: 4px !important; + border: none !important; + border-inline-start: none !important; + background-color: var(--item-backcolor) !important; + color: #ffffff !important; + font-weight: 600 !important; + padding: 2px 6px !important; + margin-block: 1px !important; +} + +/* 6. Event Info / Summary Dialog */ +#calendar-summary-dialog { + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; + overflow: hidden !important; +} + +#calendar-summary-dialog body { + background-color: transparent !important; + padding: 0 !important; + margin: 0 !important; + overflow: hidden !important; +} + +#calendar-summary-dialog dialog { + background-color: #ffffff !important; + border: 12px solid #cde0ee !important; + border-radius: 20px !important; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; + + /* HARDCODE the exact dimensions to perfectly match the window client area! */ + width: 850px !important; + height: 800px !important; + min-width: 850px !important; + max-width: 850px !important; + min-height: 800px !important; + max-height: 800px !important; + + margin: 0 !important; + box-sizing: border-box !important; + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + overflow: hidden !important; +} + +#calendar-summary-dialog #summary-toolbox { + background-color: #f6f6f8 !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; + padding: 4px 8px !important; + flex-shrink: 0 !important; +} + +#calendar-summary-dialog #summary-toolbar { + background: transparent !important; + border: none !important; +} + +#calendar-summary-dialog #calendar-item-summary { + background-color: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 14px 18px !important; + flex: 1 !important; + overflow-y: auto !important; + overflow-x: hidden !important; + box-sizing: border-box !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; +} + +#calendar-summary-dialog .item-summary-box, +#calendar-summary-dialog .item-attendees-description, +#calendar-summary-dialog .item-description-box { + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box !important; +} + +#calendar-summary-dialog .item-attendees-list-container, +#calendar-summary-dialog .attendees-list { + flex-wrap: wrap !important; + max-width: 100% !important; + width: 100% !important; + box-sizing: border-box !important; +} + +#calendar-summary-dialog .calendar-summary-table { + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; +} + +#calendar-summary-dialog .item-description-box, +#calendar-summary-dialog iframe, +#calendar-summary-dialog .item-description { + overflow: auto !important; + max-width: 100% !important; + width: 100% !important; + box-sizing: border-box !important; +} + +#calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { + background-color: #f6f6f8 !important; + border-top: 1px solid rgba(0, 0, 0, 0.08) !important; + margin: 0 !important; + padding: 10px 16px !important; + margin-top: auto !important; + flex-shrink: 0 !important; +} + +#calendar-summary-dialog-custom-button-footer button, +.calendar-invitation-panel-response-buttons button { + border-radius: 8px !important; + padding: 5px 14px !important; + font-size: 0.85rem !important; + font-weight: 500 !important; + background-color: rgba(0, 0, 0, 0.06) !important; + border: none !important; + color: #1d1d1f !important; + cursor: pointer !important; + transition: background-color 0.15s ease !important; +} + +#calendar-summary-dialog-custom-button-footer button:hover, +.calendar-invitation-panel-response-buttons button:hover { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* 7. Dark Mode Overrides for Calendar */ +@media (prefers-color-scheme: dark) { + #calSidebar { + background-color: #1c1c1e !important; + border-inline-end: 1px solid rgba(255, 255, 255, 0.1) !important; + } + + #calendar-list > li { + color: #f5f5f7 !important; + } + + #calendar-list > li:hover { + background-color: rgba(255, 255, 255, 0.08) !important; + } + + calendar-minimonth { + --mmDaySelectedColor: #f5f5f7 !important; + --mmDaySelectedBackground: rgba(255, 255, 255, 0.15) !important; + } + + .minimonth-month-box { + color: #f5f5f7 !important; + } + + #calendarViewHeader, + #view-box, + calendar-day-view, + calendar-week-view, + calendar-multiweek-view, + calendar-month-view { + background-color: #1c1c1e !important; + --viewBackground: #1c1c1e !important; + --viewBorderColor: rgba(255, 255, 255, 0.1) !important; + } + + #calendarViewHeader { + border-block-end: 1px solid rgba(255, 255, 255, 0.1) !important; + } + + #intervalDescription { + color: #f5f5f7 !important; + } + + #viewToggle.calview-toggle { + background-color: rgba(255, 255, 255, 0.1) !important; + } + + .calview-toggle-item { + color: #a1a1a6 !important; + } + + .calview-toggle-item:hover { + color: #ffffff !important; + } + + .calview-toggle-item[aria-selected="true"] { + background-color: #2c2c2e !important; + color: #ffffff !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; + } + + #todayViewButton { + background-color: #2c2c2e !important; + border: 1px solid rgba(255, 255, 255, 0.15) !important; + color: #f5f5f7 !important; + } + + .day-column-heading, + .multiday-timebar { + background-color: #1c1c1e !important; + border-color: rgba(255, 255, 255, 0.08) !important; + } + + .multiday-hour-box { + border-block-end: 1px solid rgba(255, 255, 255, 0.06) !important; + } + + .calendar-color-box { + background-color: color-mix(in srgb, var(--item-backcolor) 25%, #2c2c2e) !important; + color: #f5f5f7 !important; + border-block: 1px solid color-mix(in srgb, var(--item-backcolor) 40%, transparent) !important; + border-inline-end: 1px solid color-mix(in srgb, var(--item-backcolor) 40%, transparent) !important; + } + + .event-name-label { + color: #ffffff !important; + } + + .item-time-label { + color: color-mix(in srgb, var(--item-backcolor) 60%, #ffffff) !important; + } + + .location-desc { + color: #a1a1a6 !important; + } + + #calendar-summary-dialog dialog { + background-color: #1c1c1e !important; + border-color: #202023 !important; /* The dark frame */ + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.4) !important; + } + + #calendar-summary-dialog #summary-toolbox, + #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { + background-color: #2c2c2e !important; + border-color: rgba(255, 255, 255, 0.1) !important; + } + + #calendar-summary-dialog #calendar-item-summary { + background-color: transparent !important; + color: #f5f5f7 !important; + } + + #calendar-summary-dialog-custom-button-footer button, + .calendar-invitation-panel-response-buttons button { + background-color: rgba(255, 255, 255, 0.12) !important; + color: #f5f5f7 !important; + } +} /* ===================================================== CALENDAR EVENT TOOLTIP (hover preview) From 287df66a30ffc6c2501c27fd85cd54b6560bdc64 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 14:17:17 +0200 Subject: [PATCH 35/49] fix(dialog): Widen summary dialog to 950px to eliminate horizontal scrollbar and ensure border visibility --- userChrome.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 04e02c4..deda240 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1599,8 +1599,8 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { - min-width: 850px !important; - max-width: 850px !important; + min-width: 950px !important; + max-width: 950px !important; min-height: 800px !important; max-height: 800px !important; overflow: hidden !important; @@ -1620,10 +1620,10 @@ calendar-editable-item[selected="true"].calendar-color-box { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important; /* HARDCODE the exact dimensions to perfectly match the window client area! */ - width: 850px !important; + width: 950px !important; height: 800px !important; - min-width: 850px !important; - max-width: 850px !important; + min-width: 950px !important; + max-width: 950px !important; min-height: 800px !important; max-height: 800px !important; From 33489204338868bd333b2f44c803e0d7c0233b93 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 14:22:28 +0200 Subject: [PATCH 36/49] fix(content): Allow long URLs in description iframe to wrap and eliminate horizontal scrollbar --- userContent.css | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/userContent.css b/userContent.css index ef488b8..f5e1d30 100644 --- a/userContent.css +++ b/userContent.css @@ -2,17 +2,25 @@ @-moz-document url-prefix("about:blank") { html, body { - overflow: auto !important; + overflow-x: hidden !important; + overflow-y: auto !important; + margin: 0 !important; + padding: 4px !important; + box-sizing: border-box !important; + width: 100% !important; + max-width: 100% !important; } * { - overflow: visible !important; + box-sizing: border-box !important; + max-width: 100% !important; } - table, tr, td, div, p, span { - max-width: none !important; + p, div, span, a { + overflow-wrap: break-word !important; + word-break: break-word !important; + white-space: normal !important; } a { - max-width: none !important; - white-space: nowrap !important; + word-break: break-all !important; } } From 4acc51bf110353aaa745870820688d8442ae026f Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 14:37:18 +0200 Subject: [PATCH 37/49] fix(description): Override 4px iframe margin with 0 and overflow-x hidden to eliminate 8px overflow --- userChrome.css | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index deda240..df6696f 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1685,9 +1685,20 @@ calendar-editable-item[selected="true"].calendar-color-box { } #calendar-summary-dialog .item-description-box, -#calendar-summary-dialog iframe, -#calendar-summary-dialog .item-description { - overflow: auto !important; +#calendar-event-summary-dialog .item-description-box, +#calendar-task-summary-dialog .item-description-box { + overflow-x: hidden !important; + overflow-y: auto !important; + max-width: 100% !important; + width: 100% !important; + box-sizing: border-box !important; +} + +#calendar-summary-dialog .item-description, +#calendar-event-summary-dialog .item-description, +#calendar-task-summary-dialog .item-description, +#calendar-summary-dialog iframe.item-description { + margin: 2px 0 0 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; From 74f1c3aefc63f2284752278da5022c8deefbdae7 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 14:47:17 +0200 Subject: [PATCH 38/49] fix(addons): Add 48px padding-inline-start to Add-ons & Themes sidebar to clear Spaces Toolbar --- userChrome.css | 3 ++- userContent.css | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index df6696f..30d9dee 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1937,7 +1937,8 @@ calendar-editable-item[selected="true"].calendar-color-box { ===================================================== */ #pref-category-box, -#accountTreeBox { +#accountTreeBox, +#sidebar:has(categories-box) { padding-inline-start: 48px !important; } diff --git a/userContent.css b/userContent.css index f5e1d30..b367f73 100644 --- a/userContent.css +++ b/userContent.css @@ -58,4 +58,15 @@ } } +/* Add-ons and Themes (about:addons) Sidebar Spacing */ +@-moz-document url-prefix("about:addons"), url-prefix("chrome://mozapps/content/extensions/aboutaddons.html") { + :root { + --sidebar-width: calc(var(--size-sidebar, 200px) + 48px) !important; + } + #sidebar { + padding-inline-start: 48px !important; + box-sizing: border-box !important; + } +} + From 8bae9a80e74897abb9dc9114026e6c4ea19113cd Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 14:55:51 +0200 Subject: [PATCH 39/49] fix(theme): Add dark mode styles and responsive max-width to summary dialog --- userChrome.css | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index 30d9dee..4b64ef3 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1599,8 +1599,8 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { - min-width: 950px !important; - max-width: 950px !important; + min-width: min(950px, 98vw) !important; + max-width: min(950px, 98vw) !important; min-height: 800px !important; max-height: 800px !important; overflow: hidden !important; @@ -1622,8 +1622,8 @@ calendar-editable-item[selected="true"].calendar-color-box { /* HARDCODE the exact dimensions to perfectly match the window client area! */ width: 950px !important; height: 800px !important; - min-width: 950px !important; - max-width: 950px !important; + min-width: min(950px, 98vw) !important; + max-width: min(950px, 98vw) !important; min-height: 800px !important; max-height: 800px !important; @@ -1804,6 +1804,26 @@ calendar-editable-item[selected="true"].calendar-color-box { border-color: rgba(255, 255, 255, 0.08) !important; } + /* Summary Dialog Dark Mode */ + #calendar-summary-dialog dialog { + background-color: #242426 !important; + border: 12px solid #2e3a47 !important; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important; + color: #f5f5f7 !important; + } + + #calendar-summary-dialog #summary-toolbox, + #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer { + background-color: #1c1c1e !important; + border-color: rgba(255, 255, 255, 0.1) !important; + } + + #calendar-summary-dialog #calendar-summary-dialog-custom-button-footer button, + .calendar-invitation-panel-response-buttons button { + background-color: rgba(255, 255, 255, 0.1) !important; + color: #f5f5f7 !important; + } + .multiday-hour-box { border-block-end: 1px solid rgba(255, 255, 255, 0.06) !important; } From 01a83426d8dec882a61a194fe790f08fa60ba954 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Sat, 29 Aug 2026 14:59:21 +0200 Subject: [PATCH 40/49] fix(dialog): Revert min(950px, 98vw) to fixed 950px to prevent dialog collapse into vertical strip --- userChrome.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index 4b64ef3..1d5c5d4 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1599,8 +1599,8 @@ calendar-editable-item[selected="true"].calendar-color-box { /* 6. Event Info / Summary Dialog */ #calendar-summary-dialog { - min-width: min(950px, 98vw) !important; - max-width: min(950px, 98vw) !important; + min-width: 950px !important; + max-width: 950px !important; min-height: 800px !important; max-height: 800px !important; overflow: hidden !important; @@ -1622,8 +1622,8 @@ calendar-editable-item[selected="true"].calendar-color-box { /* HARDCODE the exact dimensions to perfectly match the window client area! */ width: 950px !important; height: 800px !important; - min-width: min(950px, 98vw) !important; - max-width: min(950px, 98vw) !important; + min-width: 950px !important; + max-width: 950px !important; min-height: 800px !important; max-height: 800px !important; From 28d8c0d4cdc5415fe78c8b4a239d5558b07a1739 Mon Sep 17 00:00:00 2001 From: Andras Papp Date: Sat, 29 Aug 2026 15:18:10 +0200 Subject: [PATCH 41/49] fix(ui): Align spaces toolbar icons with messengerBody top and hide archives folder --- custom.css | 7 ++++++- userChrome.css | 4 ++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/custom.css b/custom.css index fb33d63..b2b515c 100644 --- a/custom.css +++ b/custom.css @@ -4,4 +4,9 @@ - Window & Tabs background: #cde0ee - Spaces Toolbar background: #cde0ee - Messenger Body background: #f1f3f4 (opacity 1.0) -*/ \ No newline at end of file +*/ + +/* Hide Archives folder from folder tree */ +#folderTree li[data-folder-type="archive"] { + display: none !important; +} \ No newline at end of file diff --git a/userChrome.css b/userChrome.css index 1d5c5d4..1933c54 100644 --- a/userChrome.css +++ b/userChrome.css @@ -145,6 +145,10 @@ toolbar#tabs-toolbar, border: 0px !important; } +#spacesToolbar .spaces-toolbar-top-container { + margin-top: 91px !important; +} + /* Hide default icon images; replaced via background-image below */ #mailButton img, #addressBookButton img, From fe60be3bf144b9624be7c6fb0d0f508fa4bc088b Mon Sep 17 00:00:00 2001 From: Andras Papp Date: Sat, 29 Aug 2026 15:27:47 +0200 Subject: [PATCH 42/49] feat(tabs): Implement macOS style active tab card with Apple blue accent indicator line --- userChrome.css | 83 +++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 76 insertions(+), 7 deletions(-) diff --git a/userChrome.css b/userChrome.css index 1933c54..c156768 100644 --- a/userChrome.css +++ b/userChrome.css @@ -104,22 +104,57 @@ toolbar#tabs-toolbar, } .tabmail-tab { - border-radius: 6px !important; + border-radius: 8px !important; + transition: background-color 0.15s ease, color 0.15s ease !important; } +/* Active tab (macOS style): solid white card with subtle shadow, bold text and Apple blue accent line */ .tabmail-tab[selected="true"] { - box-shadow: 0 2px 8px -5px #9c9c9c !important; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important; } .tab-background[selected="true"] { - background-color: #ffffffb8 !important; + background-color: #ffffff !important; + background-image: none !important; + border-radius: 8px !important; +} + +.tabmail-tab[selected="true"] .tab-label, +.tabmail-tab[selected="true"] .tab-text { + font-weight: 700 !important; + color: #0f172a !important; +} + +/* Active-tab Apple blue accent indicator line */ +.tab-line[selected="true"] { + height: 3px !important; + background-color: #007aff !important; + border-radius: 2px !important; + margin: 2px 8px 0 8px !important; + opacity: 1 !important; } -/* Remove active-tab indicator line */ -.tab-line { +.tab-line:not([selected="true"]) { height: 0px !important; } +/* Inactive tabs: muted text, subtle hover */ +.tabmail-tab:not([selected="true"]) .tab-label, +.tabmail-tab:not([selected="true"]) .tab-text { + color: #334155 !important; + opacity: 0.75 !important; +} + +.tabmail-tab:hover:not([selected="true"]) .tab-background { + background-color: rgba(255, 255, 255, 0.45) !important; + border-radius: 8px !important; +} + +.tabmail-tab:hover:not([selected="true"]) .tab-label, +.tabmail-tab:hover:not([selected="true"]) .tab-text { + opacity: 1 !important; +} + #tabmail-arrowscrollbox { margin-left: 0px !important; } @@ -1181,12 +1216,46 @@ global-search-bar { background-color: #272727 !important; } + /* Active tab (macOS style in dark mode) */ .tabmail-tab[selected="true"] { - box-shadow: 0 2px 8px -5px #9c9c9c !important; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } .tab-background[selected="true"] { - background-color: #262629b8 !important; + background-color: #2c2c30 !important; + background-image: none !important; + border-radius: 8px !important; + } + + .tabmail-tab[selected="true"] .tab-label, + .tabmail-tab[selected="true"] .tab-text { + font-weight: 700 !important; + color: #ffffff !important; + } + + /* Active-tab Apple blue indicator line in dark mode */ + .tab-line[selected="true"] { + height: 3px !important; + background-color: #0a84ff !important; + border-radius: 2px !important; + margin: 2px 8px 0 8px !important; + opacity: 1 !important; + } + + .tabmail-tab:not([selected="true"]) .tab-label, + .tabmail-tab:not([selected="true"]) .tab-text { + color: #94a3b8 !important; + opacity: 0.75 !important; + } + + .tabmail-tab:hover:not([selected="true"]) .tab-background { + background-color: rgba(255, 255, 255, 0.08) !important; + border-radius: 8px !important; + } + + .tabmail-tab:hover:not([selected="true"]) .tab-label, + .tabmail-tab:hover:not([selected="true"]) .tab-text { + opacity: 1 !important; } .thread-card-subject-container { From 7253c37369bebe0ac78da3a1d861cc9bdea23ddf Mon Sep 17 00:00:00 2001 From: Andras Papp Date: Sun, 30 Aug 2026 18:37:23 +0200 Subject: [PATCH 43/49] fix(spacing): Add sidebar clearance for single message tabs and address book tabs --- userContent.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/userContent.css b/userContent.css index b367f73..b5ccdc0 100644 --- a/userContent.css +++ b/userContent.css @@ -69,4 +69,21 @@ } } +/* Message Tab (Single Message View) Sidebar Spacing */ +@-moz-document url-prefix("about:message"), url-prefix("chrome://messenger/content/messenger/aboutMessage.xhtml") { + #messagepaneboxwrapper { + padding-inline-start: 48px !important; + box-sizing: border-box !important; + } +} + +/* Address Book Tab Sidebar Spacing */ +@-moz-document url-prefix("about:addressbook"), url-prefix("chrome://messenger/content/messenger/addressbook/aboutAddressBook.xhtml") { + #booksPane { + padding-inline-start: 48px !important; + box-sizing: border-box !important; + } +} + + From b2a0098bc4fbf99f5da9898d480bde479c028c9e Mon Sep 17 00:00:00 2001 From: Andras Papp Date: Sun, 30 Aug 2026 18:40:43 +0200 Subject: [PATCH 44/49] fix(spacing): Correct chrome URL mapping and apply margin-inline-start to messagepaneboxwrapper --- userContent.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/userContent.css b/userContent.css index b5ccdc0..6a4e1fd 100644 --- a/userContent.css +++ b/userContent.css @@ -70,15 +70,19 @@ } /* Message Tab (Single Message View) Sidebar Spacing */ -@-moz-document url-prefix("about:message"), url-prefix("chrome://messenger/content/messenger/aboutMessage.xhtml") { +@-moz-document url-prefix("about:message"), url-prefix("chrome://messenger/content/aboutMessage.xhtml"), url-prefix("chrome://messenger/content/messenger/aboutMessage.xhtml") { #messagepaneboxwrapper { + margin-inline-start: 48px !important; + box-sizing: border-box !important; + } + #messageHeader { padding-inline-start: 48px !important; box-sizing: border-box !important; } } /* Address Book Tab Sidebar Spacing */ -@-moz-document url-prefix("about:addressbook"), url-prefix("chrome://messenger/content/messenger/addressbook/aboutAddressBook.xhtml") { +@-moz-document url-prefix("about:addressbook"), url-prefix("chrome://messenger/content/addressbook/aboutAddressBook.xhtml"), url-prefix("chrome://messenger/content/messenger/addressbook/aboutAddressBook.xhtml") { #booksPane { padding-inline-start: 48px !important; box-sizing: border-box !important; From 405b01ee7402e1dd94226b22f59d9bd47c41811b Mon Sep 17 00:00:00 2001 From: Andras Papp Date: Sun, 30 Aug 2026 18:46:03 +0200 Subject: [PATCH 45/49] fix(spacing): Apply 46px margin to message and addressbook tab browsers in userChrome.css --- userChrome.css | 9 +++++++++ userContent.css | 19 ------------------- 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/userChrome.css b/userChrome.css index c156768..e860fa8 100644 --- a/userChrome.css +++ b/userChrome.css @@ -2035,3 +2035,12 @@ calendar-editable-item[selected="true"].calendar-color-box { padding-inline-start: 48px !important; } + + +/* Sidebar clearance for single message tabs and address book tabs */ +browser[src="about:message"], +browser[id^="mailMessageTabBrowser"], +browser[src="about:addressbook"], +browser[id^="addressBookTabBrowser"] { + margin-inline-start: 46px !important; +} diff --git a/userContent.css b/userContent.css index 6a4e1fd..fc882bd 100644 --- a/userContent.css +++ b/userContent.css @@ -69,25 +69,6 @@ } } -/* Message Tab (Single Message View) Sidebar Spacing */ -@-moz-document url-prefix("about:message"), url-prefix("chrome://messenger/content/aboutMessage.xhtml"), url-prefix("chrome://messenger/content/messenger/aboutMessage.xhtml") { - #messagepaneboxwrapper { - margin-inline-start: 48px !important; - box-sizing: border-box !important; - } - #messageHeader { - padding-inline-start: 48px !important; - box-sizing: border-box !important; - } -} - -/* Address Book Tab Sidebar Spacing */ -@-moz-document url-prefix("about:addressbook"), url-prefix("chrome://messenger/content/addressbook/aboutAddressBook.xhtml"), url-prefix("chrome://messenger/content/messenger/addressbook/aboutAddressBook.xhtml") { - #booksPane { - padding-inline-start: 48px !important; - box-sizing: border-box !important; - } -} From effc0d9f2d9a0d3210a8f224c34458501131a8d2 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Tue, 1 Sep 2026 13:52:42 +0200 Subject: [PATCH 46/49] Fix Global Search (Gloda) sidebar overlap with Spaces Toolbar --- userContent.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/userContent.css b/userContent.css index fc882bd..9ab8313 100644 --- a/userContent.css +++ b/userContent.css @@ -72,3 +72,10 @@ + +/* Global Search (Gloda) Sidebar Spacing */ +@-moz-document url-prefix("about:gloda"), url-prefix("chrome://messenger/content/glodaFacetView.xhtml"), url-prefix("chrome://messenger/content/messenger/glodaFacetView.xhtml") { + body { + padding-inline-start: 48px !important; + } +} From 35012b00c5603ff6c34726b73f1dec1ae22c551f Mon Sep 17 00:00:00 2001 From: andras-provice Date: Tue, 1 Sep 2026 13:54:58 +0200 Subject: [PATCH 47/49] Fix Gloda search sidebar overlap using global selector --- userContent.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/userContent.css b/userContent.css index 9ab8313..5ceb7e8 100644 --- a/userContent.css +++ b/userContent.css @@ -73,9 +73,10 @@ -/* Global Search (Gloda) Sidebar Spacing */ -@-moz-document url-prefix("about:gloda"), url-prefix("chrome://messenger/content/glodaFacetView.xhtml"), url-prefix("chrome://messenger/content/messenger/glodaFacetView.xhtml") { - body { - padding-inline-start: 48px !important; - } + +/* Global Search (Gloda) Sidebar Spacing - No URL prefix to ensure it catches dynamic frames */ + +#gloda-facet-view { + padding-inline-start: 48px !important; + box-sizing: border-box !important; } From bcc5ffebc40ca9984d67f5d08ffbbc233f2d9087 Mon Sep 17 00:00:00 2001 From: andras-provice Date: Tue, 1 Sep 2026 14:03:25 +0200 Subject: [PATCH 48/49] Move Gloda search layout fix to userChrome.css (target tab container) --- userChrome.css | 5 +++++ userContent.css | 6 ------ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/userChrome.css b/userChrome.css index e860fa8..8d2e7b6 100644 --- a/userChrome.css +++ b/userChrome.css @@ -2044,3 +2044,8 @@ browser[src="about:addressbook"], browser[id^="addressBookTabBrowser"] { margin-inline-start: 46px !important; } + +/* Fix Global Search (Gloda) Tab Overlap with Spaces Toolbar */ +vbox[type="glodaFacet"] { + margin-inline-start: 46px !important; +} diff --git a/userContent.css b/userContent.css index 5ceb7e8..a195855 100644 --- a/userContent.css +++ b/userContent.css @@ -74,9 +74,3 @@ -/* Global Search (Gloda) Sidebar Spacing - No URL prefix to ensure it catches dynamic frames */ - -#gloda-facet-view { - padding-inline-start: 48px !important; - box-sizing: border-box !important; -} From c66ffa5d60ff0a627b9c9211ec10184436cbe5ee Mon Sep 17 00:00:00 2001 From: andras-provice Date: Tue, 1 Sep 2026 14:05:12 +0200 Subject: [PATCH 49/49] Fix gloda search tab layout by using exact dynamic ID selector --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index 8d2e7b6..9fcd8b5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -2046,6 +2046,6 @@ browser[id^="addressBookTabBrowser"] { } /* Fix Global Search (Gloda) Tab Overlap with Spaces Toolbar */ -vbox[type="glodaFacet"] { +vbox[id^="glodaTab"] { margin-inline-start: 46px !important; }