Template:UI/recent activity feed/styles.css

/* TemplateStyles for {{UI/recent_activity_feed}}. Visually parallels
 * {{Category/Forum/styles.css}} (mid-dot meta separators, soft
 * border-rule row dividers, chip on the right) so a homepage that
 * places both feeds side-by-side reads as a unified surface — but
 * lives in its own class space (.wiki-activity-*) so neither side
 * couples to the other.
 *
 * Theme tokens via `var(--labki-*, literal)` follow the same idiom as
 * the rest of the schema; type-chip colors stay literal because
 * they're discrete identity signals (one shade per content type),
 * not theme tokens. border-* shorthand also blocks var() in MW's CSS
 * sanitizer, which would force literals here anyway.
 */

.wiki-activity-feed {
	display: flex;
	flex-direction: column;
}

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

.wiki-activity-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-activity-row-body {
	min-width: 0;
}

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

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

/* Description sits between title and meta — one-line summary so the
 * row stays compact even when the description is long. Standard
 * single-line ellipsis idiom; rows wrap to title-only on very narrow
 * viewports where the description would otherwise truncate to
 * something useless ("…"). */
.wiki-activity-row-desc {
	font-size: 0.9em;
	color: var(--labki-text, #1c1c1c);
	line-height: 1.4;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wiki-activity-row-meta {
	font-size: 0.82em;
	color: var(--labki-text-muted, #5a6a7a);
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	line-height: 1.4;
}

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

.wiki-activity-row-meta a {
	color: var(--labki-text-muted, #5a6a7a);
}

.wiki-activity-row-meta a:hover {
	color: var(--labki-accent, #2774AE);
}

/* Type chip — same chip silhouette as the forum row's
 * .wiki-forum-row-chip, but with per-type identity colors picked by
 * hand rather than first-letter-hashed (see row.wikitext for why).
 * Base styling is the neutral fallback that .is-type-other uses
 * verbatim; each .is-type-* override below paints all three surfaces
 * (border / background / text) as a coherent set. */
.wiki-activity-row-chip {
	flex-shrink: 0;
	padding: 1px 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 3px;
	border: 1px solid var(--labki-border, #d8dde3);
	background: var(--labki-bg-subtle, #f4f6f8);
	color: var(--labki-text-muted, #5a6a7a);
}

.wiki-activity-row.is-type-guide .wiki-activity-row-chip {
	border-color: #27AE60;
	background: #e6f5eb;
	color: #196f3d;
}

.wiki-activity-row.is-type-release .wiki-activity-row-chip {
	border-color: #9B59B6;
	background: #f3eaf7;
	color: #6c3483;
}

.wiki-activity-row.is-type-workshop .wiki-activity-row-chip {
	border-color: #E67E22;
	background: #fbeee0;
	color: #a04a0d;
}

.wiki-activity-row.is-type-document .wiki-activity-row-chip {
	border-color: #2774AE;
	background: #e8f0f7;
	color: #1c4e7a;
}

.wiki-activity-row.is-type-faq .wiki-activity-row-chip {
	border-color: #16A085;
	background: #d4ecea;
	color: #117a65;
}

.wiki-activity-row.is-type-training .wiki-activity-row-chip {
	border-color: #B7950B;
	background: #fcf3cf;
	color: #7d6608;
}

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

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

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

.wiki-activity-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);
}

/* Two-column wrapper — convenience class for placing the activity
 * feed and the discussions feed side-by-side, as in the mockup.
 * Stacks to single column under 720px so the layout doesn't break on
 * narrow viewports. The two feed templates don't depend on this
 * class — they render fine on their own — but supplying it here
 * means a main page only needs one wrapper div around both feeds
 * rather than authoring layout CSS inline. */
.wiki-feed-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 16px 0;
}

@media (max-width: 720px) {
	.wiki-feed-columns {
		grid-template-columns: 1fr;
	}
}