Ops add/remove to QuickSettings interactively

This commit is contained in:
anapnoe
2023-02-26 13:58:58 +02:00
parent eb99918ef4
commit 8a8b5f6087
17 changed files with 225 additions and 79 deletions
@@ -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%);
--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;
@@ -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;
@@ -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));
--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;
@@ -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%);
--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;
@@ -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%);
--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;
@@ -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;
--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;
@@ -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;
--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;
@@ -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%);
--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;
@@ -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;
--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;
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h14V5H5zm6 6V7h2v4h4v2h-4v4h-2v-4H7v-2h4z"/></svg>

After

Width:  |  Height:  |  Size: 257 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h14V5H5z"/></svg>

After

Width:  |  Height:  |  Size: 224 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h14V5H5zm2 6h10v2H7v-2z"/></svg>

After

Width:  |  Height:  |  Size: 239 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 15l-.001 3H21v2h-3.001L18 23h-2l-.001-3H13v-2h2.999L16 15h2zm-7 3v2H3v-2h8zm10-7v2H3v-2h18zm0-7v2H3V4h18z"/></svg>

After

Width:  |  Height:  |  Size: 247 B

+1 -1
View File
@@ -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'
+36 -1
View File
@@ -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 */
+18 -6
View File
@@ -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))
+157 -8
View File
@@ -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;
}