update 2026-10-11 18:30:33

luci-theme-footstrap/styles/base/70-buttons.css

@@ -0,0 +1,72 @@
+@layer base {
+	/* .btn/.cbi-button are interchangeable in LuCI markup. Paint (box, fill, radius) is
+	 * theme/55-buttons.css's; --on-color stays here because base/95-luci.css masks the spinner
+	 * glyph with it, so it must track the variant regardless of layer. */
+	.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. */
+	.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: docs/css.md "Buttons: --on-color survives the absorption into theme". */
+	.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);
+	}
+
+	/* Not a clearfix — flex container, nothing floats: docs/css.md "Buttons: the flex clearfix,
+	 * and why float is dead on .cbi-page-actions". */
+	.cbi-page-actions::after {
+		display: table;
+		content: "";
+		clear: both;
+	}
+
+	.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/borders absorbed (theme/55-buttons.css); Save/Apply's --on-color is re-set there too
+	 * regardless of layer, so no base copy is needed for that pair. */
+	.btn.primary,
+	.cbi-button-action.important,
+	.cbi-section-actions .cbi-button-edit {
+		--on-color: var(--fs-on-accent);
+	}
+
+	.cbi-button-positive.important {
+		--on-color: var(--fs-on-good);
+	}
+
+	.cbi-button-negative.important {
+		--on-color: var(--fs-on-danger);
+	}
+}