MediaWiki:Common.css: Difference between revisions

Latest revision as of 08:03, 20 October 2026

/* Site-wide CSS for page content, live at MediaWiki:Common.css; edit it on the wiki, not
   here (this copy only seeds a fresh install).

   Colours come from the TeamSpec theme the server adds to the default skins
   (mediawiki/assets/theme/palette.css in the wiki's repo): Codex token names such as
   --background-color-base, and the theme's own --ts-* names. Each var() falls back to the
   Wikipedia colour, for the skins the theme leaves alone. Templates use these classes
   rather than inline colours, so a palette change reaches every page. (No double braces
   in these comments: the wiki records them as template uses.) */

.page-Main_Page .mw-first-heading {
	display: none;
}

/* --- Main Page --------------------------------------------------------------------- */

.mp-banner {
	padding: 1.25em 1.5em;
	margin-bottom: 1em;
	border-radius: 4px;
	background: var( --ts-stripes, none ) bottom / 100% 4px no-repeat, var( --ts-topbar, #3d78c4 );
	color: var( --ts-topbar-ink, #fff );
	text-align: center;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.25 );
}

.mp-banner-title {
	font-family: var( --ts-font-display, inherit );
	font-size: 1.9em;
	font-weight: 600;
}

.mp-banner-sub a,
.mp-banner-sub a:visited {
	color: var( --ts-topbar-ink, #fff );
	text-decoration: underline;
}

.mp-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 16em, 1fr ) );
	gap: 1em;
}

.mp-box {
	padding: 0.75em 1em;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	border-radius: 4px;
	background: var( --background-color-neutral-subtle, #f8f9fa );
}

.mp-box-title {
	margin-bottom: 0.4em;
	font-family: var( --ts-font-display, inherit );
	font-size: 1.2em;
	font-weight: 600;
	border-bottom: 1px solid var( --border-color-subtle, #c8ccd1 );
}

/* --- Infoboxes and navboxes (Template:Infobox weapon, Template:Game nav and the rest) -- */

.ts-infobox,
.ts-navbox {
	border: 1px solid var( --border-color-base, #a2a9b1 );
	background: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
}

.ts-infobox {
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
}

/* The title bar: the top bar's grey with the brand stripes along its top edge. */
.ts-infobox-title,
.ts-navbox-title {
	background: var( --ts-stripes, none ) top / 100% 3px no-repeat, var( --ts-topbar, #eaecf0 );
	color: var( --ts-topbar-ink, #202122 );
	font-family: var( --ts-font-display, inherit );
	font-weight: 600;
}

.ts-infobox-title a,
.ts-infobox-title a:visited,
.ts-navbox-title a,
.ts-navbox-title a:visited {
	color: inherit;
}

.ts-infobox-section,
.ts-navbox-group {
	background: var( --background-color-neutral, #eaecf0 );
}

.ts-infobox-image {
	background: var( --background-color-base, #fff );
}

/* --- Template:Note, Template:Tip, Template:Warning ------------------------------------ */

.ts-callout {
	padding: 8px 12px;
	margin: 10px 0;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	border-left-width: 5px;
	border-radius: 2px;
	background: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
}

.ts-callout-note {
	border-left-color: var( --ts-brand-blue, #36c );
}

.ts-callout-tip {
	border-left-color: var( --ts-brand-green, #14866d );
}

.ts-callout-warning {
	border-left-color: var( --ts-brand-red, #d33 );
}

/* --- Template:Key: a key cap, the dashboard's dark button ----------------------------- */

.ts-key {
	border: 1px solid var( --border-color-base, #a2a9b1 );
	border-bottom-width: 2px;
	border-radius: 3px;
	background: var( --ts-btn, #f8f9fa );
	color: var( --ts-btn-ink, #202122 );
}

/* --- Template:API member ------------------------------------------------------------- */

.ts-api {
	padding: 8px 12px;
	margin: 6px 0 14px 0;
	border: 1px solid var( --border-color-subtle, #c8ccd1 );
	border-left: 4px solid var( --ts-brand-blue, #36c );
	border-radius: 2px;
	background: var( --background-color-neutral-subtle, #f8f9fa );
	color: var( --color-base, #202122 );
}

.ts-api-signature {
	padding: 4px 8px;
	margin-bottom: 6px;
	border-radius: 2px;
	background: var( --background-color-neutral, #eaecf0 );
	font-family: monospace;
	font-size: 1.05em;
	overflow-x: auto;
	white-space: pre-wrap;
}

.ts-api-kind {
	margin-bottom: 6px;
	color: var( --color-subtle, #54595d );
	font-size: 0.9em;
}

/* --- Template:Falloff chart (Module:Falloff draws it, the falloff gadget adds the cursor) */

.ts-falloff-plot {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 180px;
	border-left: 1px solid var( --border-color-base, #a2a9b1 );
	border-bottom: 1px solid var( --border-color-base, #a2a9b1 );
}

.ts-falloff-full {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 1px dashed var( --border-color-base, #a2a9b1 );
}

.ts-falloff-threshold {
	position: absolute;
	top: 0;
	bottom: 0;
	border-left: 1px dotted var( --border-color-base, #a2a9b1 );
}

.ts-falloff-bar {
	flex: 1;
	border-right: 1px solid var( --background-color-base, #fff );
	background: var( --ts-brand-blue, #5b8def );
	cursor: crosshair;
}

.ts-falloff-caption {
	color: var( --color-subtle, #54595d );
	font-size: 85%;
}

.ts-falloff-cursor {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 2px solid var( --color-base, #202122 );
	pointer-events: none;
}

.ts-falloff-readout {
	display: none;
	position: absolute;
	top: 4px;
	z-index: 1;
	padding: 2px 6px;
	border: 1px solid var( --border-color-base, #a2a9b1 );
	border-radius: 3px;
	background: var( --background-color-base, #fff );
	font-size: 85%;
	white-space: pre;
	pointer-events: none;
}