fix: prevent cutting off overlay (lllyasviel#1829)

Co-authored-by: Christoph Rohrer <[email protected]>
aryan1107 · Jan 10, 2024 · dc5b523 · dc5b523
1 parent 6261f17
commit dc5b523
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/css/style.css b/css/style.css
@@ -198,7 +198,8 @@
 }
 
 #stylePreviewOverlay {
-    display: none;
+    opacity: 0;
+    pointer-events: none;
     width: 128px;
     height: 128px;
     position: fixed;
@@ -208,6 +209,12 @@
     transform: translate(-140px, 20px);
     background-size: cover;
     background-position: center;
+    background-color: rgba(0, 0, 0, 0.3);
     border-radius: 5px;
     z-index: 100;
+    transition: transform 0.1s ease, opacity 0.3s ease;
+}
+
+#stylePreviewOverlay.lower-half {
+    transform: translate(-140px, -140px);
 }
diff --git a/javascript/script.js b/javascript/script.js
@@ -158,7 +158,7 @@ function initStylePreviewOverlay() {
         label.removeEventListener("mouseout", onMouseLeave);
         label.addEventListener("mouseout", onMouseLeave);
         overlayVisible = true;
-        overlay.style.display = "block";
+        overlay.style.opacity = "1";
         const originalText = label.querySelector("span").getAttribute("data-original-text");
         const name = originalText || label.querySelector("span").textContent;
         overlay.style.backgroundImage = `url("${samplesPath.replace(
@@ -167,7 +167,7 @@ function initStylePreviewOverlay() {
         ).replaceAll("\\", "\\\\")}")`;
         function onMouseLeave() {
             overlayVisible = false;
-            overlay.style.display = "none";
+            overlay.style.opacity = "0";
             overlay.style.backgroundImage = "";
             label.removeEventListener("mouseout", onMouseLeave);
         }
@@ -176,6 +176,7 @@ function initStylePreviewOverlay() {
         if(!overlayVisible) return;
         overlay.style.left = `${e.clientX}px`;
         overlay.style.top = `${e.clientY}px`;
+        overlay.className = e.clientY > window.innerHeight / 2 ? "lower-half" : "upper-half";
     });
 }