Shell: color field type (swatch picker) in tile settings and admin config

Renders <input type="color"> with the label beside it; the stored value is
always a #rrggbb string (3-digit hex widened, anything else falls back to
the schema default). Same styling in the gear popover and the admin form.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-10 16:31:46 -04:00
co-authored by Claude Fable 5.1
parent 4c5d7956ab
commit a71b14d755
4 changed files with 53 additions and 1 deletions
+21
View File
@@ -626,6 +626,27 @@ body.fullscreen #grid { padding-bottom: 0; }
}
.field.check input { width: 15px; height: 15px; accent-color: var(--accent); }
/* color fields: label on the left, swatch on the right */
.field.color-field {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.field.color-field > span { flex: 1; min-width: 0; }
.field.color-field input[type="color"] {
width: 44px;
height: 26px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
cursor: pointer;
}
.field.color-field input[type="color"]:focus { outline: none; border-color: var(--accent); }
.field.color-field .field-help { flex-basis: 100%; }
/* ── modal dialogs (layout name prompt etc.) ───────────────────────── */
#modal-backdrop {