From 9a87e3f894c5bb73d0b98b0b157ae7d5443de4af Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 01:39:04 +0100
Subject: [PATCH] ui(services): keep Advanced toggle thumb white and contain it
 in a chip wrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../libreportal/frontend/css/services.css     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/containers/libreportal/frontend/css/services.css b/containers/libreportal/frontend/css/services.css
index 4836a97..7154dfc 100644
--- a/containers/libreportal/frontend/css/services.css
+++ b/containers/libreportal/frontend/css/services.css
@@ -273,13 +273,25 @@ body:not(.lp-ui--advanced) .service-rich { display: none; }
 }
 .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 {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   cursor: pointer;
   user-select: none;
   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 {
   position: absolute;
@@ -295,6 +307,10 @@ body:not(.lp-ui--advanced) .service-rich { display: none; }
   transition: background .15s ease;
   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 {
   position: absolute;
   top: 2px;
@@ -303,14 +319,13 @@ body:not(.lp-ui--advanced) .service-rich { display: none; }
   height: 14px;
   background: var(--text-primary);
   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 {
   background: var(--accent);
 }
 .lp-ui-advanced-toggle input:checked + .lp-ui-advanced-toggle-track .lp-ui-advanced-toggle-thumb {
   transform: translateX(16px);
-  background: var(--text-on-accent, #0a1426);
 }
 .lp-ui-advanced-toggle-label {
   font-size: 0.78rem;