Template:Category/Event/styles.css
From Miniscope
/* TemplateStyles for [[Template:Category/Event]] — the per-event-page
* render. Visual idiom is a lighter cousin of {{Category/Workshop}}:
* events are smaller-scale than workshops (a one-hour seminar, a
* recurring office hour) so we skip the workshop's hero-banner-with-
* overlay treatment in favor of a flat masthead. Banner image, when
* set, sits above the masthead as a separate strip rather than as a
* darkened backdrop.
*
* Theme tokens via var(--labki-*, literal). MW 1.44.5 / css-sanitizer
* 5.5.0 rejects var() in border-radius, border-color longhand,
* padding, margin — so those stay literal. State-color tints
* (cancelled / completed / past) are discrete state signals, not
* theme tokens, so literal colors are correct there too.
*
* No -webkit-* or aspect-ratio (sanitizer rejects both); image
* proportions come from natural file dimensions plus a max-height
* cap on the banner. */
.event-page {
margin: 0 0 24px;
}
/* ================================================================
Optional banner — Has banner (3:1) or Has card image (4:3)
Capped so it doesn't dominate when the only available art is
the 4:3 listing image.
================================================================ */
.event-banner {
margin: 0 0 20px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--labki-border, #d8dde3);
line-height: 0;
}
.event-banner img {
display: block;
width: 100%;
height: auto;
max-height: 360px;
object-fit: cover;
}
/* ================================================================
Masthead — eyebrow (Type · Status) + big date+time line +
location. No CTA buttons in the masthead itself; action chips
render below the description in .event-actions so the eyebrow
stays a quick at-a-glance scan band.
================================================================ */
.event-masthead {
margin: 0 0 16px;
}
.event-eyebrow {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 0.82em;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--labki-text-muted, #5a6a7a);
margin: 0 0 6px;
}
/* Type chip — neutral pill carrying the Has event type value. Plain
* background, no state coloring; this is identification, not status. */
.event-type-chip {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
background: var(--labki-bg-subtle, #f0f2f5);
color: var(--labki-text, #1c1c1c);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
font-size: 0.95em;
border: 1px solid var(--labki-border, #d8dde3);
}
/* Status chip — only rendered for non-default statuses (Cancelled,
* Completed, Pending) or the derived "Past" / "Happening now" state.
* Scheduled-upcoming is the default and gets no chip (zero-noise:
* if there's no chip, the event is on as-scheduled). */
.event-status-chip {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
font-size: 0.95em;
border: 1px solid;
}
.event-status-chip--past {
background: #ececec;
color: #555555;
border-color: #c0c0c0;
}
.event-status-chip--now {
background: #d4f0e0;
color: #196f3d;
border-color: #27AE60;
}
.event-status-chip--cancelled {
background: #fbeaea;
color: #922b21;
border-color: #c0392b;
}
.event-status-chip--completed {
background: #e8f0f7;
color: #1c4e7a;
border-color: #2774AE;
}
.event-status-chip--pending {
background: #fcf3cf;
color: #7d6608;
border-color: #B7950B;
}
.event-when {
font-size: 1.35em;
font-weight: 600;
line-height: 1.3;
color: var(--labki-text, #1c1c1c);
margin: 4px 0 6px;
}
/* TZ label inside .event-when is styled subtler so the digits read
* first; the <time> element wraps both digits and label, so we target
* the label via a span class set by Template:UI/datetime — no such
* class exists yet, so this is a placeholder reserved for if we ever
* want differential weight inside the rendered chunk.
*
* For now the entire rendered chunk gets the same weight. */
.event-where {
font-size: 1em;
color: var(--labki-text-muted, #5a6a7a);
margin: 0 0 6px;
}
.event-topic {
font-size: 1em;
color: var(--labki-text-muted, #5a6a7a);
margin: 0 0 6px;
font-style: italic;
}
/* ================================================================
Description — accent-bordered italic block, possibly multi-paragraph.
Wrapped in a <div> rather than a <p> so MediaWiki's auto-paragraph
pass can emit one <p> per blank-line break in {{{has_description}}};
wrapping in <p> would force MediaWiki to close the explicit <p> at
the first blank line and emit the rest as plain <p>s without our
class — the visible bug being: only the first paragraph carries the
italic+border treatment.
================================================================ */
.event-description {
color: var(--labki-text, #1c1c1c);
margin: 16px 0;
padding: 0 0 0 14px;
border-left: 3px solid var(--labki-border, #d8dde3);
}
.event-description p {
font-size: 1.05em;
line-height: 1.6;
font-style: italic;
margin: 0 0 0.6em 0;
}
.event-description p:last-child {
margin-bottom: 0;
}
/* ================================================================
Action chips — Website / Attendance link / etc. Lives under the
description, above the details list. UI/button handles per-chip
styling; this wrapper just lays them out horizontally with wrap.
================================================================ */
.event-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0;
}
/* ================================================================
Details list — Type / When / Where / Presenter / Project / etc.
Same visual idiom as .workshop-details-list (rows with bottom
borders and a muted-label column) but with .event- prefix so
future divergence doesn't break Workshop.
================================================================ */
.event-details {
margin: 24px 0;
}
.event-details-list {
list-style: none;
padding: 0;
margin: 8px 0 0;
}
.event-details-list li {
padding: 8px 0;
border-bottom: 1px solid var(--labki-border, #d8dde3);
font-size: 0.95em;
line-height: 1.5;
}
.event-details-list li:last-child {
border-bottom: none;
}
.event-details-list strong {
display: inline-block;
min-width: 120px;
color: var(--labki-text-muted, #5a6a7a);
font-weight: 600;
}