williamandClaude Sonnet 5
4db1269348
Implémente toutes les options manquantes identifiées pour les listes :
typographie complète, style/position/couleur/taille de puce (validés
selon le kind), puce personnalisée en SVG pour les listes à puces,
padding uniforme par élément (nouveau, il n'y en avait aucun), espacement
entre éléments réglable, et tous les attributs de boîte partagés sur la
liste entière. Bordure/fond/padding par élément individuel et sous-listes
imbriquées volontairement différés (portée actée avec l'utilisateur
avant implémentation : transformeraient le stockage des éléments en
objets structurés, chantier bien plus lourd).
Trois ajouts transversaux bénéficiant à plusieurs éléments : sections
"Contenu"/"Conteneur" dans tous les panneaux de propriétés, alignement
vertical du contenu dans son bloc (Titre/Paragraphe/Liste/Image
légendée), et une option pour retirer un thème appliqué ("Aucun modèle"
dans la modale, avec une nouvelle fonction db.remove_document_theme).
Quatre bugs réels trouvés et corrigés en chaîne pendant la validation
avec le thème "Sécurité incendie" : un badge de thème s'affichait
au-dessus du texte au lieu d'à côté ; le correctif a d'abord fait
disparaître les puces/numéros natifs de TOUTES les listes (bug plus
grave que celui corrigé) ; puis un marqueur natif redondant apparaissait
à côté du badge du thème ; puis une règle CSS site-large de spécificité
supérieure empêchait silencieusement ce dernier correctif. Chaque étape
vérifiée par navigateur automatisé sur un support jetable.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
283 lines
8.8 KiB
CSS
283 lines
8.8 KiB
CSS
/* Thème "Sécurité Incendie" (document_engine/themes/theme_catalog.py) —
|
|
habille le contenu ET peut ajouter des flourishes décoratifs à
|
|
.docPage (ex. le liseré ::before ci-dessous), mais ne touche JAMAIS à
|
|
son FORMAT : width/aspect-ratio/max-height/overflow/background
|
|
restent la mécanique du moteur (voir static/document/
|
|
document-editor.css, retours utilisateur des 23-24/09/2026 sur le
|
|
format A4 paysage et la page toujours blanche) — 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);
|
|
|
|
/* --doc-accent/--doc-accent-2 pilotent la barre de progression et le
|
|
survol des options du Quiz (voir static/document/
|
|
document-editor.css, .docQuizProgressFill/.docQuizOption:hover) —
|
|
jamais redéfinis par .docPage lui-même (seul --doc-accent-* du
|
|
CHROME de l'éditeur s'appliquerait sinon, couleur orange générique
|
|
sans rapport avec ce thème). */
|
|
--doc-accent: var(--theme-safety-red);
|
|
--doc-accent-2: var(--theme-hazard-amber);
|
|
}
|
|
|
|
.docText[data-kind="titre"] {
|
|
font-family: var(--theme-font-display);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.docText[data-kind="paragraphe"] {
|
|
font-family: var(--theme-font-body);
|
|
}
|
|
|
|
/* ---- Liseré décoratif en haut de page — pas une propriété de format
|
|
(taille/position de .docPage inchangées, déjà position:relative et
|
|
overflow:hidden côté moteur), juste une bande de couleur superposée. ---- */
|
|
.docPage::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 5px;
|
|
background: linear-gradient(90deg, var(--theme-safety-red), var(--theme-hazard-amber));
|
|
}
|
|
|
|
/* ---- Étiquette (badge) : encart compact type avertissement/repère.
|
|
L'icône est maintenant un vrai contenu (attribut svg_markup, voir
|
|
_render_badge) plutôt qu'un glyphe CSS décoratif — un thème n'a plus
|
|
qu'à dimensionner l'icône fournie, jamais à en inventer une. Largeur/
|
|
arrondi/gras/majuscules restent des attributs PAR ÉLÉMENT (voir
|
|
element_kind_labels.element_default_attributes) : ce thème ne pose
|
|
ici que l'apparence par défaut d'un badge SANS ces réglages (pleine
|
|
largeur, 7px d'arrondi) — le contenu-seed du kicker "Module
|
|
obligatoire" les override lui-même (voir securite_incendie_seed.py). ---- */
|
|
.docBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
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;
|
|
}
|
|
|
|
.docBadgeIcon {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
color: var(--theme-safety-red);
|
|
}
|
|
|
|
.docBadgeIcon svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
/* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ----
|
|
list-style:none supprime la puce/le numéro NATIF : ce thème affiche
|
|
son propre badge (::before ci-dessous) à la place, jamais les deux à
|
|
la fois (bug réel constaté le 26/09/2026 — sans ce reset, la feuille
|
|
de base affiche désormais aussi le marqueur natif en plus du badge,
|
|
voir static/document/document-editor.css, .docList li::before, qui a
|
|
dû arrêter de neutraliser le display natif du <li> pour corriger un
|
|
autre bug — retirer le thème faisait disparaître tout marqueur). ---- */
|
|
.docList {
|
|
font-family: var(--theme-font-body);
|
|
}
|
|
|
|
/* Sélecteur avec le type d'élément (ul.../ol...), pas seulement les
|
|
classes/attributs : static/style.css (site-wide) porte une règle
|
|
`.content ol:not([type]) { list-style-type: decimal; }` d'une
|
|
spécificité légèrement supérieure (elle inclut le sélecteur d'élément
|
|
`ol`) qui l'emportait sinon silencieusement sur ce reset, même si
|
|
celui-ci charge après. */
|
|
ul.docList[data-kind="liste_puces"],
|
|
ol.docList[data-kind="liste_numerotee"] {
|
|
list-style: none;
|
|
}
|
|
|
|
.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: "";
|
|
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);
|
|
width: 22px;
|
|
height: 22px;
|
|
|
|
/* inline-flex, jamais flex : ce badge doit rester un ::before qui
|
|
s'écoule EN LIGNE à côté du texte de l'élément (voir
|
|
static/document/document-editor.css, .docList li::before) — flex
|
|
(sans inline-) le blockifie, ce qui le repousse au-dessus du texte
|
|
plutôt qu'à côté (bug réel constaté le 26/09/2026). inline-flex
|
|
garde ce comportement en ligne tout en centrant quand même le
|
|
chiffre à l'intérieur du badge (align-items/justify-content). */
|
|
display: inline-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).
|
|
Comme .docImage ci-dessus, .docCard n'a AUCUNE mise en page par défaut
|
|
côté moteur (voir _render_carte) : ce thème lui donne sa forme de
|
|
carte centrée, et une largeur égale entre cartes voisines dans une
|
|
rangée. ---- */
|
|
.docCard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
text-align: center;
|
|
padding: 12px 8px;
|
|
background: #faf7f2;
|
|
border: 1px solid var(--theme-line);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.docRow > .docCard {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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;
|
|
border-radius: 7px;
|
|
box-shadow: 0 6px 16px -6px rgb(200 16 46 / 55%);
|
|
}
|
|
|
|
/* ---- Image : cadre pour un pictogramme SVG dessiné (voir
|
|
document_engine/rendering/render_document_element.py::_render_image,
|
|
mode svg_markup). Ce <div> n'a AUCUNE taille par défaut côté moteur
|
|
(seuls .docImagePlaceholder et <img class="docImage"> en ont une) :
|
|
ce thème lui donne une hauteur/un centrage propres, sinon le SVG
|
|
s'affiche à sa taille intrinsèque dans une boîte sans forme. ---- */
|
|
.docImage {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 140px;
|
|
padding: 16px;
|
|
background: #fdf3de;
|
|
border: 1px solid var(--theme-line);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.docImage svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 150px;
|
|
}
|
|
|
|
/* Dans une rangée (voir .docRow), l'image reste une colonne compacte
|
|
plutôt que de se partager équitablement l'espace avec le texte à côté
|
|
— c'est un pictogramme d'appoint, pas le contenu principal de la
|
|
rangée. */
|
|
.docRow > .docImage {
|
|
flex: 0 1 200px;
|
|
align-self: stretch;
|
|
}
|
|
|
|
/* ---- 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);
|
|
}
|