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

ui(services): keep Advanced toggle thumb white and contain it in a chip wrapper

Browse Source 
Two fixes to the .lp-ui-advanced-toggle on the Services tab header:

1. The thumb flipped from --text-primary (white-ish) to --text-on-accent
(a dark navy on the default theme) when toggled on, which read as a
"black circle" inside the accent track. Other toggles in the project
(.eo-toggle in modal.css, .routing-toggle in routing.css) keep the
thumb white in both states — only the track changes colour. Dropping
the checked-state thumb fill brings this toggle in line.

2. The toggle was floating bare in the header row next to nothing,
which looked out of place compared to the contained button-style
controls in the same slot on Backups (Backup now / Open backup
center). Wrapped it in a chip: neutral rgba(text, 0.06) bg + 0.15
border + 6×12 padding, hover bumps both alphas. Same recipe a
.task-btn uses for its resting state, so the toggle visually reads
as a control sitting in line with the rest of the row's actions.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 01:39:04 +01:00
parent 160d7d1b3c
commit 9a87e3f894
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
containers/libreportal/frontend/css/services.css
View File

@ -273,13 +273,25 @@ body:not(.lp-ui--advanced) .service-rich { display: none; }
} }
.services-title-main { flex: 1; min-width: 0; } .services-title-main { flex: 1; min-width: 0; }
/* Contained chip wrapper so the toggle reads as a control sitting next
to whatever action buttons share its row, instead of floating. Same
neutral bg/border recipe a .task-btn uses for its resting state. */
.lp-ui-advanced-toggle { .lp-ui-advanced-toggle {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
flex-shrink: 0; flex-shrink: 0;
padding: 6px 12px;
background: rgba(var(--text-rgb), 0.06);
border: 1px solid rgba(var(--text-rgb), 0.15);
border-radius: 8px;
transition: background .15s ease, border-color .15s ease;
}
.lp-ui-advanced-toggle:hover {
background: rgba(var(--text-rgb), 0.10);
border-color: rgba(var(--text-rgb), 0.25);
} }
.lp-ui-advanced-toggle input { .lp-ui-advanced-toggle input {
position: absolute; position: absolute;
@ -295,6 +307,10 @@ body:not(.lp-ui--advanced) .service-rich { display: none; }
transition: background .15s ease; transition: background .15s ease;
flex-shrink: 0; flex-shrink: 0;
} }
/* Thumb stays white in both states — matching .eo-toggle / .routing-toggle
elsewhere. The previous checked-state fill used --text-on-accent
which resolves to a dark navy on the default theme and read as a
"black circle" inside the accent track. */
.lp-ui-advanced-toggle-thumb { .lp-ui-advanced-toggle-thumb {
position: absolute; position: absolute;
top: 2px; top: 2px;
@ -303,14 +319,13 @@ body:not(.lp-ui--advanced) .service-rich { display: none; }
height: 14px; height: 14px;
background: var(--text-primary); background: var(--text-primary);
border-radius: 50%; border-radius: 50%;
transition: transform .15s ease, background .15s ease; transition: transform .15s ease;
} }
.lp-ui-advanced-toggle input:checked + .lp-ui-advanced-toggle-track { .lp-ui-advanced-toggle input:checked + .lp-ui-advanced-toggle-track {
background: var(--accent); background: var(--accent);
} }
.lp-ui-advanced-toggle input:checked + .lp-ui-advanced-toggle-track .lp-ui-advanced-toggle-thumb { .lp-ui-advanced-toggle input:checked + .lp-ui-advanced-toggle-track .lp-ui-advanced-toggle-thumb {
transform: translateX(16px); transform: translateX(16px);
background: var(--text-on-accent, #0a1426);
} }
.lp-ui-advanced-toggle-label { .lp-ui-advanced-toggle-label {
font-size: 0.78rem; font-size: 0.78rem;