Template:UI/kpi card/styles.css

/* TemplateStyles for {{UI/kpi_card}}. See {{UI/card}}/styles.css
   for the var() / fallback / geometry rationale. */

.wiki-kpi-card {
	flex: 1 1 120px;
	padding: 14px;
	border: 1px solid var(--labki-border, #d8dde3);
	border-radius: 6px;
	background: var(--labki-bg-subtle, #f4f6f8);
	text-align: center;
}

/* When a KPI card is wrapped in a wikilink ({{UI/kpi_card|link=Foo}}),
   strip the default link chrome from the anchor so the card itself is
   the only visible affordance. The hover/focus state moves to the
   inner .wiki-kpi-card-link below. */
.wiki-kpi-card-row > a {
	flex: 1 1 120px;
	display: block;
	text-decoration: none !important;
	color: inherit !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.wiki-kpi-card-link {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

.wiki-kpi-card-row > a:hover .wiki-kpi-card-link,
.wiki-kpi-card-row > a:focus .wiki-kpi-card-link {
	border: 1px solid var(--labki-accent, #2774AE);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.wiki-kpi-card-value {
	font-size: 1.8em;
	font-weight: 600;
	line-height: 1;
	color: var(--labki-primary, #003B5C);
}

.wiki-kpi-card-label {
	font-size: 0.85em;
	color: var(--labki-text-muted, #5a6a7a);
	margin-top: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Container for laying out multiple KPI cards in a row. Layout-only;
   relies on at least one nested .wiki-kpi-card to bring this
   stylesheet into the page. */
.wiki-kpi-card-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}