Candidate:Gadget-pickipedia-show.css - Revision history

Magent: v6: .pp-image-link styling to strip body-link gradient from the wrapping anchor

2026-06-02T21:01:29Z

v6: .pp-image-link styling to strip body-link gradient from the wrapping anchor

← Older revision		Revision as of 21:01, 2 June 2026
Line 173:		Line 173:
	height: auto;		height: auto;
	border: 1px solid var(--pp-rule);		border: 1px solid var(--pp-rule);
			}
			/* Clickable poster: image already shows a pointer cursor inside an
			<a>, but we strip the body-link underline-by-bg gradient that would
			bleed onto the image otherwise. */
			.pickipedia-show .show-poster .pp-image .pp-image-link {
			display: block;
			background-image: none;
			padding-bottom: 0;
	}		}
	.pickipedia-show .show-poster .pp-poster-credit {		.pickipedia-show .show-poster .pp-poster-credit {

Magent: v5: restyle .ensemble-infobox in place (right-float, vertical, paper-themed, icons inline)

2026-06-02T20:53:19Z

v5: restyle .ensemble-infobox in place (right-float, vertical, paper-themed, icons inline)

← Older revision		Revision as of 20:53, 2 June 2026
Line 88:		Line 88:
	.pickipedia-show .show-poster .pp-venue a { color: inherit; }		.pickipedia-show .show-poster .pp-venue a { color: inherit; }

	.pickipedia-show .show-~~poster~~ .pp-~~ensemble~~ {		/* Ensemble blocks ({{Ensemble\|...}}) render in their source position on
	~~margin~~: ~~22px 0 0~~;		the page — typically right under {{Show}} — and float right next to
	~~padding~~: ~~16px 0 0~~;		the body content. The default Template:Ensemble inline styles give a
	border-~~top~~: ~~1px~~ solid var(--pp-~~rule~~);		gray-box infobox look; the rules below override those inline styles
			(with !important) to match the takeover palette. */
			.pickipedia-show.has-show-hero .ensemble-infobox {
			background: transparent !important;
			border: none !important;
			border-left: 2px solid var(--pp-accent) !important;
			width: 15em !important;
			padding: 4px 0 4px 16px !important;
			margin: 8px 0 16px 28px !important;
			float: right !important;
			clear: right !important;
	}		}
	.pickipedia-show .show-~~poster~~ .pp-~~ensemble + .pp~~-~~ensemble~~ {		.pickipedia-show.has-show-hero .ensemble-infobox > div:first-child {
	/* ~~Subsequent ensemble blocks~~ (~~opener, sit-ins~~) ~~— same separator but~~		/* Header row carries the band name (or "Ensemble" default). */
	~~tighter top spacing since the first one already gave the section~~		background: transparent !important;
	~~visual room~~. */		color: var(--pp-accent) !important;
	~~margin-top~~: ~~14px~~;
	~~padding-top~~: ~~12px;~~
	}
	~~.pickipedia~~-~~show .show~~-~~poster .~~pp-~~ensemble-title {~~
	font-family: var(--pp-mono);		font-family: var(--pp-mono);
	font-size: 11px;		font-size: 11px;
	letter-spacing: 0.18em;		letter-spacing: 0.18em;
	text-transform: uppercase;		text-transform: uppercase;
	~~color~~: ~~var(~~-~~-pp-accent)~~;		font-weight: 600;
	margin: 0 0 ~~6px~~;		text-align: left !important;
	~~text-wrap~~: ~~pretty~~;		margin: 0 0 10px !important;
			padding: 0 !important;
	}		}
	.pickipedia-show .show-~~poster~~ .pp-~~ensemble~~-~~members~~ {		.pickipedia-show.has-show-hero .ensemble-infobox > div:nth-child(2) {
			/* Member list — one per line (already separated by <br>), serif italic,
			instrument icons preserved. */
	font-family: var(--pp-serif);		font-family: var(--pp-serif);
	font-style: italic;		font-style: italic;
			color: var(--pp-ink);
	font-size: 17px;		font-size: 17px;
	~~color: var(--pp-ink);~~		line-height: 1.7 !important;
	~~margin: 0;~~
	line-height: 1.5;
	~~text-wrap: pretty;~~
	}
	~~.pickipedia-show .show-poster .pp-ensemble-members .pp-sep {~~
	~~color: var(--pp-rule);~~
	~~font-style: normal;~~
	~~margin: 0 4px;~~
	}
	~~/* Template:m emits a 9-18px instrument icon. Nudge it slightly so it~~
	~~sits clean next to the italicised name. */~~
	~~.pickipedia-show .show-poster .pp-ensemble-members img {~~
	~~vertical-align: baseline;~~
	~~margin: 0 0 0 3px~~;
	}		}
	.pickipedia-show .show-~~poster~~ .~~pp-~~ensemble-~~members~~ a {		.pickipedia-show.has-show-hero .ensemble-infobox a {
	color: inherit;		color: inherit;
	text-decoration: none;		text-decoration: none;
	border-bottom: 1px dotted var(--pp-rule);		border-bottom: 1px dotted var(--pp-rule);
			background-image: none;
			padding-bottom: 0;
	}		}
	.pickipedia-show .show-~~poster~~ .~~pp-~~ensemble-~~members~~ a:hover {		.pickipedia-show.has-show-hero .ensemble-infobox a:hover {
			color: var(--pp-accent);
	border-bottom-color: var(--pp-accent);		border-bottom-color: var(--pp-accent);
	~~color~~: ~~var~~(--pp-~~accent)~~;		}
			/* The {{m\|name\|instrument}} icon is a tiny rotated image inline with
			the name. Slightly nudge it for vertical balance. */
			.pickipedia-show.has-show-hero .ensemble-infobox img {
			vertical-align: baseline;
			}
			@media (max-width: 720px) {
			/* On mobile, stop floating and let it stack full-width above content. */
			.pickipedia-show.has-show-hero .ensemble-infobox {
			float: none !important;
			width: auto !important;
			margin: 8px 0 16px !important;
			}
	}		}

Line 177:		Line 188:
	}		}

	/* ~~Hide the floated~~ ensemble infoboxes ~~once~~ the hero ~~has absorbed them. */~~		/* (Previously we absorbed ensemble infoboxes into the hero; now they
	~~.pickipedia-show .ensemble-infobox~~.is-absorbed ~~{ display: none; }~~		render in source position, so no .is-absorbed hiding rule is needed.) */

	.pickipedia-show .show-poster .pp-actions {		.pickipedia-show .show-poster .pp-actions {

Magent: v4: .pp-date-kicker, restructured .pp-ensemble (title + members tiers), icon nudges

2026-06-02T20:43:03Z

v4: .pp-date-kicker, restructured .pp-ensemble (title + members tiers), icon nudges

@@ Line 53: / Line 53: @@
+}
 .pickipedia-show .show-poster .pp-kicker .pp-sep { color: var(--pp-muted); }
 .pickipedia-show .show-poster h1.pp-title {
@@ Line 77: / Line 89: @@
 .pickipedia-show .show-poster .pp-ensemble {
    font-family: var(--pp-mono);
    font-size: 11px;
-   letter-spacing: 0.14em;
+   letter-spacing: 0.18em;
    text-transform: uppercase;
-   color: var(--pp-muted);
+   color: var(--pp-accent);
-   margin: 14px 0 0;
+   margin: 0 0 6px;
    text-wrap: pretty;
+}
-.pickipedia-show .show-poster .pp-ensemble .pp-ensemble-label {
+.pickipedia-show .show-poster .pp-ensemble-members .pp-sep {
    color: var(--pp-accent);
+}
 .pickipedia-show .show-poster .pp-meta {

Magent: v3: bigger poster (width: 100% inside card), poster-credit styling, hide absorbed ensemble-infobox

2026-06-02T20:18:17Z

v3: bigger poster (width: 100% inside card), poster-credit styling, hide absorbed ensemble-infobox

← Older revision		Revision as of 20:18, 2 June 2026
Line 105:		Line 105:
	.pickipedia-show .show-poster .pp-meta .pp-meta-value { color: var(--pp-ink); }		.pickipedia-show .show-poster .pp-meta .pp-meta-value { color: var(--pp-ink); }

	.pickipedia-show .show-poster .pp-image { margin: ~~22px~~ 0 0; }		.pickipedia-show .show-poster .pp-image {
			margin: 28px 0 0;
			}
	.pickipedia-show .show-poster .pp-image img {		.pickipedia-show .show-poster .pp-image img {
	display: block;		display: block;
			width: 100%;
	max-width: 100%;		max-width: 100%;
	height: auto;		height: auto;
	border: 1px solid var(--pp-rule);		border: 1px solid var(--pp-rule);
	}		}
			.pickipedia-show .show-poster .pp-poster-credit {
			font-family: var(--pp-mono);
			font-size: 10px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--pp-muted);
			margin: 10px 0 0;
			text-align: right;
			}
			.pickipedia-show .show-poster .pp-poster-credit-label {
			color: var(--pp-accent);
			margin-right: 6px;
			}

			/* Hide the floated ensemble infoboxes once the hero has absorbed them. */
			.pickipedia-show .ensemble-infobox.is-absorbed { display: none; }

	.pickipedia-show .show-poster .pp-actions {		.pickipedia-show .show-poster .pp-actions {

Magent: Full-takeover layout: hide wiki chrome, paper bg, centered 720px column

2026-06-02T20:05:54Z

Full-takeover layout: hide wiki chrome, paper bg, centered 720px column

Show changes

Magent: Add .pp-ensemble styling for the Featuring credit line

2026-06-02T19:47:34Z

Add .pp-ensemble styling for the Featuring credit line

@@ Line 75: / Line 75: @@
+}
 .pickipedia-show .show-poster .pp-venue a { color: inherit; }
 .pickipedia-show .show-poster .pp-meta {

Magent: Show: page styling extracted into its own gadget (not Common.css)

2026-06-02T19:13:28Z

Show: page styling extracted into its own gadget (not Common.css)

New page

/* |status=proposed -- bot-staged; remove this line when promoting. */
/* ============================================================
* Pickipedia — Show: page styling
*
* Triggers when an article's title starts with "Show:" (legacy
* mainspace convention, not a real namespace). Common.js adds
* .pickipedia-show to body and absorbs Template:Show's infobox
* into a poster-style hero; once absorbed the infobox is hidden.
* Pages without Template:Show still get the setlist typography.
*
* Reuses the same paper/ink palette as .pickipedia-userpost so
* shows and zine posts feel like the same publication.
* ============================================================ */

.pickipedia-show {
--pp-paper: #f5efe4;
--pp-ink: #2b1d12;
--pp-muted: #7a6450;
--pp-rule: #d9cdb8;
--pp-accent: #9a3b1b;
--pp-card: #ede4d2;
--pp-serif: Georgia, "Iowan Old Style", "Charter", "Times New Roman", serif;
--pp-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
--pp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ---------- Poster (hero block) ---------- */
.pickipedia-show .show-poster {
background: var(--pp-paper);
color: var(--pp-ink);
padding: 32px 36px 28px;
margin: 0 0 24px;
position: relative;
border: 1px solid var(--pp-rule);
}

.pickipedia-show .show-poster .pp-kicker {
font-family: var(--pp-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pp-accent);
margin: 0 0 12px;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: baseline;
}
.pickipedia-show .show-poster .pp-kicker a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.pickipedia-show .show-poster .pp-kicker .pp-sep { color: var(--pp-muted); }

.pickipedia-show .show-poster h1.pp-title {
font-family: var(--pp-serif);
font-weight: 700;
font-size: 44px;
line-height: 1.05;
letter-spacing: -0.018em;
margin: 0;
padding: 0;
border: none;
color: var(--pp-ink);
text-wrap: balance;
}

.pickipedia-show .show-poster .pp-venue {
font-family: var(--pp-serif);
font-style: italic;
font-size: 22px;
color: var(--pp-muted);
margin: 10px 0 0;
}
.pickipedia-show .show-poster .pp-venue a { color: inherit; }

.pickipedia-show .show-poster .pp-meta {
font-family: var(--pp-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pp-muted);
margin: 16px 0 0;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.pickipedia-show .show-poster .pp-meta .pp-meta-label { opacity: 0.7; margin-right: 4px; }
.pickipedia-show .show-poster .pp-meta .pp-meta-value { color: var(--pp-ink); }

.pickipedia-show .show-poster .pp-image { margin: 22px 0 0; }
.pickipedia-show .show-poster .pp-image img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--pp-rule);
}

.pickipedia-show .show-poster .pp-actions {
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pickipedia-show .show-poster .pp-actions a {
font-family: var(--pp-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pp-paper);
background: var(--pp-accent);
border: 1px solid var(--pp-accent);
padding: 8px 14px;
text-decoration: none;
border-radius: 999px;
}
.pickipedia-show .show-poster .pp-actions a:hover {
background: var(--pp-ink);
border-color: var(--pp-ink);
}

.pickipedia-show .show-poster .pp-status {
position: absolute;
top: 14px;
right: 18px;
font-family: var(--pp-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pp-muted);
}
.pickipedia-show .show-poster .pp-status.is-verified { color: #228b22; }
.pickipedia-show .show-poster .pp-status.is-proposed { color: #b8860b; }

/* Hide the original infobox once the hero has absorbed its data. */
.pickipedia-show .show-infobox.is-absorbed { display: none; }

/* Hide the slug-style firstHeading only when the hero has been built —
bare Show: pages without Template:Show keep the heading so users
aren't left with an untitled page. */
.pickipedia-show.has-show-hero #firstHeading,
.pickipedia-show.has-show-hero .mw-first-heading { display: none; }

/* ---------- Setlist typography ---------- */
.pickipedia-show .mw-parser-output h2 {
font-family: var(--pp-mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--pp-accent);
border: none;
border-top: 1px solid var(--pp-rule);
margin: 32px 0 14px;
padding-top: 14px;
}
.pickipedia-show .mw-parser-output h2 .mw-editsection {
font-family: var(--pp-sans);
text-transform: none;
letter-spacing: 0;
}

.pickipedia-show .mw-parser-output ul {
list-style: none;
padding: 0;
margin: 0 0 16px;
counter-reset: setlist;
}
.pickipedia-show .mw-parser-output ul li {
font-family: var(--pp-serif);
font-size: 19px;
line-height: 1.5;
padding: 6px 0 6px 40px;
border-bottom: 1px dotted var(--pp-rule);
position: relative;
counter-increment: setlist;
}
.pickipedia-show .mw-parser-output ul li::before {
content: counter(setlist, decimal-leading-zero);
position: absolute;
left: 0;
top: 8px;
font-family: var(--pp-mono);
font-size: 12px;
color: var(--pp-muted);
letter-spacing: 0.05em;
}
.pickipedia-show .mw-parser-output ul li:last-child { border-bottom: none; }

/* Reset counter at every h2 so each set starts at 01. */
.pickipedia-show .mw-parser-output h2 + ul,
.pickipedia-show .mw-parser-output h2 ~ ul:first-of-type { counter-reset: setlist; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
.pickipedia-show .show-poster { padding: 22px 18px 18px; }
.pickipedia-show .show-poster h1.pp-title { font-size: 30px; }
.pickipedia-show .show-poster .pp-venue { font-size: 18px; }
.pickipedia-show .mw-parser-output ul li { font-size: 17px; }
}