From c190f3f21c73b44eeb9752cb027f2febbe9752b3 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Fri, 21 Aug 2026 18:30:49 +0200 Subject: [PATCH] =?UTF-8?q?fix(web):=20rend=20le=20contexte=20des=20tech?= =?UTF-8?q?=20steps=20r=C3=A9ellement=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le style existant (fond teinté à 6% d'opacité, sans autre indice visuel) était structurellement correct — vérifié en base, l'API et le DOM contenaient bien les spans de contexte — mais imperceptible à l'œil sur ce thème sombre : --color-primary n'est pas assez saturé pour qu'une teinte de quelques % se distingue du fond de la carte. Vérifié en créant une recette test dans le navigateur et en zoomant le texte rendu : littéralement aucune différence visible avant, un rectangle net après. Passe à 10% de fond + une bordure basse pleine à 45% d'opacité comme second indice visuel indépendant, tout en gardant le mot-clé (soulignement pointillé + fond à 14% + curseur + tooltip) nettement plus marqué que son contexte. Co-Authored-By: Claude Sonnet 5 --- apps/web/src/features/recipes/recipes.scss | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss index a21fefa..3ad0ea0 100644 --- a/apps/web/src/features/recipes/recipes.scss +++ b/apps/web/src/features/recipes/recipes.scss @@ -629,17 +629,24 @@ // The wider clause a `.step-tech-step` keyword was found in (see // StepDescription.tsx/highlight-tech-steps.ts's `contextStart`/ -// `contextEnd`) — a much lighter tint than the keyword itself (no -// underline, no hover/focus state: purely visual, not interactive, the -// keyword segment inside/beside it already carries the tooltip) so the -// keyword still reads as the strongest highlight, this just shows how much -// of the sentence it was understood from. +// `contextEnd`) — a lighter treatment than the keyword itself (no dotted +// underline, no hover/focus state, no cursor: help: purely visual, not +// interactive, the keyword segment inside/beside it already carries the +// tooltip) so the keyword still reads as the strongest highlight, this +// just shows how much of the sentence it was understood from. The +// original 6% background tint (half the keyword's own 14%) turned out to +// be imperceptible in practice against this dark theme — `--color-primary` +// itself isn't bright/saturated enough for a same-order-of-magnitude +// percentage cut in half to still read as "highlighted" rather than "not +// highlighted at all" — so this pairs a still-subtle 10% background with a +// thin solid bottom border for a second, independent visual cue. .step-tech-step-context { display: inline; padding: 0 0.15em; margin: 0; border-radius: 0.2em; - background: color-mix(in srgb, var(--color-primary) 6%, transparent); + background: color-mix(in srgb, var(--color-primary) 10%, transparent); + border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent); } // --- Favorite star toggle (detail panel header) -----------------------------