diff --git a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js
index 931cc39c..4fc69b62 100644
--- a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js
+++ b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js
@@ -205,6 +205,7 @@ function updateTheme(vars){
if(val.indexOf("hsl") != -1){
let hsl = toHSLArray(val);
let hex = hslToHex(hsl[0], hsl[1], hsl[2]);
+ elem.value = hex;
}else{
elem.value = val.split("px")[0];
}
diff --git a/extensions-builtin/sd_theme_editor/themes/default_cyan.css b/extensions-builtin/sd_theme_editor/themes/default_cyan.css
new file mode 100644
index 00000000..be20718c
--- /dev/null
+++ b/extensions-builtin/sd_theme_editor/themes/default_cyan.css
@@ -0,0 +1 @@
+--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(199deg 60% 60%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:0px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(199deg 60% 60%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(357deg 50% 57%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(210deg 4% 80%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/default_orange.css b/extensions-builtin/sd_theme_editor/themes/default_orange.css
new file mode 100644
index 00000000..63ba491d
--- /dev/null
+++ b/extensions-builtin/sd_theme_editor/themes/default_orange.css
@@ -0,0 +1 @@
+--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(16deg 77% 60%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:8px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(16deg 77% 60%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(193deg 54% 55%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(210deg 4% 80%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);
\ No newline at end of file
diff --git a/javascript/ui.js b/javascript/ui.js
index c7c2d8f4..5382a163 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -379,18 +379,33 @@ onUiUpdate(function(){
})
+ // menu
function disableScroll() {
- scrollTop = 0;//window.pageYOffset || document.documentElement.scrollTop;
- scrollLeft = 0;//window.pageXOffset || document.documentElement.scrollLeft,
- window.onscroll = function() {
- window.scrollTo(scrollLeft, scrollTop);
- };
- }
+ scrollTop = 0;//window.pageYOffset || document.documentElement.scrollTop;
+ scrollLeft = 0;//window.pageXOffset || document.documentElement.scrollLeft,
+ window.onscroll = function() {
+ window.scrollTo(scrollLeft, scrollTop);
+ };
+ }
function enableScroll() {
window.onscroll = function() {};
}
+ function toggleMenu(isopen, icon, panel, close, owner) {
+ if(isopen){
+ panel.classList.add("open");
+ icon.classList.add("fixed");
+ close.addEventListener('click', owner);
+ disableScroll();
+ }else{
+ panel.classList.remove("open");
+ icon.classList.remove("fixed");
+ close.removeEventListener('click', owner);
+ enableScroll();
+ }
+ }
+
// mobile nav menu
const tabs_menu = gradioApp().querySelector('#tabs > div:first-child');
const nav_menu = gradioApp().querySelector('#nav_menu');
@@ -398,59 +413,28 @@ onUiUpdate(function(){
let menu_open = false;
function toggleNavMenu(e) {
- menu_open = !menu_open;
e.preventDefault();
e.stopPropagation();
-
- if(menu_open){
- tabs_menu.classList.add("open");
- nav_menu.classList.add("fixed");
- gcontainer.addEventListener('click', toggleNavMenu);
- disableScroll();
-
-
- }else{
- tabs_menu.classList.remove("open");
- nav_menu.classList.remove("fixed");
- gcontainer.removeEventListener('click', toggleNavMenu);
- enableScroll();
-
- }
-
+ menu_open = !menu_open;
+ toggleMenu(menu_open, nav_menu, tabs_menu, gcontainer, toggleNavMenu);
}
-
nav_menu.addEventListener('click', toggleNavMenu);
// quicksettings nav menu
+ let quick_menu_open = false;
const quicksettings_overflow = gradioApp().querySelector('#quicksettings_overflow');
const quick_menu = gradioApp().querySelector('#quick_menu');
const qparent = gradioApp().querySelector('#tabs');
-
- let quick_menu_open = false;
- function toggleQuickMenu(e) {
- quick_menu_open = !quick_menu_open;
+
+ function toggleQuickMenu(e) {
e.preventDefault();
e.stopPropagation();
-
- if(quick_menu_open){
- quicksettings_overflow.classList.add("open");
- quick_menu.classList.add("fixed");
- disableScroll();
- qparent.addEventListener('click', toggleQuickMenu);
-
-
- }else{
- quicksettings_overflow.classList.remove("open");
- quick_menu.classList.remove("fixed");
- enableScroll();
- qparent.removeEventListener('click', toggleQuickMenu);
-
- }
-
- }
-
+ quick_menu_open = !quick_menu_open;
+ toggleMenu(quick_menu_open, quick_menu, quicksettings_overflow, qparent, toggleQuickMenu);
+ }
quick_menu.addEventListener('click', toggleQuickMenu);
+
})
@@ -492,6 +476,10 @@ function update_token_counter(button_id) {
}
function restart_reload(){
+
+
+
+ //document.html.innerHTML +=' ';
document.body.style.backgroundColor = "#1a1a1a";
document.body.innerHTML='Reloading...
';
setTimeout(function(){location.reload()},2000)
diff --git a/modules/shared.py b/modules/shared.py
index 805f9cc1..681547e8 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -472,7 +472,8 @@ options_templates.update(options_section(('ui', "Live previews"), {
"show_progress_every_n_steps": OptionInfo(10, "Show new live preview image every N sampling steps. Set to -1 to show after completion of batch.", gr.Slider, {"minimum": -1, "maximum": 32, "step": 1}),
"show_progress_type": OptionInfo("Approx NN", "Image creation progress preview mode", gr.Radio, {"choices": ["Full", "Approx NN", "Approx cheap"]}),
"live_preview_content": OptionInfo("Prompt", "Live preview subject", gr.Radio, {"choices": ["Combined", "Prompt", "Negative prompt"]}),
- "live_preview_refresh_period": OptionInfo(1000, "Progressbar/preview update period, in milliseconds")
+ "live_preview_refresh_period": OptionInfo(1000, "Progressbar/preview update period, in milliseconds"),
+ "live_preview_image_fit": OptionInfo("Scale-down", "Live preview image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]})
}))
options_templates.update(options_section(('sampler-params', "Sampler parameters"), {
diff --git a/style.css b/style.css
index 4e895403..55b0a900 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-:host{--main-bg-color:#1a1a1a;--primary-color:#03d0a8;--input-bg-color:#202124;--input-border-color:#494c50;--panel-bg-color:#292a2d;--panel-border-color:#494c50;--panel-border-radius:0px;--subgroup-bg-color:#1a1a1a;--subgroup-input-bg-color:#202124;--subgroup-input-border-color:#494c50;--subpanel-bg-color:#222325;--subpanel-border-color:#494c50;--subpanel-border-radius:8px;--textarea-focus-color:#5a5d60;--input-focus-color:#03d0a8;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:#ef4444;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:#caccce;--icon-hover-color:#1a1a1a;--icon-size:22px;--nav-bg-color:#202124;--icon-color:#caccce;--icon-hover-color:#1a1a1a;--icon-size:22px;--nav-bg-color:#0a0a0a;--nav-color:#caccce;--nav-hover-color:#0a0a0a;--input-color:#caccce;--label-color:#caccce;--subgroup-input-color:#000000;--subgroup-label-color:#000000;--placeholder-color:#494c50;--text-color:#caccce;}/*BREAKPOINT_CSS_CONTENT*/
+:host{--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(16deg 77% 60%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:8px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(16deg 77% 60%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(193deg 54% 55%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(210deg 4% 80%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);}/*BREAKPOINT_CSS_CONTENT*/
/*
Theme Name: DarkUX
@@ -1137,6 +1137,7 @@ dark .gr-button-secondary:hover {
padding:0!important;
border-radius:0!important;
background-color:transparent!important;
+ overflow: visible !important;
}
@@ -1588,6 +1589,7 @@ canvas[key=mask] {
width: 100%;
height: 100%;
object-fit: scale-down;
+ /*object-fit: contain;*/
}