- {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}
-
+
e.stopPropagation()}
+ onclick={onclose}
+ onkeydown={handleBackdropKeydown}
+ role="presentation"
>
-
-
{title}
-
-
-
- {@render children()}
+
e.stopPropagation()}
+ >
+
+
{title}
+
+
+
+ {@render children()}
+
{/if}
diff --git a/frontend/src/lib/components/MultiEntitySelect.svelte b/frontend/src/lib/components/MultiEntitySelect.svelte
index cfb199a..b70532f 100644
--- a/frontend/src/lib/components/MultiEntitySelect.svelte
+++ b/frontend/src/lib/components/MultiEntitySelect.svelte
@@ -1,6 +1,7 @@
{#if snacks.length > 0}
-
+
{#each snacks as snack (snack.id)}
.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);