From bd0256715c10c34e77461508985234eaa182c28f Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 28 May 2026 23:59:15 +0100 Subject: [PATCH] ux(admin): solid-fill Overview buttons for legibility on nebula The translucent tinted buttons washed out against nebula's glassy aurora background. Switch .admin-action-btn to a solid fill with white text (the bg can no longer bleed through) and deepen the --page-* hues enough for white-text contrast. Hover uses brightness() so it's theme-agnostic. Co-Authored-By: Claude Opus 4.7 Signed-off-by: librelad --- containers/libreportal/frontend/css/admin.css | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/containers/libreportal/frontend/css/admin.css b/containers/libreportal/frontend/css/admin.css index 6797830..28ba9a8 100644 --- a/containers/libreportal/frontend/css/admin.css +++ b/containers/libreportal/frontend/css/admin.css @@ -5,10 +5,10 @@ /* 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: #4f8cff; --page-updates-rgb: 79, 140, 255; - --page-backups: #1fb88a; --page-backups-rgb: 31, 184, 138; - --page-ssh: #9b7bf0; --page-ssh-rgb: 155, 123, 240; - --page-system: #f0883e; --page-system-rgb: 240, 136, 62; + --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; } .admin-page { @@ -132,24 +132,22 @@ font-size: 0.875rem; font-weight: 600; cursor: pointer; - color: var(--page, var(--accent)); - background: rgba(var(--page-rgb, var(--accent-rgb)), 0.14); - border: 1px solid rgba(var(--page-rgb, var(--accent-rgb)), 0.35); - transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; -} -.admin-action-btn:hover { - background: rgba(var(--page-rgb, var(--accent-rgb)), 0.22); - transform: translateY(-1px); -} -.admin-action-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } -/* Primary action (e.g. Update now): filled with the area's hue. */ -.admin-action-btn.is-primary { + /* 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. */ color: #fff; background: var(--page, var(--accent)); - border-color: transparent; + border: 1px solid rgba(0, 0, 0, 0.18); + transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; } -.admin-action-btn.is-primary:hover { - box-shadow: 0 6px 18px rgba(var(--page-rgb, var(--accent-rgb)), 0.40); +.admin-action-btn:hover { + filter: brightness(1.08); + 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.is-primary { + box-shadow: 0 4px 14px rgba(var(--page-rgb, var(--accent-rgb)), 0.32); } /* ============================================================