adam/Paillasse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

corrige le thème sombre et la taille du menu avatar de la coquille

Browse source 
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 <svg>
sans largeur/hauteur se rend à 300x150 px par défaut) : c'était ça qui
gonflait le menu.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi 2026-10-13 21:13:21 +02:00
parent 592cba9c4c
commit 954bb6ca6c
2 changed files with 46 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

33
portail/public/css/app-shell.css
View file

@ -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; }