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/Hint.svelte
+33 -5
View File
@@ -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>