Template:Module/styles.css

/* Template:Module/styles.css (TemplateStyles) for Module:ModuleView: the views icon (inline), compact
 * (a card) and full (a panel). The category color is a fill from the kit's .tpt-module-<category> scope
 * class (--tpt-module); text always uses the ink tokens. TemplateStyles takes var() only on its own and
 * not in border shorthands, so borders are written out. */

/* ---------- icon: the name with its category swatch ---------- */
.wiki-module--icon {
	white-space: nowrap;
}

.wiki-module--icon .tpt-module-swatch {
	width: 10px;
	height: 10px;
	vertical-align: 1px;
}

.wiki-module--icon a.external::after,
.wiki-module--compact a.external::after {
	display: none;
}

/* ---------- compact: a card ---------- */
.wiki-module--compact {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	vertical-align: top;
	box-sizing: border-box;
	width: 300px;
	max-width: 100%;
	margin: 0 8px 8px 0;
	padding: 12px 14px 12px 16px;
	background-color: var(--tpt-surface);
	border-style: solid;
	border-width: 1px 1px 1px 4px;
	border-top-color: var(--tpt-line);
	border-right-color: var(--tpt-line);
	border-bottom-color: var(--tpt-line);
	border-left-color: var(--tpt-module);
	border-radius: 4px;
}

.wiki-module--compact:hover {
	border-top-color: var(--tpt-line-strong);
	border-right-color: var(--tpt-line-strong);
	border-bottom-color: var(--tpt-line-strong);
}

.wiki-module__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wiki-module__name {
	font-weight: 600;
	font-size: 17px;
	line-height: 22px;
	color: var(--tpt-ink);
}

.wiki-module--compact .wiki-module__name a {
	color: var(--tpt-ink);
}

.wiki-module__meta {
	font-size: 13px;
	line-height: 18px;
	color: var(--tpt-ink-subtle);
}

.wiki-module--compact .wiki-module__desc {
	font-size: 14px;
	line-height: 20px;
	color: var(--tpt-ink-muted);
}

/* ---------- full: a panel ---------- */
.wiki-module--full {
	display: block;
	max-width: 720px;
	margin: 0 0 24px;
	background-color: var(--tpt-surface);
	border-style: solid;
	border-width: 3px 1px 1px;
	border-top-color: var(--tpt-module);
	border-right-color: var(--tpt-line);
	border-bottom-color: var(--tpt-line);
	border-left-color: var(--tpt-line);
	border-radius: 4px;
	overflow: hidden;
}

.wiki-module__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 14px 16px;
	background-color: var(--tpt-surface-alt);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--tpt-line);
}

.wiki-module--full .wiki-module__name {
	font-size: 22px;
	line-height: 28px;
}

.wiki-module__id {
	font-size: 13px;
	color: var(--tpt-ink-subtle);
}

.wiki-module__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
}

.wiki-module__body {
	padding: 14px 16px 2px;
}

.wiki-module--full .wiki-module__desc {
	margin: 0 0 14px;
	color: var(--tpt-ink);
}

.wiki-module__warning,
.wiki-module__credit {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 20px;
}

.wiki-module__warning {
	font-weight: 600;
	color: var(--tpt-danger);
}

.wiki-module__credit {
	font-style: italic;
	color: var(--tpt-ink-subtle);
}

.wiki-module__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 0 0 14px;
	background-color: var(--tpt-line);
	border-style: solid;
	border-width: 1px;
	border-top-color: var(--tpt-line);
	border-right-color: var(--tpt-line);
	border-bottom-color: var(--tpt-line);
	border-left-color: var(--tpt-line);
}

.wiki-module__stat {
	flex: 1 1 120px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	background-color: var(--tpt-surface);
}

.wiki-module__value {
	font-size: 17px;
	line-height: 24px;
	color: var(--tpt-ink);
	font-variant-numeric: tabular-nums;
}

.wiki-module__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

.wiki-module__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 10px 16px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: var(--tpt-line);
	font-size: 14px;
}

.wiki-module__version {
	margin-left: auto;
	color: var(--tpt-ink-subtle);
}

/* ---------- row: one module in a table ({{Module row}}) ---------- */
.wiki-module-row__type {
	text-align: center;
}

.wiki-module-row__name a.external::after {
	display: none;
}

/* The wiki's own note under the game's description (note=). */
.wiki-module__note {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 20px;
	color: var(--tpt-ink-muted);
}

/* ---------- an id the game doesn't know ---------- */
.wiki-module--missing {
	font-weight: 600;
	color: var(--tpt-danger);
}