mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-09-12 11:24:37 +08:00
95 lines
3.2 KiB
CSS
95 lines
3.2 KiB
CSS
@layer base {
|
|
/* `.btn` and `.cbi-button` are interchangeable in LuCI markup; a row action carries both plus a
|
|
* `-<variant>` class. The paint — box, fill, radius — is theme/55-buttons.css's, along with the
|
|
* `.item::after` member, whose plate now lives with the dynlist in theme/60-inputs.css. What is
|
|
* left here is --on-color, which is not paint: base/95-luci.css masks the spinner glyph with
|
|
* it, so it must track the variant. */
|
|
.btn,
|
|
.cbi-button {
|
|
--on-color: var(--fs-text);
|
|
|
|
cursor: pointer;
|
|
font-size: var(--fs-type);
|
|
white-space: pre;
|
|
}
|
|
|
|
/* border-color: theme/60-inputs.css — absorbed. The ink stays: theme paints no colour here. */
|
|
.cbi-input-invalid,
|
|
.cbi-input-invalid.cbi-dropdown:not(.btn):not(.cbi-button),
|
|
.cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
|
|
.cbi-value-error input {
|
|
color: var(--fs-danger);
|
|
}
|
|
|
|
/* `--on-color` only. A `border-color` here would be dead: theme/55-buttons.css sets `border` on
|
|
* `.cbi-button, .btn`, and a later layer beats this one whatever the specificity, so the
|
|
* variant wears the theme's colour either way — proven, not reasoned: stripping the ones that
|
|
* used to sit here changes no computed style over docs/gallery.html, which renders every one of
|
|
* these variants. `--on-color` stays because it is not paint — base/95-luci.css masks the
|
|
* spinner glyph with it. */
|
|
.cbi-button-positive,
|
|
.cbi-button-fieldadd,
|
|
.cbi-button-add,
|
|
.cbi-button-save {
|
|
--on-color: var(--fs-good);
|
|
}
|
|
|
|
.btn.primary,
|
|
.cbi-button-action,
|
|
.cbi-button-apply,
|
|
.cbi-button-reload,
|
|
.cbi-button-edit {
|
|
--on-color: var(--fs-accent);
|
|
}
|
|
|
|
.cbi-button-negative,
|
|
.cbi-section-remove .cbi-button,
|
|
.cbi-button-reset,
|
|
.cbi-button-remove {
|
|
--on-color: var(--fs-danger);
|
|
}
|
|
|
|
.cbi-page-actions::after {
|
|
display: table;
|
|
content: "";
|
|
clear: both;
|
|
}
|
|
|
|
.cbi-page-actions > * {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* No `float` here: theme/55-buttons.css makes `.cbi-page-actions` a flex container, and float
|
|
* does not apply to a flex item, so one would compute to `none` and move nothing while reading
|
|
* like a physical side the logical-property sweep had missed. No context revives it — print
|
|
* hides the whole container (theme/97-print.css). Verified in a live document in both writing
|
|
* directions: the button sits 569px from the reading edge with the float and 569px without. */
|
|
.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
|
|
margin-inline-end: var(--fs-space-1);
|
|
}
|
|
|
|
/* fills and borders: theme/55-buttons.css — absorbed. --on-color stays (the spinner mask). */
|
|
.btn.primary,
|
|
.cbi-button-action.important,
|
|
.cbi-page-actions .cbi-button-apply,
|
|
.cbi-section-actions .cbi-button-edit {
|
|
--on-color: var(--fs-on-accent);
|
|
}
|
|
|
|
.cbi-button-positive.important,
|
|
.cbi-page-actions .cbi-button-save {
|
|
--on-color: var(--fs-on-good);
|
|
}
|
|
|
|
.cbi-button-negative.important {
|
|
--on-color: var(--fs-on-danger);
|
|
/* fill + border: theme/55-buttons.css — absorbed */
|
|
}
|
|
|
|
.cbi-page-actions .cbi-button-apply + .cbi-button-save,
|
|
.cbi-page-actions .cbi-button-negative + .cbi-button-save {
|
|
--on-color: var(--fs-good);
|
|
/* fill + border: theme/55-buttons.css — absorbed */
|
|
}
|
|
}
|