fix Image disappears in Controlnet Preview Pane #149

javascript/imageMaskFix.js

@@ -74,11 +74,10 @@ onUiLoaded(function () {
 
               if (intervalLastUIUpdate != null)
                 clearInterval(intervalLastUIUpdate);
+
               intervalLastUIUpdate = setInterval(function () {
                 clearInterval(intervalLastUIUpdate);
-                img_parent.addEventListener("mouseup", function (e) {
-                  img_src[i] = img.src;
-                });
+                img_parent.addEventListener("mouseup", function (e) {});
 
                 let spl_parent = elem.parentElement;
                 let spl;
@@ -123,7 +122,7 @@ onUiLoaded(function () {
                     img_parent.style.flexGrow = "1";
                     img_src[i] = "";
                     elem.style.transform = "none";
-                  }, 200);
+                  }, 500);
                 }
 
                 function spl_color_handler(e) {}
@@ -268,7 +267,7 @@ onUiLoaded(function () {
                   init_drawing_tools();
                 }, 500);
                 img_parent.style.visibility = "visible";
-              }, 500);
+              }, 1000);
             }
           }
         }

style.css

@@ -1,6 +1,5 @@
 :root{--ae-main-bg-color:hsl(0deg 0% 10%);--ae-primary-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(214deg 5% 30%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-border-radius:0px;--ae-subgroup-bg-color:hsl(0deg 0% 10%);--ae-subgroup-input-bg-color:hsl(225deg 6% 13%);--ae-subgroup-input-border-color:hsl(214deg 5% 30%);--ae-subpanel-bg-color:hsl(220deg 4% 14%);--ae-subpanel-border-color:hsl(214deg 5% 30%);--ae-subpanel-border-radius:8px;--ae-textarea-focus-color:hsl(210deg 3% 36%);--ae-input-focus-color:hsl(168deg 97% 41%);--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-cancel-color:hsl(0deg 84% 60%);--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-color:hsl(168deg 97% 41%);--ae-icon-hover-color:hsl(0deg 0% 10%);--ae-icon-size:22px;--ae-nav-bg-color:hsl(0deg 0% 4%);--ae-nav-color:hsl(210deg 4% 80%);--ae-nav-hover-color:hsl(0deg 0% 4%);--ae-input-color:hsl(210deg 4% 80%);--ae-label-color:hsl(210deg 4% 80%);--ae-subgroup-input-color:hsl(210deg 4% 80%);--ae-placeholder-color:hsl(214deg 5% 30%);--ae-text-color:hsl(210deg 4% 80%);--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--ae-frame-bg-color:hsl(225deg 6% 13%);--ae-modal-bg-color:hsl(0deg 0% 10%);--ae-modal-icon-color:hsl(168deg 97% 41%);}/*BREAKPOINT_CSS_CONTENT*/
 
-
 /*
 Theme Name: DarkUX
 Author: anapnoe
@@ -70,16 +69,12 @@ License: GNU General Public License
       (
         var(--ae-top-header-height) + var(--ae-footer-height) +
           var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 +
-          36px
+          34px
       )
   );
 }
 
-/* temporary fix to load default gradio font in frontend instead of backend */
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
-
-
-@media only screen and (max-width: 860px) {
+@media only screen and (max-width: 680px) {
   :root {
     --ae-outside-gap-size: var(--ae-mobile-outside-gap-size);
     --ae-inside-padding-size: var(--ae-mobile-inside-padding-size);
@@ -2809,6 +2804,14 @@ label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 {
 #tab_extensions table th {
   padding: 0.25em 0.5em;
   border: 1px solid var(--ae-panel-border-color);
+  overflow-wrap: anywhere;
+  min-width: 75px;
+}
+#tab_extensions table tr {
+  background-color: var(--ae-main-bg-color);
+}
+#tab_extensions table tr:nth-child(even) {
+  background-color: var(--ae-frame-bg-color);
 }
 
 #tab_extensions table input[type="checkbox"] {
@@ -2816,12 +2819,13 @@ label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 {
   top: -3px;
 }
 
-#tab_extensions button {
-  max-width: 16em;
+#tab_extensions table button {
+  max-width: 5em;
+  min-width: 5em;
 }
 
 #extensions_installed_top div {
-  display: none;
+  /*display: none;*/
 }
 
 #tab_extensions input[disabled="disabled"] {
@@ -2875,8 +2879,6 @@ pre {
   min-height: unset;
 }
 
-#row_setting_hidden_tabs,
-#row_setting_quicksettings_list,
 #settings_sd #row_setting_sd_model_checkpoint {
   display: none;
 }
@@ -2894,7 +2896,7 @@ pre {
   float: left;
   display: block;
   margin-left: 0;
-  width: 12em;
+  width: 10em;
 }
 
 #settings > div.tab-nav button {
@@ -2954,7 +2956,7 @@ pre {
   opacity: 0.98;
 }
 
-@media only screen and (max-width: 860px) {
+@media only screen and (max-width: 680px) {
   /* For tablets: */
   [id$="_splitter"] {
     display: none !important;
@@ -3125,6 +3127,14 @@ pre {
     display: none !important;
   }
 
+  #tab_extensions td:nth-child(2),
+  #tab_extensions td:nth-child(2),
+  #tab_extensions th:nth-child(2),
+  #tab_extensions th:nth-child(2),
+  #tab_extensions td:nth-child(5),
+  #tab_extensions td:nth-child(5),
+  #tab_extensions th:nth-child(5),
+  #tab_extensions th:nth-child(5),
   #tab_extensions td:first-child,
   #tab_extensions td:last-child,
   #tab_extensions th:first-child,
@@ -3405,8 +3415,8 @@ li.coffee-circle {
 }
 
 .coffee-circle .tooltip-html .top {
-  width: 220px;
-  max-width: 220px;
+  width: 320px;
+  max-width: 320px;
   text-align: left;
   padding: 16px;
 }
@@ -3426,8 +3436,10 @@ li.coffee-circle p b {
 }
 .coffee-circle .tooltip-html .top > svg,
 .coffee-circle .tooltip-html .top > img {
-  margin: auto;
+  /*float: left;
+  margin-right: 5px;*/
   margin-bottom: 8px;
+  width: 60%;
 }
 .coffee-circle .tooltip-html .top blockquote {
   background: var(--ae-frame-bg-color);