3 correctifs Aperçu : bords carrés des mini-jeux, titres en noir, vrai plein écran
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 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
fff098c60c
commit
b633126a7e
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user