Centre le contenu des mini-jeux plein-page au lieu de le laisser tassé en haut
Le joueur (.docQuizPlayer/.docAssocPlayer/.docMemoryPlayer/ .docMotsPlayer/.docScenarioPlayer) remplissait déjà toute la hauteur de la page (flex:1) mais sa carte interne restait en flux normal, collée en haut-gauche — passage du joueur en display:flex + centrage, avec une largeur confortable (max-width) sur les cartes internes plutôt qu'un étirement bord à bord. Vérifié par getComputedStyle (display:flex/centrage du joueur, max-width de la carte, gating pointer-events et plein-cadre de la page toujours corrects). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
33d90e896e
commit
82223171a9
@@ -537,12 +537,25 @@ img.docImage {
|
|||||||
(répondre/glisser/retourner une carte) reste réservée au Mode
|
(répondre/glisser/retourner une carte) reste réservée au Mode
|
||||||
Aperçu, via pointer-events ci-dessous (jamais via display:none,
|
Aperçu, via pointer-events ci-dessous (jamais via display:none,
|
||||||
sinon rien ne serait visible en édition). ---- */
|
sinon rien ne serait visible en édition). ---- */
|
||||||
|
|
||||||
|
/* Le joueur remplit TOUTE la hauteur/largeur disponible (voir
|
||||||
|
[class$="Player"] plus haut, flex:1 dans .docMinigame:only-child)
|
||||||
|
mais sa CARTE interne (.docQuizCard, .docAssocCard,
|
||||||
|
.docMemoryCardWrap...) garde sa taille naturelle — sans ce
|
||||||
|
display:flex + centrage, elle restait tassée en haut-gauche de cette
|
||||||
|
grande boîte au lieu d'occuper visuellement l'espace (retour
|
||||||
|
utilisateur du 23/09/2026 : "un mini jeu prend toute la place et est
|
||||||
|
centrer pas aligner en haut"). */
|
||||||
.docQuizPlayer,
|
.docQuizPlayer,
|
||||||
.docAssocPlayer,
|
.docAssocPlayer,
|
||||||
.docMemoryPlayer,
|
.docMemoryPlayer,
|
||||||
.docMotsPlayer,
|
.docMotsPlayer,
|
||||||
.docScenarioPlayer {
|
.docScenarioPlayer {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docEditor3.docEditor3--preview [data-kind="quiz"],
|
.docEditor3.docEditor3--preview [data-kind="quiz"],
|
||||||
@@ -577,6 +590,8 @@ img.docImage {
|
|||||||
|
|
||||||
.docQuizCard,
|
.docQuizCard,
|
||||||
.docQuizResultCard {
|
.docQuizResultCard {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 640px;
|
||||||
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
|
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
|
||||||
border: 1px solid var(--doc-border);
|
border: 1px solid var(--doc-border);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
@@ -781,6 +796,8 @@ img.docImage {
|
|||||||
.docQuizFeedback/.docQuizKicker (même rôle visuel) plutôt que de
|
.docQuizFeedback/.docQuizKicker (même rôle visuel) plutôt que de
|
||||||
dupliquer ces règles. ---- */
|
dupliquer ces règles. ---- */
|
||||||
.docAssocCard {
|
.docAssocCard {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 760px;
|
||||||
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
|
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
|
||||||
border: 1px solid var(--doc-border);
|
border: 1px solid var(--doc-border);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
@@ -933,6 +950,8 @@ img.docImage {
|
|||||||
.docAssocTitle/.docAssocMeta/.docMinigameRestartBar (mêmes rôles
|
.docAssocTitle/.docAssocMeta/.docMinigameRestartBar (mêmes rôles
|
||||||
visuels, voir forgeDocRenderMemoryProps ci-dessus). ---- */
|
visuels, voir forgeDocRenderMemoryProps ci-dessus). ---- */
|
||||||
.docMemoryCardWrap {
|
.docMemoryCardWrap {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 760px;
|
||||||
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
|
background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
|
||||||
border: 1px solid var(--doc-border);
|
border: 1px solid var(--doc-border);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
|||||||
Reference in New Issue
Block a user