web/dialog: css for small dialog

- moved backdrop to each dialog
- dialog is now closable by clicking the backdrop
- added meowbalt to dialogs
- added more meowbalt assets & components
- added "main" boolean to indicate the main action button in a list of buttons

web/src/components/dialog/DialogHolder.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
     import SmallDialog from "./SmallDialog.svelte";
     import dialogs from "$lib/dialogs";
+
+    $: dialogVisible = $dialogs.length > 0;
 </script>
 
-<div id="dialog-holder" aria-hidden="true">
+<div id="dialog-holder" class:visible={dialogVisible}>
     {#each $dialogs as dialog}
         {#if dialog.type === "small"}
             <SmallDialog
                 id={dialog.id}
                 title={dialog.title}
+                meowbalt={dialog.meowbalt}
                 bodyText={dialog.bodyText}
                 bodySubText={dialog.bodySubText}
                 buttons={dialog.buttons}
@@ -21,8 +24,25 @@
     #dialog-holder {
         position: absolute;
         padding-top: env(safe-area-inset-bottom);
-        height: calc(100%);
+        height: 100%;
         width: 100%;
-        pointer-events: none;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 99;
+
+        visibility: hidden;
+        backdrop-filter: blur(7px);
+        -webkit-backdrop-filter: blur(7px);
+    }
+
+    #dialog-holder.visible {
+        visibility: visible;
+    }
+
+    :global([data-reduce-transparency="true"]) #dialog-holder {
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
     }
 </style>