From 036fead04700fead8323212e2546b1eee43d0bbc Mon Sep 17 00:00:00 2001 From: librelad Date: Fri, 29 May 2026 00:08:08 +0100 Subject: [PATCH] =?UTF-8?q?ux(admin):=20tinted=20Overview=20buttons=20w/?= =?UTF-8?q?=20white=20text;=20Verify=E2=86=92green,=20Backups=E2=86=92blue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reverts the solid fills (too heavy) back to the translucent hue tint but keeps white text — white on a tint-over-dark-card reads cleanly on nebula, which the old coloured text didn't. Hues restored to the brighter originals. Verify now gets its own green token (--page-verify) per the usual verify=green convention, and Backups takes the blue. Co-Authored-By: Claude Opus 4.7 Signed-off-by: librelad --- containers/libreportal/frontend/css/admin.css | 35 +++++++++++-------- .../js/components/admin/admin-overview.js | 6 ++-- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/containers/libreportal/frontend/css/admin.css b/containers/libreportal/frontend/css/admin.css index 82510d3..cd705ee 100644 --- a/containers/libreportal/frontend/css/admin.css +++ b/containers/libreportal/frontend/css/admin.css @@ -5,10 +5,11 @@ /* Per-area identity hues. Each admin area owns one colour, reused going forward (Overview action buttons today; page headers/accents next). The *-rgb companions feed rgba() tints. */ - --page-updates: #3f74d6; --page-updates-rgb: 63, 116, 214; - --page-backups: #12936b; --page-backups-rgb: 18, 147, 107; - --page-ssh: #7150c8; --page-ssh-rgb: 113, 80, 200; - --page-system: #c2671d; --page-system-rgb: 194, 103, 29; + --page-updates: #4f8cff; --page-updates-rgb: 79, 140, 255; /* Update now */ + --page-verify: #1fb88a; --page-verify-rgb: 31, 184, 138; /* Verify — green by convention */ + --page-backups: #4f8cff; --page-backups-rgb: 79, 140, 255; /* Backups — blue */ + --page-ssh: #9b7bf0; --page-ssh-rgb: 155, 123, 240; + --page-system: #f0883e; --page-system-rgb: 240, 136, 62; } .admin-page { @@ -132,22 +133,28 @@ font-size: 0.875rem; font-weight: 600; cursor: pointer; - /* Solid fill (not a translucent tint) so the glassy aurora bg can't bleed - through and wash it out on nebula; white text reads on every hue. */ + /* Translucent hue tint + WHITE text: keeps the soft coloured look (solid + fills were too heavy) while staying legible on nebula's dark cards — + white on the tinted-over-dark surface has plenty of contrast, unlike the + coloured text it replaces. */ color: #fff; - background: var(--page, var(--accent)); - border: 1px solid rgba(0, 0, 0, 0.18); - transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; + background: rgba(var(--page-rgb, var(--accent-rgb)), 0.16); + border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.42); + transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; } .admin-action-btn:hover { - filter: brightness(1.08); + background: rgba(var(--page-rgb, var(--accent-rgb)), 0.26); transform: translateY(-1px); - box-shadow: 0 6px 16px rgba(var(--page-rgb, var(--accent-rgb)), 0.35); } -.admin-action-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; filter: none; } -/* Primary action (e.g. Update now): same hue, a touch more emphasis. */ +.admin-action-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } +/* Primary action (Update now): a stronger tint so it stands out. */ .admin-action-btn.is-primary { - box-shadow: 0 4px 14px rgba(var(--page-rgb, var(--accent-rgb)), 0.32); + background: rgba(var(--page-rgb, var(--accent-rgb)), 0.28); + border-color: rgba(var(--page-rgb, var(--accent-rgb)), 0.60); +} +.admin-action-btn.is-primary:hover { + background: rgba(var(--page-rgb, var(--accent-rgb)), 0.36); + box-shadow: 0 6px 16px rgba(var(--page-rgb, var(--accent-rgb)), 0.30); } /* ============================================================ diff --git a/containers/libreportal/frontend/js/components/admin/admin-overview.js b/containers/libreportal/frontend/js/components/admin/admin-overview.js index b414430..e0ea8d9 100644 --- a/containers/libreportal/frontend/js/components/admin/admin-overview.js +++ b/containers/libreportal/frontend/js/components/admin/admin-overview.js @@ -170,10 +170,10 @@ class AdminOverview { if (vDisp) updBody += this.integrityLine(vDisp); // Update now takes priority when one's available; otherwise offer Verify now. - const updPage = 'style="--page:var(--page-updates);--page-rgb:var(--page-updates-rgb)"'; + // Update now = updates blue (primary); Verify = green (its own convention). const updActions = (updAvail && upd.can_update) - ? `` - : ``; + ? `` + : ``; const updCard = this.card( 'Updates',