Modèle:Section déroulante début/styles.css

/* 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 var(--border-color-base, #a2a9b1);
	border-radius: 5px;
	margin: 0 18px;
	padding:10px;
}

/* 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 ?) */
/* 26/06/2024 : display:none a été remplacé par hidden="until-found" pour les mw-collapsible-content.
   Ce code doit peut-être être modifié */
html.client-js .mw-collapsed:not( .mw-made-collapsible ) .contenu-section-deroulante {
	display: none;
}

/* [[Catégorie:Sous-page de modèle feuille de style]] */