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

Latest revision as of 20:16, 21 March 2026

/* ================================================
   Episode Infobox — TemplateStyles
   Theming via Citizen skin CSS custom properties.
   Requires Extension:TemplateStylesExtender to use
   CSS variables from the Citizen skin.
   ================================================ */

.portable-infobox {
	float: right;
	clear: right;
	margin: 0 0 1em 1em;
	padding: 0.5em;
	width: 300px;
	background-color: var(--color-surface-1);
	border: 1px solid var(--border-color-base);
	font-size: 0.9em;
	color: var(--color-base);
}

.portable-infobox .pi-title {
	text-align: center;
	padding: 0.5em;
	background-color: var(--color-surface-2);
	font-family: "Helvetica Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
}

.portable-infobox .pi-title {
	text-align: center;
	padding: 0.5em;
	background-color: var(--color-surface-2);
	font-weight: bold;
}

.portable-infobox .pi-image img {
	width: 100%;
	height: auto;
}

.portable-infobox .pi-image-caption {
	font-size: 0.85em;
	text-align: center;
	color: var(--color-subtle);
	padding: 0.25em 0;
}

.portable-infobox .pi-header {
	background-color: var(--color-progressive, #36c);
	color: #fff;
	padding: 0.3em 0.5em;
	font-weight: bold;
	text-align: center;
}

.portable-infobox .pi-data {
	display: flex;
	padding: 0.3em 0.5em;
	border-top: 1px solid var(--border-color-base);
}

.portable-infobox .pi-data-label {
	flex: 0 0 40%;
	font-weight: bold;
	color: var(--color-subtle);
}

.portable-infobox .pi-data-value {
	flex: 1;
}

/* ================================================
   Dark mode overrides
   Citizen automatically adjusts its CSS variables
   per theme, so these blocks are only needed if you
   want to deviate from the skin's defaults.
   ================================================ */

/* Dark mode */
.skin-theme-clientpref-night .portable-infobox {
	background-color: var(--color-surface-4);
}

/* Pure black mode */
.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 .portable-infobox {
	background-color: #000;
}

/* Automatic (follows OS preference) */
@media ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os .portable-infobox {
		background-color: var(--color-surface-4);
	}
}