From 80300bf7669c89788797610782854055f7710cb7 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 21 Jul 2024 13:41:14 +0600
Subject: [PATCH] web/dialogs: moved backdrop to dialog holder, improved
 animation

---
 web/src/components/dialog/DialogHolder.svelte | 29 ++++++++++----
 web/src/components/dialog/SmallDialog.svelte  | 40 +------------------
 web/src/routes/+layout.svelte                 | 14 ++++++-
 3 files changed, 36 insertions(+), 47 deletions(-)

diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte
index 1f306c6b..da321138 100644
--- a/web/src/components/dialog/DialogHolder.svelte
+++ b/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>
diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index a0cdbf71..ed575f9e 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -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;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 5781d247..7191c227 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -78,9 +78,10 @@
         --button-elevated-hover: #dadada;
 
         --popup-bg: #f1f1f1;
-        --popup-backdrop: var(--primary);
         --popup-stroke: rgba(0, 0, 0, 0.08);
 
+        --dialog-backdrop: rgba(255, 255, 255, 0.3);
+
         --sidebar-bg: #000000;
         --sidebar-highlight: #ffffff;
         --sidebar-hover: rgba(255, 255, 255, 0.1);
@@ -144,9 +145,10 @@
         --button-elevated-hover: #2f2f2f;
 
         --popup-bg: #191919;
-        --popup-backdrop: var(--primary);
         --popup-stroke: rgba(255, 255, 255, 0.08);
 
+        --dialog-backdrop: rgba(0, 0, 0, 0.3);
+
         --sidebar-bg: #101010;
         --sidebar-highlight: #f2f2f2;
 
@@ -165,6 +167,14 @@
         );
     }
 
+    :global([data-theme="light"] [data-reduce-transparency="true"]) {
+        --dialog-backdrop: rgba(255, 255, 255, 0.6);
+    }
+
+    :global([data-theme="dark"] [data-reduce-transparency="true"]) {
+        --dialog-backdrop: rgba(0, 0, 0, 0.5);
+    }
+
     :global(html),
     :global(body) {
         margin: 0;