Template:UI/upcoming events list/styles.css

/* TemplateStyles for {{UI/upcoming_events_list}}.
 *
 * Card-row list visually parallel to .wiki-activity-list — mid-dot
 * meta separators, soft border-rule dividers, action chip on the right.
 * Lives in its own class space (.wiki-events-list-*, .wiki-events-row-*)
 * so the list and the activity feed can evolve independently even when
 * placed side-by-side via .wiki-feed-columns.
 *
 * Theme tokens via `var(--labki-*, literal)`; geometry (border-radius,
 * padding) stays literal because MW 1.44.5 / css-sanitizer 5.5.0
 * rejects var() for those property matchers.
 */

.wiki-events-list-wrap {
	display: flex;
	flex-direction: column;
}

.wiki-events-list {
	display: flex;
	flex-direction: column;
	margin: 8px 0 6px;
	border-top: 1px solid var(--labki-border, #d8dde3);
}

/* Row: title+meta block on the left, Details chip on the right. The
 * grid layout keeps the chip pinned right even with long titles
 * (1fr+auto), and align-items: center vertically aligns the chip with
 * the title-meta stack. */
.wiki-events-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 8px;
	border-bottom: 1px solid var(--labki-border, #d8dde3);
}

.wiki-events-row-body {
	min-width: 0;
}

.wiki-events-row-title {
	font-weight: 600;
	font-size: 1.02em;
	line-height: 1.3;
	margin-bottom: 2px;
}

.wiki-events-row-title a {
	color: var(--labki-accent, #2774AE);
}

/* Meta line — date / time / location, separated by middots via
 * ::after on non-last spans. Same idiom as .wiki-activity-row-meta;
 * suppressing a span just removes its slot without leaving a dangling
 * separator (the ::after only fires on non-last children, so when
 * (e.g.) the time span is suppressed the date span becomes
 * second-to-last and gets the middot, while the new last child
 * (location) doesn't). */
.wiki-events-row-meta {
	font-size: 0.85em;
	color: var(--labki-text-muted, #5a6a7a);
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	line-height: 1.4;
}

.wiki-events-row-meta > span:not(:last-child)::after {
	content: "·";
	margin-left: 8px;
	color: var(--labki-text-faint, #a0a8b0);
}

.wiki-events-row-date {
	font-weight: 500;
	color: var(--labki-text, #1c1c1c);
}

/* Details chip — sits on the right of the row via the parent grid.
 * Trim UI/button's default padding here so the chip stays visually
 * compact at row-meta scale; the secondary style (outlined accent)
 * carries the affordance without competing with the row title. */
.wiki-events-row-action .wiki-button {
	font-size: 0.82em;
	padding: 4px 10px;
}

/* Footer link — "See all upcoming events →" below the list.
 * Right-aligned to mirror the activity-feed footer; muted color so it
 * doesn't compete with the row content above. */
.wiki-events-see-all {
	margin: 6px 0 18px;
	font-size: 0.88em;
	text-align: right;
}

.wiki-events-see-all a {
	color: var(--labki-text-muted, #5a6a7a);
}

.wiki-events-see-all a:hover {
	color: var(--labki-accent, #2774AE);
}

.wiki-events-empty {
	margin: 8px 0 18px;
	padding: 14px 12px;
	color: var(--labki-text-muted, #5a6a7a);
	font-style: italic;
	text-align: center;
	border: 1px dashed var(--labki-border, #d8dde3);
	border-radius: 4px;
	background: var(--labki-bg-subtle, #f8f9fa);
}