From b633126a7e6edaa41e6aad82f1057d042e264196 Mon Sep 17 00:00:00 2001 From: william Date: Thu, 24 Sep 2026 06:45:17 +0200 Subject: [PATCH] =?UTF-8?q?3=20correctifs=20Aper=C3=A7u=20:=20bords=20carr?= =?UTF-8?q?=C3=A9s=20des=20mini-jeux,=20titres=20en=20noir,=20vrai=20plein?= =?UTF-8?q?=20=C3=A9cran?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Capture utilisateur à l'appui du 24/09/2026. - border-radius:0 sur toutes les cartes/boutons/cases du JOUEUR de mini-jeu (.docMinigame, .docQuizCard/.docQuizResultCard, .docQuizOption, .docQuizFeedback, .docQuizNextBtn/.docQuizRestartBtn, .docAssocCard, .docAssocItem/.docAssocSlot, .docMinigameRestartBar button, .docMemoryCardWrap/.docMemoryCardFace, .docMotsCell/.docMotsWordChip) — "les bord des mini jeu ne doivent plus etre arrondie". Le badge rond A/B (.docQuizOptionLetter, un cercle volontaire) et le graphe d'édition du Scénario (outil de configuration, pas le joueur) restent hors scope. - Bug réel trouvé : .docQuizPlayerTitle/.docQuizQuestionText/ .docAssocTitle (et autres titres sans `color` propre) restaient quasi invisibles sur la page blanche — `color` est une propriété HÉRITÉE, et redéfinir la custom property --doc-text sur .docPage (fait la session précédente) ne "recoupe" pas une couleur DÉJÀ CALCULÉE plus haut sur .docEditor3 (palette sombre). Ajoute color:var(--doc-text) explicitement sur .docPage, qui relance la résolution avec la bonne valeur locale pour tout descendant sans `color` propre. - La page ne remplissait pas toute la hauteur en Aperçu (bande noire en bas) : .docEditor3 s'appuie sur flex:1 1 auto pour sa taille, valide seulement comme enfant d'un flex container normal — une fois réellement en plein écran (peint hors du flux normal par le navigateur), ce mécanisme perd son contexte. width/height explicites en secours sur .docEditor3:fullscreen et .docEditor3.docEditor3--preview. Vérifié par getComputedStyle (border-radius à 0, --doc-text résolu en sombre au niveau de .docPage, dimensions 100vw/100vh en preview). Co-Authored-By: Claude Sonnet 5 --- static/document/document-editor.css | 56 ++++++++++++++++++++++------- 1 file changed, 43 insertions(+), 13 deletions(-) diff --git a/static/document/document-editor.css b/static/document/document-editor.css index f8416b90..e75d4f8c 100644 --- a/static/document/document-editor.css +++ b/static/document/document-editor.css @@ -425,6 +425,16 @@ body.objectEditBody > main.content { --doc-quiz-danger-border: #c1451f; --doc-quiz-danger-text: #7a1418; + /* Bug réel constaté le 24/09/2026 (capture à l'appui) : redéfinir la + custom property --doc-text ci-dessus NE SUFFIT PAS pour les textes + de mini-jeu SANS déclaration `color` propre (ex. .docQuizPlayerTitle, + .docQuizQuestionText) — `color` est une propriété HÉRITÉE, et sans + déclaration explicite ici, ces éléments héritent la couleur déjà + CALCULÉE plus haut sur .docEditor3 (color:var(--doc-text) résolu + LÀ-BAS avec la palette sombre de l'éditeur, quasi blanche), jamais + une réévaluation de --doc-text à CE niveau. Poser `color` ICI casse + cette chaîne d'héritage et la relance avec la bonne valeur locale. */ + color: var(--doc-text); border: 1px solid var(--doc-border); border-radius: 16px; box-shadow: 0 1px 3px rgb(0 0 0 / 30%); @@ -592,7 +602,11 @@ img.docImage { .docMinigame { border: 1px solid var(--doc-accent); - border-radius: 12px; + + /* Bords carrés, jamais arrondis (retour utilisateur du 24/09/2026 : + "les bord des mini jeu ne doivent plus etre arrondie") — même + règle pour toutes les cartes/boutons/cases du joueur ci-dessous. */ + border-radius: 0; background: rgb(255 95 46 / 8%); } @@ -687,7 +701,7 @@ img.docImage { justify-content: flex-start; background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2)); border: 1px solid var(--doc-border); - border-radius: 16px; + border-radius: 0; padding: 1.8rem; } @@ -752,7 +766,7 @@ img.docImage { border: 1px solid var(--doc-border); background: var(--doc-bg-2); color: var(--doc-text); - border-radius: 10px; + border-radius: 0; font-size: 15px; font-weight: 500; cursor: pointer; @@ -810,7 +824,7 @@ img.docImage { display: none; margin-top: 16px; padding: 13px 15px; - border-radius: 10px; + border-radius: 0; font-size: 14px; line-height: 1.5; } @@ -839,7 +853,7 @@ img.docImage { .docQuizNextBtn { padding: 0.75rem 1.6rem; - border-radius: 10px; + border-radius: 0; border: none; background: linear-gradient(120deg, var(--doc-accent), var(--doc-accent-2)); color: #14100c; @@ -875,7 +889,7 @@ img.docImage { .docQuizRestartBtn { padding: 0.7rem 1.5rem; - border-radius: 10px; + border-radius: 0; background: transparent; border: 1px solid var(--doc-border); color: var(--doc-text); @@ -895,7 +909,7 @@ img.docImage { justify-content: flex-start; background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2)); border: 1px solid var(--doc-border); - border-radius: 16px; + border-radius: 0; padding: 1.8rem; } @@ -931,7 +945,7 @@ img.docImage { border: 1px solid var(--doc-border); background: var(--doc-bg-2); color: var(--doc-text); - border-radius: 10px; + border-radius: 0; font-size: 14px; font-weight: 500; transition: border-color 0.15s ease, opacity 0.15s ease; @@ -982,7 +996,7 @@ img.docImage { .docMinigameRestartBar button { padding: 0.7rem 1.5rem; - border-radius: 10px; + border-radius: 0; background: transparent; border: 1px solid var(--doc-border); color: var(--doc-text); @@ -1051,7 +1065,7 @@ img.docImage { justify-content: flex-start; background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2)); border: 1px solid var(--doc-border); - border-radius: 16px; + border-radius: 0; padding: 1.8rem; } @@ -1101,7 +1115,7 @@ img.docImage { justify-content: center; gap: 4px; padding: 6px; - border-radius: 10px; + border-radius: 0; border: 1px solid var(--doc-border); background: var(--doc-bg-2); backface-visibility: hidden; @@ -1166,7 +1180,7 @@ img.docImage { color: var(--doc-text); font-weight: 700; font-size: 13px; - border-radius: 4px; + border-radius: 0; cursor: pointer; } @@ -1192,7 +1206,7 @@ img.docImage { .docMotsWordChip { padding: 8px 12px; border: 1px solid var(--doc-border); - border-radius: 8px; + border-radius: 0; font-size: 13px; font-weight: 600; color: var(--doc-text); @@ -1790,6 +1804,22 @@ img.docImage { .docTopbar désormais (retour utilisateur du 23/09/2026 : "en mode apercu en plein ecrant"), avec .docPreviewExitBtn comme seul moyen de revenir à l'éditeur. ===== */ + +/* Bug réel constaté le 24/09/2026 (capture à l'appui : bande noire en + bas, la page ne fait pas toute la hauteur) : .docEditor3 s'appuie + sur flex:1 1 auto (voir sa règle de base) pour sa taille, une + propriété qui n'a de sens QUE comme enfant d'un conteneur flex + normal — une fois réellement passé en plein écran (élément peint + dans le "top layer" du navigateur, hors du flux normal), flex-basis + n'a plus de contexte parent et peut se résoudre à la taille du + CONTENU plutôt qu'à tout l'écran. width/height explicites en + secours, qui ne dépendent d'aucun mécanisme de layout implicite. */ +.docEditor3:fullscreen, +.docEditor3.docEditor3--preview { + width: 100vw; + height: 100vh; +} + .docEditor3.docEditor3--preview .docTopbar, .docEditor3.docEditor3--preview .docSidebarLeft, .docEditor3.docEditor3--preview .docSidebarRight,