Template:Infobox river/styles.css: Difference between revisions

Latest revision as of 13:24, 4 July 2026

/* Dark mode header fix for Infobox river */

@media screen {
	html.skin-theme-clientpref-night .infobox td.infobox-above,
	html.skin-theme-clientpref-night .infobox th.infobox-above,
	html.skin-theme-clientpref-night .infobox td.infobox-title,
	html.skin-theme-clientpref-night .infobox th.infobox-title,
	html.skin-theme-clientpref-night .infobox caption,
	html.skin-theme-clientpref-night .infobox th[colspan],
	html.skin-theme-clientpref-night .infobox .infobox-header {
		background-color: #1B223D !important;
		color: #e0f0ff !important;
		border-color: #3a506b !important;
	}

	@media (prefers-color-scheme: dark) {
		html.skin-theme-clientpref-os .infobox td.infobox-above,
		html.skin-theme-clientpref-os .infobox th.infobox-above,
		html.skin-theme-clientpref-os .infobox td.infobox-title,
		html.skin-theme-clientpref-os .infobox th.infobox-title,
		html.skin-theme-clientpref-os .infobox caption,
		html.skin-theme-clientpref-os .infobox th[colspan],
		html.skin-theme-clientpref-os .infobox .infobox-header {
			background-color: #1B223D !important;
			color: #e0f0ff !important;
			border-color: #3a506b !important;
		}
	}
}

/* Keep infobox section headers centered. */
.infobox .infobox-header,
.infobox th.infobox-header {
	text-align: center;
}

/* Dark-mode color correction for VU infoboxes. */
@media screen {
	html.skin-theme-clientpref-night .infobox,
	body.skin-theme-clientpref-night .infobox,
	html.skin-theme-clientpref-night .infobox th,
	html.skin-theme-clientpref-night .infobox td,
	html.skin-theme-clientpref-night .infobox .infobox-label,
	html.skin-theme-clientpref-night .infobox .infobox-data,
	html.skin-theme-clientpref-night .infobox .infobox-full-data,
	body.skin-theme-clientpref-night .infobox th,
	body.skin-theme-clientpref-night .infobox td,
	body.skin-theme-clientpref-night .infobox .infobox-label,
	body.skin-theme-clientpref-night .infobox .infobox-data,
	body.skin-theme-clientpref-night .infobox .infobox-full-data {
		color: #ffffff;
	}

	html.skin-theme-clientpref-night .infobox .infobox-above,
	html.skin-theme-clientpref-night .infobox .infobox-title,
	html.skin-theme-clientpref-night .infobox .infobox-header,
	html.skin-theme-clientpref-night .infobox .infobox-subheader,
	html.skin-theme-clientpref-night .infobox .infobox-below,
	body.skin-theme-clientpref-night .infobox .infobox-above,
	body.skin-theme-clientpref-night .infobox .infobox-title,
	body.skin-theme-clientpref-night .infobox .infobox-header,
	body.skin-theme-clientpref-night .infobox .infobox-subheader,
	body.skin-theme-clientpref-night .infobox .infobox-below {
		color: #e0f0ff !important;
	}

	html.skin-theme-clientpref-night .infobox a:link,
	html.skin-theme-clientpref-night .infobox a:visited,
	body.skin-theme-clientpref-night .infobox a:link,
	body.skin-theme-clientpref-night .infobox a:visited {
		color: #88ccff;
	}

	html.skin-theme-clientpref-night .infobox a.new:link,
	html.skin-theme-clientpref-night .infobox a.new:visited,
	body.skin-theme-clientpref-night .infobox a.new:link,
	body.skin-theme-clientpref-night .infobox a.new:visited {
		color: #ff6b6b;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox,
	body.skin-theme-clientpref-os .infobox,
	html.skin-theme-clientpref-os .infobox th,
	html.skin-theme-clientpref-os .infobox td,
	html.skin-theme-clientpref-os .infobox .infobox-label,
	html.skin-theme-clientpref-os .infobox .infobox-data,
	html.skin-theme-clientpref-os .infobox .infobox-full-data,
	body.skin-theme-clientpref-os .infobox th,
	body.skin-theme-clientpref-os .infobox td,
	body.skin-theme-clientpref-os .infobox .infobox-label,
	body.skin-theme-clientpref-os .infobox .infobox-data,
	body.skin-theme-clientpref-os .infobox .infobox-full-data {
		color: #ffffff;
	}

	html.skin-theme-clientpref-os .infobox .infobox-above,
	html.skin-theme-clientpref-os .infobox .infobox-title,
	html.skin-theme-clientpref-os .infobox .infobox-header,
	html.skin-theme-clientpref-os .infobox .infobox-subheader,
	html.skin-theme-clientpref-os .infobox .infobox-below,
	body.skin-theme-clientpref-os .infobox .infobox-above,
	body.skin-theme-clientpref-os .infobox .infobox-title,
	body.skin-theme-clientpref-os .infobox .infobox-header,
	body.skin-theme-clientpref-os .infobox .infobox-subheader,
	body.skin-theme-clientpref-os .infobox .infobox-below {
		color: #e0f0ff !important;
	}

	html.skin-theme-clientpref-os .infobox a:link,
	html.skin-theme-clientpref-os .infobox a:visited,
	body.skin-theme-clientpref-os .infobox a:link,
	body.skin-theme-clientpref-os .infobox a:visited {
		color: #88ccff;
	}

	html.skin-theme-clientpref-os .infobox a.new:link,
	html.skin-theme-clientpref-os .infobox a.new:visited,
	body.skin-theme-clientpref-os .infobox a.new:link,
	body.skin-theme-clientpref-os .infobox a.new:visited {
		color: #ff6b6b;
	}
}