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

feat: unifier couleur tiles avec header banner en utilisant --header-bg au lieu de tints primary progressifs, appliquer --tile-text (--header-text/--on-primary) sur tous éléments tiles (title/url/description/meta/actions/tags) pour contraste optimal contre background plein primary, simplifier tokens --tile-* (bg/hover/border/shadow identiques light/dark modes), remplacer color-mix() complexes par --header-bg direct + darken 20%/40% hover/border, et styler tag pills avec rgba(0,0,0,0.25) background

Browse Source
This commit is contained in:
Bruno Charest 2026-04-20 20:10:09 -04:00
parent 2dea3df300
commit bccfa42524
1 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4602,35 +4602,19 @@ table {
tiles using --surface-variant and reinforce borders so
each theme provides visible tile contrast.
========================================================= */
:root {
--tile-bg: var(--bg-card);
--tile-bg-hover: var(--bg-card-hover);
--tile-border: var(--border);
--tile-shadow: var(--shadow-sm);
--tile-shadow-hover: var(--shadow-md);
}
[data-theme="dark"] {
/* Strong primary-color tint so each theme (DEFAULT, GITHUB,
NAVY_ELEGANCE, DRACULA, ...) is clearly distinguishable on tiles
and page backgrounds. Dark themes share near-identical navy/charcoal
neutrals, so the only way to make them visually distinct is to
infuse a noticeable amount of --primary into surfaces. */
--tile-bg: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 72%, var(--primary) 28%);
--tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 55%, var(--primary) 45%);
--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);
}
/* Tiles use the SAME color as the main header (BOOKMARKS banner).
--header-bg is defined per theme and equals --primary for most themes,
so tiles now fully adopt the theme's signature color. */
:root,
[data-theme="dark"],
[data-theme="light"] {
--tile-bg: 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) 45%, var(--primary) 55%);
--tile-shadow: var(--shadow-sm);
--tile-shadow-hover: var(--shadow-md);
--tile-accent: var(--primary);
--tile-bg: var(--header-bg, var(--primary));
--tile-bg-hover: color-mix(in srgb, var(--header-bg, var(--primary)) 80%, #000 20%);
--tile-border: color-mix(in srgb, var(--header-bg, var(--primary)) 60%, #000 40%);
--tile-text: var(--header-text, var(--on-primary, #fff));
--tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
--tile-shadow-hover: 0 10px 24px -4px color-mix(in srgb, var(--header-bg, var(--primary)) 55%, rgba(0, 0, 0, 0.5));
--tile-accent: var(--header-bg, var(--primary));
}
/* Theme-tinted page background for Notes / Tâches / Archive views
@ -4646,10 +4630,39 @@ body.view-archive {
background: var(--tile-bg);
border-color: var(--tile-border);
box-shadow: var(--tile-shadow);
color: var(--tile-text);
/* primary-colored left accent stripe — immediately readable per theme */
border-left: 3px solid var(--tile-accent);
}
/* Ensure all text inside tiles uses the header-text color for contrast
against the now fully-primary tile background */
.link-outer,
.link-outer .link-title,
.link-outer .link-title a,
.link-outer .link-url,
.link-outer .link-url a,
.link-outer .link-description,
.link-outer .link-meta,
.link-outer .link-meta a,
.link-outer .link-actions,
.link-outer .link-actions a,
.link-outer .link-actions button,
.view-list .link-outer,
.view-list .link-outer a,
.view-list .link-outer button {
color: var(--tile-text);
}
/* Tag pills inside tiles — keep them readable against the colored bg */
.link-outer .link-tag,
.link-outer .tag,
.view-list .link-outer .link-tag {
background: rgba(0, 0, 0, 0.25);
color: var(--tile-text);
border-color: rgba(0, 0, 0, 0.35);
}
.link-outer:hover {
border-color: var(--primary);
box-shadow: var(--tile-shadow-hover);