70 lines
1.3 KiB
Svelte
70 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { appendToBody } from '$lib/utils.svelte';
|
|
|
|
let {
|
|
open = $bindable<boolean>(false),
|
|
children,
|
|
onClose = $bindable(() => {
|
|
})
|
|
} = $props();
|
|
|
|
let dialog: HTMLDialogElement;
|
|
|
|
$effect(() => open ? dialog.showModal() : dialog.close());
|
|
</script>
|
|
|
|
<dialog
|
|
bind:this={dialog}
|
|
class="glass"
|
|
onclose={() => { open = false; onClose(); }}
|
|
use:appendToBody
|
|
>
|
|
<div class="dialog-content">
|
|
{@render children?.()}
|
|
</div>
|
|
</dialog>
|
|
|
|
<style>
|
|
dialog {
|
|
position: fixed;
|
|
inset: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
max-width: min(700px, 90vw);
|
|
height: 90vh;
|
|
background: var(--glass-bg);
|
|
border: none;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: var(--noise-filter);
|
|
opacity: 0.15;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
dialog::backdrop {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(var(--blur-strength));
|
|
}
|
|
|
|
.dialog-content {
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: var(--spacing-md);
|
|
|
|
> :global(*:not(:last-child)) {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
}
|
|
</style>
|