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/routes/+layout.svelte

@@ -66,10 +66,14 @@
         --button: #f4f4f4;
         --button-hover: #e8e8e8;
         --button-hover-transparent: rgba(0, 0, 0, 0.06);
-        --button-stroke: rgba(0, 0, 0, 0.05);
+        --button-stroke: rgba(0, 0, 0, 0.06);
         --button-text: #282828;
         --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
+        --popup-bg: #f1f1f1;
+        --popup-backdrop: var(--primary);
+        --popup-stroke: rgba(0, 0, 0, 0.08);
+
         --sidebar-bg: #000000;
         --sidebar-highlight: #ffffff;
         --sidebar-hover: rgba(255, 255, 255, 0.1);
@@ -120,6 +124,10 @@
         --button-text: #e1e1e1;
         --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
 
+        --popup-bg: #191919;
+        --popup-backdrop: var(--primary);
+        --popup-stroke: rgba(255, 255, 255, 0.08);
+
         --sidebar-bg: #101010;
         --sidebar-highlight: #f2f2f2;
 
@@ -319,15 +327,6 @@
         font-size: 11px;
     }
 
-    :global(dialog) {
-        max-height: 100%;
-        max-width: 100%;
-        padding: var(--padding);
-        border-radius: var(--border-radius);
-        border: none;
-        pointer-events: all;
-    }
-
     :global(.subtext) {
         font-size: 12.5px;
         font-weight: 500;