« Modèle:Boîte colorée alternative/doc/styles.css » : différence entre les versions

/* Exemple 2 */
.boite-coloree-alternative.boite-coloree-alternative-exemple-2 {
	background-color: #fef6e7;
	border-color: #fef6e7;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-2 > h2 {
	border-bottom-color: #fc3;
}

/* Mode sombre (exemple 2) */
@media screen {
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-2 {
		background-color: #2a1b00;
		border-color: #2a1b00;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-2 {
		background-color: #2a1b00;
		border-color: #2a1b00;
	}
}

/* Exemple 3 */
.boite-coloree-alternative.boite-coloree-alternative-exemple-3 {
	background-color: #fee7e6;
	border-color: #fee7e6;
	box-shadow: 0 0 0.3rem #fee7e6;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-3 > h2 {
	border-bottom-color: #d33;
}

/* Mode sombre (exemple 3) */
@media screen {
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-3 {
		background-color: #202122;
		border-color: #d33;
		box-shadow: 0 0 0.3rem #d33;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-3 {
		background-color: #202122;
		border-color: #d33;
		box-shadow: 0 0 0.3rem #d33;
	}
}

/* Exemple 4 */
.boite-coloree-alternative.boite-coloree-alternative-exemple-4 {
	background-color: #eaf3ff;
	border-color: #eaf3ff;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-4 > h2 {
	border-bottom-color: #36c;
}

.boite-coloree-alternative.boite-coloree-alternative-exemple-4 .boite-coloree-alternative-lienmodifier > a {
	color: #340044;
}

/* Mode sombre (exemple 2) */
@media screen {
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-4 {
		background-color: #00224e;
		border-color: #00224e;
	}
	html.skin-theme-clientpref-night .boite-coloree-alternative.boite-coloree-alternative-exemple-4 .boite-coloree-alternative-lienmodifier > a {
		color: #f2c8ff;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-4 {
		background-color: #00224e;
		border-color: #00224e;
	}
	html.skin-theme-clientpref-os .boite-coloree-alternative.boite-coloree-alternative-exemple-4 .boite-coloree-alternative-lienmodifier > a {
		color: #f2c8ff;
	}
}

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