3. Okt. 2024, 06:24

_res/_custom.js

@@ -154,9 +154,9 @@ function gradioCustomJS() {
 		if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) {
 			gradioContainer.classList.add("blur-container")
 			body.style.setProperty("--blur-value", "12px")
+
 			gradioApp.style.height = "calc(100vh - 120px)"
-			resolutionModalWrapper.style.backdropFilter = "blur(12px)"
-			resolutionModalWrapper.style.opacity = "1"
+			resolutionModalWrapper.setProperty("--opacity-value", "1")
 			alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
 			alertModalElemButton.textContent = "Ok"
 			resolutionModalWrapper.style.display = ""
@@ -164,8 +164,7 @@ function gradioCustomJS() {
 			gradioContainer.classList.add("blur-container")
 			body.style.setProperty("--blur-value", "12px")
 			gradioApp.style.height = "calc(100vh - 120px)"
-			resolutionModalWrapper.style.backdropFilter = "blur(12px)"
-			resolutionModalWrapper.style.opacity = "1"
+			resolutionModalWrapper.setProperty("--opacity-value", "1")
 			alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
 			alertModalElemButton.textContent = "Ok"
 			resolutionModalWrapper.style.display = ""
@@ -173,8 +172,7 @@ function gradioCustomJS() {
 			gradioContainer.classList.remove("blur-container")
 			body.style.setProperty("--blur-value", "0px")
 			gradioApp.style.height = ""
-			resolutionModalWrapper.style.backdropFilter = "blur(0px)"
-			resolutionModalWrapper.style.opacity = "0"
+			resolutionModalWrapper.setProperty("--opacity-value", "0")
 			resolutionModalWrapper.style.display = "none"
 		}
 	}