Style: add glass frost effect to popups

public/css/index-tailwind-output.css

@@ -2006,6 +2006,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   width: 50%;
 }
 
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -5565,6 +5569,12 @@ code {
   background-color: #b3b3b3;
 }
 
+.frozen-glass {
+  -webkit-backdrop-filter: blur(1px);
+          backdrop-filter: blur(1px);
+  background: rgba(100, 100, 100, 0.50);
+}
+
 /************************** UTILITY ************************/
 
 /** 

src/UI/Base/DrawerLeft.svelte

@@ -22,6 +22,7 @@
   placement="left"
   transitionType="fly"
   {transitionParams}
+  bgColor="frozen-glass"
   divClass="overflow-y-auto z-50 "
   bind:hidden
 >

src/UI/Base/Popup.svelte

@@ -22,11 +22,13 @@
     defaultClass = shared
   }
   let dialogClass =
-    "fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex class-marker-dialog " + zIndex
+    "fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex border-none  " + zIndex
+
+  export let backdropClass = "fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80 frozen-glass"
   if (fullscreen) {
     dialogClass += " h-full-child"
   }
-  let bodyClass = bodyPadding + " h-full space-y-4 flex-1 overflow-y-auto overscroll-contain"
+  let bodyClass = bodyPadding + " h-full space-y-4 flex-1 overflow-y-auto overscroll-contain background-normal"
 
   let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg"
   if (!$$slots.header) {
@@ -48,6 +50,7 @@
   {bodyClass}
   {dialogClass}
   {headerClass}
+  {backdropClass}
   color="none"
 >
   <svelte:fragment slot="header">

src/index.css

@@ -465,6 +465,11 @@ code {
     background-color: #b3b3b3;
 }
 
+.frozen-glass {
+    backdrop-filter: blur(1px);
+    background: rgba(100, 100, 100, 0.50);
+}
+
 /************************** UTILITY ************************/
 
 /**