From 2dea3df300e538a658d1b3999815fbd071cd8314 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Mon, 20 Apr 2026 20:00:53 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20intensifier=20tint=20primary=20tiles/ba?=
 =?UTF-8?q?ckgrounds=20dark=20mode=20(28%/45%/60%=20vs=2014%/30%/45%)=20po?=
 =?UTF-8?q?ur=20diff=C3=A9renciation=20visuelle=20accrue=20entre=20th?=
 =?UTF-8?q?=C3=A8mes,=20ajouter=20border-left=203px=20accent=20primary=20s?=
 =?UTF-8?q?ur=20tous=20tiles=20(grid/list/compact),=20enrichir=20tile-shad?=
 =?UTF-8?q?ow=20avec=20glow=20primary=20(18%=20inner=20ring=20dark,=2035%?=
 =?UTF-8?q?=20outer=20shadow=20hover),=20augmenter=20tint=20background=20v?=
 =?UTF-8?q?ues=20notes/todos/archive=20(18%=20vs=208%),=20harmoniser=20rat?=
 =?UTF-8?q?ios=20light=20mode=20(14%/28%/55%=20vs=206%/14%/35%),=20et=20ap?=
 =?UTF-8?q?pliquer=20primary-tinted=20background=20(30%=20mix)=20+=20on-pr?=
 =?UTF-8?q?imary=20color=20sur=20compact?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/css/style.css | 36 +++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 13 deletions(-)

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