From 0fbbde100078a28882a52c4de1c1510c957179f7 Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 18 Jun 2026 15:45:57 +0100 Subject: [PATCH] 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 Signed-off-by: librelad --- .../libreportal/frontend/core/forms/css/forms.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/containers/libreportal/frontend/core/forms/css/forms.css b/containers/libreportal/frontend/core/forms/css/forms.css index 80330ec..83abc7f 100644 --- a/containers/libreportal/frontend/core/forms/css/forms.css +++ b/containers/libreportal/frontend/core/forms/css/forms.css @@ -519,8 +519,16 @@ select.form-control:focus { 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 { - 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 {