mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-09-13 03:45:11 +08:00
164 lines
3.9 KiB
CSS
164 lines
3.9 KiB
CSS
@layer base {
|
|
/* The body box, links, and the type scale a view inherits from plain markup.
|
|
* body background/padding/font-family: theme/20-shell.css — absorbed.
|
|
*
|
|
* Every size and gutter here reads the scale in 02-tokens.css. It used to state literals —
|
|
* 13/18 with 9px and 8.5px halves, a 30/24/18/16/14/13 heading ramp, a 25px list indent — which
|
|
* was luci-theme-bootstrap's scale rather than a decision anyone made about Manrope. */
|
|
body {
|
|
font-size: var(--fs-type);
|
|
font-weight: var(--fs-weight-normal);
|
|
/* unitless: it inherits as a FACTOR, so a 20px heading gets 30px of leading instead of the
|
|
* flat 18px a length would push down onto it and clip. */
|
|
line-height: var(--fs-leading);
|
|
color: var(--fs-text);
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* gutter, not `overflow-y: scroll`: same no-reflow guarantee, without a dead
|
|
* scrollbar down every short page. */
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
a {
|
|
color: var(--fs-accent);
|
|
text-decoration: none;
|
|
line-height: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--fs-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.nowrap:not(span) {
|
|
/* :not(span) — a badge must be free to wrap on a narrow screen, and nowrap
|
|
defeats every other width constraint on it */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
p,
|
|
.cbi-map-descr,
|
|
.cbi-section-descr,
|
|
.table .tr.cbi-section-table-descr .th {
|
|
font-size: var(--fs-type);
|
|
font-weight: var(--fs-weight-normal);
|
|
margin-bottom: var(--fs-space-2);
|
|
/* prose, so no orphans: LuCI's descriptions are one or two sentences of help text and a
|
|
* single trailing word on its own line reads as a rendering fault. `pretty`, not
|
|
* `balance` — balance is capped at a few lines and re-flows the WHOLE block, which is for
|
|
* headings; pretty only reworks the tail. Unsupported browsers ignore it and wrap as
|
|
* before, so there is nothing to guard. */
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
p small {
|
|
font-size: var(--fs-type-xs);
|
|
color: var(--fs-dim);
|
|
}
|
|
|
|
/* The heading ramp lives in theme/45-misc.css — absorbed whole (weights, sizes, ink);
|
|
* theme/30-tables.css owns `legend`. Only the `<h_ small>` treatment remains here. */
|
|
|
|
/* One rule for every `<h_ small>`: relative, so it tracks whatever step its heading sits on
|
|
* instead of the four hand-set sizes (18/14/14/12) this used to carry. */
|
|
h1 small,
|
|
h2 small,
|
|
h3 small,
|
|
h4 small,
|
|
h5 small,
|
|
h6 small {
|
|
font-size: .7em;
|
|
font-weight: var(--fs-weight-normal);
|
|
color: var(--fs-dim);
|
|
}
|
|
|
|
ul, ol {
|
|
margin: 0 0 var(--fs-space-4) var(--fs-space-6);
|
|
}
|
|
|
|
ul ul,
|
|
ul ol,
|
|
ol ol,
|
|
ol ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
li {
|
|
color: var(--fs-dim);
|
|
}
|
|
|
|
dl {
|
|
margin-bottom: var(--fs-space-4);
|
|
}
|
|
|
|
dl dt {
|
|
font-weight: var(--fs-weight-bold);
|
|
}
|
|
|
|
dl dd {
|
|
margin-inline-start: var(--fs-space-2);
|
|
}
|
|
|
|
hr {
|
|
margin: var(--fs-space-5) 0;
|
|
border: 0;
|
|
border-bottom: var(--fs-hairline);
|
|
}
|
|
|
|
strong {
|
|
font-style: inherit;
|
|
font-weight: var(--fs-weight-bold);
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
font-weight: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
small { font-size: var(--fs-type) }
|
|
|
|
address {
|
|
display: block;
|
|
margin-bottom: var(--fs-space-4);
|
|
}
|
|
|
|
/* no shared padding: both members set their own below (code a chip's inset, pre a block's) */
|
|
code, pre {
|
|
font-family: var(--fs-font-mono);
|
|
font-size: var(--fs-type);
|
|
border-radius: var(--fs-radius-sm);
|
|
}
|
|
|
|
code {
|
|
/* panel2 (6.45:1), not a border-level surface: --fs-text on the latter is 4.40:1
|
|
* in dark — under AA. Still reads as a chip. */
|
|
background-color: var(--fs-panel2);
|
|
color: var(--fs-text);
|
|
padding: 1px var(--fs-space-1);
|
|
}
|
|
|
|
pre {
|
|
--border-color: color-mix(in srgb, var(--fs-border) 15%, transparent);
|
|
|
|
background-color: var(--fs-panel2);
|
|
display: block;
|
|
padding: var(--fs-space-2);
|
|
margin: 0 0 var(--fs-space-4);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|