Module:Climat/styles.css

.climat {
	text-align:center;
	background-color: var(--background-color-base, #fff);
	color:var(--color-emphasized, #101418);
}

.climat-temp-p0, /* 4,9 °C < Température < 12,4 °C */
.climat-soleil-0 { /* 39 h < Ensoleillement < 100 h */
	background-color: #FFFFC0;
}
.climat-temp-p1, /* 12,4 °C < Température < 19,9 °C */
.climat-soleil-1 { /* 100 h < Ensoleillement < 160 h */
	background-color: #FFFF80;
}
.climat-temp-p2, /* 19,9 °C < Température < 27,4 °C */
.climat-soleil-2 { /* 160 h < Ensoleillement < 220 h */
	background-color: #FFC040;
}
.climat-temp-p3, /* 27,4 °C < Température < 39,9 °C */
.climat-soleil-3 { /* 220 h < Ensoleillement */
	background-color: #FF8000;
}
.climat-temp-p4 { /* 39,9 °C < Température < 47,9 °C */
	background-color: #E23800;
}
.climat-temp-p5 { /* 47,9 °C < Température */
	background-color: #AD0200;
	color: var(--color-inverted-fixed, #fff);
}

.climat-temp-n0, /* -12,4 °C < Température < -4,8 °C */
.climat-humid-0, /* 49 % < Humidité < 59 % */
.climat-precip-0, /* 49 mm < Précipitation < 99 mm */
.climat-neige-0 { /* 24 cm < Neige < 49 cm */
	background-color: #DCF0FF;
}
.climat-temp-n1, /* -19,9 °C < Température < -12,4 °C */
.climat-humid-1, /* 59 % < Humidité < 69 % */
.climat-precip-1, /* 99 mm < Précipitation < 149 mm */
.climat-neige-1 { /* 49 cm < Neige < 74 cm */
	background-color: #B4C8FF;
}
.climat-temp-n2, /* -19,9 °C < Température < -19,9 °C */
.climat-humid-2, /* 69 % < Humidité < 79 % */
.climat-precip-2, /* 149 mm < Précipitation < 199 mm */
.climat-neige-2 { /* 74 cm < Neige < 99 cm */
	background-color: #8CA0FF;
}
.climat-temp-n3, /*  Température < --27,4 °C */
.climat-humid-3, /* 79 % < Humidité */
.climat-precip-3, /* 199 mm < Précipitation */
.climat-neige-3 { /* 99 cm < Neige */
	background-color: #6478FF;
}

/* Mode sombre */
@media screen {
	html.skin-theme-clientpref-night .climat-temp-p0,
	html.skin-theme-clientpref-night .climat-soleil-0 {
		background-color: #3e3e06;
	}
	html.skin-theme-clientpref-night .climat-temp-p1,
	html.skin-theme-clientpref-night .climat-soleil-1 {
		background-color: #646409;
	}
	html.skin-theme-clientpref-night .climat-temp-p2,
	html.skin-theme-clientpref-night .climat-soleil-2 {
		background-color: #895b02;
	}
	html.skin-theme-clientpref-night .climat-temp-p3,
	html.skin-theme-clientpref-night .climat-soleil-3 {
		background-color: #894705;
	}
	html.skin-theme-clientpref-night .climat-temp-p4 {
		background-color: #942905;
	}
	html.skin-theme-clientpref-night .climat-temp-p5 {
		background-color: #870706;
	}
	
	html.skin-theme-clientpref-night .climat-temp-n0,
	html.skin-theme-clientpref-night .climat-humid-0,
	html.skin-theme-clientpref-night .climat-precip-0,
	html.skin-theme-clientpref-night .climat-neige-0 {
		background-color: #263842;
	}
	html.skin-theme-clientpref-night .climat-temp-n1,
	html.skin-theme-clientpref-night .climat-humid-1,
	html.skin-theme-clientpref-night .climat-precip-1,
	html.skin-theme-clientpref-night .climat-neige-1 {
		background-color: #253252;
	}
	html.skin-theme-clientpref-night .climat-temp-n2,
	html.skin-theme-clientpref-night .climat-humid-2,
	html.skin-theme-clientpref-night .climat-precip-2,
	html.skin-theme-clientpref-night .climat-neige-2 {
		background-color: #1c275c;
	}
	html.skin-theme-clientpref-night .climat-temp-n3,
	html.skin-theme-clientpref-night .climat-humid-3,
	html.skin-theme-clientpref-night .climat-precip-3,
	html.skin-theme-clientpref-night .climat-neige-3 {
		background-color: #0b1346;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .climat-temp-p0,
	html.skin-theme-clientpref-os .climat-soleil-0 {
		background-color: #3e3e06;
	}
	html.skin-theme-clientpref-os .climat-temp-p1,
	html.skin-theme-clientpref-os .climat-soleil-1 {
		background-color: #646409;
	}
	html.skin-theme-clientpref-os .climat-temp-p2,
	html.skin-theme-clientpref-os .climat-soleil-2 {
		background-color: #895b02;
	}
	html.skin-theme-clientpref-os .climat-temp-p3,
	html.skin-theme-clientpref-os .climat-soleil-3 {
		background-color: #894705;
	}
	html.skin-theme-clientpref-os .climat-temp-p4 {
		background-color: #942905;
	}
	html.skin-theme-clientpref-os .climat-temp-p5 {
		background-color: #870706;
	}
	
	html.skin-theme-clientpref-os .climat-temp-n0,
	html.skin-theme-clientpref-os .climat-humid-0,
	html.skin-theme-clientpref-os .climat-precip-0,
	html.skin-theme-clientpref-os .climat-neige-0 {
		background-color: #263842;
	}
	html.skin-theme-clientpref-os .climat-temp-n1,
	html.skin-theme-clientpref-os .climat-humid-1,
	html.skin-theme-clientpref-os .climat-precip-1,
	html.skin-theme-clientpref-os .climat-neige-1 {
		background-color: #253252;
	}
	html.skin-theme-clientpref-os .climat-temp-n2,
	html.skin-theme-clientpref-os .climat-humid-2,
	html.skin-theme-clientpref-os .climat-precip-2,
	html.skin-theme-clientpref-os .climat-neige-2 {
		background-color: #1c275c;
	}
	html.skin-theme-clientpref-os .climat-temp-n3,
	html.skin-theme-clientpref-os .climat-humid-3,
	html.skin-theme-clientpref-os .climat-precip-3,
	html.skin-theme-clientpref-os .climat-neige-3 {
		background-color: #0b1346;
	}
}

/* Diagramme climatique */
.diagramme-climat-barre {
	position:relative;
	margin:0;
	height:16.5em;
	width:1.6em;
	background:var(--background-color-base, #fff);
	padding:0;
	color:var(--color-emphasized, #101418);
	line-height:1.5;
	vertical-align:bottom;
	text-align:center
}
.diagramme-climat-pointilles {
	position:absolute;
	margin:0;
	bottom:2em;
	left:0;
	height:6em;
	width:1.6em;
	overflow:hidden;
	border-top:1px dotted var(--border-color-base, #a2a9b1);
	border-bottom:1px dotted var(--border-color-base, #a2a9b1);
	background:none;
	padding:0;
	color:transparent
}
.diagramme-climat-precipit,
.diagramme-climat-temp {
	position:absolute;
	margin:0;
	left:.4em;
	width:.8em;
	overflow:hidden;
	padding:0;
	color:transparent
}

.diagramme-climat-precipit {
	bottom:2em;
	background:#6478FF;
}
.diagramme-climat-temp {
	background:var(--background-color-inverted, #101418);
}
.diagramme-climat-temp-maxi,
.diagramme-climat-temp-mini,
.diagramme-climat-precipit-valeur {
	position:absolute;
	margin:0;
	bottom:.5em;
	left:0;
	height:1.5em;
	width:1.6em;
	background:none;
	padding:0;
}
.diagramme-climat-legende-maxi,
.diagramme-climat-temp-maxi {
	color:red
}
.diagramme-climat-legende-mini,
.diagramme-climat-temp-mini {
	color:blue
}
.diagramme-climat-legende-precipit,
.diagramme-climat-precipit-valeur {
	color:#6478FF
}

@media screen {
	html.skin-theme-clientpref-night .diagramme-climat-precipit {
		background:#b0c1f0;
	}
	html.skin-theme-clientpref-night .diagramme-climat-legende-maxi,
	html.skin-theme-clientpref-night .diagramme-climat-temp-maxi {
		color:#fd7865
	}
	html.skin-theme-clientpref-night .diagramme-climat-legende-mini,
	html.skin-theme-clientpref-night .diagramme-climat-temp-mini {
		color:#6485d1
	}
	html.skin-theme-clientpref-night .diagramme-climat-legende-precipit,
	html.skin-theme-clientpref-night .diagramme-climat-precipit-valeur {
		color:#b0c1f0
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .diagramme-climat-precipit {
		background:#b0c1f0;
	}
	html.skin-theme-clientpref-os .diagramme-climat-legende-maxi,
	html.skin-theme-clientpref-os .diagramme-climat-temp-maxi {
		color:#fd7865
	}
	html.skin-theme-clientpref-os .diagramme-climat-legende-mini,
	html.skin-theme-clientpref-os .diagramme-climat-temp-mini {
		color:#6485d1
	}
	html.skin-theme-clientpref-os .diagramme-climat-legende-precipit,
	html.skin-theme-clientpref-os .diagramme-climat-precipit-valeur {
		color:#b0c1f0
	}
}

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