From 7740ebe149096c8d53435b3eada45cc4f721d712 Mon Sep 17 00:00:00 2001
From: Haoming <hmstudy02@gmail.com>
Date: Mon, 20 Oct 2025 11:28:12 +0800
Subject: [PATCH] ratio overlay

---
 javascript/aspectRatioOverlay.js      |  8 ++++----
 modules_forge/forge_canvas/canvas.css | 19 +++++++++----------
 modules_forge/forge_canvas/canvas.py  |  2 +-
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index bf80c886..06430295 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -22,22 +22,22 @@ function dimensionChange(e, is_width, is_height) {
     if (tabIndex == 0) {
         // img2img
         targetElement = gradioApp().querySelector(
-            "#img2img_image div[class=forge-image-container] img",
+            "#img2img_image div.forge-image-container img",
         );
     } else if (tabIndex == 1) {
         // Sketch
         targetElement = gradioApp().querySelector(
-            "#img2img_sketch div[class=forge-image-container] img",
+            "#img2img_sketch div.forge-image-container img",
         );
     } else if (tabIndex == 2) {
         // Inpaint
         targetElement = gradioApp().querySelector(
-            "#img2maskimg div[class=forge-image-container] img",
+            "#img2maskimg div.forge-image-container img",
         );
     } else if (tabIndex == 3) {
         // Inpaint sketch
         targetElement = gradioApp().querySelector(
-            "#inpaint_sketch div[class=forge-image-container] img",
+            "#inpaint_sketch div.forge-image-container img",
         );
     } else if (tabIndex == 4) {
         // Inpaint upload
diff --git a/modules_forge/forge_canvas/canvas.css b/modules_forge/forge_canvas/canvas.css
index dfbd6074..1b0ad9d6 100644
--- a/modules_forge/forge_canvas/canvas.css
+++ b/modules_forge/forge_canvas/canvas.css
@@ -6,19 +6,11 @@
     user-select: none;
 }
 
-.forge-image-container-plain {
-    width: 100%;
-    height: calc(100% - 6px);
-    position: relative;
-    overflow: hidden;
+.forge-image-container.plain {
     background-color: #808080;
 }
 
-.forge-image-container {
-    width: 100%;
-    height: calc(100% - 6px);
-    position: relative;
-    overflow: hidden;
+.forge-image-container:not(.plain) {
     background-color: #cccccc;
     background-image:
         linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
@@ -29,6 +21,13 @@
         10px 10px;
 }
 
+.forge-image-container {
+    width: 100%;
+    height: calc(100% - 6px);
+    position: relative;
+    overflow: hidden;
+}
+
 .forge-image {
     position: absolute;
     top: 0;
diff --git a/modules_forge/forge_canvas/canvas.py b/modules_forge/forge_canvas/canvas.py
index 27a1e012..f040b179 100644
--- a/modules_forge/forge_canvas/canvas.py
+++ b/modules_forge/forge_canvas/canvas.py
@@ -128,7 +128,7 @@ class ForgeCanvas:
         canvas_html_uuid = canvas_html.replace("forge_mixin", self.uuid)
 
         if opts.forge_canvas_plain:
-            canvas_html_uuid = canvas_html_uuid.replace('class="forge-image-container"', 'class="forge-image-container-plain"').replace('stroke="white"', "stroke=#444")
+            canvas_html_uuid = canvas_html_uuid.replace('class="forge-image-container"', 'class="forge-image-container plain"').replace('stroke="white"', "stroke=#444")
         if opts.forge_canvas_toolbar_always:
             canvas_html_uuid = canvas_html_uuid.replace('class="forge-toolbar"', 'class="forge-toolbar-static"')