Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-13 05:37:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/dialogs: moved backdrop to dialog holder, improved animation

Browse Source
This commit is contained in:
wukko
2024-07-21 13:41:14 +06:00
parent 8a080c55f6
commit 80300bf766
3 changed files with 36 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/components/dialog/DialogHolder.svelte
View File

@ -2,10 +2,10 @@
import SmallDialog from "./SmallDialog.svelte";
import dialogs from "$lib/dialogs";
$: dialogVisible = $dialogs.length > 0;
$: backdropVisible = $dialogs.length > 0;
</script>
<div id="dialog-holder" class:visible={dialogVisible}>
<div id="dialog-holder">
{#each $dialogs as dialog}
{#if dialog.type === "small"}
<SmallDialog
@ -19,6 +19,7 @@
/>
{/if}
{/each}
<div id="dialog-backdrop" class:visible={backdropVisible}></div>
</div>
<style>
@ -27,23 +28,37 @@
padding-top: env(safe-area-inset-bottom);
height: 100%;
width: 100%;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
visibility: hidden;
pointer-events: none;
}
#dialog-backdrop {
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
background-color: var(--dialog-backdrop);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity: 0;
transition: opacity 0.2s;
}
#dialog-holder.visible {
visibility: visible;
#dialog-backdrop.visible {
opacity: 1;
}
:global([data-reduce-transparency="true"]) #dialog-holder {
:global([data-reduce-transparency="true"]) #dialog-backdrop {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
</style>

40
web/src/components/dialog/SmallDialog.svelte
View File

@ -84,7 +84,7 @@
</div>
</div>
<div id="dialog-backdrop" aria-hidden="true" on:click={() => close()}></div>
<div id="dialog-backdrop-close" aria-hidden="true" on:click={() => close()}></div>
</dialog>
<style>
@ -230,29 +230,11 @@
}
}
#dialog-backdrop {
--backdrop-opacity: 0.4;
background-color: var(--popup-backdrop);
#dialog-backdrop-close {
position: inherit;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0;
animation: backdrop-in 0.15s;
}
:global([data-reduce-transparency="true"]) #dialog-backdrop {
--backdrop-opacity: 0.5;
}
.open #dialog-backdrop {
opacity: var(--backdrop-opacity);
animation: backdrop-in 0.15s;
}
.closing #dialog-backdrop {
opacity: 0;
animation: backdrop-out 0.15s;
}
@keyframes modal-in {
@ -282,24 +264,6 @@
}
}
@keyframes backdrop-in {
from {
opacity: 0;
}
to {
opacity: var(--backdrop-opacity);
}
}
@keyframes backdrop-out {
from {
opacity: var(--backdrop-opacity);
}
to {
opacity: 0;
}
}
@media screen and (max-width: 535px) {
dialog {
justify-content: end;