Corrige un bug présent depuis le tout premier commit : hidden ne masquait rien
.upload-form et .welcome-modal déclarent `display: flex` en dur — une
déclaration `display` en CSS auteur passe TOUJOURS devant la règle
[hidden] { display: none } du navigateur (l'origine auteur l'emporte sur
l'origine user-agent dans la cascade, indépendamment de la spécificité).
Résultat concret :
- form.hidden = true/false (JS) ne masquait jamais réellement le
formulaire, resté affiché en permanence superposé aux états
chargement/erreur/succès depuis le commit initial (9b14619).
- welcomeModal.hidden = true (clic sur "C'est parti") mettait bien l'état
à jour mais la modale ne disparaissait jamais visuellement — signalé
par Kévin après test réel.
- Même bug sur .preview dans le générateur QR (src/admin/qrcode/).
Fix : règles explicites .upload-form[hidden], .welcome-modal[hidden],
.preview[hidden] { display: none }, spécificité plus élevée que la règle
display de base donc gagnent correctement la cascade. La galerie admin
n'avait pas ce bug (aucun display explicite sur ses éléments togglés).
This commit is contained in:
@@ -134,6 +134,13 @@
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
/* Une règle auteur avec `display` passe toujours devant `[hidden] {
|
||||
display: none }` du navigateur (origine auteur > origine user-agent
|
||||
dans la cascade), donc il faut le dire explicitement ici pour que
|
||||
preview.hidden = true (JS) masque vraiment l'élément. */
|
||||
.preview[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.preview svg {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
|
||||
@@ -415,6 +415,14 @@ body::before {
|
||||
animation: fade-rise 0.5s var(--ease-standard) 0.08s both;
|
||||
}
|
||||
|
||||
/* Même bug que .welcome-modal (voir commentaire plus haut) : présent depuis
|
||||
le tout premier commit de ce fichier. form.hidden = true (JS) ne masquait
|
||||
jamais réellement le formulaire, qui restait affiché en display:flex en
|
||||
permanence, superposé aux états chargement/erreur/succès. */
|
||||
.upload-form[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -657,6 +665,17 @@ button:focus-visible {
|
||||
animation: fade-in 0.2s ease both;
|
||||
}
|
||||
|
||||
/* Bug réel corrigé (2026-09-16) : une déclaration `display` en CSS auteur
|
||||
passe toujours devant la règle `[hidden] { display: none }` du navigateur
|
||||
(l'origine "auteur" l'emporte sur l'origine "user-agent" dans la
|
||||
cascade, indépendamment de la spécificité). Sans cette règle explicite,
|
||||
`welcomeModal.hidden = true` en JS ne masquait jamais visuellement la
|
||||
modale : le bouton "C'est parti" fonctionnait bien (l'état se mettait à
|
||||
jour) mais rien ne changeait à l'écran. */
|
||||
.welcome-modal[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.welcome-modal__card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user