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

fix(webui/setup): darken the setup-progress banner so it reads as a solid card

Browse Source 
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 <librelad@digitalangels.vip>

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
librelad 2026-07-05 12:43:12 +01:00
parent e6df7be1ca
commit 868b0d3c24
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
containers/libreportal/frontend/core/setup/css/setup-wizard.css
View File

@ -951,11 +951,19 @@ body.setup-wizard-open {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 9000; 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: 1px solid rgba(var(--accent-rgb), 0.40);
border-radius: 12px; border-radius: 12px;
padding: 10px 16px; padding: 10px 16px;
color: var(--text-primary); 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-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px; font-size: 13px;
min-width: 320px; min-width: 320px;