diff --git a/extensions-builtin/sd_theme_editor/themes/Golde.css b/extensions-builtin/sd_theme_editor/themes/Golde.css
index 061a10a8..668547cc 100644
--- a/extensions-builtin/sd_theme_editor/themes/Golde.css
+++ b/extensions-builtin/sd_theme_editor/themes/Golde.css
@@ -1 +1 @@
---main-bg-color:hsl(99deg -11% 8%);--primary-color:hsl(44deg 63% 55%);--input-bg-color:hsl(106deg -8% 12%);--input-border-color:hsl(104deg -9% 32%);--panel-bg-color:hsl(104deg -9% 20%);--panel-border-color:hsl(104deg -9% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(99deg -11% 8%);--subgroup-input-bg-color:hsl(99deg -11% 8%);--subgroup-input-border-color:hsl(104deg -9% 32%);--subpanel-bg-color:hsl(106deg -8% 12%);--subpanel-border-color:hsl(104deg -9% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(56deg -30% 36%);--input-focus-color:hsl(44deg 63% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(104deg -9% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(105deg -9% 77%);--icon-hover-color:hsl(99deg -11% 8%);--icon-size:22px;--nav-bg-color:hsl(98deg -9% 4%);--nav-color:hsl(105deg -9% 77%);--nav-hover-color:hsl(98deg -9% 4%);--input-color:hsl(44deg 63% 55%);--label-color:hsl(105deg -9% 77%);--subgroup-input-color:hsl(206deg 67% 100%);--placeholder-color:hsl(104deg -9% 32%);--text-color:hsl(105deg -9% 77%);
\ No newline at end of file
+--main-bg-color:hsl(99deg 11% 8%);--primary-color:hsl(44deg 63% 55%);--input-bg-color:hsl(106deg 8% 12%);--input-border-color:hsl(104deg 9% 32%);--panel-bg-color:hsl(104deg 9% 20%);--panel-border-color:hsl(104deg 9% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(99deg 11% 8%);--subgroup-input-bg-color:hsl(99deg 11% 8%);--subgroup-input-border-color:hsl(104deg 9% 32%);--subpanel-bg-color:hsl(106deg 8% 12%);--subpanel-border-color:hsl(104deg 9% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(56deg 30% 36%);--input-focus-color:hsl(44deg 63% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(104deg 9% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(105deg 9% 77%);--icon-hover-color:hsl(99deg 11% 8%);--icon-size:22px;--nav-bg-color:hsl(98deg 9% 4%);--nav-color:hsl(105deg 9% 77%);--nav-hover-color:hsl(98deg 9% 4%);--input-color:hsl(44deg 63% 55%);--label-color:hsl(105deg 9% 77%);--subgroup-input-color:hsl(206deg 67% 100%);--placeholder-color:hsl(104deg 9% 32%);--text-color:hsl(105deg 9% 77%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/backup.css b/extensions-builtin/sd_theme_editor/themes/backup.css
index 2fad2443..a6953f26 100644
--- a/extensions-builtin/sd_theme_editor/themes/backup.css
+++ b/extensions-builtin/sd_theme_editor/themes/backup.css
@@ -1,55 +1 @@
-
---main-bg-color: #1a1a1a;
---primary-color:#04d0a8;
-
---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 ;
-
---icon-color:#caccce;
---icon-hover-color:#1a1a1a;
---icon-size:22px;
-
---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: #ffffff;
---subgroup-label-color: #ffffff;
-
---placeholder-color: #494c50;
-
---text-color: #caccce;
-
---max-padding: max(var(--outside-gap-size),var(--inside-padding-size));
-
+--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(168deg 96% 42%);--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(168deg 97% 41%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(0deg 84% 60%);--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 100% 100%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/d-230-52-94.css b/extensions-builtin/sd_theme_editor/themes/d-230-52-94.css
index d160f1dd..fbae0488 100644
--- a/extensions-builtin/sd_theme_editor/themes/d-230-52-94.css
+++ b/extensions-builtin/sd_theme_editor/themes/d-230-52-94.css
@@ -1 +1 @@
---main-bg-color:hsl(230deg 52% 4% );--primary-color:hsl(38deg 148% 36% );--input-bg-color:hsl(95deg 58% 7% );--input-border-color:hsl(84deg 57% 24% );--panel-bg-color:hsl(95deg 57% 11% );--panel-border-color:hsl(84deg 57% 24% );--panel-border-radius:0px;--subgroup-bg-color:hsl(230deg 52% 4% );--subgroup-input-bg-color:hsl(95deg 58% 7% );--subgroup-input-border-color:hsl(84deg 57% 24% );--subpanel-bg-color:hsl(90deg 56% 8% );--subpanel-border-color:hsl(84deg 57% 24% );--subpanel-border-radius:8px;--textarea-focus-color:hsl(80deg 55% 30% );--input-focus-color:hsl(38deg 149% 35% );--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(230deg 136% 54% );--icon-color:hsl(80deg 56% 74% );--icon-hover-color:hsl(230deg 52% 4% );--icon-size:22px;--nav-bg-color:hsl(230deg 52% 98% );--nav-color:hsl(80deg 56% 74% );--nav-hover-color:hsl(230deg 52% 98% );--input-color:hsl(80deg 56% 74% );--label-color:hsl(80deg 56% 74% );--subgroup-input-color:hsl(230deg 152% 94% );--placeholder-color:hsl(84deg 57% 24% );--text-color:hsl(80deg 56% 74% );--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));
\ No newline at end of file
+--main-bg-color:hsl(230deg 52% 4%);--primary-color:hsl(38deg 148% 36%);--input-bg-color:hsl(95deg 58% 7%);--input-border-color:hsl(84deg 57% 24%);--panel-bg-color:hsl(95deg 57% 11%);--panel-border-color:hsl(84deg 57% 24%);--panel-border-radius:0px;--subgroup-bg-color:hsl(230deg 52% 4%);--subgroup-input-bg-color:hsl(95deg 58% 7%);--subgroup-input-border-color:hsl(84deg 57% 24%);--subpanel-bg-color:hsl(90deg 56% 8%);--subpanel-border-color:hsl(84deg 57% 24%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(80deg 55% 30%);--input-focus-color:hsl(38deg 149% 35%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(230deg 136% 54%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(80deg 56% 74%);--icon-hover-color:hsl(230deg 52% 4%);--icon-size:22px;--nav-bg-color:hsl(230deg 52% 98%);--nav-color:hsl(80deg 56% 74%);--nav-hover-color:hsl(230deg 52% 98%);--input-color:hsl(80deg 56% 74%);--label-color:hsl(80deg 56% 74%);--subgroup-input-color:hsl(230deg 152% 94%);--placeholder-color:hsl(84deg 57% 24%);--text-color:hsl(80deg 56% 74%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/default_cyan.css b/extensions-builtin/sd_theme_editor/themes/default_cyan.css
index be20718c..8ba9b923 100644
--- a/extensions-builtin/sd_theme_editor/themes/default_cyan.css
+++ b/extensions-builtin/sd_theme_editor/themes/default_cyan.css
@@ -1 +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
+--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%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ 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
index 63ba491d..15fdb470 100644
--- a/extensions-builtin/sd_theme_editor/themes/default_orange.css
+++ b/extensions-builtin/sd_theme_editor/themes/default_orange.css
@@ -1 +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
+--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%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/fun.css b/extensions-builtin/sd_theme_editor/themes/fun.css
index 237c6b6c..140e466f 100644
--- a/extensions-builtin/sd_theme_editor/themes/fun.css
+++ b/extensions-builtin/sd_theme_editor/themes/fun.css
@@ -1 +1 @@
---main-bg-color:#121019;--primary-color:#c0fa1e;--input-bg-color:#1c1726;--input-border-color:#4a3e65;--panel-bg-color:#2e273f;--panel-border-color:#4a3e65;--panel-border-radius:4px;--subgroup-bg-color:#121019;--subgroup-input-bg-color:#13101a;--subgroup-input-border-color:#4a3e65;--subpanel-bg-color:#1c1726;--subpanel-border-color:#4a3e65;--subpanel-border-radius:8px;--textarea-focus-color:#5a5d60;--input-focus-color:#ec1efa;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:#4a3e65;--max-padding: max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:#bfb6d2;--icon-hover-color:#121019;--icon-size:22px;--nav-bg-color:#09080d;--nav-color: #bfb6d2;--nav-hover-color:#09080d;--input-color:#fa1ee8;--label-color:#bfb6d2;--subgroup-input-color:#ffffff;--subgroup-label-color:#ffffff;--placeholder-color:#4a3e65;--text-color:#bfb6d2;
\ No newline at end of file
+--main-bg-color:hsl(253deg 22% 8%);--primary-color:hsl(76deg 96% 55%);--input-bg-color:hsl(260deg 25% 12%);--input-border-color:hsl(258deg 24% 32%);--panel-bg-color:hsl(258deg 24% 20%);--panel-border-color:hsl(258deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(253deg 22% 8%);--subgroup-input-bg-color:hsl(258deg 24% 8%);--subgroup-input-border-color:hsl(258deg 24% 32%);--subpanel-bg-color:hsl(260deg 25% 12%);--subpanel-border-color:hsl(258deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(296deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(258deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(259deg 24% 77%);--icon-hover-color:hsl(253deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(252deg 24% 4%);--nav-color:hsl(259deg 24% 77%);--nav-hover-color:hsl(252deg 24% 4%);--input-color:hsl(305deg 96% 55%);--label-color:hsl(259deg 24% 77%);--subgroup-input-color:hsl(0deg 100% 100%);--placeholder-color:hsl(258deg 24% 32%);--text-color:hsl(259deg 24% 77%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/ogxCyan.css b/extensions-builtin/sd_theme_editor/themes/ogxCyan.css
index e964136f..ba8ffe90 100644
--- a/extensions-builtin/sd_theme_editor/themes/ogxCyan.css
+++ b/extensions-builtin/sd_theme_editor/themes/ogxCyan.css
@@ -1 +1 @@
---main-bg-color:#121019;--primary-color:#1eb8fa;--input-bg-color:#1c1726;--input-border-color:#4a3e65;--panel-bg-color:#2e273f;--panel-border-color:#4a3e65;--panel-border-radius:4px;--subgroup-bg-color:#121019;--subgroup-input-bg-color:#13101a;--subgroup-input-border-color:#4a3e65;--subpanel-bg-color:#1c1726;--subpanel-border-color:#4a3e65;--subpanel-border-radius:8px;--textarea-focus-color:#5a5d60;--input-focus-color:#1eb8fa;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:#4a3e65;--max-padding: max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:#bfb6d2;--icon-hover-color:#121019;--icon-size:22px;--nav-bg-color:#09080d;--nav-color: #bfb6d2;--nav-hover-color:#09080d;--input-color:#1eb8fa;--label-color:#bfb6d2;--subgroup-input-color:#ffffff;--subgroup-label-color:#ffffff;--placeholder-color:#4a3e65;--text-color:#bfb6d2;
\ No newline at end of file
+--main-bg-color:hsl(253deg 22% 8%);--primary-color:hsl(198deg 96% 55%);--input-bg-color:hsl(260deg 25% 12%);--input-border-color:hsl(258deg 24% 32%);--panel-bg-color:hsl(258deg 24% 20%);--panel-border-color:hsl(258deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(253deg 22% 8%);--subgroup-input-bg-color:hsl(258deg 24% 8%);--subgroup-input-border-color:hsl(258deg 24% 32%);--subpanel-bg-color:hsl(260deg 25% 12%);--subpanel-border-color:hsl(258deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(198deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(258deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(259deg 24% 77%);--icon-hover-color:hsl(253deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(252deg 24% 4%);--nav-color:hsl(259deg 24% 77%);--nav-hover-color:hsl(252deg 24% 4%);--input-color:hsl(198deg 96% 55%);--label-color:hsl(259deg 24% 77%);--subgroup-input-color:hsl(0deg 100% 100%);--placeholder-color:hsl(258deg 24% 32%);--text-color:hsl(259deg 24% 77%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/ogxCyanInvert.css b/extensions-builtin/sd_theme_editor/themes/ogxCyanInvert.css
index a80dd179..49f00b26 100644
--- a/extensions-builtin/sd_theme_editor/themes/ogxCyanInvert.css
+++ b/extensions-builtin/sd_theme_editor/themes/ogxCyanInvert.css
@@ -1 +1 @@
---main-bg-color:hsl(73deg 22% 92%);--primary-color:hsl(18deg 96% 45%);--input-bg-color:hsl(80deg 25% 88%);--input-border-color:hsl(78deg 24% 68%);--panel-bg-color:hsl(78deg 24% 80%);--panel-border-color:hsl(78deg 24% 68%);--panel-border-radius:4px;--subgroup-bg-color:hsl(73deg 22% 92%);--subgroup-input-bg-color:hsl(73deg 22% 92%);--subgroup-input-border-color:hsl(78deg 24% 68%);--subpanel-bg-color:hsl(80deg 25% 88%);--subpanel-border-color:hsl(78deg 24% 68%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(30deg 3% 64%);--input-focus-color:hsl(18deg 96% 45%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(78deg 24% 68%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(79deg 24% 23%);--icon-hover-color:hsl(73deg 22% 92%);--icon-size:22px;--nav-bg-color:hsl(72deg 24% 96%);--nav-color:hsl(79deg 24% 23%);--nav-hover-color:hsl(72deg 24% 96%);--input-color:hsl(18deg 96% 45%);--label-color:hsl(79deg 24% 23%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(78deg 24% 68%);--text-color:hsl(79deg 24% 23%);
\ No newline at end of file
+--main-bg-color:hsl(73deg 22% 92%);--primary-color:hsl(18deg 96% 45%);--input-bg-color:hsl(80deg 25% 88%);--input-border-color:hsl(78deg 24% 68%);--panel-bg-color:hsl(78deg 24% 80%);--panel-border-color:hsl(78deg 24% 68%);--panel-border-radius:4px;--subgroup-bg-color:hsl(73deg 22% 92%);--subgroup-input-bg-color:hsl(73deg 22% 92%);--subgroup-input-border-color:hsl(78deg 24% 68%);--subpanel-bg-color:hsl(80deg 25% 88%);--subpanel-border-color:hsl(78deg 24% 68%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(30deg 3% 64%);--input-focus-color:hsl(18deg 96% 45%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(78deg 24% 68%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(79deg 24% 23%);--icon-hover-color:hsl(73deg 22% 92%);--icon-size:22px;--nav-bg-color:hsl(72deg 24% 96%);--nav-color:hsl(79deg 24% 23%);--nav-hover-color:hsl(72deg 24% 96%);--input-color:hsl(18deg 96% 45%);--label-color:hsl(79deg 24% 23%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(78deg 24% 68%);--text-color:hsl(79deg 24% 23%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/ogxRed.css b/extensions-builtin/sd_theme_editor/themes/ogxRed.css
index 8e503167..9ed9d823 100644
--- a/extensions-builtin/sd_theme_editor/themes/ogxRed.css
+++ b/extensions-builtin/sd_theme_editor/themes/ogxRed.css
@@ -1 +1 @@
---main-bg-color:#121019;--primary-color:#fa1e4e;--input-bg-color:#1c1726;--input-border-color:#4a3e65;--panel-bg-color:#2e273f;--panel-border-color:#4a3e65;--panel-border-radius:4px;--subgroup-bg-color:#121019;--subgroup-input-bg-color:#13101a;--subgroup-input-border-color:#4a3e65;--subpanel-bg-color:#1c1726;--subpanel-border-color:#4a3e65;--subpanel-border-radius:8px;--textarea-focus-color:#5a5d60;--input-focus-color:#fa1e4e;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:#4a3e65;--max-padding: max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:#bfb6d2;--icon-hover-color:#121019;--icon-size:22px;--nav-bg-color:#09080d;--nav-color: #bfb6d2;--nav-hover-color:#09080d;--input-color:#fa1e4e;--label-color:#bfb6d2;--subgroup-input-color:#ffffff;--subgroup-label-color:#ffffff;--placeholder-color:#4a3e65;--text-color:#bfb6d2;
\ No newline at end of file
+--main-bg-color:hsl(253deg 22% 8%);--primary-color:hsl(347deg 96% 55%);--input-bg-color:hsl(260deg 25% 12%);--input-border-color:hsl(258deg 24% 32%);--panel-bg-color:hsl(258deg 24% 20%);--panel-border-color:hsl(258deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(253deg 22% 8%);--subgroup-input-bg-color:hsl(258deg 24% 8%);--subgroup-input-border-color:hsl(258deg 24% 32%);--subpanel-bg-color:hsl(260deg 25% 12%);--subpanel-border-color:hsl(258deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(347deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(258deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(259deg 24% 77%);--icon-hover-color:hsl(253deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(252deg 24% 4%);--nav-color:hsl(259deg 24% 77%);--nav-hover-color:hsl(252deg 24% 4%);--input-color:hsl(347deg 96% 55%);--label-color:hsl(259deg 24% 77%);--subgroup-input-color:hsl(0deg 100% 100%);--placeholder-color:hsl(258deg 24% 32%);--text-color:hsl(259deg 24% 77%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
\ No newline at end of file
diff --git a/html/svg/add-box-line.svg b/html/svg/add-box-line.svg
new file mode 100644
index 00000000..dc56100a
--- /dev/null
+++ b/html/svg/add-box-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/html/svg/checkbox-blank-line.svg b/html/svg/checkbox-blank-line.svg
new file mode 100644
index 00000000..d6c2aa6d
--- /dev/null
+++ b/html/svg/checkbox-blank-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/html/svg/checkbox-indeterminate-line.svg b/html/svg/checkbox-indeterminate-line.svg
new file mode 100644
index 00000000..b4c69c05
--- /dev/null
+++ b/html/svg/checkbox-indeterminate-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/html/svg/menu-add-fill.svg b/html/svg/menu-add-fill.svg
new file mode 100644
index 00000000..21ee2c54
--- /dev/null
+++ b/html/svg/menu-add-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index ff6d757b..04294f8d 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -139,7 +139,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
var divProgress = document.createElement('div')
divProgress.className='progressDiv'
- divProgress.style.display = opts.show_progressbar ? "" : "none"
+ divProgress.style.display = opts.show_progressbar ? "block" : "none"
var divInner = document.createElement('div')
divInner.className='progress'
diff --git a/javascript/ui.js b/javascript/ui.js
index 0464aef3..931a2252 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -290,7 +290,7 @@ onUiUpdate(function(){
*/
/* auto grow textarea */
- gradioApp().querySelectorAll('[id $= "_prompt"] textarea').forEach(function (elem) {
+ gradioApp().querySelectorAll('[id $= "_prompt"] textarea, [id^="setting_"] textarea').forEach(function (elem) {
elem.style.boxSizing = 'border-box';
var offset = elem.offsetHeight - elem.clientHeight;
elem.addEventListener('input', function (e) {
@@ -589,6 +589,41 @@ onUiUpdate(function(){
}
})
+
+ const settings_submit = gradioApp().querySelector('#settings_submit');
+
+ function add2quickSettings(id, checked){
+ const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
+ let field_settings = setting_quicksettings.value.replace(" ", "");
+ if(checked){
+ field_settings += ","+id;
+ }else{
+ field_settings = field_settings.replaceAll(id, ",");
+ }
+ field_settings = field_settings.replace(/,{2,}/g, ',');
+ setting_quicksettings.value = field_settings;
+
+ const iEvent = new Event("input");
+ Object.defineProperty(iEvent, "target", {value: setting_quicksettings})
+ setting_quicksettings.dispatchEvent(iEvent);
+
+ const cEvent = new Event("click");//submit
+ Object.defineProperty(cEvent, "target", {value: settings_submit})
+ settings_submit.dispatchEvent(cEvent);
+ //settings_submit.click();
+
+
+ //console.log(id + " - " + checked);
+
+ }
+ gradioApp().querySelectorAll('[id^="add2quick_"]').forEach(function (elem){
+ let tid = elem.id.split('add2quick_setting_')[1];
+ let elem_input = gradioApp().querySelector('#'+elem.id+' input');
+ elem_input.addEventListener('click', function (e) {
+ add2quickSettings(tid, e.target.checked);
+ })
+ })
+
/* anapnoe ui end */
diff --git a/modules/ui.py b/modules/ui.py
index 5bb05735..13a71bfb 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -1519,14 +1519,26 @@ def create_ui():
if info.refresh is not None:
if is_quicksettings:
- res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
- create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key)
+ with FormRow():
+ with gr.Box():
+ with gr.Row(elem_id=f'{elem_id}_row-collapse-one'):
+ res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
+ create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key)
+ with FormRow():
+ gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=True, interactive=True)
else:
with FormRow():
- res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
- create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key)
+ with gr.Box():
+ with gr.Row(elem_id=f'{elem_id}_row-collapse-one'):
+ res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
+ create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key)
+ with FormRow():
+ gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=False, interactive=True)
else:
- res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
+ with FormRow():
+ res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
+ gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=is_quicksettings, interactive=True)
+
return res
@@ -1596,7 +1608,7 @@ def create_ui():
current_row.__exit__()
current_tab.__exit__()
- #gr.Group()
+ gr.Group()
current_tab = gr.TabItem(elem_id="settings_{}".format(elem_id), label=text)
current_tab.__enter__()
current_row = gr.Column(variant='panel', elem_id="{}_settings_2img_settings".format(elem_id))
diff --git a/style.css b/style.css
index f002cf2b..c9566a9a 100644
--- a/style.css
+++ b/style.css
@@ -113,8 +113,80 @@ body {
color: inherit;
}
-/* icons */
+[id^="add2quick_"] {
+ min-width: unset !important;
+ max-width: 42px;
+}
+[id^="add2quick_"] label {
+ display: block;
+ position: relative;
+ cursor: pointer;
+ line-height: 25px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ margin: auto !important;
+ padding: 0 !important;
+}
+
+/* Hide the browser's default checkbox */
+[id^="add2quick_"] input {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+}
+
+/* Create a custom checkbox */
+[id^="add2quick_"] span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 25px;
+ width: 25px;
+ -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
+ mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
+ background-color: var(--input-color);
+ padding: 0;
+ margin: 0 !important;
+ opacity:0.5;
+}
+
+
+/* On mouse-over, add a grey background color */
+[id^="add2quick_"] label:hover input ~ span {
+ background-color: var(--icon-color);
+}
+
+/* When the checkbox is checked, add a blue background */
+[id^="add2quick_"] label input:checked ~ span {
+ -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
+ mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
+ background-color: var(--icon-color);
+ opacity:1.0;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+[id^="add2quick_"] label span:after {
+ content: "";
+ position: absolute;
+ display: none;
+}
+
+/* Show the checkmark when checked */
+[id^="add2quick_"] label input:checked ~ span:after {
+ display: block;
+}
+
+#add2quick_setting_quicksettings{
+ display:none;
+}
+
+
+/* icons */
[id^="refresh_"],
[id$="_refresh"],
[id$="_clear_prompt"],
@@ -140,7 +212,6 @@ body {
}
-
[id$="_refresh"]::before,
[id^="refresh_"]::before,
[id$="_clear_prompt"]::before,
@@ -175,6 +246,7 @@ body {
{
background-color: var(--primary-color);
}
+
[id$="_refresh"]:hover::before,
[id^="refresh_"]:hover::before,
[id$="_clear_prompt"]:hover::before,
@@ -306,6 +378,7 @@ body {
+
.livePreview > img,
#img2img_gallery .overflow-y-auto,
#txt2img_gallery .overflow-y-auto
@@ -534,10 +607,11 @@ body {
#quicksettings_overflow > div {
margin-bottom: var(--outside-gap-size);
}
+/*
#quicksettings_overflow > div button{
height:auto;
}
-
+*/
#quicksettings {
align-items: center;
flex-direction: row;
@@ -558,9 +632,11 @@ body {
#quick_row_sd_model_checkpoint div {
border: 0;
background: 0;
- padding: 0;
+ padding: 0 !important;
}
+
+
#quick_row_sd_model_checkpoint span {
display:none;
}
@@ -597,7 +673,7 @@ min-height: 34px;
width: var(--icon-size);
height: var(--icon-size);
-webkit-mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%;
- mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%;
+ mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%;
cursor: pointer;
position: relative;
left: 50%;
@@ -1170,9 +1246,12 @@ dark .gr-button-secondary:hover {
border-radius:0!important;
background-color:transparent!important;
overflow: visible !important;
+
}
+
+
/*[id$="-collapse-all"] div:not([class*="input"]):not(span):not(label):not([class*="gr-box"])*/
[id$="-collapse-all"] div:not([class*="input"])
{
@@ -1184,11 +1263,21 @@ dark .gr-button-secondary:hover {
}
+[id$="-collapse"] button,
+[id$="-collapse-one"] button,
[id$="-collapse-all"] button
{
align-self: flex-end;
}
+[id$="-collapse"] fieldset,
+[id$="-collapse-one"] fieldset,
+[id$="-collapse-all"] fieldset
+{
+ padding:0;
+}
+
+
/* word wrap for pre elements */
@@ -1591,9 +1680,44 @@ canvas[key=mask] {
display:none;
}
+[id^="setting_postprocessing"] input
+{
+ margin:0;
+ margin-right:8px;
+}
+
+#quicksettings_overflow > div > div > div:nth-child(2),
+[id$="settings_2img_settings"] > div > div:nth-child(2)
+{
+ flex-shrink: 1 !important;
+ flex-grow: 0 !important;
+ flex-basis: 0% !important;
+ min-width: 43px;
+ position: relative;
+ margin-left: -1px;
+}
+
+#quicksettings_overflow > div > div > div:nth-child(2) > div,
+[id$="settings_2img_settings"] > div > div:nth-child(2) > div{
+ min-width:unset !important;
+}
+
+#quicksettings_overflow > div > div,
+[id$="settings_2img_settings"] > div{
+ gap:0 !important;
+}
+
+#quick_row_sd_model_checkpoint > div > div:nth-child(2){
+ display:none;
+}
+
+
+
+/*
[id$="settings_2img_settings"] button {
height:auto;
}
+*/
#settings>div {
padding-top:0;
}
@@ -1832,7 +1956,7 @@ canvas[key=mask] {
[id$="2img_styles"] label
{
min-height: 34px;
- width: 100%;
+ width: 100% !important;
display: flex;
align-items: center;
background-color: var(--main-bg-color);
@@ -2323,6 +2447,7 @@ ul.list-none {
#tab_extensions table {
border-collapse: collapse;
+ width: 100%;
}
#tab_extensions table td,
@@ -2340,6 +2465,10 @@ ul.list-none {
max-width: 16em;
}
+#extensions_installed_top div{
+ display:none;
+}
+
#tab_extensions input[disabled=disabled] {
opacity: .5;
}
@@ -2425,8 +2554,10 @@ ul.list-none {
}
#settings_result {
- height: 1.4em;
- margin: 0 1.2em;
+ height: 20px !important;
+ width: 100%;
+ text-align: center;
+ color:var(--primary-color);
}
#settings_ui_theme > div > div
@@ -2439,6 +2570,10 @@ ul.list-none {
max-width:30%;
}
+#settings > div > .bg-white {
+ color: var(--primary-color);
+}
+
/******************/
/* lightboxModal */
/******************/
@@ -2731,6 +2866,20 @@ ul.list-none {
[id$="settings_2img_settings"] {
max-height: none;
}
+
+ #tab_extensions td,
+ #tab_extensions th {
+ display:none;
+ }
+
+ #tab_extensions td:first-child,
+ #tab_extensions td:last-child,
+ #tab_extensions th:first-child,
+ #tab_extensions th:last-child
+ {
+ display:table-cell;
+ }
+