MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */
/* Voluminous Energy site styles. Reworked 2026-10-15 for MediaWiki 1.47 (dark mode aware). */

/* Fonts: Fira Sans (text), Fira Code (monospace), EB Garamond (headings, see MediaWiki:Vector-2022.css) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Fira+Code:wght@400;500&family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/*
 * Theme colours. These are the light values. The night and auto-dark values are in
 * MediaWiki:Vector-2022.css, because only Vector 2022 has a dark mode.
 * Use these variables in templates instead of hardcoded colours.
 */
:root {
	--ve-font-sans: 'Fira Sans', sans-serif;
	--ve-font-mono: 'Fira Code', monospace;
	--ve-font-heading: 'EB Garamond', 'P052', 'Liberation Serif', 'Palatino', 'Palatino Linotype', serif;

	--ve-card-bg: #ffffff;
	--ve-card-border: transparent;
	--ve-card-shadow: 0 1px 2px rgba( 0, 0, 0, 0.12 );
	--ve-accent-bg: #a0b0ff;
	--ve-accent-fg: #000000;
	--ve-yes-bg: #99ff99;
	--ve-yes-fg: #202122;
	--ve-no-bg: #ff9999;
	--ve-no-fg: #202122;
	--ve-partial-bg: #ffffdd;
	--ve-partial-fg: #202122;
	--ve-unknown-bg: #ececec;
	--ve-unknown-fg: #2c2c2c;
}

/* Text and monospace fonts */
body,
button,
input,
select,
textarea {
	font-family: var( --ve-font-sans );
}

code,
pre,
kbd,
samp,
tt,
.mw-code,
textarea#wpTextbox1 {
	font-family: var( --ve-font-mono );
}

/* No Fira Code ligatures in the edit box: they would display wiki markup like |- == </ as single symbols */
textarea#wpTextbox1 {
	font-variant-ligatures: none;
	font-feature-settings: 'liga' 0, 'calt' 0;
}

/* Infobox template style */
.infobox {
	float: right;
	clear: right;
	margin-bottom: 0.5em;
	margin-left: 1em;
	padding: 0.2em;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
}

.infobox td,
.infobox th {
	vertical-align: top;
}

.infobox caption {
	font-size: larger;
}

.infobox .infobox-header {
	background-color: var( --ve-accent-bg );
	color: var( --ve-accent-fg );
	text-align: center;
	vertical-align: middle;
}

.infobox.bordered {
	border-collapse: collapse;
}

.infobox.bordered td,
.infobox.bordered th {
	border: 1px solid var( --border-color-base, #a2a9b1 );
}

.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
	border: 0;
}

/* {{Yes}}, {{No}}, {{Yes-No}}, {{Unknown}} table cells */
.table-yes,
.table-no,
.table-partial,
.table-unknown {
	vertical-align: middle;
}

.table-yes {
	background-color: var( --ve-yes-bg );
	color: var( --ve-yes-fg );
}

.table-no {
	background-color: var( --ve-no-bg );
	color: var( --ve-no-fg );
}

.table-partial {
	background-color: var( --ve-partial-bg );
	color: var( --ve-partial-fg );
}

.table-unknown {
	background-color: var( --ve-unknown-bg );
	color: var( --ve-unknown-fg );
	font-size: smaller;
}

/* Main Page welcome banner */
.ve-mainpage-welcome {
	margin: 10px 0;
	padding: 10px;
	border: 1px solid var( --ve-card-border );
	border-radius: 4px;
	background: var( --ve-card-bg );
	box-shadow: var( --ve-card-shadow );
}

.ve-mainpage-welcome-table {
	width: 100%;
}

.ve-welcome {
	padding: 15px;
	text-align: center;
	vertical-align: middle;
}

.ve-welcome-title {
	color: var( --color-subtle, #54595d );
	font-size: 2.4em;
	font-variant: small-caps;
	line-height: 1.1;
}

.ve-welcome-subtitle {
	color: var( --color-subtle, #54595d );
	font-size: 1.3em;
	line-height: 1.4;
}

.ve-welcome-stats {
	width: 40%;
	padding: 15px;
	border-left: 1px solid var( --border-color-subtle, #c8ccd1 );
	text-align: center;
	vertical-align: middle;
}

/* Stack the banner on narrow screens */
@media screen and ( max-width: 719px ) {
	.ve-mainpage-welcome-table,
	.ve-mainpage-welcome-table tbody,
	.ve-mainpage-welcome-table tr,
	.ve-mainpage-welcome-table td {
		display: block;
		width: auto;
	}

	.ve-welcome-stats {
		border-left: 0;
		border-top: 1px solid var( --border-color-subtle, #c8ccd1 );
	}
}

/* Machine upgrade rarity swatches keep their in-game colours in both themes */
.ve-rarity {
	font-weight: 600;
}

/* Wide data tables (e.g. Feature generation) scroll sideways instead of overflowing the page */
.ve-scroll {
	overflow-x: auto;
	max-width: 100%;
}