954bb6ca6c
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>
193 lines
12 KiB
CSS
193 lines
12 KiB
CSS
/* Syllabus — coquille de l'application (séparation vitrine/application, 2026-10-13). */
|
|
:root {
|
|
--app-topbar-h: 56px;
|
|
--app-sidebar-w: 248px;
|
|
--app-tabbar-h: 58px;
|
|
}
|
|
|
|
html[data-taille="grand"] { font-size: 18px; }
|
|
|
|
/* Thème sombre : explicite, ou "système" + préférence OS. */
|
|
html[data-theme="sombre"] {
|
|
--sy-bg: #0f172a; --sy-surface: #17223a; --sy-line: #2a3b57; --sy-ink: #e8ecf3; --sy-muted: #9aa7bd;
|
|
--sy-blue: #5b8dff; --sy-blue-dark: #4876e0; --sy-navy: #c6d4f5;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
html[data-theme="systeme"] {
|
|
--sy-bg: #0f172a; --sy-surface: #17223a; --sy-line: #2a3b57; --sy-ink: #e8ecf3; --sy-muted: #9aa7bd;
|
|
--sy-blue: #5b8dff; --sy-blue-dark: #4876e0; --sy-navy: #c6d4f5;
|
|
}
|
|
}
|
|
html[data-theme="sombre"] body, html[data-theme="sombre"] .app-topbar, html[data-theme="sombre"] .app-sidebar,
|
|
html[data-theme="sombre"] .app-tabbar, html[data-theme="sombre"] .app-chat-fenetre { color-scheme: dark; }
|
|
@media (prefers-color-scheme: dark) {
|
|
html[data-theme="systeme"] body, html[data-theme="systeme"] .app-topbar, html[data-theme="systeme"] .app-sidebar,
|
|
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 {
|
|
position: sticky; top: 0; z-index: 50; height: var(--app-topbar-h);
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
padding: 0 16px; background: var(--sy-surface); border-bottom: 1px solid var(--sy-line);
|
|
}
|
|
.app-topbar__logo { display: flex; align-items: center; gap: 0; text-decoration: none; }
|
|
.app-topbar__logo img { height: 28px; width: auto; display: block; }
|
|
.app-topbar__logo span { font-family: Mulish, system-ui, sans-serif; font-weight: 800; font-size: 17px; color: var(--sy-ink); margin-left: -12px; }
|
|
|
|
.app-topbar__avatar { position: relative; }
|
|
.app-topbar__avatar-btn {
|
|
display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border: 0; border-radius: 999px;
|
|
background: transparent; cursor: pointer; font-family: Mulish, system-ui, sans-serif; font-weight: 700; color: var(--sy-ink);
|
|
}
|
|
.app-topbar__avatar-btn:hover { background: var(--sy-bg); }
|
|
.app-topbar__avatar-cercle {
|
|
width: 32px; height: 32px; border-radius: 999px; background: var(--sy-blue); color: #fff;
|
|
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); 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: 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 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)); }
|
|
|
|
.app-sidebar {
|
|
width: var(--app-sidebar-w); flex: none; border-right: 1px solid var(--sy-line); background: var(--sy-surface);
|
|
padding: 16px 10px; position: sticky; top: var(--app-topbar-h); height: calc(100vh - var(--app-topbar-h)); overflow-y: auto;
|
|
}
|
|
.app-sidebar__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
|
|
.app-sidebar__nav a {
|
|
display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none;
|
|
font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 15px; color: var(--sy-ink); position: relative;
|
|
}
|
|
.app-sidebar__nav a:hover { background: var(--sy-bg); }
|
|
.app-sidebar__nav a[aria-current="page"] { background: #eef0fd; color: var(--sy-blue-dark); }
|
|
html[data-theme="sombre"] .app-sidebar__nav a[aria-current="page"],
|
|
html[data-theme="systeme"] .app-sidebar__nav a[aria-current="page"] { background: rgba(91,141,255,.16); }
|
|
.app-sidebar__nav svg { flex: none; width: 22px; height: 22px; }
|
|
.app-sidebar__badge {
|
|
margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #c5221f; color: #fff;
|
|
font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.app-sidebar__titre {
|
|
margin: 18px 0 6px; padding: 0 12px; font-family: Mulish, system-ui, sans-serif; font-size: 12px; font-weight: 800;
|
|
letter-spacing: .02em; color: var(--sy-muted); text-transform: uppercase;
|
|
}
|
|
.app-sidebar__epingler {
|
|
display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; width: 100%; border: 1px dashed var(--sy-line);
|
|
background: none; font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--sy-muted); cursor: pointer;
|
|
}
|
|
.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; }
|
|
|
|
.app-main { flex: 1; min-width: 0; }
|
|
|
|
/* Chat Messenger */
|
|
.app-chat-bulle {
|
|
position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 999px; border: 0;
|
|
background: var(--sy-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
|
|
box-shadow: 0 10px 24px -8px rgba(15,23,42,.4);
|
|
}
|
|
.app-chat-bulle svg { width: 26px; height: 26px; }
|
|
.app-chat-bulle__badge {
|
|
position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
|
|
background: #c5221f; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
|
|
border: 2px solid var(--sy-bg);
|
|
}
|
|
.app-chat-fenetre {
|
|
position: fixed; right: 20px; bottom: 88px; z-index: 60; width: 340px; height: 460px; border-radius: 16px;
|
|
background: var(--sy-surface); border: 1px solid var(--sy-line); box-shadow: 0 20px 48px -16px rgba(15,23,42,.35);
|
|
display: flex; flex-direction: column; overflow: hidden;
|
|
}
|
|
.app-chat-fenetre__entete {
|
|
display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--sy-line);
|
|
font-family: Mulish, system-ui, sans-serif; font-weight: 800; color: var(--sy-ink);
|
|
}
|
|
.app-chat-fenetre__entete button { border: 0; background: none; cursor: pointer; color: var(--sy-muted); padding: 4px; }
|
|
.app-chat-fenetre__corps { flex: 1; overflow-y: auto; padding: 10px 12px; display: grid; gap: 8px; align-content: start; }
|
|
.app-chat-fenetre__liste-fils { list-style: none; margin: 0; padding: 0; display: grid; }
|
|
.app-chat-fenetre__liste-fils li button {
|
|
width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer;
|
|
padding: 10px 6px; border-radius: 10px; font-family: Mulish, system-ui, sans-serif; font-weight: 700; color: var(--sy-ink);
|
|
}
|
|
.app-chat-fenetre__liste-fils li button:hover { background: var(--sy-bg); }
|
|
.app-bulle-message { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-family: Mulish, system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; }
|
|
.app-bulle-message--eleve { justify-self: start; background: var(--sy-bg); color: var(--sy-ink); border: 1px solid var(--sy-line); }
|
|
.app-bulle-message--prof { justify-self: end; background: var(--sy-blue); color: #fff; }
|
|
.app-chat-fenetre__pied { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--sy-line); }
|
|
.app-chat-fenetre__pied input {
|
|
flex: 1; border: 1px solid var(--sy-line); border-radius: 999px; padding: 8px 12px; font-family: inherit; background: var(--sy-bg); color: var(--sy-ink);
|
|
}
|
|
.app-chat-fenetre__pied button {
|
|
border: 0; background: var(--sy-blue); color: #fff; border-radius: 999px; padding: 0 16px; font-weight: 800; cursor: pointer;
|
|
}
|
|
.app-chat-fenetre__desactive { padding: 14px; text-align: center; color: var(--sy-muted); font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 13px; }
|
|
|
|
/* Barre d'onglets mobile */
|
|
.app-tabbar {
|
|
display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; height: var(--app-tabbar-h);
|
|
background: var(--sy-surface); border-top: 1px solid var(--sy-line);
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
.app-tabbar__liste { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
|
|
.app-tabbar__liste a, .app-tabbar__liste button {
|
|
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
|
|
text-decoration: none; border: 0; background: none; cursor: pointer; font-family: Mulish, system-ui, sans-serif;
|
|
font-size: 11px; font-weight: 700; color: var(--sy-muted); position: relative;
|
|
}
|
|
.app-tabbar__liste a[aria-current="page"] { color: var(--sy-blue); }
|
|
.app-tabbar__liste svg { width: 22px; height: 22px; }
|
|
.app-feuille {
|
|
display: none; position: fixed; inset: 0; z-index: 65; background: var(--sy-surface);
|
|
}
|
|
.app-feuille__entete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sy-line); }
|
|
.app-feuille__contenu { padding: 10px; overflow-y: auto; height: calc(100% - 56px); }
|
|
.app-feuille__contenu a, .app-feuille__contenu button {
|
|
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none;
|
|
padding: 14px 10px; font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 16px; color: var(--sy-ink);
|
|
text-decoration: none; cursor: pointer;
|
|
}
|
|
.app-feuille__contenu svg { width: 22px; height: 22px; flex: none; }
|
|
|
|
@media (max-width: 860px) {
|
|
.app-sidebar { display: none; }
|
|
.app-tabbar { display: block; }
|
|
.app-shell { min-height: calc(100vh - var(--app-topbar-h) - var(--app-tabbar-h)); padding-bottom: var(--app-tabbar-h); }
|
|
.app-chat-bulle { display: none; }
|
|
.app-chat-fenetre.est-ouverte { right: 0; bottom: 0; left: 0; top: var(--app-topbar-h); width: auto; height: auto; border-radius: 0; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .app-chat-fenetre, .app-feuille { transition: none; } }
|