kyuno/batchCooking
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

fix(web): rend le contexte des tech steps réellement visible

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Nicolas 2026-08-21 18:30:49 +02:00
parent 76175bcdbf
commit c190f3f21c
1 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/web/src/features/recipes/recipes.scss
View file

@ -629,17 +629,24 @@
// The wider clause a `.step-tech-step` keyword was found in (see // The wider clause a `.step-tech-step` keyword was found in (see
// StepDescription.tsx/highlight-tech-steps.ts's `contextStart`/ // StepDescription.tsx/highlight-tech-steps.ts's `contextStart`/
// `contextEnd`) — a much lighter tint than the keyword itself (no // `contextEnd`) — a lighter treatment than the keyword itself (no dotted
// underline, no hover/focus state: purely visual, not interactive, the // underline, no hover/focus state, no cursor: help: purely visual, not
// keyword segment inside/beside it already carries the tooltip) so the // interactive, the keyword segment inside/beside it already carries the
// keyword still reads as the strongest highlight, this just shows how much // tooltip) so the keyword still reads as the strongest highlight, this
// of the sentence it was understood from. // 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 { .step-tech-step-context {
display: inline; display: inline;
padding: 0 0.15em; padding: 0 0.15em;
margin: 0; margin: 0;
border-radius: 0.2em; 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) ----------------------------- // --- Favorite star toggle (detail panel header) -----------------------------