<span class="mw-page-title-namespace">Template</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">Nowline/styles.css</span>
Fabrice P. Lauss𝕪s onsensus Web
/* [[Template:Nowline]] — the rule dividing a chronological list into what has
   happened and what has not, and the hot pair that brackets what is happening
   right now. Placed by [[Module:Nowline]].

   The quiet rule divides two list items, so its first duty is to take up
   almost no room: the items either side should sit as close together as they
   did before it existed. Hence a hairline, small caps at three quarters size,
   and margins in tenths of an em.

   Where it sits in the markup is the module's doing and is explained there:
   inside the item above, not between two lists, because a block between them
   splits the <ul> and the margin each half claims puts 46px of air around a
   14px rule. */

.lw-nowline {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.15em 0 0.1em;
	font-size: 0.75em;
	font-variant: small-caps;
	letter-spacing: 0.12em;
	line-height: 1.2;
	color: steelblue;
}

.lw-nowline-label {
	white-space: nowrap;
}

/* Height zero: the border IS the rule, so the row is only as tall as its
   lettering. */
.lw-nowline-rule {
	flex: 1;
	height: 0;
	border-top: 1px solid lightsteelblue;
}

/* --- happening now -------------------------------------------------------
   The hot rules keep the quiet one's geometry exactly — same height, same
   margins, same type — and change only its temperature, so bracketing an
   item never shifts the list around it. The rule becomes a 2px band with a
   gradient rather than a border, which a border cannot carry. */

.lw-hot {
	color: crimson;
}

.lw-hot .lw-nowline-rule {
	height: 2px;
	border-top: 0;
	background: linear-gradient(90deg, #ff9d00, crimson, #ff9d00);
	border-radius: 1px;
}

/* 🔥 in the margin of the list. Floated with a negative margin rather than
   positioned: an absolute box would anchor to .mw-body (the nearest
   positioned ancestor in this skin) and land at the far left of the page,
   nowhere near its item. */
.lw-hot-badge {
	float: left;
	margin-left: -2.5em;
	font-size: 1.1em;
	line-height: 1.2;
}

.lw-hot-now {
	margin-right: 0.45em;
	padding: 0 0.4em;
	font-size: 0.75em;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	color: white;
	background: crimson;
	border-radius: 3px;
	white-space: nowrap;
}