diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css index 2179a9a..abe83a8 100644 --- a/shaarli-pro/css/style.css +++ b/shaarli-pro/css/style.css @@ -4611,22 +4611,26 @@ table { } [data-theme="dark"] { - /* Tint surfaces with theme primary so each theme (DEFAULT, GITHUB, - NAVY_ELEGANCE, DRACULA, ...) is visually distinct even though all - dark themes share very similar navy/charcoal neutrals. */ - --tile-bg: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 86%, var(--primary) 14%); - --tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 70%, var(--primary) 30%); - --tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 55%, var(--primary) 45%); - --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); - --tile-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.55); + /* 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); } [data-theme="light"] { - --tile-bg: color-mix(in srgb, var(--bg-card) 94%, var(--primary) 6%); - --tile-bg-hover: color-mix(in srgb, var(--bg-card) 86%, var(--primary) 14%); - --tile-border: color-mix(in srgb, var(--border) 65%, var(--primary) 35%); + --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); } /* Theme-tinted page background for Notes / Tâches / Archive views @@ -4634,7 +4638,7 @@ table { body.view-notes, body.view-todo, 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 */ @@ -4642,6 +4646,8 @@ body.view-archive { background: var(--tile-bg); border-color: var(--tile-border); box-shadow: var(--tile-shadow); + /* primary-colored left accent stripe — immediately readable per theme */ + border-left: 3px solid var(--tile-accent); } .link-outer:hover { @@ -4652,6 +4658,7 @@ body.view-archive { .view-list .link-outer { background: var(--tile-bg); border-color: var(--tile-border); + border-left: 3px solid var(--tile-accent); box-shadow: var(--tile-shadow); } @@ -4659,11 +4666,13 @@ body.view-archive { .links-list.view-compact { background: var(--tile-bg); border-color: var(--tile-border); + border-left: 3px solid var(--tile-accent); box-shadow: var(--tile-shadow); } .view-compact .link-outer { border-bottom: 1px solid var(--tile-border); + border-left: 0; } .view-compact .link-outer:hover { @@ -4671,6 +4680,7 @@ body.view-archive { } .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); + color: var(--on-primary, var(--text-main)); } \ No newline at end of file