Demongrrl at 00:27, 24 April 2026

2026-04-24T00:27:58Z

← Older revision		Revision as of 10:27, 24 April 2026
Line 1:		Line 1:
	/* All CSS here will be loaded for users of the Citizen skin */		/* All CSS here will be loaded for users of the Citizen skin */
	/* =========================================================		/* =========================================================
	Infobox ~~tweaks for the~~ Citizen skin		Infobox — Citizen skin (light + dark mode)
	========================================================= */		========================================================= */

	/* ~~Float the infobox to the right of the article body.~~		/* --- Base layout + light-mode appearance --- */
	~~Citizen constrains content width, so we need !important on a~~
	~~couple of properties because Citizen's own skinStyles can~~
	~~otherwise reset floats on tables inside .mw~~-~~parser~~-~~output.~~ */
	.mw-parser-output .infobox {		.mw-parser-output .infobox {
	float: right;		float: right;
Line 16:		Line 13:
	box-sizing: border-box;		box-sizing: border-box;

	~~/* Use Citizen's theme variables so colours follow~~		background-color: var( --color-surface-2, #f8f9fa );
	~~light/dark mode automatically. */~~
	background-color: var( -~~-background~~-color-~~neutral~~-~~subtle~~, #f8f9fa );
	color: var( --color-base, #202122 );		color: var( --color-base, #202122 );
	border: 1px solid var( --border-color-base, #a2a9b1 );		border: 1px solid var( --border-color-base, #a2a9b1 );
Line 25:		Line 20:
	line-height: 1.5;		line-height: 1.5;
	box-shadow: var( --box-shadow-card, 0 1px 2px rgba( 0, 0, 0, 0.05 ) );		box-shadow: var( --box-shadow-card, 0 1px 2px rgba( 0, 0, 0, 0.05 ) );
	overflow: hidden; ~~/* keeps rounded corners clean */~~		overflow: hidden;
	}		}

	/* Title ~~bar~~ */		/* Title + caption */
	.mw-parser-output .infobox-title,		.mw-parser-output .infobox-title,
	.mw-parser-output .infobox caption {		.mw-parser-output .infobox caption {
	background-color: var( -~~-background~~-color-~~primary-~~-~~hover~~, #eaecf0 );		background-color: var( --color-surface-3, #eaecf0 );
	color: var( --color-emphasized, #202122 );		color: var( --color-emphasized, #202122 );
	font-size: 1.1rem;		font-size: 1.1rem;
Line 40:		Line 35:
	}		}

	/* Section headers ~~(e.g. \| header1 = ...)~~ */		/* Section headers */
	.mw-parser-output .infobox-header,		.mw-parser-output .infobox-header,
	.mw-parser-output .infobox-above,		.mw-parser-output .infobox-above,
	.mw-parser-output .infobox-subheader,		.mw-parser-output .infobox-subheader,
	.mw-parser-output .infobox-below {		.mw-parser-output .infobox-below {
	background-color: var( --~~background~~-~~color~~-~~neutral~~, #eaecf0 );		background-color: var( --color-surface-3, #eaecf0 );
	color: var( --color-emphasized, #202122 );		color: var( --color-emphasized, #202122 );
	text-align: center;		text-align: center;
Line 52:		Line 47:
	}		}

	/* Label ~~(left) and~~ data ~~(right)~~ cells */		/* Label + data cells */
	.mw-parser-output .infobox-label {		.mw-parser-output .infobox-label {
	background-color: var( -~~-background~~-color-~~neutral~~-~~subtle~~, #f8f9fa );		background-color: var( --color-surface-1, #f8f9fa );
	color: var( --color-subtle, #54595d );		color: var( --color-subtle, #54595d );
	text-align: left;		text-align: left;
Line 73:		Line 68:
	}		}

	/* Image ~~row~~ + caption */		/* Image + caption */
	.mw-parser-output .infobox-image {		.mw-parser-output .infobox-image {
	background-color: transparent;		background-color: transparent;
	padding: 0.6em 0;		padding: 0.6em 0;
	text-align: center;		text-align: center;
	border-top: 1px solid var( --border-color-~~subtle~~, #eaecf0 );		border-top: 1px solid var( --border-color-base, #eaecf0 );
	border-bottom: 1px solid var( --border-color-~~subtle~~, #eaecf0 );		border-bottom: 1px solid var( --border-color-base, #eaecf0 );
	}		}

Line 95:		Line 90:
	}		}

	/* Links ~~inside the infobox should use Citizen's link colour~~		/* Links */
	~~rather than the default blue, for better dark-mode contrast.~~ */
	.mw-parser-output .infobox a {		.mw-parser-output .infobox a {
	color: var( --color-link, #36c );		color: var( --color-link, #36c );
Line 106:		Line 100:

	/* =========================================================		/* =========================================================
	Mobile ~~/ narrow viewports~~		Explicit dark-mode overrides
			-----------------------------
			These neutralise the hard-coded colours that TemplateStyles
			loads from Module:Infobox/styles.css, which otherwise show
			through as light grey / pale blue in Citizen's dark theme.
			========================================================= */
			.skin-citizen-dark .mw-parser-output .infobox,
			.skin-citizen-dark .mw-parser-output .infobox-data,
			.skin-citizen-dark .mw-parser-output .infobox-full-data {
			background-color: var( --color-surface-2, #11151c );
			color: var( --color-base, #eaecf0 );
			}

			.skin-citizen-dark .mw-parser-output .infobox-title,
			.skin-citizen-dark .mw-parser-output .infobox caption,
			.skin-citizen-dark .mw-parser-output .infobox-header,
			.skin-citizen-dark .mw-parser-output .infobox-above,
			.skin-citizen-dark .mw-parser-output .infobox-subheader,
			.skin-citizen-dark .mw-parser-output .infobox-below {
			background-color: var( --color-surface-3, #1b1f27 );
			color: var( --color-emphasized, #fff );
			border-color: var( --border-color-base, #3a3a3a );
			}

			.skin-citizen-dark .mw-parser-output .infobox-label {
			background-color: var( --color-surface-1, #0c0e13 );
			color: var( --color-subtle, #a2a9b1 );
			}

			.skin-citizen-dark .mw-parser-output .infobox-image {
			border-top-color: var( --border-color-base, #3a3a3a );
			border-bottom-color: var( --border-color-base, #3a3a3a );
			}

			.skin-citizen-dark .mw-parser-output .infobox {
			border-color: var( --border-color-base, #3a3a3a );
			}

			/* =========================================================
			Mobile
	========================================================= */		========================================================= */
	@media ( max-width: 720px ) {		@media ( max-width: 720px ) {

Demongrrl: Created page with "/* All CSS here will be loaded for users of the Citizen skin / / ========================================================= Infobox tweaks for the Citizen skin ========================================================= / / Float the infobox to the right of the article body. Citizen constrains content width, so we need !important on a couple of properties because Citizen's own skinStyles can otherwise reset floats on tables inside .mw-parser-output. */ ...."

2026-04-23T23:43:41Z

Created page with "All CSS here will be loaded for users of the Citizen skin: ========================================================= Infobox tweaks for the Citizen skin =========================================================: Float the infobox to the right of the article body. Citizen constrains content width, so we need !important on a couple of properties because Citizen's own skinStyles can otherwise reset floats on tables inside .mw-parser-output.: ...."

New page

/* All CSS here will be loaded for users of the Citizen skin */
/* =========================================================
Infobox tweaks for the Citizen skin
========================================================= */

/* Float the infobox to the right of the article body.
Citizen constrains content width, so we need !important on a
couple of properties because Citizen's own skinStyles can
otherwise reset floats on tables inside .mw-parser-output. */
.mw-parser-output .infobox {
float: right;
clear: right;
margin: 0 0 1em 1.5em;
width: 22em;
max-width: 100%;
box-sizing: border-box;

/* Use Citizen's theme variables so colours follow
light/dark mode automatically. */
background-color: var( --background-color-neutral-subtle, #f8f9fa );
color: var( --color-base, #202122 );
border: 1px solid var( --border-color-base, #a2a9b1 );
border-radius: var( --border-radius--medium, 4px );
font-size: 0.875rem;
line-height: 1.5;
box-shadow: var( --box-shadow-card, 0 1px 2px rgba( 0, 0, 0, 0.05 ) );
overflow: hidden; /* keeps rounded corners clean */
}

/* Title bar */
.mw-parser-output .infobox-title,
.mw-parser-output .infobox caption {
background-color: var( --background-color-primary--hover, #eaecf0 );
color: var( --color-emphasized, #202122 );
font-size: 1.1rem;
font-weight: 600;
padding: 0.6em 0.8em;
text-align: center;
border-bottom: 1px solid var( --border-color-base, #a2a9b1 );
}

/* Section headers (e.g. | header1 = ...) */
.mw-parser-output .infobox-header,
.mw-parser-output .infobox-above,
.mw-parser-output .infobox-subheader,
.mw-parser-output .infobox-below {
background-color: var( --background-color-neutral, #eaecf0 );
color: var( --color-emphasized, #202122 );
text-align: center;
font-weight: 600;
padding: 0.4em 0.6em;
}

/* Label (left) and data (right) cells */
.mw-parser-output .infobox-label {
background-color: var( --background-color-neutral-subtle, #f8f9fa );
color: var( --color-subtle, #54595d );
text-align: left;
vertical-align: top;
padding: 0.4em 0.6em;
width: 40%;
font-weight: 500;
white-space: nowrap;
}

.mw-parser-output .infobox-data,
.mw-parser-output .infobox-full-data {
background-color: transparent;
color: var( --color-base, #202122 );
text-align: left;
vertical-align: top;
padding: 0.4em 0.6em;
}

/* Image row + caption */
.mw-parser-output .infobox-image {
background-color: transparent;
padding: 0.6em 0;
text-align: center;
border-top: 1px solid var( --border-color-subtle, #eaecf0 );
border-bottom: 1px solid var( --border-color-subtle, #eaecf0 );
}

.mw-parser-output .infobox-image img {
max-width: 100%;
height: auto;
border-radius: var( --border-radius--small, 2px );
}

.mw-parser-output .infobox-caption {
font-size: 0.82rem;
font-style: italic;
color: var( --color-subtle, #54595d );
padding: 0.4em 0.6em 0;
}

/* Links inside the infobox should use Citizen's link colour
rather than the default blue, for better dark-mode contrast. */
.mw-parser-output .infobox a {
color: var( --color-link, #36c );
}

.mw-parser-output .infobox a:visited {
color: var( --color-link--visited, #6b4ba1 );
}

/* =========================================================
Mobile / narrow viewports
========================================================= */
@media ( max-width: 720px ) {
.mw-parser-output .infobox {
float: none;
clear: both;
width: 100%;
margin: 0 0 1em 0;
}
}

MediaWiki:Citizen.css - Revision history

Demongrrl at 00:27, 24 April 2026