Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(config): soften section divider; align toggle box with input fields

Browse Source 
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 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-23 01:17:48 +01:00
parent a24bdd8e6c
commit 06a0e9de3c
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
containers/libreportal/frontend/css/forms.css
View File

@ -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

6
containers/libreportal/frontend/css/style.css
View File

@ -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 {