diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ae701c4 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.fluent-backup diff --git a/custom.css b/custom.css index 76a044d..b2b515c 100644 --- a/custom.css +++ b/custom.css @@ -1 +1,12 @@ -/* 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) +*/ + +/* 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 7e911af..9fcd8b5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,1142 +1,2051 @@ -/* 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 - ===================================================== */ - -/* Rounded top-left clip on main content area */ -#messengerBody { - opacity: 90%; - border-top-left-radius: 12px !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; - } -} - - -/* ===================================================== - TAB BAR - ===================================================== */ - -#tabs-toolbar { - background-color: #fff0 !important; - background-image: none !important; - box-shadow: none !important; - 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: #fff0 !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 - ===================================================== */ - -/* Account-level row: larger text, no icon */ -#folderTree li[data-server-type] > .container > .name { - font-weight: normal !important; - font-size: 1.18rem !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 */ -#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; - margin-left: 0 !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) { - - /* 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; -} +/* 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: 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 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: #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; +} + +.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; +} + +/* 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; +} + +#spacesToolbar .spaces-toolbar-top-container { + margin-top: 91px !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; + } + + /* Active tab (macOS style in dark mode) */ + .tabmail-tab[selected="true"] { + 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: #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 { + 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: 950px !important; + max-width: 950px !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: 950px !important; + height: 800px !important; + min-width: 950px !important; + max-width: 950px !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-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; +} + +#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; + } + + /* 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; + } + + .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) + Apple-design: white card, subtle shadow, grey labels + ===================================================== */ + +#itemTooltip { + -moz-appearance: none !important; + appearance: none !important; + background: #eef4fb !important; + color: #1d1d1f !important; + border: 1px solid rgba(0, 100, 200, 0.18) !important; + border-radius: 12px !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; +} + +.tooltipBox { + padding: 10px 14px !important; + max-inline-size: 44em !important; +} + +.tooltipHeaderTable { + border-spacing: 0 !important; +} + +.tooltipHeaderLabel { + color: #637381 !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: #334155 !important; + font-size: 0.84rem !important; + font-weight: 400 !important; + line-height: 1.5 !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; +} + +/* 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; + } +} + +/* ===================================================== + PREFERENCES & ACCOUNT SETTINGS SIDEBAR SPACING + Ensure proper breathing room next to Spaces Toolbar + ===================================================== */ + +#pref-category-box, +#accountTreeBox, +#sidebar:has(categories-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; +} + +/* Fix Global Search (Gloda) Tab Overlap with Spaces Toolbar */ +vbox[id^="glodaTab"] { + margin-inline-start: 46px !important; +} diff --git a/userContent.css b/userContent.css new file mode 100644 index 0000000..a195855 --- /dev/null +++ b/userContent.css @@ -0,0 +1,76 @@ +/* Thunderbird userContent.css - Content & Editor Window Styling */ + +@-moz-document url-prefix("about:blank") { + html, body { + 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; + } + * { + box-sizing: border-box !important; + max-width: 100% !important; + } + p, div, span, a { + overflow-wrap: break-word !important; + word-break: break-word !important; + white-space: normal !important; + } + a { + word-break: break-all !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: 48px !important; + } +} + +/* 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: 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: 1.02rem !important; + } +} + +/* 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; + } +} + + + + + +