Jump to content

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

From the Vrienden Universe, a fictional wiki
← Older edit

VU-MaintenanceBot (talk | contribs)

3 user groups
1,627 edits
undo
Refine infobox label wrapping
Remove infobox label wrapping overrides
 
Line 11: Line 11:
border-top: 1px solid #a2a9b1;
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.ib-country td,
.ib-country .infobox-data,
.ib-country .infobox-full-data {
overflow-wrap: anywhere;
word-break: normal;
}
}


Line 133: Line 126:
text-align: center;
text-align: center;
}
}


@media screen {
@media screen {
Line 322: Line 314:
color: #ff6b6b;
color: #ff6b6b;
}
}
}
/* Keep short labels readable while allowing long labels to wrap. */
.infobox .infobox-label {
min-width: 8em;
overflow-wrap: normal;
white-space: normal;
}
}

Latest revision as of 13:24, 4 July 2026

/* {{pp|small=y}} */
.ib-country {
	border-collapse: collapse;
	line-height: 1.2em;
	max-width: 100%;
}

/* TODO split definitions to appropriate class names when live from HTML element */
.ib-country td,
.ib-country th {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.4em 0.6em;
}

.ib-country .nowrap,
.ib-country .nowraplinks a {
	white-space: normal;
}

.ib-country .mergedtoprow .infobox-header,
.ib-country .mergedtoprow .infobox-label,
.ib-country .mergedtoprow .infobox-data,
.ib-country .mergedtoprow .infobox-full-data,
.ib-country .mergedtoprow .infobox-below {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.2em 0.6em;
}

.ib-country .mergedrow .infobox-label,
.ib-country .mergedrow .infobox-data,
.ib-country .mergedrow .infobox-full-data {
	border: 0;
	padding: 0 0.6em 0.2em 0.6em;
}

.ib-country .mergedbottomrow .infobox-label,
.ib-country .mergedbottomrow .infobox-data,
.ib-country .mergedbottomrow .infobox-full-data {
	border-top: 0;
	border-bottom: 1px solid #a2a9b1;
	padding: 0 0.6em 0.4em 0.6em;
}

.ib-country .infobox-header {
	text-align: left;
}

.ib-country .infobox-above {
	font-size: 125%;
	line-height: 1.2;
}

.ib-country-names {
	padding-top: 0.25em;
	font-weight: normal;
}

.ib-country-name-style {
	display: inline;
}

.ib-country .infobox-image {
	padding: 0.5em 0;
}

.ib-country-anthem {
	border-top: 1px solid #a2a9b1;
	padding-top: 0.5em;
	margin-top: 0.5em;
}

.ib-country-map-caption {
	position: relative;
	top: 0.3em;
}

.ib-country-largest,
.ib-country-lang {
	font-weight: normal;
}

.ib-country-ethnic,
.ib-country-religion,
.ib-country-sovereignty {
	font-weight: normal;
	display: inline;
}

.ib-country-fake-li {
	text-indent: -0.9em;
	margin-left: 1.2em;
	font-weight: normal;
}

.ib-country-fake-li2 {
	text-indent: 0.5em;
	margin-left: 1em;
	font-weight: normal;
}

.ib-country-website {
	line-height: 11pt;
}

.ib-country-map-caption3 {
	position: relative;
	top: 0.3em;
}

.ib-country-fn {
	text-align: left;
	margin: 0 auto;
}

.ib-country-fn-alpha {
	list-style-type: lower-alpha;
	margin-left: 1em;
}

.ib-country-fn-num {
	margin-left: 1em;
}

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

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

	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 {
		background-color: #1e1e1e;
		color: #ffffff;
		border-color: #444;
	}

	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,
	html.skin-theme-clientpref-night .infobox caption,
	html.skin-theme-clientpref-night .infobox th[colspan],
	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,
	body.skin-theme-clientpref-night .infobox caption,
	body.skin-theme-clientpref-night .infobox th[colspan] {
		background-color: #1B223D !important;
		color: #e0f0ff !important;
		border-color: #3a506b;
	}

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

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

	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 {
		background-color: #1e1e1e;
		color: #ffffff;
		border-color: #444;
	}

	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,
	html.skin-theme-clientpref-os .infobox caption,
	html.skin-theme-clientpref-os .infobox th[colspan],
	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,
	body.skin-theme-clientpref-os .infobox caption,
	body.skin-theme-clientpref-os .infobox th[colspan] {
		background-color: #1B223D !important;
		color: #e0f0ff !important;
		border-color: #3a506b;
	}

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

/* 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;
	}
}
Retrieved from "https://vriendenuniverse.org/wiki/index.php?title=Template:Infobox_country/styles.css&oldid=10387"