Adjust sidebar overlay stacking and blur

css/tailwind.source.css

@@ -2727,10 +2727,15 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity 300ms ease;
+    z-index: var(--z-sidebar-overlay);
+    --sidebar-overlay-open-opacity: 1;
+    --sidebar-overlay-backdrop-blur: var(--overlay-backdrop-blur);
+    backdrop-filter: blur(var(--sidebar-overlay-backdrop-blur));
+    -webkit-backdrop-filter: blur(var(--sidebar-overlay-backdrop-blur));
   }
 
-  body.sidebar-open #sidebarOverlay {
-    opacity: 1;
+  body.sidebar-open:not(.modal-open) #sidebarOverlay {
+    opacity: var(--sidebar-overlay-open-opacity);
     pointer-events: auto;
   }
 
@@ -2775,6 +2780,13 @@
     body.sidebar-open {
       overflow: hidden;
     }
+
+    body.sidebar-open:not(.modal-open) #sidebarOverlay {
+      --sidebar-overlay-open-opacity: 0.85;
+      --sidebar-overlay-backdrop-blur: calc(
+        var(--overlay-backdrop-blur) * 0.75
+      );
+    }
   }
 
   @media (min-width: theme('screens.md')) {