From 868b0d3c24be466fef73b5cc06cfad1b29b82a2c Mon Sep 17 00:00:00 2001 From: librelad Date: Sun, 5 Jul 2026 12:43:12 +0100 Subject: [PATCH] fix(webui/setup): darken the setup-progress banner so it reads as a solid card The setup-in-progress banner floats over arbitrary page content (the aurora gradient, apps grid, task logs) but filled at rgba(--bg-rgb, 0.45) with no backdrop blur, so the page bled through and it looked washed-out. Mirror the .notification treatment already used for floating toasts: a near-solid panel (0.85) over a frosted backdrop, plus a lift shadow. Stays theme-aware via --bg-rgb (near-black on dark themes, near-white on light). Signed-off-by: librelad Co-Authored-By: Claude Opus 4.8 (1M context) --- .../frontend/core/setup/css/setup-wizard.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/containers/libreportal/frontend/core/setup/css/setup-wizard.css b/containers/libreportal/frontend/core/setup/css/setup-wizard.css index cf7e30d..e7f3277 100755 --- a/containers/libreportal/frontend/core/setup/css/setup-wizard.css +++ b/containers/libreportal/frontend/core/setup/css/setup-wizard.css @@ -951,11 +951,19 @@ body.setup-wizard-open { left: 50%; transform: translateX(-50%); z-index: 9000; - background: rgba(var(--bg-rgb), 0.45); + /* Floats over arbitrary page content (aurora gradient, apps grid, task + logs), so a translucent fill just bleeds the page through and reads as + washed-out. Mirror the .notification treatment: a near-solid panel over + a frosted backdrop. Stays theme-aware via --bg-rgb (near-black on the + dark themes, near-white on light). */ + background: rgba(var(--bg-rgb), 0.85); + backdrop-filter: blur(12px) saturate(140%); + -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(var(--accent-rgb), 0.40); border-radius: 12px; padding: 10px 16px; color: var(--text-primary); + box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; min-width: 320px;