inbuxa/ihasmail-inbuxa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fill a coloured folder in, rather than outlining it

Browse Source 
A tinted outline barely registered against the sidebar. The icon is now
filled with the colour, which is what makes it findable at a glance in a
list of a dozen folders.

Two details it needed. The fill has to come from CSS, because lucide
writes fill="none" as a presentation attribute on the svg and a rule
beats one. And the strokes are drawn in --bg rather than the colour: a
solid fill in one colour swallowed the detail inside icons that have any
-- Archive lost the lid and handle of its box and became an orange blob.
Knocked out against the background they read again, in either theme,
since --bg follows the theme rather than being pinned to one.

Checked by pixels and by eye in both themes: the coloured area of the
icon went from an outline to 55% of its box, and Archive, Newsletters
and Work are all still recognisably themselves.
This commit is contained in:
jcoffey-dev
2026-08-25 13:04:45 -07:00
parent 037843a79d
commit fe09961383
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles/app.css
+4 -2
View File
@@ -327,8 +327,10 @@ img { max-width: 100%; }
/* A folder colour tints its icon; the label keeps the sidebar's contrast. */ /* A folder colour tints its icon; the label keeps the sidebar's contrast. */
.folder-row .folder-icon { display: inline-flex; align-items: center; } .folder-row .folder-icon { display: inline-flex; align-items: center; }
/* .nav-item svg sets colour on the svg itself, so inheriting from the span is /* .nav-item svg sets colour on the svg itself, so inheriting from the span is
not enough -- the icon has to be targeted directly to win the cascade. */ not enough -- the icon has to be targeted directly to win the cascade.
.folder-row .folder-icon[style*="--folder-color"] svg { color: var(--folder-color); } The fill overrides lucide's own fill="none": a CSS rule beats a presentation
attribute, and a solid folder reads at a glance where an outline does not. */
.folder-row .folder-icon[style*="--folder-color"] svg { color: var(--bg); fill: var(--folder-color); }
/* The Folders heading doubles as the way back to the top level while dragging. */ /* The Folders heading doubles as the way back to the top level while dragging. */
.nav-section.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); color: var(--accent-soft-fg); } .nav-section.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); color: var(--accent-soft-fg); }
.nav-item svg { flex: 0 0 auto; color: var(--fg-muted); } .nav-item svg { flex: 0 0 auto; color: var(--fg-muted); }