userChrome.css

/*==============================================================================================*

  BirdOne 1.4.1 – A one-line layout for Thunderbird
  https://github.com/Firnschnee/BirdOne
  Concept inspired by NeroWolfe_'s one-line experiment
  Tested: Thunderbird 152 (Supernova UI, 115+)
  MIT License

*==============================================================================================*/

/* --------------------------------------------------------------------------
   1 | Variables
   -------------------------------------------------------------------------- */
:root {
  --birdone-tab-share: 55%;    /* Share of the row used by the tabs */
  --birdone-row-height: 34px;  /* Height of the combined row */
  --birdone-tab-inset: 42px;   /* Tab offset from the left edge (room for the Spaces button) */

  --birdone-accent: #fabd2f;      /* Accent color - replaces the Windows accent color (blocks 4-6) */
  --birdone-accent-text: #1a1a1a; /* Text on accent surfaces (e.g. the "New Message" button) */
  --birdone-surface: #282828;     /* Surface grey of the panes in dark mode (blocks 13-14; userContent.css separately) */
  --birdone-titlebar: #1f1f1f;    /* Title/tab row of the main window in dark mode (block 18) */
  --birdone-menu: #222222;        /* App menu surface in dark mode, modeled on the Windows menu color (block 19) */
}

/* --------------------------------------------------------------------------
   2 | One-line mechanics
   Breakpoint hard-coded: below 850px the normal two-row layout applies.
   To change it, adjust both @media values (here and in block 3).
   Only applies while the tab bar is visible - with mail.tabs.autoHide
   and a single tab, #tabs-toolbar collapses and the toolbar stays
   at full width.
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
  /* Search field removed - search via Ctrl+K */
  #unifiedToolbarContent li[item-id="search-bar"] {
    display: none !important;
  }

  /* Pull the tab bar up into the unified toolbar row, left half */
  #titlebar:has(> #tabs-toolbar:not([collapsed="true"])) #tabs-toolbar {
    margin-top: calc(-1 * var(--birdone-row-height)) !important;
    height: var(--birdone-row-height) !important;
    margin-inline-start: var(--birdone-tab-inset) !important;
    margin-inline-end: calc(100% - var(--birdone-tab-share)) !important;
  }

  /* Bring the toolbar row to the shared height */
  #unifiedToolbar {
    height: var(--birdone-row-height) !important;
    padding-block: 0 !important;
  }

  /* Indent the toolbar content to the right, making room for the tabs */
  #titlebar:has(> #tabs-toolbar:not([collapsed="true"])) #unifiedToolbarContent {
    margin-inline-start: var(--birdone-tab-share) !important;
    flex: auto !important;
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   3 | Row surroundings
   Breakpoint must match the value in block 2.
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
  /* One surface instead of two bars */
  #tabs-toolbar,
  #unifiedToolbar {
    background: none !important;
    box-shadow: none !important;
  }
}

/* --------------------------------------------------------------------------
   4 | Accent color - decoupled from the Windows accent color
   Thunderbird derives its accent color from the system colors AccentColor/
   AccentColorText (Windows Settings > Personalization > Colors). The
   two central tokens are pinned to amber: --selected-item-color feeds
   selection highlights (folder list, message list), the primary button
   ("New Message"), focus rings and attention icons; --color-accent-primary
   the toolkit widgets (checkboxes, focus outlines). The hover/active
   derivatives are produced via color-mix from the base and follow
   automatically.
   -------------------------------------------------------------------------- */
:root {
  --selected-item-color: var(--birdone-accent) !important;
  --selected-item-text-color: var(--birdone-accent-text) !important;
  --color-accent-primary: var(--birdone-accent) !important;
  --color-accent-primary-selected: var(--birdone-accent) !important;
}

/* Menu bar (Alt key): the underline of an open menu paints AccentColor
   directly, bypassing the token (toolkit menu.css). */
menubar > menu[open] {
  border-bottom-color: var(--birdone-accent) !important;
}

/* --------------------------------------------------------------------------
   5 | Context menus - highlight via text color instead of a background surface
   Toolkit paints the row hover with the system color -moz-menuhover from
   a :where() rule (specificity 0, deliberately overridable). Instead:
   transparent background and amber text; menu icons are bound to
   currentColor via --menuitem-icon-fill and take on the color. Dark mode
   only - amber doesn't work on light menus.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  menupopup :is(menuitem, menu)[_moz-menuactive]:not([disabled]) {
    background-color: transparent !important;
    color: var(--birdone-accent) !important;
  }
  /* Disabled rows have their own hover chip in toolkit menu.css
     (-moz-menuhoverdisabled); remove that one as well. */
  menupopup :is(menuitem, menu)[_moz-menuactive][disabled] {
    background-color: transparent !important;
  }

  /* App menu (hamburger) and panel subviews: a third hover mechanism.
     The rows (subviewbuttons, panelUI.css) paint their chip from the
     --panel-background-color-dimmed family and set color: inherit.
     Chips turned off via the tokens, amber text via its own rule; the
     checked states (e.g. density selection) run through
     --selected-item-color and remain as a surface. */
  panel,
  menupopup {
    --panel-background-color-dimmed: transparent !important;
    --panel-background-color-dimmed-further: transparent !important;
    --panel-background-color-dimmed-even-further: transparent !important;
  }
  panelview .toolbarbutton-1:not([disabled]):is(:hover, :focus-visible, [open], :active),
  toolbarbutton.subviewbutton:not([disabled]):is(:hover, :focus-visible, [open], :active),
  panelview .toolbaritem-combined-buttons > toolbarbutton:not([disabled]):is(:hover, :focus-visible, [open], :active),
  :is(menu, menuitem).subviewbutton:not([disabled])[_moz-menuactive] {
    color: var(--birdone-accent) !important;
    box-shadow: none !important;
  }
}

/* Inner radii: --menuitem-border-radius (default --border-radius-xsmall)
   rounds the row hover chip; --panel-border-radius (messenger
   variables.css: 8px) rounds the popup's content box while the popup
   window behind it stays square - otherwise the grey window background
   shows through as a triangle in the corner. Both radii set to square
   regardless of color scheme. */
menupopup,
panel {
  --menuitem-border-radius: 0 !important;
  --panel-border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   6 | Toolbar icons - hover feedback via color instead of a surface
   The unified toolbar buttons (messenger widgets.css) paint a
   currentColor chip on hover (--toolbar-button-hover-background-color)
   plus a border. Both removed; instead --button-hover-text-color sets the
   text to amber, and since the icons are drawn with fill/stroke:
   currentColor they take on the color. Scoped to the toolbar classes so
   regular dialog buttons keep their native hover.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .button:is(.toolbar-button, .unified-toolbar-button) {
    --toolbar-button-hover-background-color: transparent !important;
    --toolbar-button-hover-border-color: transparent !important;
    --toolbar-button-active-background-color: transparent !important;
    --toolbar-button-active-border-color: transparent !important;
    --toolbar-button-hover-checked-color: transparent !important;
    --button-hover-text-color: var(--birdone-accent) !important;
  }

  /* Flat buttons (folder pane "Get Messages", message list options
     etc.): their hover chip is hard-coded color-mix without a token,
     hence a direct rule instead of a variable override. The icon follows
     the text color via fill/stroke: currentColor. */
  .button.button-flat:hover,
  .button.button-flat:hover:active {
    background-color: transparent !important;
    color: var(--birdone-accent) !important;
  }
}

/* --------------------------------------------------------------------------
   7 | "New Message" button - grey at rest, amber look on hover
   At rest: the look of a regular button instead of the primary button's
   full amber surface - grey surface, lighter grey border, light text
   (the native button tokens). Hover/active: the 1.1 look from blocks
   8/9, amber tint plus amber border. Deliberately only this one button -
   primary buttons in dialogs keep the full amber surface.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #folderPaneWriteMessage {
    background-color: var(--button-background-color) !important;
    border: 1px solid var(--button-border-color) !important;
    color: var(--button-text-color) !important;
    box-shadow: none !important;
  }
  #folderPaneWriteMessage:enabled:hover {
    background-color: color-mix(in srgb, var(--birdone-accent) 15%, transparent) !important;
    border-color: var(--birdone-accent) !important;
    box-shadow: none !important;
  }
  #folderPaneWriteMessage:enabled:hover:active {
    background-color: color-mix(in srgb, var(--birdone-accent) 25%, transparent) !important;
  }
}

/* --------------------------------------------------------------------------
   8 | Message list - selection bar in inbox look
   The focused selected row paints --listbox-focused-selected-bg
   (= --selected-item-color, full amber since block 4) with dark text.
   Instead, like block 7: amber tint, 1px amber outline, light text.
   Scoped to the message list's table body; folder list and unfocused
   selection (grey row) stay native.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Tagged messages excluded: their selection bar carries the tag color
     (threadPane.css) and keeps it. */
  [is="tree-view-table-body"]:is(:focus, :focus-within) > .table-layout.selected:not([data-properties~="tagged"]),
  [is="tree-view-table-body"] > .table-layout.selected:not([data-properties~="tagged"]):focus-within {
    background-color: color-mix(in srgb, var(--birdone-accent) 15%, transparent) !important;
    color: var(--tree-view-color) !important;
    outline: 1px solid var(--birdone-accent) !important;
    outline-offset: -1px !important;
  }

  /* Column headers (Subject, From, Date, ... including icon columns and
     the column picker): hover as a color signal instead of the grey chip
     from --tree-view-header-hover-bg. The icon columns are tied in via
     their currentColor mixes and tint amber. */
  .tree-table-cell-container button:hover,
  .tree-table-cell-container button:hover:active {
    background-color: transparent !important;
    color: var(--birdone-accent) !important;
  }

  /* Flag star in the row and in the column header: hover amber,
     analogous to the star in the message header (block 9). Set stars
     (flagged) keep their native orange. */
  tr:not([data-properties~="flagged"]) .tree-view-row-flag .tree-button-flag:hover > img,
  #flaggedColButton:hover img {
    fill: color-mix(in srgb, var(--birdone-accent) 20%, transparent) !important;
    stroke: var(--birdone-accent) !important;
  }

  /* Separator line below the column headers: the sticky thead
     (tree-listbox.css, z-index 1) draws it as an absolutely positioned
     ::after with height 0 and 1px bottom border, without a vertical
     anchor - its static position puts the line below the header, onto
     the first pixel of the top row, where it paints over the top edge
     of the selection outline above. Anchored to the header's bottom
     edge instead: the line moves onto the header's own last pixel,
     the row gets its pixel back. */
  thead[is="tree-view-table-header"]::after {
    inset-block-end: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   9 | Message header & compose toolbar
   From/To pills: hover as a pure color signal - no background, amber
   text; the address book icon keeps its amber. Action buttons
   (Reply, Forward, ... as well as Send, encryption, S/MIME in the
   compose window): hover/open in the look of the list selection from
   block 8 - amber tint plus amber border - via the scoped
   --toolbarbutton token family (messenger.css), which also covers the
   two-part menu buttons ("More", "S/MIME"). Rest state stays native.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .header-recipient:hover,
  .header-newsgroup:hover {
    background-color: transparent !important;
    color: var(--birdone-accent) !important;
  }
  .header-recipient:hover .recipient-address-book-button.in-address-book img {
    fill: color-mix(in srgb, var(--birdone-accent) 20%, transparent) !important;
    stroke: var(--birdone-accent) !important;
  }

  /* Flag star: hover amber instead of the light currentColor outline.
     The set state (.flagged) keeps its native orange. */
  button.email-action-flagged:not(.flagged):hover {
    fill: color-mix(in srgb, var(--birdone-accent) 20%, transparent) !important;
    stroke: var(--birdone-accent) !important;
  }

  .toolbarbutton-1.message-header-view-button,
  #composeToolbar2 .toolbarbutton-1 {
    --toolbarbutton-background-color-hover: color-mix(in srgb, var(--birdone-accent) 15%, transparent) !important;
    --toolbarbutton-checked-background: color-mix(in srgb, var(--birdone-accent) 25%, transparent) !important;
    --toolbarbutton-background-color-active: color-mix(in srgb, var(--birdone-accent) 25%, transparent) !important;
    --toolbarbutton-hover-bordercolor: var(--birdone-accent) !important;
    --toolbarbutton-active-bordercolor: var(--birdone-accent) !important;
    --toolbarbutton-hover-boxshadow: none !important;
    --toolbarbutton-active-boxshadow: none !important;
  }

  /* From selector (identity) in the compose window: hover in the list
     look, amber border plus tint instead of a grey border on the field
     background. The focus/open state uses --toolbar-field-focus-border-color
     (= amber since block 4) and stays native. */
  #msgIdentity:not([disabled]):hover {
    border-color: var(--birdone-accent) !important;
    background-color: color-mix(in srgb, var(--birdone-accent) 15%, transparent) !important;
  }

  /* Cc/Bcc: pure color signal - no hover chip from the generic button
     rule, amber text. */
  button.recipient-button:not([disabled]):hover,
  button.recipient-button:not([disabled]):hover:active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--birdone-accent) !important;
  }

  /* Double arrow "more address fields" and spell-check language in the
     status bar: same plain-button mechanism, same color signal.
     The aria-expanded state is included so the grey chip doesn't come
     back while the popup is open. */
  button#extraAddressRowsMenuButton:not([disabled]):is(:hover, [aria-expanded="true"]),
  button#languageStatusButton:not([disabled]):is(:hover, [aria-expanded="true"]) {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--birdone-accent) !important;
    box-shadow: none !important;
  }

  /* Formatting bar: the buttons (B, I, U, lists, ...) read the same
     --toolbarbutton token family as above. */
  #FormatToolbar toolbarbutton.formatting-button {
    --toolbarbutton-background-color-hover: color-mix(in srgb, var(--birdone-accent) 15%, transparent) !important;
    --toolbarbutton-checked-background: color-mix(in srgb, var(--birdone-accent) 25%, transparent) !important;
    --toolbarbutton-background-color-active: color-mix(in srgb, var(--birdone-accent) 25%, transparent) !important;
    --toolbarbutton-hover-bordercolor: var(--birdone-accent) !important;
    --toolbarbutton-active-bordercolor: var(--birdone-accent) !important;
    --toolbarbutton-hover-boxshadow: none !important;
    --toolbarbutton-active-boxshadow: none !important;
  }

  /* The dropdowns (paragraph format, font) already use the same tokens
     as their base surface at REST - a token override would tint them
     permanently. Hence direct rules for hover and open only. */
  #FormatToolbar menulist:not([disabled], [open="true"]):hover {
    background-color: color-mix(in srgb, var(--birdone-accent) 15%, transparent) !important;
    border-color: var(--birdone-accent) !important;
  }
  #FormatToolbar menulist[open="true"] {
    background-color: color-mix(in srgb, var(--birdone-accent) 25%, transparent) !important;
    border-color: var(--birdone-accent) !important;
  }
}

/* --------------------------------------------------------------------------
   10 | Window buttons (minimize/maximize/close)
   Thunderbird paints the buttons itself (messenger.css): hover is a
   grey block, close a red one. Instead the BirdOne pattern -
   no block, the glyph itself takes the color. Minimize/maximize
   hover amber; close hovers in the Windows close red, convention
   beats theme. The glyphs are Segoe Fluent font characters (::before,
   content), not SVGs - color suffices, no fill/stroke binding needed.
   Applies to all chrome windows (main window, compose, ...).
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .titlebar-button:hover,
  .titlebar-button:hover:active {
    background-color: transparent !important;
    color: var(--birdone-accent) !important;
  }
  .titlebar-close:hover,
  .titlebar-close:hover:active {
    color: #e81123 !important; /* Windows close red - BirdOne has no red token */
  }
}

/* --------------------------------------------------------------------------
   11 | Message list - grey instead of black
   The message list paints its background from --tree-view-bg, pure black
   in dark mode (--color-black, tree-listbox.css) - the folder and
   message panes next to it sit on --layout-background-1 (#27272a).
   Pin the token to the same grey; the derived hover/selection mixes
   (color-mix over --tree-view-bg) follow automatically.
   --tree-pane-background is the card view's counterpart and comes along.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --tree-view-bg: var(--layout-background-1) !important;
    --tree-pane-background: var(--layout-background-1) !important;
  }
}

/* --------------------------------------------------------------------------
   12 | Separator line below the title row
   The line exists natively (unified-toolbar, border-block-end 1px) but
   is rgba(0,0,0,0.15) - invisible in dark mode. Recolored to
   --sidebar-border, the same token as the pane splitters below; color
   only, no new geometry. The active tab exempts itself: the raised tab
   bar overlaps the border zone by 1px, and the active tab's opaque
   surface (.tab-background) covers the line there -
   browser behavior, tab and content stay connected.
   -------------------------------------------------------------------------- */
unified-toolbar {
  border-block-end-color: var(--sidebar-border) !important;
}

/* --------------------------------------------------------------------------
   13 | Reading pane (message preview on the right) - fixed grey
   The outer box #messagepanebox carries --layout-background-1 (#27272a).
   The message view inside it (#singleMessage, #attachmentView) switches
   to --toolbar-background-color via :root[lwt-tree] when a theme is
   active (messageHeader.css) - in dark mode a nearly black grey,
   noticeably darker than the neighboring panes. All three pinned to
   --birdone-surface; userChrome is user origin, the !important beats the
   author override without specificity acrobatics. The mail body itself
   is a content document and runs through userContent.css.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #messagepanebox,
  #singleMessage,
  #attachmentView {
    background-color: var(--birdone-surface) !important;
  }
}

/* --------------------------------------------------------------------------
   14 | Folder list & message list - surface grey unified
   Both panes sit on --layout-background-1, #27272a in dark mode
   (--color-gray-80) - a touch darker than the reading pane from block 13.
   The token pinned to --birdone-surface at the root: the folder list
   follows directly, the message list via the chain from block 11
   (--tree-view-bg -> --layout-background-1), and the derived
   hover/selection mixes follow automatically. All other surfaces on
   this token move along - intentional, one surface instead of two greys.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --layout-background-1: var(--birdone-surface) !important;
  }
}

/* --------------------------------------------------------------------------
   15 | Compose window - address and subject fields on surface grey
   The input fields (To/Cc/Bcc: .address-container, subject:
   #msgSubject) paint their background from two sources depending on
   theme state (messengercompose.css): under :root[lwt-tree] from
   --toolbar-field-background-color, otherwise from the system color
   Field - nearly black in dark mode. A token override only covered the
   first path and had no effect; instead the surface is pinned directly
   on the field, which beats both paint paths. Also takes the focus
   background along (natively the -focus token or Field depending on the
   path) - intentional, one surface at rest and in focus; the amber
   focus ring (block 4) remains. The editor body below is a content
   document -> userContent.css.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #MsgHeadersToolbar .address-container,
  #msgSubject {
    background-color: var(--birdone-surface) !important;
  }
}

/* --------------------------------------------------------------------------
   16 | Compose window - envelope area & formatting bar
   The surfaces around the fields: the envelope area (From/To/Subject,
   #MsgHeadersToolbar) and the formatting bar (#FormatToolbox with
   #FormatToolbar inside). messengercompose.css paints both under
   :root[lwt-tree] from --toolbar-background-color (!important),
   otherwise the native toolbar surface applies - pinned directly as in
   block 15, which beats both paths; userChrome is user origin, so its
   !important also wins against the author rule's. The fields from
   block 15 sit on top in the same tone and are only distinguished by
   their native border - intentional, one surface across the whole window.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #MsgHeadersToolbar,
  #FormatToolbox,
  #FormatToolbar {
    background-color: var(--birdone-surface) !important;
  }
}

/* --------------------------------------------------------------------------
   17 | System prompts (confirm/ask) - surface grey instead of blue
   The prompt-service dialogs (e.g. "Save message in drafts folder?"
   when closing the compose window) are separate chrome windows from
   toolkit commonDialog.xhtml. Their background comes from the system
   color -moz-Dialog via the UA sheet on the window root - in dark mode
   a bluish-tinted dark grey, no Thunderbird token. Pinned directly on
   the root; deliberately scoped to #commonDialogWindow only (alert/
   confirm/prompt), other dialog windows stay native.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #commonDialogWindow {
    background-color: var(--birdone-surface) !important;
  }
}

/* --------------------------------------------------------------------------
   18 | Title/toolbar rows - dedicated grey tone
   Main window: the strip behind tabs and toolbar row is
   #navigation-toolbox; messenger.css paints it under :root[lwtheme]
   from --lwt-accent-color (theme-injected, nearly black); tab bar and
   unified toolbar are transparent since block 3, so the color shines
   through. Compose window: #compose-toolbox uses the same accent rule,
   but its toolbar rows (menu bar, send bar) additionally paint
   themselves from --toolbar-background-color (messengercompose.css) and
   need pinning individually. Pinned directly instead of via the token -
   the token also feeds the status bar and findbar, which stay native.
   Covers the inactive state (--lwt-accent-color-inactive); active and
   inactive windows carry the same tone. The settings page's sidebar
   is content -> userContent.css.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #navigation-toolbox,
  #compose-toolbox,
  #compose-toolbox > toolbar {
    background-color: var(--birdone-titlebar) !important;
  }
}

/* --------------------------------------------------------------------------
   19 | App menu (hamburger) - menu grey instead of black
   The context menus (menupopup) paint their surface from the system
   color Menu (toolkit popup.css) - the neutral dark grey of Windows
   menus. The app menu, by contrast, is an arrow panel whose surface
   runs through --panel-background-color and arrives nearly black in
   dark mode. Both token names pinned on the panel (toolkit consumes
   --panel-background-color or --arrowpanel-background depending on the
   path) so the app menu matches the context menus. Value as its own
   knob because it deliberately sits between surface and title bar.
   Note on the startup flash: the window's blue first paint comes from
   the widget code before any CSS is applied - a root pin doesn't
   change that (tested), it stays.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #appMenu-popup {
    --panel-background-color: var(--birdone-menu) !important;
    --arrowpanel-background: var(--birdone-menu) !important;
  }
}

/* --------------------------------------------------------------------------
   20 | Quick filter search field - title bar grey instead of layout black
   The "Filter messages" field (#qfb-qs-textbox, about:3pane) is a
   search-bar custom element; its surface reads
   --search-bar-background and --search-bar-focus-background in the
   shadow DOM, both pointing via variables.css to --layout-background-0
   (#18181b in dark mode). Both tokens pinned on the host - custom
   properties inherit into the shadow DOM; rest and focus carry the same
   tone as natively, the amber focus ring remains.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  #qfb-qs-textbox {
    --search-bar-background: var(--birdone-titlebar) !important;
    --search-bar-focus-background: var(--birdone-titlebar) !important;
  }
}