Le
Modèle:Section déroulante début/styles.css est un sujet qui a retenu l'attention des gens au fil des années. Avec son impact sur la société et la culture, ce sujet a suscité un débat constant et a marqué l'histoire. De son origine aux tendances actuelles,
Modèle:Section déroulante début/styles.css a évolué et a maintenu sa pertinence dans différents contextes. Dans cet article, nous explorerons les différentes facettes et perspectives liées à
Modèle:Section déroulante début/styles.css, en examinant son influence dans différents domaines et son rôle dans la vie quotidienne.
/* le ".titre-section-deroulante" en double est une rustine
pour augmenter la spécificité et avoir la priorité sur les styles de MediaWiki,
sans reposer sur le ".mw-parser-output" qui est ajouté automatiquement par TemplateStyles */
.titre-section-deroulante.titre-section-deroulante {
font-size: 1.1em;
border-bottom: none;
padding-top: 0.3em;
padding-bottom: 0.3em;
margin-top: 0.6em;
margin-bottom: 0.2em;
float: none;
}
.contenu-section-deroulante {
border: 1px solid #aaa;
border-radius: 5px;
margin: 0 18px;
}
/* ce padding est pour la flèche de toggle (voir les styles en dessous),
mais on l'applique immédiatement (sans attendre l'exécution du JavaScript et l'ajout de la classe ".mw-made-collapsible"),
pour ne pas avoir de FOUC avec un décalage du titre de la gauche vers la droite */
html.client-js .titre-section-deroulante {
padding-left: 18px;
}
/* on fait en sorte que les deux images soient chargées dès le départ,
ainsi lors du premier clic sur le toggle, l'autre image est déjà chargée et il n'y a pas de clignotement */
html.client-js .mw-made-collapsible .titre-section-deroulante,
html.client-js .mw-made-collapsible .titre-section-deroulante.mw-collapsible-toggle-expanded {
background:
url("//upload.wikimedia.org/wikipedia/commons/0/03/MediaWiki_Vector_skin_right_arrow.svg") -9999px -9999px no-repeat,
url("//upload.wikimedia.org/wikipedia/commons/f/f1/MediaWiki_Vector_skin_action_arrow.svg") left center no-repeat;
}
html.client-js .mw-made-collapsible .titre-section-deroulante.mw-collapsible-toggle-collapsed {
background:
url("//upload.wikimedia.org/wikipedia/commons/0/03/MediaWiki_Vector_skin_right_arrow.svg") left center no-repeat,
url("//upload.wikimedia.org/wikipedia/commons/f/f1/MediaWiki_Vector_skin_action_arrow.svg") -9999px -9999px no-repeat;
}
/* une règle similaire est déjà présente dans MediaWiki,
mais un FOUC était quand même présent avec la skin Minerva (chargement plus tardif des fichiers CSS ?) */
html.client-js .mw-collapsed:not( .mw-made-collapsible ) .contenu-section-deroulante {
display: none;
}
/* ] */