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

web/src/components/dialog/DialogHolder.svelte

@@ -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>