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

Revision as of 20:07, 21 March 2026

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

/* --- Outer wrapper ----------------------------------------- */
.episode-infobox {
	float: right;
	clear: right;
	width: 300px;
	margin: 0 0 1.25em 1.5em;
	border: 1px solid var(--border-color-base);
	border-radius: 4px;
	background-color: var(--color-surface-1);
	color: var(--color-base);
	font-size: 0.875rem;
	line-height: 1.5;
	overflow: hidden;
}

/* --- Title bar --------------------------------------------- */
.episode-infobox .infobox-title {
	background-color: var(--color-progressive);
	color: #fff;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.55em 0.75em;
	letter-spacing: 0.01em;
}

/* --- Image block ------------------------------------------- */
.episode-infobox .infobox-image {
	display: block;
	text-align: center;
	padding: 0.5em 0.5em 0;
}

.episode-infobox .infobox-image img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.episode-infobox .infobox-caption {
	font-size: 0.8em;
	color: var(--color-subtle);
	padding: 0.3em 0.75em 0.5em;
	text-align: center;
}

/* --- Listen / audio row ------------------------------------ */
.episode-infobox .infobox-listen {
	text-align: center;
	padding: 0.5em 0.75em;
	border-bottom: 1px solid var(--border-color-base);
}

/* --- Group headers ----------------------------------------- */
.episode-infobox .infobox-header {
	background-color: var(--color-surface-2);
	color: var(--color-base);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.35em 0.75em;
	border-top: 1px solid var(--border-color-base);
	border-bottom: 1px solid var(--border-color-base);
}

/* --- Data rows --------------------------------------------- */
.episode-infobox .infobox-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	padding: 0.35em 0.75em;
	border-bottom: 1px solid var(--border-color-subtle);
	gap: 0.25em;
}

.episode-infobox .infobox-row:last-child {
	border-bottom: none;
}

.episode-infobox .infobox-label {
	flex: 0 0 42%;
	font-weight: 600;
	font-size: 0.82em;
	color: var(--color-subtle);
	padding-right: 0.4em;
}

.episode-infobox .infobox-value {
	flex: 1 1 55%;
	word-break: break-word;
}

/* --- Navigation rows (Previous / Next) --------------------- */
.episode-infobox .infobox-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.35em 0.75em;
	border-bottom: 1px solid var(--border-color-subtle);
}

.episode-infobox .infobox-nav:last-child {
	border-bottom: none;
}

.episode-infobox .infobox-nav .infobox-label {
	flex: none;
	font-size: 0.78em;
}

.episode-infobox .infobox-nav .infobox-value {
	flex: none;
}

/* --- Links -------------------------------------------------- */
.episode-infobox a {
	color: var(--color-progressive);
}

.episode-infobox a:hover {
	text-decoration: underline;
}

/* --- Responsive -------------------------------------------- */
@media screen and (max-width: 720px) {
	.episode-infobox {
		float: none;
		width: 100%;
		margin: 0 0 1.25em 0;
	}
}

/* ================================================
   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 .episode-infobox {
	border-left-color: var(--color-progressive, #6da9ff);
	background-color: var(--color-surface-4);
}

/* Pure black mode */
.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 .episode-infobox {
	background-color: var(--color-surface-4);
}

/* Automatic (follows OS preference) */
@media ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os .episode-infobox {
		border-left-color: var(--color-progressive, #6da9ff);
	}
}