Audit complet de mise en forme — Liste à puces/numérotée (4e élément)
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>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
8f879f6321
commit
4db1269348
@@ -96,11 +96,29 @@
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
/* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ---- */
|
||||
/* ---- 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);
|
||||
@@ -110,7 +128,6 @@
|
||||
|
||||
.docList[data-kind="liste_puces"] li::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 1px;
|
||||
@@ -126,10 +143,17 @@
|
||||
.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;
|
||||
|
||||
/* 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%;
|
||||
|
||||
Reference in New Issue
Block a user