From c7142e5c99cee8c7de81900a4b1afc869b8de5a4 Mon Sep 17 00:00:00 2001
From: bruefire <sprinkla.sendonly@gmail.com>
Date: Thu, 16 Jan 2025 01:56:22 +0900
Subject: [PATCH] adjusted css for new ComfyUI style.

---
 js/MaskEditorForVframes.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/js/MaskEditorForVframes.js b/js/MaskEditorForVframes.js
index 673c017..f0a5b06 100644
--- a/js/MaskEditorForVframes.js
+++ b/js/MaskEditorForVframes.js
@@ -66,10 +66,20 @@ class MaskEditorDialog extends ComfyDialog {
 
 	constructor() {
 		super();
-		this.element = $el("div.comfy-modal", { parent: document.body }, 
+		this.element = $el("div", { parent: document.body }, 
 			[ $el("div.comfy-modal-content", 
 				[...this.createButtons()]),
 			]);
+
+		this.element.style.position = "fixed";
+		this.element.style.padding = "30px 30px 10px 30px";
+		this.element.style.backgroundColor = "#353535";
+		this.element.style.boxShadow = "0 0 20px #888888";
+		this.element.style.borderRadius = "10px";
+		this.element.style.fontFamily = "monospace";
+		this.element.style.fontSize = "15px";
+		this.element.style.top = "5%";
+		this.element.style.left = "100px";
 	}
 
 	createButtons() {
@@ -360,8 +370,8 @@ class MaskEditorDialog extends ComfyDialog {
 			const backSketchCanvases = [...new Array(this.#paths.length)].map(_ => document.createElement("canvas"));
 
 			imgCanvas.id = "imageCanvas";
-			maskCanvas.id = "maskCanvas";
-			sketchCanvas.id = "sketchCanvas";
+			maskCanvas.id = "vMaskCanvas";
+			sketchCanvas.id = "vSketchCanvas";
 
 			this.setlayout(imgCanvas, maskCanvas, sketchCanvas);