mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-09-13 03:45:11 +08:00
77 lines
4.2 KiB
CSS
77 lines
4.2 KiB
CSS
@layer page {
|
|
/* The filter bar, which LuCI writes as a run of inline text. Both log views build one —
|
|
* `tools/views.js` (LogreadBox: the System Log and every third-party page built on it) and
|
|
* `view/status/dmesg.js` (the Kernel Log) — emitting bare `<div style="margin-bottom:10px">`
|
|
* rows of label/control pairs with nothing around a pair. Inline flow then breaks wherever the
|
|
* line runs out, and on a phone that is between a label and the control it names — or inside
|
|
* the label itself.
|
|
*
|
|
* One rule of layout, two tiers, no per-field exceptions. The rows are flex, so a wrap can only
|
|
* fall BETWEEN items and a label is one unbreakable item; a field may shrink to share the line.
|
|
*
|
|
* Scoped by SHAPE: `data-page` differs between the two logs and a third-party box has neither,
|
|
* while both wrap their rows in `#content_syslog` and a filter row is exactly one that opens
|
|
* with a `<label>` — the scroll-to-end button's row and the log itself do not.
|
|
*
|
|
* Only the ROW gap is ours: the inline `margin: 0 5px` LuCI writes on the labels stays as the
|
|
* horizontal spacing, so nothing here has to fight an inline style. */
|
|
#content_syslog > div:has(> label) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
row-gap: var(--fs-space-2);
|
|
}
|
|
#content_syslog > div:has(> label) > label { white-space: nowrap; }
|
|
#content_syslog > div:has(> label) > :is(select, input) {
|
|
/* shrink, never grow. `max-width` is not the same lever as `min-width` and both are needed:
|
|
* one lets a flex item go below its content, the other clamps a `<select>` that carries the
|
|
* theme's own 210px width — measured at 360px, where both selects hung 3px past the view. */
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* THE TWO TIERS ARE DISJOINT CONTAINER QUERIES, not a base rule and an override: each states one
|
|
* layout in full, so neither can win or lose against the other by source order — the trap the
|
|
* first version of this file fell into, where a later generalisation silently out-specified two
|
|
* rules that were meant to override it. */
|
|
@container fs-view (width > 560px) {
|
|
/* room for a filter and a half at least: the free-text filter takes what the named fields
|
|
* leave. `input:not([type])` IS that filter, in both views: every other input under
|
|
* `#content_syslog` states a type (`checkbox` for the four inverts and the sort flag, `number`
|
|
* for Max rows and for the Kernel Log's boot-time range), and both views leave the text one
|
|
* untyped — so nothing here keys on an id or has to know how many fields a row holds. */
|
|
#content_syslog > div:has(> label) > input:not([type]) { flex: 1 1 12rem; }
|
|
}
|
|
@container fs-view (width <= 560px) {
|
|
/* One field per line, its labels on the line above it. Wrapping alone fills each line greedily,
|
|
* so a leading label rides the end of the previous line while the field it belongs to opens the
|
|
* next — and no flex rule can bind a label to the field that follows it. A full-width basis
|
|
* can: the field always starts a line, so whatever labels precede it sit together above it.
|
|
* It costs one line per filter on a phone and holds for every row of both views without any
|
|
* of them being named. A checkbox is not a field and keeps its 16px. */
|
|
#content_syslog > div:has(> label) > :is(select, input:not([type="checkbox"])) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
/* System Log / Kernel Log: the whole log is a readonly `<textarea id="syslog">` in a bare div, not
|
|
* in a .cbi-value-field. Stock bootstrap pairs its generic `input, textarea { width: 210px }`
|
|
* with `#syslog { width: 100% }` and wins on specificity — but this theme's generic field box
|
|
* lives in the `theme` layer, and a layer beats specificity, so the same pair in `base` loses and
|
|
* the log rendered as a 210px column (measured on 25.12). The rule is absorbed here, above the
|
|
* generic's layer. Mono at the data tables' size, `pre` because log lines are lines, and a
|
|
* vertical-only resize grip — a sideways grip would just re-create the squeeze. */
|
|
#syslog {
|
|
width: 100%;
|
|
min-height: 500px;
|
|
color: var(--fs-text);
|
|
margin-bottom: var(--fs-space-4);
|
|
font-family: var(--fs-font-mono);
|
|
font-size: var(--fs-type);
|
|
line-height: var(--fs-leading);
|
|
white-space: pre;
|
|
resize: vertical;
|
|
}
|
|
}
|