Module:Infobox/styles/citizen.css

/* {{pp|small=y}} */
/*
 * Citizen-compatible Infobox TemplateStyles
 * Uses CSS variables safely within TemplateStyles limits.
 * Avoids hardcoded colors to adapt automatically to Citizen's color scheme.
 */

.infobox {
	/* TemplateStyles-safe fallback shadow */
	box-shadow: 0.2em 0.2em 1em 0 rgba(0, 0, 0, 0.2);

	float: right;
	clear: right;
	margin: 0 0 1em 1em;
	padding: 0.5em;
	width: 280px;

	/* Use allowed variable-based colors (with fallbacks) */
	background-color: var(--theme-surface-1, #f9f9f9);
	color: var(--theme-text-color, #000);
	border: 1px solid var(--theme-border-color, #aaa);

	font-size: 90%;

	/* Fixed radius, since TemplateStyles rejects var() in border-radius */
	border-radius: 4px;
}

/* Subboxes (child infoboxes nested in another infobox) */
.infobox-subbox {
	padding: 0;
	border: none;
	margin: -3px;
	width: auto;
	min-width: 100%;
	font-size: 100%;
	clear: none;
	float: none;
	background-color: transparent;
}

.infobox-3cols-child {
	margin: auto;
}

.infobox .navbar {
	font-size: 100%;
}

.infobox th {
	text-align: left;
	vertical-align: top;
	padding-right: 0.5em;
	color: var(--theme-text-color, #000);
}

.infobox td {
	vertical-align: top;
	color: var(--theme-text-color, #000);
}

/* Header rows */
.infobox .infobox-header {
	background-color: var(--theme-surface-2, #e0e0e0);
	color: var(--theme-text-color, #000);
	font-weight: bold;
	text-align: center;
	padding: 0.4em 0;
	font-size: 105%;
	border-bottom: 1px solid var(--theme-border-color, #aaa);
}

/* Optional dark mode tweaks */
.skin-citizen-dark .infobox {
	box-shadow: 0.2em 0.2em 1em 0 rgba(0, 0, 0, 0.6);
}

.skin-citizen-dark .infobox .infobox-header {
	border-bottom-color: var(--theme-border-strong, #444);
}