Template:Category/Forum/styles.css

From Miniscope
Jump to: navigation, search 
/* TemplateStyles for [[Template:Category/Forum]] post list.
 *
 * Theme tokens via `var(--labki-*, literal)` follow the same convention
 * as {{UI/card}}/styles.css — themes can override, defaults keep working
 * on a vanilla skin without TemplateStyles depending on theme variables.
 *
 * Chip colors (.is-color-1..8) deliberately stay literal — they're
 * discrete identity signals per sub-forum (driven by a first-letter
 * hash; see Template:Category/Forum/post_row/render), not theme tokens.
 * They need to read the same regardless of light/dark mode and across
 * themes. Same rationale as Workshop_itinerary's .is-content / .is-meal
 * / .is-social category colors.
 *
 * border-* shorthand also blocks var() in MW's CSS sanitizer (it
 * rejects var() inside several "level 4" shorthands), which would force
 * literals here anyway.
 */

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

/* Pinned list sits directly above the regular list (no heading
 * between — both render under a single "Posts" h2). The 2px top border
 * on the regular list, applied via the adjacent-sibling combinator,
 * draws the separator only when pinned content actually exists; when
 * there are zero announcements the SMW #ask emits no intro/outro and
 * this rule never matches, so the regular list keeps its plain 1px
 * top border above. */
.wiki-forum-list-pinned {
	border-bottom: none;
	margin-bottom: 0;
}

.wiki-forum-list-pinned + .wiki-forum-list {
	border-top: 2px solid var(--labki-border-strong, #b8c0c8);
	margin-top: 0;
}

.wiki-forum-row {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 9px 8px;
	border-bottom: 1px solid var(--labki-border, #d8dde3);
}

/* Pinned rows get a subtle warm tint — same idiom as GitHub's pinned
 * discussions and Discourse's pinned topics. Restrained on purpose:
 * the pin emoji + the row position above the separator carry the
 * primary signal; the background tint is the tertiary cue, helpful
 * for users scrolling fast or scanning a long page. */
.wiki-forum-row.is-pinned {
	background: var(--labki-bg-pinned, #fffbea);
}

.wiki-forum-row-icon {
	font-size: 0.95em;
	text-align: center;
	line-height: 1;
	color: var(--labki-text-muted, #5a6a7a);
}

.wiki-forum-row-pin {
	/* font-family fallback chain so the emoji renders consistently
	 * across stacks that don't bundle a color emoji font (e.g. server-
	 * rendered headless screenshots). When the codepoint can't render,
	 * the row still reads as pinned via tint + position. */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

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

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

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

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

/* Mid-dot separators between meta spans. ::after on every span except
 * the last so the dot sits on the trailing edge of "started by Jonny",
 * "12 replies", etc. and never trails the row. The gap on the parent
 * supplies the spacing on either side of the dot. */
.wiki-forum-row-meta > span:not(:last-child)::after {
	content: "·";
	margin-left: 8px;
	color: var(--labki-text-faint, #a0a8b0);
}

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

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

/* Sub-forum chip — same chip silhouette as Workshop_itinerary's
 * .wiki-itinerary-type (1px border, small caps-y feel, tight padding)
 * but with per-forum color (filled tint + matching border) so each
 * sub-forum reads as a distinct visual identity at a glance. The
 * coloring rules below all bundle border / background / text so the
 * chip's three surfaces stay consistent within a single color.
 *
 * The chip is itself an anchor (post_row/render wraps the forum name
 * in [[Forum|Label]]); the inner <a> gets color: inherit so it picks
 * up the chip's text color and the link chrome doesn't fight the
 * tinted background. */
.wiki-forum-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-forum-row-chip a,
.wiki-forum-row-chip a:visited {
	color: inherit;
	text-decoration: none;
}

.wiki-forum-row-chip a:hover {
	text-decoration: underline;
}

/* Per-color overrides. Color is a first-letter hash → 1..8 (see
 * post_row/render). Each ruleset paints the same three surfaces:
 * border, background tint, text. Color 0 is the default neutral the
 * base .wiki-forum-row-chip already sets, used when a forum name
 * begins with something outside A–Z (digits, symbols, empty). */

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

.wiki-forum-row.is-color-2 .wiki-forum-row-chip {
	border-color: #9B59B6;
	background: #f3eaf7;
	color: #6c3483;
}

.wiki-forum-row.is-color-3 .wiki-forum-row-chip {
	border-color: #E67E22;
	background: #fbeee0;
	color: #a04a0d;
}

.wiki-forum-row.is-color-4 .wiki-forum-row-chip {
	border-color: #27AE60;
	background: #e6f5eb;
	color: #196f3d;
}

.wiki-forum-row.is-color-5 .wiki-forum-row-chip {
	border-color: #C0392B;
	background: #fce5e3;
	color: #922b21;
}

.wiki-forum-row.is-color-6 .wiki-forum-row-chip {
	border-color: #16A085;
	background: #d4ecea;
	color: #117a65;
}

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

.wiki-forum-row.is-color-8 .wiki-forum-row-chip {
	border-color: #5D6D7E;
	background: #ebeef1;
	color: #34495E;
}

/* Empty-state pill — shown when the regular posts query returns zero
 * rows. Lives outside the row grid because it isn't a row (no chip,
 * no meta line); plain muted italic matching the description-as-kicker
 * style used elsewhere on the landing. */
.wiki-forum-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);
}
Retrieved from "https://miniscope.org/index.php?title=Template:Category/Forum/styles.css&oldid=1749"