Page Projets : menu ⋯ illisible (transparent) — refonte sur le thème barre Fusion / Spark, sombre et clair #45

Open
opened 2026-10-28 22:06:01 -04:00 by bruno · 0 comments
Owner

Problème constaté

Sur la page Projets, le menu « ⋯ » d'une tuile projet est transparent : le contenu de la carte en dessous traverse le menu et le rend illisible (capture du 28 octobre 2026).

Cause identifiée (audit)

Dans static/css/style.css, le menu utilise background: var(--surface-1) — or --surface-1 n'est défini nulle part dans :root. La variable invalide ne produit aucun fond : le menu est transparent.

Travail attendu

  • Refaire le layout et l'UX du menu ⋯ en reprenant les jetons du thème de la barre d'apps commune (static/css/draco-barre.css, prototype validé Console v7.2, aussi utilisé par la console Spark) : fond opaque, bordure, rayon 14 px, ombre portée, items en 8-10 px avec survol/focus visibles.
  • Thème sombre ET thème clair : jetons clairs par défaut, variante sombre via [data-theme="dark"] sur <html> (et repli prefers-color-scheme), comme la barre Fusion.
  • Garder le comportement existant : ouverture au clic sur ⋯, fermeture au clic ailleurs et sur Échap, aria-expanded à jour.
  • Ne pas régresser les autres actions du menu (Board, Capturer, Triage, Santé, Récit de sprint, Gitea).

Critère de validation

Vérifié par le build de l'utilisateur : le menu est opaque et lisible en thème sombre, et ses jetons clairs sont prêts pour un thème clair, sans texte de la carte qui traverse.

## Problème constaté Sur la page Projets, le menu « ⋯ » d'une tuile projet est transparent : le contenu de la carte en dessous traverse le menu et le rend illisible (capture du 28 octobre 2026). ## Cause identifiée (audit) Dans `static/css/style.css`, le menu utilise `background: var(--surface-1)` — or `--surface-1` n'est défini nulle part dans `:root`. La variable invalide ne produit aucun fond : le menu est transparent. ## Travail attendu - Refaire le layout et l'UX du menu ⋯ en reprenant les jetons du thème de la barre d'apps commune (`static/css/draco-barre.css`, prototype validé Console v7.2, aussi utilisé par la console Spark) : fond opaque, bordure, rayon 14 px, ombre portée, items en 8-10 px avec survol/focus visibles. - Thème sombre ET thème clair : jetons clairs par défaut, variante sombre via `[data-theme="dark"]` sur `<html>` (et repli `prefers-color-scheme`), comme la barre Fusion. - Garder le comportement existant : ouverture au clic sur ⋯, fermeture au clic ailleurs et sur Échap, `aria-expanded` à jour. - Ne pas régresser les autres actions du menu (Board, Capturer, Triage, Santé, Récit de sprint, Gitea). ## Critère de validation Vérifié par le build de l'utilisateur : le menu est opaque et lisible en thème sombre, et ses jetons clairs sont prêts pour un thème clair, sans texte de la carte qui traverse.
bruno added the kanban:todo label 2026-10-28 22:06:01 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Projets/kanbante#45