mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-09-12 19:34:55 +08:00
71 lines
3.6 KiB
CSS
71 lines
3.6 KiB
CSS
@layer theme {
|
|
/* One thin meter for every .cbi-progressbar (overview Memory/Storage/Network, Software
|
|
* disk space, package manager …): slim rounded track, accent fill, and the LuCI title
|
|
* value floated just above the bar's right edge (mono/dim) instead of stuffed inside a fat
|
|
* pill. No per-page overrides. */
|
|
.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;
|
|
}
|
|
.cbi-progressbar > div {
|
|
height: 100%;
|
|
background: var(--fs-accent);
|
|
border-radius: var(--fs-radius-pill);
|
|
transition: width var(--fs-dur-fill);
|
|
}
|
|
.cbi-progressbar::after {
|
|
content: attr(title);
|
|
/* the gap is a scale step, not a literal 4: every other gap in the theme scales with the
|
|
* density axis and this one sat outside it. Identical at the default density. */
|
|
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;
|
|
}
|
|
|
|
/* THE VALUE SITS BESIDE THE BAR wherever the bar already shares its line with a name.
|
|
*
|
|
* The default above puts it over the bar's far edge, and that assumes the shape the Overview has:
|
|
* the meter owns a full-width line and its name sits on the line above, so the value lands at the
|
|
* far end of that name's own line and the two read as one row. (Stock bootstrap assumes the same,
|
|
* floating the title at `top: -1.4em; left: 0`.) Two shapes are not that, and they are not each
|
|
* other either — CSS cannot ask "does this row carry its own label" — so each is named:
|
|
*
|
|
* `.cbi-value-field > .cbi-progressbar` the meter IS the field of a CBI form row, an app
|
|
* building `.cbi-value` with ui.js. Reported against luci-app-modeminfo's Antennas page:
|
|
* three such rows per card, every dBm figure reading as though it belonged to the meter above
|
|
* it, because the value lands against the row divider rather than beside its own bar.
|
|
* `.table:has(.tr.table-titles) .td …` a meter COLUMN in a multi-column data table
|
|
* (luci-app-cpu-status's per-CPU load), where the floated value lands on the row divider too.
|
|
*
|
|
* Both want the same geometry and differ in ONE number, so the geometry is written once and the
|
|
* number is the knob: `--fs-meter-value` is the room the out-of-flow value needs. A form row holds
|
|
* `-140.0 dBm`, half again as wide as the `100% (1.2 GiB)` of a table cell. The Overview and the
|
|
* package manager keep the value above the bar — their meters sit in a `.td` and a bare
|
|
* `.controls` div, which is neither shape. */
|
|
.cbi-value-field > .cbi-progressbar,
|
|
.cbi-section .table:has(.tr.table-titles) .td .cbi-progressbar {
|
|
margin-inline-end: var(--fs-meter-value);
|
|
}
|
|
.cbi-value-field > .cbi-progressbar::after,
|
|
.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%);
|
|
}
|
|
.cbi-value-field > .cbi-progressbar { --fs-meter-value: calc(var(--fs-space-10) * 2); }
|
|
.cbi-section .table:has(.tr.table-titles) .td .cbi-progressbar {
|
|
--fs-meter-value: var(--fs-space-10);
|
|
/* narrower than this it stops reading as a meter at all; the column gives up the rest. */
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* Progressbar rows in a section table (luci-app-cpu-status): keep the native label | bar
|
|
* row, just centre the cells vertically. */
|
|
.cbi-section .table:not([id]):not(.cbi-section-table) .tr:has(.cbi-progressbar) .td { vertical-align: middle; }
|
|
}
|