LiquidBird version
0.1.0
Thunderbird version and build
154
Operating system and version
MacOS 27
Appearance
Light
Thunderbird density
Compact
Message-list view
Card view
Pane layout
Vertical view
What happened?
Issue 1: Cards view read/unread dot is filled on every message
Where: liquidbird.css, around line 984
#threadTree[rows="thread-card"] .card-layout td .card-container .read-status {
background: var(--lb-accent) !important;
}
Problem: the background is set with no unread condition, so read and unread messages both show a filled accent dot. The dot stops distinguishing state; every row looks unread. Folder counts and the bold sender treatment remain correct.
Repro: open any Cards-view mailbox with a mix of read and unread mail; look at the dot on the left of each card.
Suggested direction: gate the fill on the unread selector already used a few lines above for .sender, e.g. .card-layout[data-properties~="unread"] ... .read-status. Keep the size/shape rules for all cards; move only the fill.
Issue 2: Selection fill bleeds past the card in Cards view
Where: liquidbird.css, around line 909
#threadTree:focus-within [is="tree-view-table-body"] tr.selected.current {
background: var(--lb-accent) !important;
color: var(--lb-accent-text) !important;
}
Problem: in Cards view the accent fill is applied to the full-width table row, so the blue extends beyond the rounded .card-container into its margin: 3px 7px. The card already gets its own accent fill from #threadTree:focus-within .card-layout.selected.current .card-container, so the row-level fill is redundant and visually wrong. Table view needs the full-row fill, so this should be scoped.
Repro: Cards view, click a message. The highlight is a full-width band with the rounded card sitting inside it.
Suggested direction: suppress the row background for #threadTree[rows="thread-card"] ... tr.selected.current and let .card-container carry selection. Leave non-card views unchanged.
Issue 3: Light appearance: several surfaces have no resting affordance
Problem: LiquidBird expresses "this is a surface" mainly through a 1px border that only appears in one state, and on the light theme those borders and the surfaces themselves are near-invisible.
Cards: .card-container is background: transparent + border: 1px solid transparent at rest. On --lb-mail-list-background (rgb(255 255 255) in light) a card has no boundary until hover or selection.
Inactive tabs: non-selected .tabmail-tab has no .tab-background fill or border; only [selected="true"] gets border + var(--lb-control-fill). Inactive tabs render as bare text.
List-header toggle buttons: #threadPaneQuickFilterButton / #threadPaneDisplayButton are background: transparent at rest; only .list-header-bar-container-end has a border. An unchecked button reads as a loose icon.
Related inconsistency: selected/active state is border+fill in some places (folder row, tab) and fill-only in others (card).
Suggested direction: one resting affordance that works on white. Options: a hairline --lb-separator on the resting surface (not just selected), or a soft downward shadow like .list-header-bar-container-end already uses, plus a faint fill. Apply the same rest / hover / active treatment to cards, folder rows, tabs, and toolbar toggles so the states read consistently. Dark appearance already works because the elevated greys separate on their own.
Reproduction steps
See the above.
Sanitized screenshot (optional)
No response
Other customizations and add-ons
None.
Isolation checks
LiquidBird version
0.1.0
Thunderbird version and build
154
Operating system and version
MacOS 27
Appearance
Light
Thunderbird density
Compact
Message-list view
Card view
Pane layout
Vertical view
What happened?
Issue 1: Cards view read/unread dot is filled on every message
Where: liquidbird.css, around line 984
#threadTree[rows="thread-card"] .card-layout td .card-container .read-status {
background: var(--lb-accent) !important;
}
Problem: the background is set with no unread condition, so read and unread messages both show a filled accent dot. The dot stops distinguishing state; every row looks unread. Folder counts and the bold sender treatment remain correct.
Repro: open any Cards-view mailbox with a mix of read and unread mail; look at the dot on the left of each card.
Suggested direction: gate the fill on the unread selector already used a few lines above for .sender, e.g. .card-layout[data-properties~="unread"] ... .read-status. Keep the size/shape rules for all cards; move only the fill.
Issue 2: Selection fill bleeds past the card in Cards view
Where: liquidbird.css, around line 909
#threadTree:focus-within [is="tree-view-table-body"] tr.selected.current {
background: var(--lb-accent) !important;
color: var(--lb-accent-text) !important;
}
Problem: in Cards view the accent fill is applied to the full-width table row, so the blue extends beyond the rounded .card-container into its margin: 3px 7px. The card already gets its own accent fill from #threadTree:focus-within .card-layout.selected.current .card-container, so the row-level fill is redundant and visually wrong. Table view needs the full-row fill, so this should be scoped.
Repro: Cards view, click a message. The highlight is a full-width band with the rounded card sitting inside it.
Suggested direction: suppress the row background for #threadTree[rows="thread-card"] ... tr.selected.current and let .card-container carry selection. Leave non-card views unchanged.
Issue 3: Light appearance: several surfaces have no resting affordance
Problem: LiquidBird expresses "this is a surface" mainly through a 1px border that only appears in one state, and on the light theme those borders and the surfaces themselves are near-invisible.
Cards: .card-container is background: transparent + border: 1px solid transparent at rest. On --lb-mail-list-background (rgb(255 255 255) in light) a card has no boundary until hover or selection.
Inactive tabs: non-selected .tabmail-tab has no .tab-background fill or border; only [selected="true"] gets border + var(--lb-control-fill). Inactive tabs render as bare text.
List-header toggle buttons: #threadPaneQuickFilterButton / #threadPaneDisplayButton are background: transparent at rest; only .list-header-bar-container-end has a border. An unchecked button reads as a loose icon.
Related inconsistency: selected/active state is border+fill in some places (folder row, tab) and fill-only in others (card).
Suggested direction: one resting affordance that works on white. Options: a hairline --lb-separator on the resting surface (not just selected), or a soft downward shadow like .list-header-bar-container-end already uses, plus a faint fill. Apply the same rest / hover / active treatment to cards, folder rows, tabs, and toolbar toggles so the states read consistently. Dark appearance already works because the elevated greys separate on their own.
Reproduction steps
See the above.
Sanitized screenshot (optional)
No response
Other customizations and add-ons
None.
Isolation checks
custom.cssrules removed, if practical.