From 09449fe9119ad2a863b130b7fde33ad41407db21 Mon Sep 17 00:00:00 2001 From: william Date: Thu, 24 Sep 2026 09:25:32 +0200 Subject: [PATCH] =?UTF-8?q?Corrige=20le=20style=20du=20th=C3=A8me=20S?= =?UTF-8?q?=C3=A9curit=C3=A9=20Incendie=20=E2=80=94=20plusieurs=20=C3=A9l?= =?UTF-8?q?=C3=A9ments=20n'avaient=20aucune=20mise=20en=20page=20par=20d?= =?UTF-8?q?=C3=A9faut?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signalé par capture d'écran : le rendu réel ne ressemblait pas du tout à la maquette. Causes trouvées : - .docImage (mode SVG inline) et .docCard n'ont AUCUNE règle de mise en page côté moteur (seuls .docImagePlaceholder et en ont une) — le thème doit leur donner leur forme, pas seulement leurs couleurs. - --doc-accent/--doc-accent-2 (barre de progression et survol du Quiz) n'étaient jamais redéfinis, gardant l'orange générique du chrome de l'éditeur au lieu du rouge du thème. - Le liseré décoratif en haut de page et la puce de l'étiquette (icône) avaient été omis en pensant, à tort, qu'ils relevaient du FORMAT de .docPage — ce ne sont que des flourishes visuels, aucun rapport avec la taille/le format A4 paysage qui doit rester intouchable. Co-Authored-By: Claude Sonnet 5 --- static/document/themes/securite-incendie.css | 96 ++++++++++++++++++-- 1 file changed, 87 insertions(+), 9 deletions(-) diff --git a/static/document/themes/securite-incendie.css b/static/document/themes/securite-incendie.css index b40f5a39..a879f4cd 100644 --- a/static/document/themes/securite-incendie.css +++ b/static/document/themes/securite-incendie.css @@ -1,9 +1,12 @@ /* 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/ + 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). */ @@ -25,6 +28,15 @@ --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"] { @@ -36,9 +48,27 @@ font-family: var(--theme-font-body); } -/* ---- Étiquette (badge) : encart compact type avertissement/repère ---- */ +/* ---- 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, + avec une puce décorative (::before, glyphe générique — le kind + "badge" du moteur ne porte aucun slot d'icône, voir + document_engine/rendering/render_document_element.py::_render_badge). ---- */ .docBadge { - display: inline-block; + display: inline-flex; + align-items: center; + gap: 8px; font-family: var(--theme-font-body); font-size: 12.5px; font-weight: 600; @@ -49,6 +79,12 @@ border-radius: 7px; } +.docBadge::before { + content: "●"; + color: var(--theme-safety-red); + font-size: 9px; +} + /* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ---- */ .docList { font-family: var(--theme-font-body); @@ -97,13 +133,28 @@ border-left-color: var(--theme-safety-red); } -/* ---- Carte : classes de feu (repère en pastille + titre + description) ---- */ +/* ---- 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; @@ -140,13 +191,40 @@ 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 discret pour un pictogramme dessiné ---- */ +/* ---- Image : cadre pour un pictogramme SVG dessiné (voir + document_engine/rendering/render_document_element.py::_render_image, + mode svg_markup). Ce
n'a AUCUNE taille par défaut côté moteur + (seuls .docImagePlaceholder et 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 ---- */