From 12384079a0593b8bcb3825eeea0564feb6ee1958 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Wed, 17 May 2023 17:35:20 +0300 Subject: [PATCH] fix Image disappears in Controlnet Preview Pane #149 --- javascript/imageMaskFix.js | 9 ++++---- style.css | 46 ++++++++++++++++++++++++-------------- 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index 485d14ef..902bc485 100644 --- a/javascript/imageMaskFix.js +++ b/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); } } } diff --git a/style.css b/style.css index 0102549e..80891bd5 100644 --- a/style.css +++ b/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);