vdo-ninja-multistream/src/lib/Dialog.svelte
2024-09-07 16:10:45 +02:00

43 lines
923 B
Svelte

<script>
let { children, close } = $props();
</script>
<div class="dialog">
<button
class="close"
onclick={() => {
if (close) close();
}}>X</button
>
{@render children()}
</div>
<style>
.dialog {
padding: 1rem;
position: absolute;
width: 50vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
border: none;
border-radius: 3px;
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=0b49d0&c2=8e0871&gt=l&gd=dtl
*/
background: #0b49d0;
background: linear-gradient(135deg, #0b49d0, #8e0871);
.close {
position: absolute;
top: 0.5rem;
left: 0.5rem;
padding: 0 0.5rem;
line-height: 1.25rem;
}
}
</style>