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/EntitySelect.svelte
+138 -85
View File
@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import MdiIcon from './MdiIcon.svelte'; import MdiIcon from './MdiIcon.svelte';
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import { portal } from '$lib/portal';
export interface EntityItem { export interface EntityItem {
value: string | number; value: string | number;
@@ -121,55 +122,57 @@
<span class="es-trigger-arrow"><MdiIcon name="mdiChevronDown" size={14} /></span> <span class="es-trigger-arrow"><MdiIcon name="mdiChevronDown" size={14} /></span>
</button> </button>
<!-- Palette overlay --> <!-- Palette overlay — portalled to <body> to escape backdrop-filter ancestors -->
{#if open} {#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-container">
<div class="ep-search-row"> <div class="ep-search-row">
<MdiIcon name="mdiMagnify" size={18} /> <MdiIcon name="mdiMagnify" size={18} />
<input <input
bind:this={inputEl} bind:this={inputEl}
bind:value={query} bind:value={query}
placeholder={selected ? selected.label : placeholder} placeholder={selected ? selected.label : placeholder}
class="ep-input" class="ep-input"
type="text" type="text"
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
onkeydown={handleKeydown} onkeydown={handleKeydown}
/> />
<kbd class="ep-kbd">ESC</kbd> <kbd class="ep-kbd">ESC</kbd>
</div> </div>
<div class="ep-list" bind:this={listEl} role="listbox"> <div class="ep-list" bind:this={listEl} role="listbox">
{#if filtered.length === 0} {#if filtered.length === 0}
<div class="ep-empty">{t('common.noMatches')}</div> <div class="ep-empty">{t('common.noMatches')}</div>
{:else} {:else}
{#each filtered as item, i} {#each filtered as item, i}
<button <button
class="ep-item" class="ep-item"
class:ep-highlight={i === highlightIdx && !item.disabled} class:ep-highlight={i === highlightIdx && !item.disabled}
class:ep-current={String(item.value) === String(value)} class:ep-current={String(item.value) === String(value)}
class:ep-disabled={item.disabled} class:ep-disabled={item.disabled}
role="option" role="option"
aria-selected={String(item.value) === String(value)} aria-selected={String(item.value) === String(value)}
aria-disabled={item.disabled || undefined} aria-disabled={item.disabled || undefined}
onclick={() => selectItem(item)} onclick={() => selectItem(item)}
onmouseenter={() => highlightIdx = i} onmouseenter={() => highlightIdx = i}
type="button" type="button"
> >
{#if item.icon} {#if item.icon}
<span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span> <span class="ep-item-icon"><MdiIcon name={item.icon} size={18} /></span>
{/if} {/if}
<span class="ep-item-label">{item.label}</span> <span class="ep-item-label">{item.label}</span>
{#if item.disabled && item.disabledHint} {#if item.disabled && item.disabledHint}
<span class="ep-item-hint">{item.disabledHint}</span> <span class="ep-item-hint">{item.disabledHint}</span>
{:else if item.desc} {:else if item.desc}
<span class="ep-item-desc">{item.desc}</span> <span class="ep-item-desc">{item.desc}</span>
{/if} {/if}
</button> </button>
{/each} {/each}
{/if} {/if}
</div>
</div> </div>
</div> </div>
{/if} {/if}
@@ -181,23 +184,25 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
padding: 0.375rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-rule-strong);
border-radius: 0.375rem; border-radius: 0.625rem;
font-size: 0.875rem; font-size: 0.875rem;
background: var(--color-background); background: var(--color-input-bg);
color: var(--color-foreground); color: var(--color-foreground);
transition: border-color 0.15s; transition: border-color 0.15s, background 0.15s;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
font-family: inherit;
} }
.es-trigger.es-sm { .es-trigger.es-sm {
padding: 0.25rem 0.5rem; padding: 0.3rem 0.55rem;
font-size: 0.75rem; font-size: 0.8rem;
gap: 0.375rem; gap: 0.4rem;
} }
.es-trigger:hover { .es-trigger:hover {
border-color: var(--color-primary); background: var(--color-glass-strong);
border-color: var(--color-rule-strong);
} }
.es-trigger-icon { .es-trigger-icon {
flex-shrink: 0; flex-shrink: 0;
@@ -217,41 +222,63 @@
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
} }
/* Overlay */ /* Portal root — escapes any backdrop-filter ancestor */
.ep-overlay { .es-portal-root {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 9998; z-index: 9998;
background: rgba(0, 0, 0, 0.4); pointer-events: none;
backdrop-filter: blur(2px);
} }
/* 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 { .ep-container {
position: fixed; pointer-events: auto;
position: absolute;
top: min(20vh, 120px); top: min(20vh, 120px);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 9999; z-index: 1;
width: min(460px, 90vw); width: min(480px, 92vw);
max-height: 60vh; max-height: 60vh;
background: var(--color-card); background: var(--ep-solid-bg);
border: 1px solid var(--color-border); border: 1px solid var(--color-rule-strong);
border-radius: 0.75rem; border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; 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 */ /* Search row */
.ep-search-row { .ep-search-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.6rem;
padding: 0.625rem 0.875rem; padding: 0.85rem 1rem;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
position: relative;
z-index: 1;
} }
.ep-input { .ep-input {
flex: 1; flex: 1;
@@ -261,14 +288,16 @@
font-size: 0.9rem; font-size: 0.9rem;
color: var(--color-foreground); color: var(--color-foreground);
padding: 0; padding: 0;
font-family: inherit;
} }
.ep-input::placeholder { color: var(--color-muted-foreground); }
.ep-kbd { .ep-kbd {
font-size: 0.55rem; font-size: 0.62rem;
font-family: var(--font-mono); font-family: var(--font-mono);
padding: 0.1rem 0.3rem; padding: 0.2rem 0.45rem;
border-radius: 0.2rem; border-radius: 6px;
background: var(--color-muted); background: var(--color-glass-strong);
color: var(--color-muted-foreground); color: var(--color-foreground);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }
@@ -276,10 +305,12 @@
.ep-list { .ep-list {
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
padding: 0.25rem 0; padding: 0.35rem;
position: relative;
z-index: 1;
} }
.ep-empty { .ep-empty {
padding: 1rem; padding: 1.25rem;
text-align: center; text-align: center;
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
font-size: 0.85rem; font-size: 0.85rem;
@@ -289,20 +320,26 @@
.ep-item { .ep-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.625rem; gap: 0.65rem;
width: 100%; width: 100%;
padding: 0.5rem 0.875rem; padding: 0.55rem 0.75rem;
border: none; border: 1px solid transparent;
background: transparent; background: transparent;
color: var(--color-foreground); color: var(--color-foreground);
font-size: 0.875rem; font-size: 0.88rem;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
transition: background 0.1s; transition: background 0.12s, border-color 0.12s;
border-left: 3px solid transparent; border-radius: 10px;
font-family: inherit;
} }
.ep-item:hover, .ep-item.ep-highlight { .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 { .ep-item.ep-disabled {
opacity: 0.4; opacity: 0.4;
@@ -310,9 +347,14 @@
} }
.ep-item.ep-disabled:hover { .ep-item.ep-disabled:hover {
background: transparent; background: transparent;
border-color: transparent;
} }
.ep-item.ep-current { .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 { .ep-item-icon {
flex-shrink: 0; flex-shrink: 0;
@@ -320,19 +362,30 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--color-muted-foreground); 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 { .ep-item.ep-current .ep-item-icon {
color: var(--color-primary); color: var(--color-primary);
background: var(--color-glass-elev);
} }
.ep-item-label { .ep-item-label {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: 500;
} }
.ep-item-desc { .ep-item-desc {
font-size: 0.75rem; font-size: 0.7rem;
font-family: var(--font-mono);
color: var(--color-muted-foreground); 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; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
frontend/src/lib/components/EventChart.svelte
+22 -14
View File
@@ -2,6 +2,7 @@
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import { parseDate } from '$lib/api'; import { parseDate } from '$lib/api';
import MdiIcon from './MdiIcon.svelte'; import MdiIcon from './MdiIcon.svelte';
import { portal } from '$lib/portal';
interface DayData { interface DayData {
date: string; date: string;
@@ -128,13 +129,15 @@
</div> </div>
{#if tooltip} {#if tooltip}
<div <div use:portal>
class="chart-tooltip" <div
style="position: fixed; left: {tooltip.x}px; top: {tooltip.y}px; z-index: 9999; transform: translate(-50%, -100%) translateY(-8px);" 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 tooltip.text.split('\n') as line}
{/each} <div>{line}</div>
{/each}
</div>
</div> </div>
{/if} {/if}
@@ -248,16 +251,21 @@
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
.chart-tooltip { /* Tooltip is portalled to <body>, so use :global to make the style
background: var(--color-card); apply regardless of DOM location. */
border: 1px solid var(--color-border); :global(.chart-tooltip) {
border-radius: 0.5rem; --ct-solid-bg: #131520;
padding: 0.5rem 0.75rem; background: var(--ct-solid-bg);
font-size: 0.7rem; 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); 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; pointer-events: none;
white-space: nowrap; white-space: nowrap;
line-height: 1.5; line-height: 1.5;
} }
:global([data-theme="light"] .chart-tooltip) { --ct-solid-bg: #fafafe; }
</style> </style>
frontend/src/lib/components/Hint.svelte
+33 -5
View File
@@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { portal } from '$lib/portal';
let { text = '' } = $props<{ text: string }>(); let { text = '' } = $props<{ text: string }>();
let visible = $state(false); let visible = $state(false);
let tooltipStyle = $state(''); let tooltipStyle = $state('');
@@ -21,9 +23,7 @@
</script> </script>
<button type="button" bind:this={btnEl} <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 class="hint-btn 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)]
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] 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" transition-colors cursor-help align-middle ml-2 flex-shrink-0"
onmouseenter={show} onmouseenter={show}
@@ -36,7 +36,35 @@
>?</button> >?</button>
{#if visible} {#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;"> <div use:portal>
{text} <div role="tooltip" style={tooltipStyle} class="hint-tooltip">
{text}
</div>
</div> </div>
{/if} {/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>
frontend/src/lib/components/IconGridSelect.svelte
+5 -7
View File
@@ -186,20 +186,18 @@
} }
.icon-grid-popup { .icon-grid-popup {
pointer-events: auto; pointer-events: auto;
/* Solid surface — popups need legibility, not glass translucency. /* Solid surface — popups need legibility, not glass translucency. */
We sit above the aurora gradient so a near-opaque background is --igs-solid-bg: #131520;
what reads. */ background: var(--igs-solid-bg);
background: color-mix(in srgb, var(--color-background) 92%, transparent);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--color-rule-strong); border: 1px solid var(--color-rule-strong);
border-radius: 14px; 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; padding: 0.5rem;
max-height: 320px; max-height: 320px;
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
} }
:global([data-theme="light"]) .icon-grid-popup { --igs-solid-bg: #fafafe; }
.icon-grid-popup::after { .icon-grid-popup::after {
content: ''; content: '';
position: absolute; position: absolute;
frontend/src/lib/components/IconPicker.svelte
+4 -4
View File
@@ -146,15 +146,15 @@
.ip-popup { .ip-popup {
pointer-events: auto; pointer-events: auto;
width: 20rem; width: 20rem;
background: color-mix(in srgb, var(--color-background) 92%, transparent); --ip-solid-bg: #131520;
backdrop-filter: blur(28px) saturate(160%); background: var(--ip-solid-bg);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--color-rule-strong); border: 1px solid var(--color-rule-strong);
border-radius: 14px; 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; padding: 0.65rem;
position: relative; position: relative;
} }
:global([data-theme="light"]) .ip-popup { --ip-solid-bg: #fafafe; }
.ip-popup::after { .ip-popup::after {
content: ''; content: '';
position: absolute; inset: 0; position: absolute; inset: 0;
frontend/src/lib/components/Modal.svelte
+93 -39
View File
@@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import MdiIcon from './MdiIcon.svelte'; import MdiIcon from './MdiIcon.svelte';
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import { portal } from '$lib/portal';
let { open = false, title = '', onclose, children } = $props<{ let { open = false, title = '', onclose, children } = $props<{
open: boolean; open: boolean;
@@ -74,86 +75,139 @@
<svelte:window onkeydown={open ? handleKeydown : undefined} /> <svelte:window onkeydown={open ? handleKeydown : undefined} />
{#if open} {#if open}
<div <div use:portal class="modal-portal-root">
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 <div
bind:this={panelEl} class="modal-backdrop"
class="modal-panel"
class:visible class:visible
role="dialog" onclick={onclose}
aria-modal="true" onkeydown={handleBackdropKeydown}
aria-labelledby="modal-title-{uniqueId}" role="presentation"
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()}
> >
<div style="display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem;"> <div
<h3 id="modal-title-{uniqueId}" style="font-size: 1.125rem; font-weight: 600;">{title}</h3> bind:this={panelEl}
<button class="modal-close" onclick={onclose} aria-label={t('common.close')}> class="modal-panel"
<MdiIcon name="mdiClose" size={18} /> class:visible
</button> role="dialog"
</div> aria-modal="true"
<div style="padding: 0 1.5rem 1.5rem; overflow-y: auto;"> aria-labelledby="modal-title-{uniqueId}"
{@render children()} 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> </div>
</div> </div>
{/if} {/if}
<style> <style>
.modal-portal-root {
position: fixed;
inset: 0;
z-index: 9999;
}
.modal-backdrop { .modal-backdrop {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px); backdrop-filter: blur(0px);
transition: background 0.25s ease, backdrop-filter 0.25s ease; transition: background 0.25s ease, backdrop-filter 0.25s ease;
} }
.modal-backdrop.visible { .modal-backdrop.visible {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px); backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
} }
.modal-panel { .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; opacity: 0;
transform: translateY(12px) scale(0.97); transform: translateY(12px) scale(0.97);
transition: opacity 0.25s ease, transform 0.25s ease; transition: opacity 0.25s ease, transform 0.25s ease;
box-shadow: box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12), var(--shadow-card),
0 0 0 1px rgba(255, 255, 255, 0.05) inset; 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 { :global([data-theme="light"]) .modal-panel { --modal-solid-bg: #fafafe; }
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;
}
.modal-panel.visible { .modal-panel.visible {
opacity: 1; opacity: 1;
transform: translateY(0) scale(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 { .modal-close {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 2rem; width: 2.1rem;
height: 2rem; height: 2.1rem;
border-radius: 0.5rem; border-radius: 10px;
border: none; border: 1px solid transparent;
background: transparent; background: transparent;
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.15s ease;
} }
.modal-close:hover { .modal-close:hover {
background: var(--color-muted); background: var(--color-glass-strong);
border-color: var(--color-border);
color: var(--color-foreground); color: var(--color-foreground);
} }
</style> </style>
frontend/src/lib/components/MultiEntitySelect.svelte
+77 -60
View File
@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import MdiIcon from './MdiIcon.svelte'; import MdiIcon from './MdiIcon.svelte';
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import { portal } from '$lib/portal';
export interface MultiEntityItem { export interface MultiEntityItem {
value: string; value: string;
@@ -110,56 +111,58 @@
</button> </button>
</div> </div>
<!-- Palette overlay --> <!-- Palette overlay — portalled to <body> to escape backdrop-filter ancestors -->
{#if open} {#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-container">
<div class="mes-search-row"> <div class="mes-search-row">
<MdiIcon name="mdiMagnify" size={18} /> <MdiIcon name="mdiMagnify" size={18} />
<input <input
bind:this={inputEl} bind:this={inputEl}
bind:value={query} bind:value={query}
placeholder={t('common.search')} placeholder={t('common.search')}
class="mes-input" class="mes-input"
type="text" type="text"
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
onkeydown={handleKeydown} onkeydown={handleKeydown}
/> />
<span class="mes-count">{(values || []).length}/{items.length}</span> <span class="mes-count">{(values || []).length}/{items.length}</span>
<kbd class="mes-kbd">ESC</kbd> <kbd class="mes-kbd">ESC</kbd>
</div> </div>
<div class="mes-list" bind:this={listEl} role="listbox"> <div class="mes-list" bind:this={listEl} role="listbox">
{#if filtered.length === 0} {#if filtered.length === 0}
<div class="mes-empty">{t('common.noMatches')}</div> <div class="mes-empty">{t('common.noMatches')}</div>
{:else} {:else}
{#each filtered as item, i} {#each filtered as item, i}
{@const checked = (values || []).includes(item.value)} {@const checked = (values || []).includes(item.value)}
<button <button
class="mes-item" class="mes-item"
class:mes-highlight={i === highlightIdx} class:mes-highlight={i === highlightIdx}
class:mes-checked={checked} class:mes-checked={checked}
role="option" role="option"
aria-selected={checked} aria-selected={checked}
onclick={() => toggleItem(item)} onclick={() => toggleItem(item)}
onmouseenter={() => highlightIdx = i} onmouseenter={() => highlightIdx = i}
type="button" type="button"
> >
<span class="mes-item-check"> <span class="mes-item-check">
<MdiIcon name={checked ? 'mdiCheckboxMarked' : 'mdiCheckboxBlankOutline'} size={16} /> <MdiIcon name={checked ? 'mdiCheckboxMarked' : 'mdiCheckboxBlankOutline'} size={16} />
</span> </span>
{#if item.icon} {#if item.icon}
<span class="mes-item-icon"><MdiIcon name={item.icon} size={18} /></span> <span class="mes-item-icon"><MdiIcon name={item.icon} size={18} /></span>
{/if} {/if}
<span class="mes-item-label">{item.label}</span> <span class="mes-item-label">{item.label}</span>
{#if item.desc} {#if item.desc}
<span class="mes-item-desc">{item.desc}</span> <span class="mes-item-desc">{item.desc}</span>
{/if} {/if}
</button> </button>
{/each} {/each}
{/if} {/if}
</div>
</div> </div>
</div> </div>
{/if} {/if}
@@ -233,32 +236,42 @@
flex-shrink: 0; flex-shrink: 0;
} }
/* Overlay */ /* Portal root */
.mes-overlay { .mes-portal-root {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 9998; z-index: 9998;
background: rgba(0, 0, 0, 0.4); pointer-events: none;
backdrop-filter: blur(2px); }
.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 { .mes-container {
position: fixed; pointer-events: auto;
position: absolute;
top: min(20vh, 120px); top: min(20vh, 120px);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 9999; z-index: 1;
width: min(460px, 90vw); width: min(480px, 92vw);
max-height: 60vh; max-height: 60vh;
background: var(--color-card); background: var(--mes-solid-bg);
border: 1px solid var(--color-border); border: 1px solid var(--color-rule-strong);
border-radius: 0.75rem; border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
--mes-solid-bg: #131520;
} }
:global([data-theme="light"]) .mes-container { --mes-solid-bg: #fafafe; }
.mes-search-row { .mes-search-row {
display: flex; display: flex;
@@ -319,7 +332,11 @@
transition: background 0.1s; transition: background 0.1s;
} }
.mes-item:hover, .mes-item.mes-highlight { .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 { .mes-item-check {
flex-shrink: 0; flex-shrink: 0;
frontend/src/lib/components/SearchPalette.svelte
+3 -3
View File
@@ -282,14 +282,14 @@
transform: translateX(-50%); transform: translateX(-50%);
z-index: 9999; z-index: 9999;
width: min(640px, 92vw); width: min(640px, 92vw);
background: color-mix(in srgb, var(--color-background) 92%, transparent); --sp-solid-bg: #131520;
backdrop-filter: blur(28px) saturate(160%); background: var(--sp-solid-bg);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--color-rule-strong); border: 1px solid var(--color-rule-strong);
border-radius: 18px; border-radius: 18px;
box-shadow: var(--shadow-card), 0 30px 80px -20px rgba(0, 0, 0, 0.6); box-shadow: var(--shadow-card), 0 30px 80px -20px rgba(0, 0, 0, 0.6);
overflow: hidden; overflow: hidden;
} }
:global([data-theme="light"]) .sp-container { --sp-solid-bg: #fafafe; }
.sp-container::after { .sp-container::after {
content: ''; content: '';
position: absolute; position: absolute;
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 { getSnacks, removeSnack, type Snack } from '$lib/stores/snackbar.svelte';
import MdiIcon from '$lib/components/MdiIcon.svelte'; import MdiIcon from '$lib/components/MdiIcon.svelte';
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import { portal } from '$lib/portal';
const snacks = $derived(getSnacks()); const snacks = $derived(getSnacks());
@@ -31,10 +32,7 @@
</script> </script>
{#if snacks.length > 0} {#if snacks.length > 0}
<div <div use:portal class="snackbar-container">
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"
>
{#each snacks as snack (snack.id)} {#each snacks as snack (snack.id)}
<div <div
in:fly={{ y: 40, duration: 300 }} in:fly={{ y: 40, duration: 300 }}
@@ -66,6 +64,16 @@
<style> <style>
.snackbar-container { .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; bottom: 5rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -75,20 +83,21 @@
} }
.snack-item { .snack-item {
--snack-solid-bg: #131520;
pointer-events: auto; pointer-events: auto;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0.625rem; gap: 0.625rem;
padding: 0.75rem 1rem; padding: 0.85rem 1rem;
border-radius: 0.75rem; border-radius: 14px;
border-left: 3px solid var(--snack-accent); border-left: 3px solid var(--snack-accent);
background: var(--color-card); background: var(--snack-solid-bg);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-rule-strong);
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-rule-strong);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-rule-strong);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; box-shadow: var(--shadow-card), 0 12px 30px -10px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
} }
:global([data-theme="light"]) .snack-item { --snack-solid-bg: #fafafe; }
:global([data-theme="dark"]) .snack-item { :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); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--snack-accent) 10%, transparent);