From d356e5a3acb511e60838a6b282daf3f493ae19a1 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 11:41:25 +0300 Subject: [PATCH] fix(redesign): portal overlays + solid popup surfaces for legibility Portal EntitySelect/MultiEntitySelect/Modal/Snackbar/EventChart/Hint to so they escape backdrop-filter ancestors. Replace translucent glass on popups (IconPicker, IconGridSelect, SearchPalette, Snackbar) with solid backgrounds and theme-aware light-mode override. --- .../src/lib/components/EntitySelect.svelte | 223 +++++++++++------- frontend/src/lib/components/EventChart.svelte | 36 +-- frontend/src/lib/components/Hint.svelte | 38 ++- .../src/lib/components/IconGridSelect.svelte | 12 +- frontend/src/lib/components/IconPicker.svelte | 8 +- frontend/src/lib/components/Modal.svelte | 132 ++++++++--- .../lib/components/MultiEntitySelect.svelte | 137 ++++++----- .../src/lib/components/SearchPalette.svelte | 6 +- frontend/src/lib/components/Snackbar.svelte | 33 ++- 9 files changed, 396 insertions(+), 229 deletions(-) diff --git a/frontend/src/lib/components/EntitySelect.svelte b/frontend/src/lib/components/EntitySelect.svelte index 99e2412..e0f9732 100644 --- a/frontend/src/lib/components/EntitySelect.svelte +++ b/frontend/src/lib/components/EntitySelect.svelte @@ -1,6 +1,7 @@ {#if visible} -
- {text} +
+
{/if} + + diff --git a/frontend/src/lib/components/IconGridSelect.svelte b/frontend/src/lib/components/IconGridSelect.svelte index b26b0d2..5cf58d7 100644 --- a/frontend/src/lib/components/IconGridSelect.svelte +++ b/frontend/src/lib/components/IconGridSelect.svelte @@ -186,20 +186,18 @@ } .icon-grid-popup { pointer-events: auto; - /* Solid surface — popups need legibility, not glass translucency. - We sit above the aurora gradient so a near-opaque background is - what reads. */ - background: color-mix(in srgb, var(--color-background) 92%, transparent); - backdrop-filter: blur(28px) saturate(160%); - -webkit-backdrop-filter: blur(28px) saturate(160%); + /* Solid surface — popups need legibility, not glass translucency. */ + --igs-solid-bg: #131520; + background: var(--igs-solid-bg); border: 1px solid var(--color-rule-strong); border-radius: 14px; - box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.5); + box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55); padding: 0.5rem; max-height: 320px; overflow-y: auto; scrollbar-width: thin; } + :global([data-theme="light"]) .icon-grid-popup { --igs-solid-bg: #fafafe; } .icon-grid-popup::after { content: ''; position: absolute; diff --git a/frontend/src/lib/components/IconPicker.svelte b/frontend/src/lib/components/IconPicker.svelte index fb15921..ad41efe 100644 --- a/frontend/src/lib/components/IconPicker.svelte +++ b/frontend/src/lib/components/IconPicker.svelte @@ -146,15 +146,15 @@ .ip-popup { pointer-events: auto; width: 20rem; - background: color-mix(in srgb, var(--color-background) 92%, transparent); - backdrop-filter: blur(28px) saturate(160%); - -webkit-backdrop-filter: blur(28px) saturate(160%); + --ip-solid-bg: #131520; + background: var(--ip-solid-bg); border: 1px solid var(--color-rule-strong); border-radius: 14px; - box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.5); + box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55); padding: 0.65rem; position: relative; } + :global([data-theme="light"]) .ip-popup { --ip-solid-bg: #fafafe; } .ip-popup::after { content: ''; position: absolute; inset: 0; diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte index dfec9a3..3bff9a0 100644 --- a/frontend/src/lib/components/Modal.svelte +++ b/frontend/src/lib/components/Modal.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte'; import MdiIcon from './MdiIcon.svelte'; import { t } from '$lib/i18n'; + import { portal } from '$lib/portal'; let { open = false, title = '', onclose, children } = $props<{ open: boolean; @@ -74,86 +75,139 @@ {#if open} -