style(app-config): wrap each config field in a translucent card

App-config fields rendered as a loose vertical stack with no grouping. Give
each .app-config .form-field the .admin-card glass recipe (var(--card-bg) fill,
faint rgba(text,0.10) hairline border, 12px radius, 16px padding) so each
option reads as a discrete container. Spacing now comes from the .panel-fields
flex gap, so the per-field margin-bottom is dropped to avoid doubling.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-18 15:45:57 +01:00
parent c9a6847e48
commit 0fbbde1000

View File

@ -519,8 +519,16 @@ select.form-control:focus {
margin-bottom: 0; margin-bottom: 0;
} }
/* Each config field sits in its own light, translucent card same glass
recipe as .admin-card (var(--card-bg) fill + faint hairline border + 12px
radius) so options read as discrete grouped controls rather than a loose
stack. The .panel-fields flex gap (16px) handles spacing between cards. */
.app-config .form-field { .app-config .form-field {
margin-bottom: 16px; margin-bottom: 0;
padding: 16px;
border: 1px solid rgba(var(--text-rgb), 0.10);
border-radius: 12px;
background: var(--card-bg);
} }
.app-config .form-label { .app-config .form-label {