Toggle search
Toggle menu
2
191
5
5.2K
Very Bad Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

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

Template page
More actions
← Older edit
undoAdmin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
4,701 edits
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 6: Line 6:
   ================================================ */
   ================================================ */


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


/* --- Title bar --------------------------------------------- */
.portable-infobox .pi-title {
.episode-infobox .infobox-title {
background-color: var(--color-progressive);
color: #fff;
text-align: center;
text-align: center;
font-size: 1rem;
padding: 0.5em;
font-weight: 700;
background-color: var(--color-surface-2);
padding: 0.55em 0.75em;
font-family: "Helvetica Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.01em;
font-weight: 900;
}
}


/* --- Image block ------------------------------------------- */
.portable-infobox .pi-title {
.episode-infobox .infobox-image {
display: block;
text-align: center;
text-align: center;
padding: 0.5em 0.5em 0;
padding: 0.5em;
background-color: var(--color-surface-2);
font-weight: bold;
}
}


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


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


/* --- Listen / audio row ------------------------------------ */
.portable-infobox .pi-header {
.episode-infobox .infobox-listen {
background-color: var(--color-progressive, #36c);
color: #fff;
padding: 0.3em 0.5em;
font-weight: bold;
text-align: center;
text-align: center;
padding: 0.5em 0.75em;
border-bottom: 1px solid var(--border-color-base);
}
}


/* --- Group headers ----------------------------------------- */
.portable-infobox .pi-data {
.episode-infobox .infobox-header {
display: flex;
background-color: var(--color-surface-2);
padding: 0.3em 0.5em;
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-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 {
.portable-infobox .pi-data-label {
flex: 0 0 42%;
flex: 0 0 40%;
font-weight: 600;
font-weight: bold;
font-size: 0.82em;
color: var(--color-subtle);
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 -------------------------------------------- */
.portable-infobox .pi-data-value {
@media screen and (max-width: 720px) {
flex: 1;
.episode-infobox {
float: none;
width: 100%;
margin: 0 0 1.25em 0;
}
}
}


Line 148: Line 77:


/* Dark mode */
/* Dark mode */
.skin-theme-clientpref-night .episode-infobox {
.skin-theme-clientpref-night .portable-infobox {
border-left-color: var(--color-progressive, #6da9ff);
background-color: var(--color-surface-4);
background-color: var(--color-surface-4);
}
}


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


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

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);
	}
}
Retrieved from "https://verybad.wiki/index.php?title=Template:Episode_Infobox/styles.css&oldid=5472"
Last modified
This page was last edited on 21 March 2026, at 20:16.