Projets/Shaarli_bm_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: intensifier tint primary tiles/backgrounds dark mode (28%/45%/60% vs 14%/30%/45%) pour différenciation visuelle accrue entre thèmes, ajouter border-left 3px accent primary sur tous tiles (grid/list/compact), enrichir tile-shadow avec glow primary (18% inner ring dark, 35% outer shadow hover), augmenter tint background vues notes/todos/archive (18% vs 8%), harmoniser ratios light mode (14%/28%/55% vs 6%/14%/35%), et appliquer primary-tinted background (30% mix) + on-primary color sur compact

Browse Source
This commit is contained in:
Bruno Charest 2026-04-20 20:00:53 -04:00
parent c8f7aec7ec
commit 2dea3df300
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
shaarli-pro/css/style.css
View File

@ -4611,22 +4611,26 @@ table {
} }
[data-theme="dark"] { [data-theme="dark"] {
/* Tint surfaces with theme primary so each theme (DEFAULT, GITHUB, /* Strong primary-color tint so each theme (DEFAULT, GITHUB,
NAVY_ELEGANCE, DRACULA, ...) is visually distinct even though all NAVY_ELEGANCE, DRACULA, ...) is clearly distinguishable on tiles
dark themes share very similar navy/charcoal neutrals. */ and page backgrounds. Dark themes share near-identical navy/charcoal
--tile-bg: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 86%, var(--primary) 14%); neutrals, so the only way to make them visually distinct is to
--tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 70%, var(--primary) 30%); infuse a noticeable amount of --primary into surfaces. */
--tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 55%, var(--primary) 45%); --tile-bg: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 72%, var(--primary) 28%);
--tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); --tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 55%, var(--primary) 45%);
--tile-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.55); --tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 40%, var(--primary) 60%);
--tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
--tile-shadow-hover: 0 10px 24px -4px color-mix(in srgb, var(--primary) 35%, rgba(0, 0, 0, 0.55));
--tile-accent: var(--primary);
} }
[data-theme="light"] { [data-theme="light"] {
--tile-bg: color-mix(in srgb, var(--bg-card) 94%, var(--primary) 6%); --tile-bg: color-mix(in srgb, var(--bg-card) 86%, var(--primary) 14%);
--tile-bg-hover: color-mix(in srgb, var(--bg-card) 86%, var(--primary) 14%); --tile-bg-hover: color-mix(in srgb, var(--bg-card) 72%, var(--primary) 28%);
--tile-border: color-mix(in srgb, var(--border) 65%, var(--primary) 35%); --tile-border: color-mix(in srgb, var(--border) 45%, var(--primary) 55%);
--tile-shadow: var(--shadow-sm); --tile-shadow: var(--shadow-sm);
--tile-shadow-hover: var(--shadow-md); --tile-shadow-hover: var(--shadow-md);
--tile-accent: var(--primary);
} }
/* Theme-tinted page background for Notes / Tâches / Archive views /* Theme-tinted page background for Notes / Tâches / Archive views
@ -4634,7 +4638,7 @@ table {
body.view-notes, body.view-notes,
body.view-todo, body.view-todo,
body.view-archive { body.view-archive {
background-color: color-mix(in srgb, var(--bg-body) 92%, var(--primary) 8%); background-color: color-mix(in srgb, var(--bg-body) 82%, var(--primary) 18%);
} }
/* Grid & list cards */ /* Grid & list cards */
@ -4642,6 +4646,8 @@ body.view-archive {
background: var(--tile-bg); background: var(--tile-bg);
border-color: var(--tile-border); border-color: var(--tile-border);
box-shadow: var(--tile-shadow); box-shadow: var(--tile-shadow);
/* primary-colored left accent stripe — immediately readable per theme */
border-left: 3px solid var(--tile-accent);
} }
.link-outer:hover { .link-outer:hover {
@ -4652,6 +4658,7 @@ body.view-archive {
.view-list .link-outer { .view-list .link-outer {
background: var(--tile-bg); background: var(--tile-bg);
border-color: var(--tile-border); border-color: var(--tile-border);
border-left: 3px solid var(--tile-accent);
box-shadow: var(--tile-shadow); box-shadow: var(--tile-shadow);
} }
@ -4659,11 +4666,13 @@ body.view-archive {
.links-list.view-compact { .links-list.view-compact {
background: var(--tile-bg); background: var(--tile-bg);
border-color: var(--tile-border); border-color: var(--tile-border);
border-left: 3px solid var(--tile-accent);
box-shadow: var(--tile-shadow); box-shadow: var(--tile-shadow);
} }
.view-compact .link-outer { .view-compact .link-outer {
border-bottom: 1px solid var(--tile-border); border-bottom: 1px solid var(--tile-border);
border-left: 0;
} }
.view-compact .link-outer:hover { .view-compact .link-outer:hover {
@ -4671,6 +4680,7 @@ body.view-archive {
} }
.view-compact .compact-table-head { .view-compact .compact-table-head {
background: color-mix(in srgb, var(--tile-bg) 78%, var(--bg-body) 22%); background: color-mix(in srgb, var(--tile-bg) 70%, var(--primary) 30%);
border-bottom: 1px solid var(--tile-border); border-bottom: 1px solid var(--tile-border);
color: var(--on-primary, var(--text-main));
} }