williamandClaude Sonnet 5
864ae697fd
Nouveau bouton dans le topbar de l'éditeur, à côté d'Aperçu, qui ouvre une modale listant les thèmes du catalogue (document_engine/themes/). Cliquer un thème charge un VRAI aperçu (rendu serveur réel dans un iframe, jamais une resucée CSS côté client) avec le choix de garder le contenu actuel ou de le remplacer par le contenu de démonstration du modèle. Architecture pensée pour une centaine de thèmes futurs : chaque thème est une feuille de style externe (static/document/themes/<id>.css) qui habille les classes fixes du moteur, jamais du code qui en changerait la structure. Premier thème implémenté pour valider le mécanisme : "Sécurité Incendie" (6 pages de contenu réel, quiz inclus). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
170 lines
4.3 KiB
CSS
170 lines
4.3 KiB
CSS
/* Thème "Sécurité Incendie" (document_engine/themes/theme_catalog.py) —
|
|
habille UNIQUEMENT le contenu (jamais .docPage lui-même : format A4
|
|
paysage, fond blanc et espacement restent la mécanique du moteur, voir
|
|
static/document/document-editor.css — un thème ne les redéfinit
|
|
jamais, sous peine de casser le format garanti de la page). Chargé
|
|
APRÈS document-editor.css (voir templates/document/
|
|
document_edit.html et document_theme_preview.html), donc prioritaire
|
|
à spécificité égale sur les quelques couleurs de contenu que le
|
|
moteur pose par défaut (--forge-text, --doc-text). */
|
|
|
|
.docPageContent {
|
|
--theme-ink: #241f1c;
|
|
--theme-ink-muted: #6b6259;
|
|
--theme-line: #e7dfd2;
|
|
--theme-safety-red: #c8102e;
|
|
--theme-safety-red-dark: #8f0b20;
|
|
--theme-safety-red-tint: #fbe9ec;
|
|
--theme-hazard-amber: #e3a72e;
|
|
--theme-hazard-amber-dark: #a97815;
|
|
--theme-ok-green: #2e7d46;
|
|
--theme-font-display: "Oswald", sans-serif;
|
|
--theme-font-body: "Source Sans 3", sans-serif;
|
|
|
|
font-family: var(--theme-font-body);
|
|
|
|
--forge-text: var(--theme-ink);
|
|
--forge-text-muted: var(--theme-ink-muted);
|
|
}
|
|
|
|
.docText[data-kind="titre"] {
|
|
font-family: var(--theme-font-display);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.docText[data-kind="paragraphe"] {
|
|
font-family: var(--theme-font-body);
|
|
}
|
|
|
|
/* ---- Étiquette (badge) : encart compact type avertissement/repère ---- */
|
|
.docBadge {
|
|
display: inline-block;
|
|
font-family: var(--theme-font-body);
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
color: var(--theme-safety-red-dark);
|
|
background: var(--theme-safety-red-tint);
|
|
padding: 8px 12px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
/* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ---- */
|
|
.docList {
|
|
font-family: var(--theme-font-body);
|
|
}
|
|
|
|
.docList li {
|
|
background: #faf7f2;
|
|
border: 1px solid var(--theme-line);
|
|
border-left: 3px solid var(--theme-hazard-amber);
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.docList[data-kind="liste_puces"] li::before {
|
|
content: "";
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: 1px;
|
|
border-radius: 4px;
|
|
background: var(--theme-ok-green);
|
|
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"/></svg>') center / 11px no-repeat;
|
|
}
|
|
|
|
.docList[data-kind="liste_numerotee"] {
|
|
counter-reset: doc-theme-step;
|
|
}
|
|
|
|
.docList[data-kind="liste_numerotee"] li::before {
|
|
counter-increment: doc-theme-step;
|
|
content: counter(doc-theme-step);
|
|
flex-shrink: 0;
|
|
width: 22px;
|
|
height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: var(--theme-safety-red);
|
|
color: #fff;
|
|
font-family: var(--theme-font-display);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.docList[data-kind="liste_numerotee"] li {
|
|
border-left-color: var(--theme-safety-red);
|
|
}
|
|
|
|
/* ---- Carte : classes de feu (repère en pastille + titre + description) ---- */
|
|
.docCard {
|
|
background: #faf7f2;
|
|
border: 1px solid var(--theme-line);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.docCardLabel {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
font-family: var(--theme-font-display);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
background: var(--theme-ink-muted);
|
|
}
|
|
|
|
.docCardTitle {
|
|
font-family: var(--theme-font-body);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--theme-ink);
|
|
}
|
|
|
|
.docCardDescription {
|
|
font-family: var(--theme-font-body);
|
|
font-size: 10.5px;
|
|
color: var(--theme-ink-muted);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ---- Bouton d'action ---- */
|
|
.docButton {
|
|
font-family: var(--theme-font-display);
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
background: var(--theme-safety-red);
|
|
color: #fff;
|
|
box-shadow: 0 6px 16px -6px rgb(200 16 46 / 55%);
|
|
}
|
|
|
|
/* ---- Image : cadre discret pour un pictogramme dessiné ---- */
|
|
.docImage {
|
|
background: #fdf3de;
|
|
border: 1px solid var(--theme-line);
|
|
}
|
|
|
|
/* ---- Quiz : palette rouge sécurité sur fond blanc ---- */
|
|
.docQuizKicker {
|
|
font-family: var(--theme-font-display);
|
|
color: var(--theme-safety-red);
|
|
}
|
|
|
|
.docQuizPlayerTitle {
|
|
font-family: var(--theme-font-display);
|
|
}
|
|
|
|
.docQuizOption {
|
|
background: #faf7f2;
|
|
border-color: var(--theme-line);
|
|
}
|
|
|
|
.docQuizOptionLetter {
|
|
font-family: var(--theme-font-display);
|
|
}
|