Template:EDFM style/styles.css: Difference between revisions

/* Shared styling for EDFM's editorial templates (Article status, Draft
   warning, Prerequisites, Related articles, etc. -- see each template's
   own page for which classes it uses). Deliberately restrained: a single
   accent-colour left border, a small clipped top-right corner for a
   "technical panel" read, no glow, no animation. Freely uses the --edfm-*
   custom properties defined in MediaWiki:Common.css -- see the note there
   under "6. Panels" for why these classes live only in this file and not
   duplicated in Common.css too.
   Updated 2026-08-07 for the "technical field manual" redesign: introduces
   the .edfm-panel-* naming as the current standard (semantic variants:
   info / warning / draft / reference), keeps .edfm-box as an alias so nothing
   already using the older name breaks, and adds the .edfm-status structured
   metadata module used by Template:Article status. */

.edfm-box,
.edfm-panel {
	border-left: 4px solid var( --edfm-cyan );
	background: var( --edfm-surface-2 );
	color: var( --edfm-text );
	padding: 0.75em 1em;
	margin: 1em 0;
	clip-path: polygon( 0 0, calc( 100% - 8px ) 0, 100% 8px, 100% 100%, 0 100% );
}
.edfm-panel-info {
	border-left-color: var( --edfm-cyan );
}
.edfm-panel-warning,
.edfm-box.edfm-warning {
	border-left-color: var( --edfm-orange );
	background: #201a12;
}
.edfm-panel-draft,
.edfm-box.edfm-draft {
	border-left-color: var( --edfm-text-dim );
	background: var( --edfm-surface-1 );
}
.edfm-panel-reference {
	border-left-color: var( --edfm-blue );
}
.edfm-box.edfm-disclaimer {
	border-left-color: var( --edfm-orange );
	font-size: 0.9em;
}
.edfm-box dl,
.edfm-panel dl {
	margin: 0;
}
.edfm-box dt,
.edfm-panel dt {
	font-weight: bold;
	float: left;
	clear: left;
	margin-right: 0.5em;
	color: var( --edfm-text );
}
.edfm-box dd,
.edfm-panel dd {
	margin-left: 11em;
}
.edfm-inline-flag {
	font-style: italic;
	color: var( --edfm-cyan );
}

/* --- Article metadata / status module (Template:Article status) --------
   Semantic status colouring always pairs with a visible text badge (the
   status word itself, e.g. "NEEDS REVIEW") -- never colour alone, per the
   site's Verification Policy and general accessibility requirements. Three
   colour tiers cover the seven actual status values (see
   Elite Dangerous Field Manual:Verification Policy): positive/confirmed
   (Verified, Partially verified) in cyan -- matching "cyan = verification
   information" from the colour system; attention-needed (Needs review,
   Draft, Upcoming) in orange -- matching "orange = important
   actions/emphasis"; and neutral/non-current (Historical, Legacy only) in
   a dim neutral tone. The template sets the modifier class via #switch. */
.edfm-status {
	border-left-width: 4px;
	border-left-style: solid;
}
.edfm-status--positive { border-left-color: var( --edfm-status-positive ); }
.edfm-status--attention { border-left-color: var( --edfm-status-attention ); }
.edfm-status--neutral { border-left-color: var( --edfm-status-neutral ); }

.edfm-status-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em 1em;
	/* TemplateStyles' CSS sanitizer rejects var() specifically inside
	   font-family (even though it's otherwise valid CSS) -- spelled out
	   literally here to match --edfm-mono in MediaWiki:Common.css. */
	font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', Menlo, 'Courier New', monospace;
}
.edfm-status-badge {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.95em;
}
.edfm-status--positive .edfm-status-badge { color: var( --edfm-status-positive ); }
.edfm-status--attention .edfm-status-badge { color: var( --edfm-status-attention ); }
.edfm-status--neutral .edfm-status-badge { color: var( --edfm-text ); }
.edfm-status-item {
	color: var( --edfm-text-muted );
	font-size: 0.85em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.edfm-status-details {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12em, 1fr ) );
	gap: 0.3em 1.5em;
	margin: 0.6em 0 0 0;
	padding-top: 0.5em;
	border-top: 1px solid var( --edfm-border-soft );
}
.edfm-status-row {
	display: flex;
	gap: 0.4em;
	font-size: 0.9em;
}
.edfm-status-row dt {
	color: var( --edfm-text-dim );
	font-weight: 400;
	white-space: nowrap;
	float: none;
	clear: none;
}
.edfm-status-row dt::after {
	content: ':';
}
.edfm-status-row dd {
	margin: 0;
	color: var( --edfm-text-muted );
}
@media ( max-width: 800px ) {
	.edfm-status-details {
		grid-template-columns: 1fr;
	}
}