Candidate:Gadget-pickipedia-show.css: Difference between revisions

Latest revision as of 21:01, 2 June 2026

/* |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); }

/* Human-readable date kicker — bigger than the technical kicker so it
   reads as the answer to "when is this show?". */
.pickipedia-show .show-poster .pp-date-kicker {
  font-family: var(--pp-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pp-ink);
  margin: 0 0 8px;
  font-weight: 600;
}

.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; }

/* Ensemble blocks ({{Ensemble|...}}) render in their source position on
   the page — typically right under {{Show}} — and float right next to
   the body content. The default Template:Ensemble inline styles give a
   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.has-show-hero .ensemble-infobox > div:first-child {
  /* Header row carries the band name (or "Ensemble" default). */
  background: transparent !important;
  color: var(--pp-accent) !important;
  font-family: var(--pp-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: left !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.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-style: italic;
  color: var(--pp-ink);
  font-size: 17px;
  line-height: 1.7 !important;
}
.pickipedia-show.has-show-hero .ensemble-infobox a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--pp-rule);
  background-image: none;
  padding-bottom: 0;
}
.pickipedia-show.has-show-hero .ensemble-infobox a:hover {
  color: var(--pp-accent);
  border-bottom-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;
  }
}

.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: 28px 0 0;
}
.pickipedia-show .show-poster .pp-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  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 {
  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;
}

/* (Previously we absorbed ensemble infoboxes into the hero; now they
   render in source position, so no .is-absorbed hiding rule is needed.) */

.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; }
}

/* ============================================================
 * Full-takeover layout for Show: pages with hero
 *
 * Only fires when .pickipedia-show AND .has-show-hero (i.e.,
 * Template:Show is present). Bare Show: pages keep their wiki
 * chrome — the setlist typography from the base section still
 * applies.
 *
 * The DOM additions (corner logo, topbar) are inserted by
 * Gadget-pickipedia-show.js. The patterns here mirror what
 * .pickipedia-userpost does, so future deduping into a shared
 * .pickipedia-publication base class stays straightforward.
 * ============================================================ */

.pickipedia-show.has-show-hero {
  background: var(--pp-paper) !important;
  color: var(--pp-ink);
  position: relative;
}

.pickipedia-show.has-show-hero #column-one,
.pickipedia-show.has-show-hero #sidebar,
.pickipedia-show.has-show-hero #mw-panel,
.pickipedia-show.has-show-hero .vector-main-menu-container,
.pickipedia-show.has-show-hero .vector-page-toolbar,
.pickipedia-show.has-show-hero #mw-navigation .portal,
.pickipedia-show.has-show-hero .mw-sidebar-container,
.pickipedia-show.has-show-hero #p-views,
.pickipedia-show.has-show-hero #p-cactions,
.pickipedia-show.has-show-hero #p-cactions-mobile,
.pickipedia-show.has-show-hero #p-personal,
.pickipedia-show.has-show-hero #p-logo,
.pickipedia-show.has-show-hero .vector-page-tools,
.pickipedia-show.has-show-hero .mw-footer,
.pickipedia-show.has-show-hero #footer,
.pickipedia-show.has-show-hero .printfooter,
.pickipedia-show.has-show-hero .catlinks,
.pickipedia-show.has-show-hero .mw-indicators,
.pickipedia-show.has-show-hero #siteSub,
.pickipedia-show.has-show-hero #contentSub,
.pickipedia-show.has-show-hero .subpages,
.pickipedia-show.has-show-hero #jump-to-nav,
.pickipedia-show.has-show-hero .mw-jump-link {
  display: none !important;
}

.pickipedia-show.has-show-hero #globalWrapper,
.pickipedia-show.has-show-hero #column-content,
.pickipedia-show.has-show-hero .monobook-body {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
}

.pickipedia-show.has-show-hero #content,
.pickipedia-show.has-show-hero .mw-body,
.pickipedia-show.has-show-hero #bodyContent,
.pickipedia-show.has-show-hero .mw-content-container {
  background: var(--pp-paper) !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  color: var(--pp-ink);
}

/* ---------- Corner logo ---------- */
.pickipedia-show.has-show-hero .pp-corner-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(60px, 9vw, 130px);
  z-index: 5;
  display: block;
  text-decoration: none;
}
.pickipedia-show.has-show-hero .pp-corner-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Topbar ---------- */
.pickipedia-show.has-show-hero .pickipedia-show-topbar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: transparent;
  font-family: var(--pp-mono);
}
.pickipedia-show.has-show-hero .pickipedia-show-topbar-left,
.pickipedia-show.has-show-hero .pickipedia-show-topbar-right {
  display: flex;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pickipedia-show.has-show-hero .pickipedia-show-topbar a {
  color: var(--pp-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}
.pickipedia-show.has-show-hero .pickipedia-show-topbar a:hover { color: var(--pp-accent); }

/* ---------- Centered content column ---------- */
.pickipedia-show.has-show-hero .mw-parser-output {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 80px;
  font-family: var(--pp-serif);
  color: var(--pp-ink);
  font-size: 18px;
  line-height: 1.55;
}
.pickipedia-show.has-show-hero .mw-parser-output > p {
  text-wrap: pretty;
  margin: 0 0 22px;
}
.pickipedia-show.has-show-hero .mw-parser-output a {
  color: var(--pp-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--pp-accent), var(--pp-accent));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: color .15s;
}
.pickipedia-show.has-show-hero .mw-parser-output a:hover { color: var(--pp-accent); }
.pickipedia-show.has-show-hero .mw-parser-output a.new {
  color: var(--pp-muted);
  background-image: linear-gradient(var(--pp-muted), var(--pp-muted));
  font-style: italic;
}

/* Setlist links shouldn't get the body-paragraph underline treatment —
 * they live inside numbered list items and already get serif styling. */
.pickipedia-show.has-show-hero .mw-parser-output ul li a {
  background-image: none;
  padding-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (min-width: 720px) and (max-width: 1100px) {
  .pickipedia-show.has-show-hero .mw-parser-output,
  .pickipedia-show.has-show-hero .pickipedia-show-topbar {
    margin-left: 160px;
    margin-right: 24px;
  }
}

@media (max-width: 720px) {
  .pickipedia-show.has-show-hero .mw-parser-output,
  .pickipedia-show.has-show-hero .pickipedia-show-topbar {
    padding-left: max(24px, calc(9vw + 24px));
    padding-right: 24px;
  }
}