From 954bb6ca6ce09ec30a5eaf9c43e354abf68f17e6 Mon Sep 17 00:00:00 2001 From: Adam Belkacemi Date: Tue, 13 Oct 2026 21:13:21 +0200 Subject: [PATCH] =?UTF-8?q?corrige=20le=20th=C3=A8me=20sombre=20et=20la=20?= =?UTF-8?q?taille=20du=20menu=20avatar=20de=20la=20coquille?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit syllabus-theme.css forçait html/body et l'en-tête en blanc avec des couleurs codées en dur et !important : le texte passait en clair mais le fond restait blanc, d'où le texte illisible signalé par Adam. Des règles plus précises reprennent la main en thème sombre. Les icônes du menu avatar et des raccourcis n'avaient aucune taille en CSS (un sans largeur/hauteur se rend à 300x150 px par défaut) : c'était ça qui gonflait le menu. Co-Authored-By: Claude Sonnet 5 --- docs/journal.md | 19 ++++++++++++++++++ portail/public/css/app-shell.css | 33 ++++++++++++++++++++++++++------ 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/docs/journal.md b/docs/journal.md index 58bda03..48e88dc 100644 --- a/docs/journal.md +++ b/docs/journal.md @@ -1006,3 +1006,22 @@ La leçon technique : les données injectées par un `View::composer` sur un lay **Suite** Reprendre le chantier « vrai cockpit » : Observations étant maintenant construites, il ne reste que Surveillance d'examen — à cadrer avec Adam avant de coder (RGPD, mineurs). + +## 2026-10-14 — Coquille : thème sombre et menu avatar + +Retour d'Adam après avoir vu la coquille : du texte clair illisible par endroits, et le menu avatar (Mon profil, Paramètres…) beaucoup trop grand. + +**Trouvé en lisant le CSS** (pas besoin d'un navigateur pour celui-ci) : + +- `syllabus-theme.css`, écrit pour la vitrine avant que le thème sombre n'existe, force `html, body` et l'en-tête (`body > header`) en blanc avec des couleurs codées en dur et `!important` — trois fois dans le fichier. Mes règles de thème sombre dans `app-shell.css` n'avaient pas ce poids : le texte passait bien en clair (lui vient d'une variable), mais le fond restait blanc. D'où le texte clair illisible : ce n'est pas un bug séparé, c'est la même cause. +- Les icônes du menu avatar n'avaient aucune taille en CSS. Un `` sans largeur ni hauteur se rend par défaut à 300×150 px dans le navigateur : c'est ça qui gonflait chaque ligne du menu. Même oubli sur l'icône des raccourcis dans la barre latérale. + +**Fait** : des règles plus précises et avec `!important`, chargées après, redonnent la main aux pages de l'application pour le fond de `html`/`body`/l'en-tête en thème sombre ; taille explicite (16 à 22 px selon l'endroit) sur toutes les icônes qui n'en avaient pas ; menu avatar resserré (220 px, moins de marge intérieure). + +**Vérifié** : le CSS corrigé est bien servi par le serveur ; un prof jetable qui passe en thème sombre dans Paramètres obtient bien `data-theme="sombre"` sur la page. Je n'ai pas pu vérifier le rendu dans un vrai navigateur (extension Chrome non connectée cette fois) — à confirmer visuellement. + +**Dette non résolue** (déjà notée) : les pages migrées avant la coquille (quiz, devoirs, mes-classes) gardent des couleurs codées en dur par endroits et ne suivront pas parfaitement le thème sombre. + +**Suite** + +Adam vérifie visuellement (thème sombre, menu avatar, mobile) et me dit si autre chose cloche. Sinon : Surveillance d'examen. diff --git a/portail/public/css/app-shell.css b/portail/public/css/app-shell.css index 5a11650..842b08e 100644 --- a/portail/public/css/app-shell.css +++ b/portail/public/css/app-shell.css @@ -25,6 +25,25 @@ html[data-theme="sombre"] .app-tabbar, html[data-theme="sombre"] .app-chat-fenet html[data-theme="systeme"] .app-tabbar, html[data-theme="systeme"] .app-chat-fenetre { color-scheme: dark; } } +/* syllabus-theme.css (pensé pour la vitrine, jamais pour un thème sombre) + force le fond de html/body et de l'en-tête en blanc avec des couleurs + codées en dur et !important. Ces règles, plus précises et chargées + après, reprennent la main pour les pages de l'application. */ +html[data-theme="sombre"], +html[data-theme="sombre"] body { + background: var(--sy-bg) !important; + color: var(--sy-ink) !important; +} +html[data-theme="sombre"] body > .app-topbar { background: var(--sy-surface) !important; color: var(--sy-ink) !important; } +@media (prefers-color-scheme: dark) { + html[data-theme="systeme"], + html[data-theme="systeme"] body { + background: var(--sy-bg) !important; + color: var(--sy-ink) !important; + } + html[data-theme="systeme"] body > .app-topbar { background: var(--sy-surface) !important; color: var(--sy-ink) !important; } +} + body.app-corps { background: var(--sy-bg); } .app-topbar { @@ -47,17 +66,18 @@ body.app-corps { background: var(--sy-bg); } display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; } .app-topbar__menu { - position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--sy-surface); - border: 1px solid var(--sy-line); border-radius: 14px; box-shadow: 0 16px 32px -12px rgba(15,23,42,.28); - padding: 6px; display: grid; gap: 2px; + position: absolute; right: 0; top: calc(100% + 6px); width: 220px; background: var(--sy-surface); + border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: 0 16px 32px -12px rgba(15,23,42,.28); + padding: 4px; display: grid; gap: 1px; } .app-topbar__menu a, .app-topbar__menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; - padding: 9px 10px; border-radius: 9px; font-family: Mulish, system-ui, sans-serif; font-weight: 600; font-size: 14px; - color: var(--sy-ink); cursor: pointer; text-decoration: none; + padding: 7px 8px; border-radius: 8px; font-family: Mulish, system-ui, sans-serif; font-weight: 600; font-size: 13px; + line-height: 1.3; color: var(--sy-ink); cursor: pointer; text-decoration: none; } .app-topbar__menu a:hover, .app-topbar__menu button:hover { background: var(--sy-bg); } -.app-topbar__menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--sy-line); } +.app-topbar__menu svg { flex: none; width: 16px; height: 16px; } +.app-topbar__menu hr { margin: 3px 2px; border: 0; border-top: 1px solid var(--sy-line); } .app-shell { display: flex; min-height: calc(100vh - var(--app-topbar-h)); } @@ -89,6 +109,7 @@ html[data-theme="systeme"] .app-sidebar__nav a[aria-current="page"] { background } .app-sidebar__epingler:hover { color: var(--sy-blue); border-color: var(--sy-blue); } .app-sidebar__raccourci { display: flex; align-items: center; gap: 8px; } +.app-sidebar__raccourci svg { flex: none; width: 18px; height: 18px; } .app-sidebar__raccourci form { margin-left: auto; } .app-sidebar__raccourci button[type="submit"] { border: 0; background: none; cursor: pointer; color: var(--sy-muted); font-size: 16px; line-height: 1; padding: 2px 6px; } .app-sidebar__raccourci button[type="submit"]:hover { color: #c5221f; }