From 06a0e9de3cccdae03aff540b5d2330d00020a206 Mon Sep 17 00:00:00 2001 From: librelad Date: Sat, 23 May 2026 01:17:48 +0100 Subject: [PATCH] style(config): soften section divider; align toggle box with input fields Divider: .domains-divider was a bold 2px accent bar under every section header, which read as a stray line. Drop it to a subtle 1px low-opacity neutral rule so it separates without shouting. Toggle: the boxed config toggle (.checkbox-label) used a different radius (10px), fill (0.04) and border (0.10) than the .form-control inputs beside it (8px / 0.05 / 0.20), so it looked off and out of line. Match it to the input field box exactly so toggles and inputs read as the same surface. The app-config borderless toggle override is unaffected. Co-Authored-By: Claude Opus 4.7 Signed-off-by: librelad --- containers/libreportal/frontend/css/forms.css | 12 +++++++----- containers/libreportal/frontend/css/style.css | 6 +++--- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/containers/libreportal/frontend/css/forms.css b/containers/libreportal/frontend/css/forms.css index 44638e1..5b18a11 100644 --- a/containers/libreportal/frontend/css/forms.css +++ b/containers/libreportal/frontend/css/forms.css @@ -350,17 +350,19 @@ select.form-control:focus { user-select: none; } -/* Config page checkboxes */ +/* Config page checkboxes — mirror the .form-control field box (same radius, + padding, fill and border) so a toggle reads as the same field surface as the + inputs beside it instead of a lighter, slightly-off box. */ .checkbox-label { display: flex; align-items: center; cursor: pointer; - padding: 10px 16px; + padding: 12px 16px; min-height: 44px; - border-radius: 10px; + border-radius: 8px; transition: background 0.18s ease, border-color 0.18s ease; - background: rgba(var(--text-rgb), 0.04); - border: 1px solid rgba(var(--text-rgb), 0.10); + background: rgba(var(--text-rgb), 0.05); + border: 1px solid rgba(var(--text-rgb), 0.20); } /* In a multi-column config row the toggle cell only contains the diff --git a/containers/libreportal/frontend/css/style.css b/containers/libreportal/frontend/css/style.css index 7a4ee06..8251dbb 100755 --- a/containers/libreportal/frontend/css/style.css +++ b/containers/libreportal/frontend/css/style.css @@ -2078,9 +2078,9 @@ html[data-theme="nebula"]::after { .domains-divider { width: 100%; - height: 2px; - background: var(--primary-color, var(--accent)); - margin-bottom: 20px; + height: 1px; + background: rgba(var(--text-rgb), 0.08); + margin-bottom: 18px; } .add-domain-btn {