alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

fix(redesign): portal overlays + solid popup surfaces for legibility

Browse Source 
Portal EntitySelect/MultiEntitySelect/Modal/Snackbar/EventChart/Hint to
<body> so they escape backdrop-filter ancestors. Replace translucent
glass on popups (IconPicker, IconGridSelect, SearchPalette, Snackbar)
with solid backgrounds and theme-aware light-mode override.
This commit is contained in:
Admin
2026-04-25 11:41:25 +03:00
parent 9643fe519e
commit d356e5a3ac
9 changed files with 396 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Snackbar.svelte
+21 -12
View File
@@ -3,6 +3,7 @@
import { getSnacks, removeSnack, type Snack } from '$lib/stores/snackbar.svelte';
import MdiIcon from '$lib/components/MdiIcon.svelte';
import { t } from '$lib/i18n';
import { portal } from '$lib/portal';
const snacks = $derived(getSnacks());
@@ -31,10 +32,7 @@
</script>
{#if snacks.length > 0}
<div
style="position: fixed; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; width: 90%; max-width: 26rem; pointer-events: none;"
class="snackbar-container"
>
<div use:portal class="snackbar-container">
{#each snacks as snack (snack.id)}
<div
in:fly={{ y: 40, duration: 300 }}
@@ -66,6 +64,16 @@
<style>
.snackbar-container {
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 90%;
max-width: 26rem;
pointer-events: none;
bottom: 5rem;
}
@media (min-width: 768px) {
@@ -75,20 +83,21 @@
}
.snack-item {
--snack-solid-bg: #131520;
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
padding: 0.85rem 1rem;
border-radius: 14px;
border-left: 3px solid var(--snack-accent);
background: var(--color-card);
border-top: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
backdrop-filter: blur(12px);
background: var(--snack-solid-bg);
border-top: 1px solid var(--color-rule-strong);
border-right: 1px solid var(--color-rule-strong);
border-bottom: 1px solid var(--color-rule-strong);
box-shadow: var(--shadow-card), 0 12px 30px -10px rgba(0, 0, 0, 0.4);
}
:global([data-theme="light"]) .snack-item { --snack-solid-bg: #fafafe; }
:global([data-theme="dark"]) .snack-item {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--snack-accent) 10%, transparent);