/* [[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;
}