blur modules instead of black overlay

modules/default/alert/alert.js

@@ -68,17 +68,16 @@ Module.register("alert", {
 	},
 
 	async showAlert(alert, sender) {
-		//Create overlay
-		const overlay = document.createElement("div");
-		overlay.id = "overlay";
-		overlay.innerHTML += '<div class="black_overlay"></div>';
-		document.body.insertBefore(overlay, document.body.firstChild);
-
 		// If module already has an open alert close it
 		if (this.alerts[sender.name]) {
 			this.hideAlert(sender, false);
 		}
 
+		// Add overlay
+		if (!Object.keys(this.alerts).length) {
+			this.toggleBlur(true);
+		}
+
 		const message = await this.renderMessage("alert", alert);
 
 		// Store alert in this.alerts
@@ -105,10 +104,11 @@ Module.register("alert", {
 		// Dismiss alert and remove from this.alerts
 		if (this.alerts[sender.name]) {
 			this.alerts[sender.name].dismiss(close);
-			this.alerts[sender.name] = null;
+			delete this.alerts[sender.name];
 			// Remove overlay
-			const overlay = document.getElementById("overlay");
+			if (!Object.keys(this.alerts).length) {
-			overlay.parentNode.removeChild(overlay);
+				this.toggleBlur(false);
+			}
 		}
 	},
 
@@ -124,6 +124,14 @@ Module.register("alert", {
 		});
 	},
 
+	toggleBlur(add = false) {
+		const method = add ? "add" : "remove";
+		const modules = document.querySelectorAll(".module");
+		for (const module of modules) {
+			module.classList[method]("alert-blur");
+		}
+	},
+
 	notificationReceived(notification, payload, sender) {
 		if (notification === "SHOW_ALERT") {
 			if (payload.type === "notification") {

modules/default/alert/styles/notificationFx.css

@@ -39,12 +39,8 @@
   border-radius: 20px;
 }
 
-.black_overlay {
+.alert-blur {
-  position: fixed;
+  filter: blur(2px) brightness(50%);
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.93);
-  width: 100%;
-  height: 100%;
 }
 
 [class^="ns-effect-"].ns-growl.ns-hide,