mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-03 04:23:56 +08:00
78 lines
3.2 KiB
CSS
78 lines
3.2 KiB
CSS
@layer theme {
|
|
/* One thin meter for every .cbi-progressbar: track + accent fill, title value floated above
|
|
* the right edge instead of stuffed inside a fat pill. Default reserves that value's own line
|
|
* in flow (bootstrap's margin:1.4em model) — an abspos value with zero reserve spilled 5-6px
|
|
* UP across the divider of the row above, off the overview page (key/value .table, no header
|
|
* row). Contexts that put the value BESIDE the bar or on a neighbour's line opt out with
|
|
* margin-block-start: 0. */
|
|
.cbi-progressbar {
|
|
position: relative;
|
|
height: 10px;
|
|
background: var(--fs-track);
|
|
border: 0;
|
|
border-radius: var(--fs-radius-pill);
|
|
overflow: visible;
|
|
min-width: 120px;
|
|
margin: 0;
|
|
margin-block-start: calc(var(--fs-type-xs) * var(--fs-leading));
|
|
}
|
|
.cbi-progressbar > div {
|
|
height: 100%;
|
|
background: var(--fs-accent);
|
|
border-radius: var(--fs-radius-pill);
|
|
transition: width var(--fs-dur-fill);
|
|
}
|
|
/* Colour carries the reading too: data-fs-level set from JS (80/92% thresholds) every poll
|
|
* tick. Solid tokens, no color-mix, nothing owed to 04-nocolormix.css. */
|
|
.cbi-progressbar[data-fs-level="warn"] > div {
|
|
background: var(--fs-warn);
|
|
}
|
|
.cbi-progressbar[data-fs-level="danger"] > div {
|
|
background: var(--fs-danger);
|
|
}
|
|
.cbi-progressbar::after {
|
|
content: attr(title);
|
|
position: absolute; inset-inline: auto 0; bottom: calc(100% + var(--fs-space-1)); top: auto;
|
|
font-family: var(--fs-font-mono); font-size: var(--fs-type-xs); font-weight: var(--fs-weight-normal);
|
|
color: var(--fs-dim); white-space: nowrap; text-shadow: none;
|
|
}
|
|
|
|
/* Value moves BESIDE the bar where the row has no name above it: a CBI form row and a table
|
|
* meter column, sharing one geometry via --fs-meter-value. One rule per shape, chosen instead
|
|
* of :is() — the table half needs :has(), and in a plain list a non-parsing engine drops the
|
|
* whole rule, form row included. */
|
|
.cbi-value-field > .cbi-progressbar {
|
|
margin-inline-end: var(--fs-meter-value);
|
|
margin-block-start: 0;
|
|
--fs-meter-value: calc(var(--fs-space-10) * 2);
|
|
}
|
|
.cbi-value-field > .cbi-progressbar::after {
|
|
inset-inline: calc(100% + var(--fs-space-2)) auto; bottom: auto; top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.cbi-section .table:has(.tr.table-titles) .td .cbi-progressbar {
|
|
margin-inline-end: var(--fs-meter-value);
|
|
margin-block-start: 0;
|
|
--fs-meter-value: var(--fs-space-10);
|
|
min-width: 60px; /* narrower and it stops reading as a meter; the column gives up the rest */
|
|
}
|
|
.cbi-section .table:has(.tr.table-titles) .td .cbi-progressbar::after {
|
|
inset-inline: calc(100% + var(--fs-space-2)) auto; bottom: auto; top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Carded: "beside" ran the value over the neighbouring column's label (`.fs-stacked` halves
|
|
* the row). Back over the bar with a one-line top margin (was 6-9px overlap).
|
|
* `:has(.tr.table-titles)` stays for SPECIFICITY, matching the beside-rule's (0,6,0). */
|
|
.cbi-section .table.fs-stacked:has(.tr.table-titles) .td .cbi-progressbar {
|
|
margin-inline-end: 0;
|
|
margin-block-start: calc(var(--fs-type-xs) * var(--fs-leading));
|
|
}
|
|
.cbi-section .table.fs-stacked:has(.tr.table-titles) .td .cbi-progressbar::after {
|
|
inset-inline: auto 0;
|
|
bottom: calc(100% + var(--fs-space-1));
|
|
top: auto;
|
|
transform: none;
|
|
}
|
|
}
|