fix(redesign): portal overlays + solid popup surfaces for legibility
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:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
import { t } from '$lib/i18n';
|
||||
import { portal } from '$lib/portal';
|
||||
|
||||
export interface EntityItem {
|
||||
value: string | number;
|
||||
@@ -121,55 +122,57 @@
|
||||
<span class="es-trigger-arrow"><MdiIcon name="mdiChevronDown" size={14} /></span>
|
||||
</button>
|
||||
|
||||
<!-- Palette overlay -->
|
||||
<!-- Palette overlay — portalled to <body> to escape backdrop-filter ancestors -->
|
||||
{#if open}
|
||||
<div class="ep-overlay" onclick={closePalette} role="presentation"></div>
|
||||
<div use:portal class="es-portal-root">
|
||||
<div class="ep-overlay" onclick={closePalette} role="presentation"></div>
|
||||
|
||||
<div class="ep-container">
|
||||
<div class="ep-search-row">
|
||||
<MdiIcon name="mdiMagnify" size={18} />
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
bind:value={query}
|
||||
placeholder={selected ? selected.label : placeholder}
|
||||
class="ep-input"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<kbd class="ep-kbd">ESC</kbd>
|
||||
</div>
|
||||
<div class="ep-container">
|
||||
<div class="ep-search-row">
|
||||
<MdiIcon name="mdiMagnify" size={18} />
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
bind:value={query}
|
||||
placeholder={selected ? selected.label : placeholder}
|
||||
class="ep-input"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<kbd class="ep-kbd">ESC</kbd>
|
||||
</div>
|
||||
|
||||
<div class="ep-list" bind:this={listEl} role="listbox">
|
||||
{#if filtered.length === 0}
|
||||
<div class="ep-empty">{t('common.noMatches')}</div>
|
||||
{:else}
|
||||
{#each filtered as item, i}
|
||||
<button
|
||||
class="ep-item"
|
||||
class:ep-highlight={i === highlightIdx && !item.disabled}
|
||||
class:ep-current={String(item.value) === String(value)}
|
||||
class:ep-disabled={item.disabled}
|
||||
role="option"
|
||||
aria-selected={String(item.value) === String(value)}
|
||||
aria-disabled={item.disabled || undefined}
|
||||
onclick={() => selectItem(item)}
|
||||
onmouseenter={() => highlightIdx = i}
|
||||
type="button"
|
||||
>
|
||||
{#if item.icon}
|
||||
<span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span>
|
||||
{/if}
|
||||
<span class="ep-item-label">{item.label}</span>
|
||||
{#if item.disabled && item.disabledHint}
|
||||
<span class="ep-item-hint">{item.disabledHint}</span>
|
||||
{:else if item.desc}
|
||||
<span class="ep-item-desc">{item.desc}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
<div class="ep-list" bind:this={listEl} role="listbox">
|
||||
{#if filtered.length === 0}
|
||||
<div class="ep-empty">{t('common.noMatches')}</div>
|
||||
{:else}
|
||||
{#each filtered as item, i}
|
||||
<button
|
||||
class="ep-item"
|
||||
class:ep-highlight={i === highlightIdx && !item.disabled}
|
||||
class:ep-current={String(item.value) === String(value)}
|
||||
class:ep-disabled={item.disabled}
|
||||
role="option"
|
||||
aria-selected={String(item.value) === String(value)}
|
||||
aria-disabled={item.disabled || undefined}
|
||||
onclick={() => selectItem(item)}
|
||||
onmouseenter={() => highlightIdx = i}
|
||||
type="button"
|
||||
>
|
||||
{#if item.icon}
|
||||
<span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span>
|
||||
{/if}
|
||||
<span class="ep-item-label">{item.label}</span>
|
||||
{#if item.disabled && item.disabledHint}
|
||||
<span class="ep-item-hint">{item.disabledHint}</span>
|
||||
{:else if item.desc}
|
||||
<span class="ep-item-desc">{item.desc}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -181,23 +184,25 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
background: var(--color-background);
|
||||
background: var(--color-input-bg);
|
||||
color: var(--color-foreground);
|
||||
transition: border-color 0.15s;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.es-trigger.es-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
gap: 0.375rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
font-size: 0.8rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.es-trigger:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-glass-strong);
|
||||
border-color: var(--color-rule-strong);
|
||||
}
|
||||
.es-trigger-icon {
|
||||
flex-shrink: 0;
|
||||
@@ -217,41 +222,63 @@
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.ep-overlay {
|
||||
/* Portal root — escapes any backdrop-filter ancestor */
|
||||
.es-portal-root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9998;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Palette container */
|
||||
/* Overlay */
|
||||
.ep-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: auto;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(8px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
||||
}
|
||||
|
||||
/* Palette container — high opacity for legibility */
|
||||
.ep-container {
|
||||
position: fixed;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: min(20vh, 120px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
width: min(460px, 90vw);
|
||||
z-index: 1;
|
||||
width: min(480px, 92vw);
|
||||
max-height: 60vh;
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
background: var(--ep-solid-bg);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
--ep-solid-bg: #131520;
|
||||
}
|
||||
:global([data-theme="light"]) .ep-container { --ep-solid-bg: #fafafe; }
|
||||
.ep-container::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Search row */
|
||||
.ep-search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem 0.875rem;
|
||||
gap: 0.6rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-muted-foreground);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.ep-input {
|
||||
flex: 1;
|
||||
@@ -261,14 +288,16 @@
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-foreground);
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ep-input::placeholder { color: var(--color-muted-foreground); }
|
||||
.ep-kbd {
|
||||
font-size: 0.55rem;
|
||||
font-size: 0.62rem;
|
||||
font-family: var(--font-mono);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.2rem;
|
||||
background: var(--color-muted);
|
||||
color: var(--color-muted-foreground);
|
||||
padding: 0.2rem 0.45rem;
|
||||
border-radius: 6px;
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-foreground);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
@@ -276,10 +305,12 @@
|
||||
.ep-list {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
padding: 0.25rem 0;
|
||||
padding: 0.35rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.ep-empty {
|
||||
padding: 1rem;
|
||||
padding: 1.25rem;
|
||||
text-align: center;
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 0.85rem;
|
||||
@@ -289,20 +320,26 @@
|
||||
.ep-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
gap: 0.65rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.875rem;
|
||||
border: none;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--color-foreground);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.88rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s;
|
||||
border-left: 3px solid transparent;
|
||||
transition: background 0.12s, border-color 0.12s;
|
||||
border-radius: 10px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ep-item:hover, .ep-item.ep-highlight {
|
||||
background: var(--color-muted);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--color-rule-strong);
|
||||
}
|
||||
:global([data-theme="light"]) .ep-item:hover,
|
||||
:global([data-theme="light"]) .ep-item.ep-highlight {
|
||||
background: rgba(20, 15, 60, 0.05);
|
||||
}
|
||||
.ep-item.ep-disabled {
|
||||
opacity: 0.4;
|
||||
@@ -310,9 +347,14 @@
|
||||
}
|
||||
.ep-item.ep-disabled:hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.ep-item.ep-current {
|
||||
border-left-color: var(--color-primary);
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--color-primary) 14%, transparent),
|
||||
color-mix(in srgb, var(--color-orchid) 14%, transparent));
|
||||
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
|
||||
box-shadow: inset 0 1px 0 var(--color-highlight);
|
||||
}
|
||||
.ep-item-icon {
|
||||
flex-shrink: 0;
|
||||
@@ -320,19 +362,30 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-muted-foreground);
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 8px;
|
||||
background: var(--color-glass-strong);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.ep-item.ep-current .ep-item-icon {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-glass-elev);
|
||||
}
|
||||
.ep-item-label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
.ep-item-desc {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-muted-foreground);
|
||||
padding: 0.12rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-glass-strong);
|
||||
border: 1px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { t } from '$lib/i18n';
|
||||
import { parseDate } from '$lib/api';
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
import { portal } from '$lib/portal';
|
||||
|
||||
interface DayData {
|
||||
date: string;
|
||||
@@ -128,13 +129,15 @@
|
||||
</div>
|
||||
|
||||
{#if tooltip}
|
||||
<div
|
||||
class="chart-tooltip"
|
||||
style="position: fixed; left: {tooltip.x}px; top: {tooltip.y}px; z-index: 9999; transform: translate(-50%, -100%) translateY(-8px);"
|
||||
>
|
||||
{#each tooltip.text.split('\n') as line}
|
||||
<div>{line}</div>
|
||||
{/each}
|
||||
<div use:portal>
|
||||
<div
|
||||
class="chart-tooltip"
|
||||
style="position: fixed; left: {tooltip.x}px; top: {tooltip.y}px; z-index: 9999; transform: translate(-50%, -100%) translateY(-8px);"
|
||||
>
|
||||
{#each tooltip.text.split('\n') as line}
|
||||
<div>{line}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -248,16 +251,21 @@
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chart-tooltip {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
/* Tooltip is portalled to <body>, so use :global to make the style
|
||||
apply regardless of DOM location. */
|
||||
:global(.chart-tooltip) {
|
||||
--ct-solid-bg: #131520;
|
||||
background: var(--ct-solid-bg);
|
||||
color: var(--color-foreground);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.8rem;
|
||||
font-size: 0.72rem;
|
||||
font-family: var(--font-mono);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-card), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
:global([data-theme="light"] .chart-tooltip) { --ct-solid-bg: #fafafe; }
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { portal } from '$lib/portal';
|
||||
|
||||
let { text = '' } = $props<{ text: string }>();
|
||||
let visible = $state(false);
|
||||
let tooltipStyle = $state('');
|
||||
@@ -21,9 +23,7 @@
|
||||
</script>
|
||||
|
||||
<button type="button" bind:this={btnEl}
|
||||
class="inline-flex items-center justify-center w-4 h-4 rounded-full text-[11px] font-bold leading-none
|
||||
border border-[var(--color-border)] bg-[var(--color-muted)] text-[var(--color-muted-foreground)]
|
||||
hover:bg-[var(--color-border)] hover:text-[var(--color-foreground)]
|
||||
class="hint-btn inline-flex items-center justify-center w-4 h-4 rounded-full text-[11px] font-bold leading-none
|
||||
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]
|
||||
transition-colors cursor-help align-middle ml-2 flex-shrink-0"
|
||||
onmouseenter={show}
|
||||
@@ -36,7 +36,35 @@
|
||||
>?</button>
|
||||
|
||||
{#if visible}
|
||||
<div role="tooltip" style="{tooltipStyle} background:var(--color-card); color:var(--color-foreground); border:1px solid var(--color-border); box-shadow:0 10px 30px rgba(0,0,0,0.3); padding:0.625rem 0.75rem; border-radius:0.5rem; font-size:0.8125rem; white-space:normal; line-height:1.625; pointer-events:none;">
|
||||
{text}
|
||||
<div use:portal>
|
||||
<div role="tooltip" style={tooltipStyle} class="hint-tooltip">
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.hint-btn {
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
.hint-btn:hover {
|
||||
background: var(--color-glass-elev);
|
||||
color: var(--color-foreground);
|
||||
border-color: var(--color-rule-strong);
|
||||
}
|
||||
.hint-tooltip {
|
||||
background: var(--hint-solid-bg, #131520);
|
||||
color: var(--color-foreground);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
box-shadow: var(--shadow-card), 0 12px 30px -10px rgba(0, 0, 0, 0.5);
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8125rem;
|
||||
white-space: normal;
|
||||
line-height: 1.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
:global([data-theme="light"]) .hint-tooltip { --hint-solid-bg: #fafafe; }
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 @@
|
||||
<svelte:window onkeydown={open ? handleKeydown : undefined} />
|
||||
|
||||
{#if open}
|
||||
<div
|
||||
class="modal-backdrop"
|
||||
class:visible
|
||||
style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;"
|
||||
onclick={onclose}
|
||||
onkeydown={handleBackdropKeydown}
|
||||
role="presentation"
|
||||
>
|
||||
<div use:portal class="modal-portal-root">
|
||||
<div
|
||||
bind:this={panelEl}
|
||||
class="modal-panel"
|
||||
class="modal-backdrop"
|
||||
class:visible
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title-{uniqueId}"
|
||||
style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 1rem; width: 100%; max-width: 32rem; max-height: 80vh; margin: 1rem; display: flex; flex-direction: column;"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onclick={onclose}
|
||||
onkeydown={handleBackdropKeydown}
|
||||
role="presentation"
|
||||
>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem;">
|
||||
<h3 id="modal-title-{uniqueId}" style="font-size: 1.125rem; font-weight: 600;">{title}</h3>
|
||||
<button class="modal-close" onclick={onclose} aria-label={t('common.close')}>
|
||||
<MdiIcon name="mdiClose" size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div style="padding: 0 1.5rem 1.5rem; overflow-y: auto;">
|
||||
{@render children()}
|
||||
<div
|
||||
bind:this={panelEl}
|
||||
class="modal-panel"
|
||||
class:visible
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title-{uniqueId}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="modal-head">
|
||||
<h3 id="modal-title-{uniqueId}" class="modal-title">{title}</h3>
|
||||
<button class="modal-close" onclick={onclose} aria-label={t('common.close')}>
|
||||
<MdiIcon name="mdiClose" size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.modal-portal-root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(0px);
|
||||
transition: background 0.25s ease, backdrop-filter 0.25s ease;
|
||||
}
|
||||
|
||||
.modal-backdrop.visible {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(8px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
--modal-solid-bg: #131520;
|
||||
background: var(--modal-solid-bg);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 18px;
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
max-height: 80vh;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
transform: translateY(12px) scale(0.97);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.12),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
|
||||
var(--shadow-card),
|
||||
0 30px 80px -20px rgba(0, 0, 0, 0.6);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-panel::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) .modal-panel {
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
0 0 48px var(--color-glow),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03) inset;
|
||||
}
|
||||
:global([data-theme="light"]) .modal-panel { --modal-solid-bg: #fafafe; }
|
||||
|
||||
.modal-panel.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.modal-head {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.4rem 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--color-muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
import { t } from '$lib/i18n';
|
||||
import { portal } from '$lib/portal';
|
||||
|
||||
export interface MultiEntityItem {
|
||||
value: string;
|
||||
@@ -110,56 +111,58 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Palette overlay -->
|
||||
<!-- Palette overlay — portalled to <body> to escape backdrop-filter ancestors -->
|
||||
{#if open}
|
||||
<div class="mes-overlay" onclick={closePalette} role="presentation"></div>
|
||||
<div use:portal class="mes-portal-root">
|
||||
<div class="mes-overlay" onclick={closePalette} role="presentation"></div>
|
||||
|
||||
<div class="mes-container">
|
||||
<div class="mes-search-row">
|
||||
<MdiIcon name="mdiMagnify" size={18} />
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
bind:value={query}
|
||||
placeholder={t('common.search')}
|
||||
class="mes-input"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<span class="mes-count">{(values || []).length}/{items.length}</span>
|
||||
<kbd class="mes-kbd">ESC</kbd>
|
||||
</div>
|
||||
<div class="mes-container">
|
||||
<div class="mes-search-row">
|
||||
<MdiIcon name="mdiMagnify" size={18} />
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
bind:value={query}
|
||||
placeholder={t('common.search')}
|
||||
class="mes-input"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<span class="mes-count">{(values || []).length}/{items.length}</span>
|
||||
<kbd class="mes-kbd">ESC</kbd>
|
||||
</div>
|
||||
|
||||
<div class="mes-list" bind:this={listEl} role="listbox">
|
||||
{#if filtered.length === 0}
|
||||
<div class="mes-empty">{t('common.noMatches')}</div>
|
||||
{:else}
|
||||
{#each filtered as item, i}
|
||||
{@const checked = (values || []).includes(item.value)}
|
||||
<button
|
||||
class="mes-item"
|
||||
class:mes-highlight={i === highlightIdx}
|
||||
class:mes-checked={checked}
|
||||
role="option"
|
||||
aria-selected={checked}
|
||||
onclick={() => toggleItem(item)}
|
||||
onmouseenter={() => highlightIdx = i}
|
||||
type="button"
|
||||
>
|
||||
<span class="mes-item-check">
|
||||
<MdiIcon name={checked ? 'mdiCheckboxMarked' : 'mdiCheckboxBlankOutline'} size={16} />
|
||||
</span>
|
||||
{#if item.icon}
|
||||
<span class="mes-item-icon"><MdiIcon name={item.icon} size={18} /></span>
|
||||
{/if}
|
||||
<span class="mes-item-label">{item.label}</span>
|
||||
{#if item.desc}
|
||||
<span class="mes-item-desc">{item.desc}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
<div class="mes-list" bind:this={listEl} role="listbox">
|
||||
{#if filtered.length === 0}
|
||||
<div class="mes-empty">{t('common.noMatches')}</div>
|
||||
{:else}
|
||||
{#each filtered as item, i}
|
||||
{@const checked = (values || []).includes(item.value)}
|
||||
<button
|
||||
class="mes-item"
|
||||
class:mes-highlight={i === highlightIdx}
|
||||
class:mes-checked={checked}
|
||||
role="option"
|
||||
aria-selected={checked}
|
||||
onclick={() => toggleItem(item)}
|
||||
onmouseenter={() => highlightIdx = i}
|
||||
type="button"
|
||||
>
|
||||
<span class="mes-item-check">
|
||||
<MdiIcon name={checked ? 'mdiCheckboxMarked' : 'mdiCheckboxBlankOutline'} size={16} />
|
||||
</span>
|
||||
{#if item.icon}
|
||||
<span class="mes-item-icon"><MdiIcon name={item.icon} size={18} /></span>
|
||||
{/if}
|
||||
<span class="mes-item-label">{item.label}</span>
|
||||
{#if item.desc}
|
||||
<span class="mes-item-desc">{item.desc}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -233,32 +236,42 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.mes-overlay {
|
||||
/* Portal root */
|
||||
.mes-portal-root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9998;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.mes-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: auto;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(8px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
||||
}
|
||||
|
||||
/* Palette container */
|
||||
/* Palette container — solid background for legibility */
|
||||
.mes-container {
|
||||
position: fixed;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: min(20vh, 120px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
width: min(460px, 90vw);
|
||||
z-index: 1;
|
||||
width: min(480px, 92vw);
|
||||
max-height: 60vh;
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
background: var(--mes-solid-bg);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
--mes-solid-bg: #131520;
|
||||
}
|
||||
:global([data-theme="light"]) .mes-container { --mes-solid-bg: #fafafe; }
|
||||
|
||||
.mes-search-row {
|
||||
display: flex;
|
||||
@@ -319,7 +332,11 @@
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.mes-item:hover, .mes-item.mes-highlight {
|
||||
background: var(--color-muted);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
:global([data-theme="light"]) .mes-item:hover,
|
||||
:global([data-theme="light"]) .mes-item.mes-highlight {
|
||||
background: rgba(20, 15, 60, 0.05);
|
||||
}
|
||||
.mes-item-check {
|
||||
flex-shrink: 0;
|
||||
|
||||
@@ -282,14 +282,14 @@
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
width: min(640px, 92vw);
|
||||
background: color-mix(in srgb, var(--color-background) 92%, transparent);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
--sp-solid-bg: #131520;
|
||||
background: var(--sp-solid-bg);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--shadow-card), 0 30px 80px -20px rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
:global([data-theme="light"]) .sp-container { --sp-solid-bg: #fafafe; }
|
||||
.sp-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user