Jump to content

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

From the Vrienden Universe, a fictional wiki
No edit summary
Correct dark mode infobox colors
Line 56: Line 56:
html.skin-theme-clientpref-night .infobox.infobox-automobile {
html.skin-theme-clientpref-night .infobox.infobox-automobile {
background-color: #1e1e1e;
background-color: #1e1e1e;
color: #d0d0d0;
color: #ffffff;
border-color: #444;
border-color: #444;
}
}
Line 82: Line 82:
html.skin-theme-clientpref-night .infobox.infobox-automobile td {
html.skin-theme-clientpref-night .infobox.infobox-automobile td {
background-color: #1e1e1e;
background-color: #1e1e1e;
color: #d0d0d0;
color: #ffffff;
border-color: #444;
border-color: #444;
}
}
Line 105: Line 105:
html.skin-theme-clientpref-os .infobox.infobox-automobile {
html.skin-theme-clientpref-os .infobox.infobox-automobile {
background-color: #1e1e1e;
background-color: #1e1e1e;
color: #d0d0d0;
color: #ffffff;
border-color: #444;
border-color: #444;
}
}
Line 131: Line 131:
html.skin-theme-clientpref-os .infobox.infobox-automobile td {
html.skin-theme-clientpref-os .infobox.infobox-automobile td {
background-color: #1e1e1e;
background-color: #1e1e1e;
color: #d0d0d0;
color: #ffffff;
border-color: #444;
border-color: #444;
}
}
Line 162: Line 162:
.infobox.infobox-automobile .nowrap {
.infobox.infobox-automobile .nowrap {
white-space: normal;
white-space: normal;
}
}
/* 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;
}
}
}
}

Revision as of 13:19, 3 July 2026

.infobox.infobox-automobile {
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
	color: #202122;
	border-spacing: 3px;
}

.infobox.infobox-automobile * {
	color: inherit;
}

.infobox.infobox-automobile .infobox-above,
.infobox.infobox-automobile .infobox-title,
.infobox.infobox-automobile .infobox-header,
.infobox.infobox-automobile .infobox-subheader,
.infobox.infobox-automobile caption,
.infobox.infobox-automobile th[colspan] {
	background-color: #d8e8f7 !important;
	color: #202122 !important;
	font-weight: bold;
	text-align: center;
}

.infobox.infobox-automobile .infobox-label,
.infobox.infobox-automobile .infobox-data,
.infobox.infobox-automobile th,
.infobox.infobox-automobile td {
	color: #202122;
	border-color: #a2a9b1;
	vertical-align: top;
	text-align: left;
}

.infobox.infobox-automobile .infobox-image,
.infobox.infobox-automobile .infobox-full-data,
.infobox.infobox-automobile .infobox-below {
	text-align: center;
}

.infobox.infobox-automobile a:link,
.infobox.infobox-automobile a:visited {
	color: #36c;
}

.infobox.infobox-automobile a.new:link,
.infobox.infobox-automobile a.new:visited {
	color: #d33;
}

.infobox.infobox-automobile img {
	max-width: 100%;
	height: auto;
}

@media screen {
	html.skin-theme-clientpref-night .infobox.infobox-automobile {
		background-color: #1e1e1e;
		color: #ffffff;
		border-color: #444;
	}

	html.skin-theme-clientpref-night .infobox.infobox-automobile * {
		color: inherit;
	}

	html.skin-theme-clientpref-night .infobox.infobox-automobile .infobox-above,
	html.skin-theme-clientpref-night .infobox.infobox-automobile .infobox-title,
	html.skin-theme-clientpref-night .infobox.infobox-automobile .infobox-header,
	html.skin-theme-clientpref-night .infobox.infobox-automobile .infobox-subheader,
	html.skin-theme-clientpref-night .infobox.infobox-automobile caption,
	html.skin-theme-clientpref-night .infobox.infobox-automobile th[colspan] {
		background-color: #1B223D !important;
		color: #e0f0ff !important;
		border-color: #3a506b;
		font-weight: bold;
		text-align: center;
	}

	html.skin-theme-clientpref-night .infobox.infobox-automobile .infobox-label,
	html.skin-theme-clientpref-night .infobox.infobox-automobile .infobox-data,
	html.skin-theme-clientpref-night .infobox.infobox-automobile th,
	html.skin-theme-clientpref-night .infobox.infobox-automobile td {
		background-color: #1e1e1e;
		color: #ffffff;
		border-color: #444;
	}

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

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

	html.skin-theme-clientpref-night .infobox.infobox-automobile .mw-selflink {
		color: #f0f0f0;
		font-weight: bold;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox.infobox-automobile {
		background-color: #1e1e1e;
		color: #ffffff;
		border-color: #444;
	}

	html.skin-theme-clientpref-os .infobox.infobox-automobile * {
		color: inherit;
	}

	html.skin-theme-clientpref-os .infobox.infobox-automobile .infobox-above,
	html.skin-theme-clientpref-os .infobox.infobox-automobile .infobox-title,
	html.skin-theme-clientpref-os .infobox.infobox-automobile .infobox-header,
	html.skin-theme-clientpref-os .infobox.infobox-automobile .infobox-subheader,
	html.skin-theme-clientpref-os .infobox.infobox-automobile caption,
	html.skin-theme-clientpref-os .infobox.infobox-automobile th[colspan] {
		background-color: #1B223D !important;
		color: #e0f0ff !important;
		border-color: #3a506b;
		font-weight: bold;
		text-align: center;
	}

	html.skin-theme-clientpref-os .infobox.infobox-automobile .infobox-label,
	html.skin-theme-clientpref-os .infobox.infobox-automobile .infobox-data,
	html.skin-theme-clientpref-os .infobox.infobox-automobile th,
	html.skin-theme-clientpref-os .infobox.infobox-automobile td {
		background-color: #1e1e1e;
		color: #ffffff;
		border-color: #444;
	}

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

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

	html.skin-theme-clientpref-os .infobox.infobox-automobile .mw-selflink {
		color: #f0f0f0;
		font-weight: bold;
	}
}

@media (max-width: 640px) {
	.infobox.infobox-automobile {
		width: 100%;
		float: none;
		clear: both;
		margin-left: 0;
		margin-right: 0;
	}

	.infobox.infobox-automobile .nowrap {
		white-space: normal;
	}
}

/* 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;
	}
}