From 9afe6b21a2e97b4f505e4735e9039b4996dd5f50 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 5 May 2023 05:33:42 -0500
Subject: [PATCH] Adapted theme from stable-diffusion-webui-ux

---
 src/lib/components/BlockContainer.svelte  |  18 +-
 src/lib/components/ComfyApp.svelte        |   9 +-
 src/lib/components/ComfyProperties.svelte |   4 +
 src/lib/components/WidgetContainer.svelte |   4 +-
 src/lib/nodes/ComfyActionNodes.ts         |  10 +-
 src/lib/nodes/ComfyWidgetNodes.ts         |   3 -
 src/lib/stores/layoutState.ts             |  20 +-
 src/lib/widgets/ButtonWidget.svelte       |   4 +-
 src/lib/widgets/ComboWidget.svelte        |   3 +-
 src/lib/widgets/ComfyGalleryWidget.svelte |   0
 src/lib/widgets/GalleryWidget.svelte      |   4 +-
 src/lib/widgets/RangeWidget.svelte        |   2 +-
 src/lib/widgets/TextWidget.svelte         |   2 +-
 src/scss/global.scss                      |   1 +
 src/scss/ux.scss                          | 759 ++++++++++++++++++++++
 15 files changed, 814 insertions(+), 29 deletions(-)
 delete mode 100644 src/lib/widgets/ComfyGalleryWidget.svelte
 create mode 100644 src/scss/ux.scss

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index ffcbe2e..6329b59 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -42,7 +42,7 @@
 
 {#if container && children}
     {#key $attrsChanged}
-        <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
+        <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')} z-index{zIndex}"
              class:hide-block={container.attrs.blockVariant === "hidden"}
              class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
              class:root-container={zIndex === 0}
@@ -69,7 +69,7 @@
                     on:finalize="{handleFinalize}"
                     >
                     {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                        {@const hidden = item?.node?.properties?.hidden}
+                        {@const hidden = item?.attrs?.hidden}
                         <div class="animation-wrapper"
                              class:hidden={hidden}
                              animate:flip={{duration:flipDurationMs}}>
@@ -140,6 +140,18 @@
  .container {
      display: flex;
 
+     > :global(*) {
+         border-radius: 0;
+     }
+
+     > :global(.padded) {
+         padding: 10px 12px 0px 10px;
+
+         &:last-child {
+             padding-bottom: 12px;
+         }
+     }
+
      :global(.block) {
          height: fit-content;
      }
@@ -214,7 +226,7 @@
 
  .animation-wrapper {
      position: relative;
-     flex-grow: 1;
+     flex-grow: 100;
  }
 
  .handle-widget:hover {
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index a6dfc8a..f11ce46 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -3,6 +3,7 @@
  import { get } from "svelte/store";
  import { Pane, Splitpanes } from 'svelte-splitpanes';
  import { Button } from "@gradio/button";
+ import { BlockTitle } from "@gradio/atoms";
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp, { type SerializedAppState } from "./ComfyApp";
  import { Checkbox } from "@gradio/form"
@@ -222,7 +223,9 @@
         <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
         <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/>
         <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
-        <label for="enable-ui-editing">Enable UI Editing</label>
+        <label class="label" for="enable-ui-editing">
+            <BlockTitle>Enable UI Editing</BlockTitle>
+        </label>
         <select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>
             <option value="disabled">Disabled</option>
             <option value="widgets">Widgets</option>
@@ -326,4 +329,8 @@
      display: flex;
      position: relative;
  }
+
+ label.label > :global(span) {
+     top: 20%;
+ }
 </style>
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 285f449..6f874f2 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -90,6 +90,7 @@
                                 <TextBox
                                     value={target.attrs[spec.name]}
                                     on:change={(e) => updateAttribute(spec, e.detail)}
+                                    on:input={(e) => updateAttribute(spec, e.detail)}
                                     label={spec.name}
                                     max_lines={1}
                                     />
@@ -107,6 +108,7 @@
                                         value={target.attrs[spec.name]}
                                         step={1}
                                         on:change={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
+                                        on:input={(e) => updateAttribute(spec, e.currentTarget.valueAsNumber)}
                                     />
                                 </label>
                             {:else if spec.type === "enum"}
@@ -133,6 +135,7 @@
                                     <TextBox
                                         value={node.properties[spec.name]}
                                         on:change={(e) => updateProperty(spec, e.detail)}
+                                        on:input={(e) => updateAttribute(spec, e.detail)}
                                         label={spec.name}
                                         max_lines={1}
                                         />
@@ -151,6 +154,7 @@
                                                 value={node.properties[spec.name]}
                                                 step={1}
                                                 on:change={(e) => updateProperty(spec, e.currentTarget.valueAsNumber)}
+                                                on:input={(e) => updateProperty(spec, e.currentTarget.valueAsNumber)}
                                             />
                                         </div>
                                     </label>
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 59c9f6d..261e414 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -68,11 +68,11 @@
                  class:edit={edit}
                 class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
                 class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
-                class:hidden={widget.node.properties.hidden}
+                class:hidden={widget.attrs.hidden}
                 >
                 <svelte:component this={widget.node.svelteComponentType} {widget} />
             </div>
-            {#if widget.node.properties.hidden && edit}
+            {#if widget.attrs.hidden && edit}
                 <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>
             {/if}
             {#if showHandles}
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index 971c029..2110285 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -3,12 +3,12 @@ import ComfyGraphNode from "./ComfyGraphNode";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import type { SerializedPrompt } from "$lib/components/ComfyApp";
 
-export interface ComfyAfterQueuedAction extends Record<any, any> {
+export interface ComfyAfterQueuedEventProperties extends Record<any, any> {
     prompt: SerializedPrompt
 }
 
-export class ComfyAfterQueuedAction extends ComfyGraphNode {
-    override properties: ComfyCopyActionProperties = {
+export class ComfyAfterQueuedEvent extends ComfyGraphNode {
+    override properties: ComfyAfterQueuedEventProperties = {
         prompt: null
     }
 
@@ -41,8 +41,8 @@ export class ComfyAfterQueuedAction extends ComfyGraphNode {
 }
 
 LiteGraph.registerNodeType({
-    class: ComfyAfterQueuedAction,
-    title: "Comfy.AfterQueuedAction",
+    class: ComfyAfterQueuedEvent,
+    title: "Comfy.AfterQueuedEvent",
     desc: "Triggers a 'bang' event when a prompt is queued.",
     type: "actions/after_queued"
 })
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index cd4ad72..7c127a7 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -15,7 +15,6 @@ import type { FileData as GradioFileData } from "@gradio/upload";
 import queueState from "$lib/stores/queueState";
 
 export interface ComfyWidgetProperties extends Record<string, any> {
-    hidden?: boolean,
     defaultValue: any
 }
 
@@ -60,7 +59,6 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     constructor(name: string, value: T) {
         const color = LGraphCanvas.node_colors["blue"]
         super(name)
-        this.setProperty("hidden", false)
         this.value = writable(value)
         this.color ||= color.color
         this.bgColor ||= color.bgColor
@@ -215,7 +213,6 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     override onConfigure(o: SerializedLGraphNode) {
         this.value.set((o as any).comfyValue);
         this.shownOutputProperties = (o as any).shownOutputProperties;
-        this.setProperty("hidden", false)
     }
 }
 
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 5c3f0c2..c37a316 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -28,6 +28,7 @@ export type AttributesSpec = {
     editable: boolean,
 
     values?: string[],
+    hidden?: boolean
 }
 
 export type AttributesCategorySpec = {
@@ -47,6 +48,12 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 location: "widget",
                 editable: true,
             },
+            {
+                name: "hidden",
+                type: "boolean",
+                location: "widget",
+                editable: true
+            },
             {
                 name: "direction",
                 type: "enum",
@@ -72,12 +79,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
     {
         categoryName: "behavior",
         specs: [
-            {
-                name: "hidden",
-                type: "boolean",
-                location: "nodeProps",
-                editable: true
-            },
             {
                 name: "min",
                 type: "number",
@@ -106,7 +107,8 @@ export type Attributes = {
     title: string,
     showTitle: boolean,
     classes: string,
-    blockVariant?: "block" | "hidden"
+    blockVariant?: "block" | "hidden",
+    hidden?: boolean
 }
 
 export interface IDragItem {
@@ -353,7 +355,9 @@ function groupItems(dragItems: IDragItem[], attrs: Partial<Attributes> = {}): Co
             index = indexFound
     }
 
-    const container = addContainer(parent as ContainerLayout, attrs, index)
+    const title = dragItems.length <= 1 ? "" : "Group";
+
+    const container = addContainer(parent as ContainerLayout, { title, ...attrs }, index)
 
     for (const item of dragItems) {
         moveItem(item, container)
diff --git a/src/lib/widgets/ButtonWidget.svelte b/src/lib/widgets/ButtonWidget.svelte
index b2b8b6e..f2a0dcc 100644
--- a/src/lib/widgets/ButtonWidget.svelte
+++ b/src/lib/widgets/ButtonWidget.svelte
@@ -28,7 +28,7 @@
  }
 </script>
 
-<div class="wrapper gr-button">
+<div class="wrapper gradio-button">
     {#if node !== null}
         <Button on:click={onClick} variant="primary" {style}>
             {widget.attrs.title}
@@ -36,7 +36,7 @@
     {/if}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
      padding: 2px;
      width: 100%;
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index a99f75c..cfc636f 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -63,7 +63,7 @@
  }
 </script>
 
-<div class="wrapper gr-combo" class:updated={werePropsChanged}>
+<div class="wrapper comfy-combo" class:updated={werePropsChanged}>
     {#key $propsChanged}
         {#if node !== null && nodeValue !== null}
             <label>
@@ -75,6 +75,7 @@
                     items={node.properties.values}
                     disabled={node.properties.values.length === 0}
                     clearable={false}
+                    showChevron={true}
                     on:change
                     on:select
                     on:filter
diff --git a/src/lib/widgets/ComfyGalleryWidget.svelte b/src/lib/widgets/ComfyGalleryWidget.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index ab32f21..a304187 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -44,14 +44,14 @@
  }
 
 </script>
-<div class="wrapper comfy-gallery-widget gr-gallery" bind:this={element}>
+<div class="wrapper comfy-gallery-widget gradio-gallery" bind:this={element}>
     {#if widget && node && nodeValue}
         <Block variant="solid" padding={false}>
             <div class="padding">
                 <Gallery
                     bind:value={$nodeValue}
                     label={widget.attrs.title}
-                    show_label={true}
+                    show_label={widget.attrs.title !== ""}
                     {style}
                     root={""}
                     root_url={""}
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index 6e50522..2ce7780 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -39,7 +39,7 @@
  }
 </script>
 
-<div class="wrapper gr-range">
+<div class="wrapper gradio-slider">
     {#if node !== null && option !== null}
         <Range
             bind:value={option}
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index 31e8f63..3b50ed3 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -27,7 +27,7 @@
  }
 </script>
 
-<div class="wrapper gr-textbox">
+<div class="wrapper gradio-textbox">
     {#if node !== null && nodeValue !== null}
         <TextBox
             bind:value={$nodeValue}
diff --git a/src/scss/global.scss b/src/scss/global.scss
index b63cbc6..ac9b70f 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -1 +1,2 @@
 @import "gradio";
+@import "ux";
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
new file mode 100644
index 0000000..fe17f4c
--- /dev/null
+++ b/src/scss/ux.scss
@@ -0,0 +1,759 @@
+/*
+Theme Name: DarkUX
+Author: anapnoe
+Author URI: https://github.com/anapnoe/stable-diffusion-webui
+Version: 1.0
+License: GNU General Public License
+*/
+:root{
+	--ae-extra-networks-card-size: 1;
+	--ae-extra-networks-card-real-size: calc(var(--ae-extra-networks-card-size) * 14vh);
+	--ae-extra-networks-visible-rows: 2;
+	--ae-extra-networks-height: calc((var(--ae-extra-networks-card-real-size) * var(--ae-extra-networks-visible-rows)) + ( var(--ae-inside-padding-size) * 2 ) );
+	--ae-extra-networks-name-size: calc(var(--ae-extra-networks-card-size) * 1em);
+
+	--ae-top-header-padding-top:16px;
+	--ae-top-header-padding-bottom:16px;
+	--ae-top-header-inner-height:38px;
+	--ae-top-header-height: calc( var(--ae-top-header-padding-top) + var(--ae-top-header-inner-height) + var(--ae-top-header-padding-bottom) );
+
+	--ae-container-padding:16px;
+	--ae-footer-height: calc( 32px + (var(--ae-container-padding) * 2) );
+	--ae-gallery-bottom-height: calc(24px + (var(--ae-max-padding) * 2) + 16px + (var(--ae-inside-padding-size) * 2) + (var(--ae-outside-gap-size)* 3 ));
+
+	--ae-subtract-total: calc( var(--ae-top-header-height) + var(--ae-footer-height));
+	--ae-container-height : calc(100vh - var(--ae-subtract-total));
+	--ae-container-total-height : calc( var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) - (var(--ae-inside-padding-size) * 2));
+	--ae-container-height-gap : calc( var(--ae-container-height) - (var(--ae-outside-gap-size) * 2));
+	--ae-container-height-pad : calc( var(--ae-container-height) - (var(--ae-inside-padding-size) * 2));
+
+
+	--ae-processing-border : 2px;
+	--ae-processing-border-double: var(--ae-processing-border) * 2;
+
+	--ae-slider-bg-overlay : transparent;
+
+
+	--ae-border-width: 1px;
+	--ae-accordion-vertical-padding: max(8px, var(--ae-inside-padding-size));
+	--ae-accordion-horizontal-padding: max(4px, var(--ae-inside-padding-size));
+	--ae-accordion-line-height: 24px;
+	--ae-accordion-header-height: calc(var(--ae-accordion-line-height) + var(--ae-accordion-vertical-padding) * 2);
+
+	--ae-results-height: calc(100vh - (var(--ae-top-header-height) + var(--ae-footer-height) + var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 + 38px));
+
+
+}
+
+:root{
+    --ae-main-bg-color:hsl(0deg 0% 10%);
+    --ae-primary-color:hsl(168deg 96% 42%);
+    --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-panel-border-width:1px;
+    --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 96% 42%);
+    --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(0deg 100% 100%);
+    --ae-placeholder-color:hsl(214deg 5% 30%);
+    --ae-text-color:hsl(210deg 4% 80%);
+    --ae-mobile-outside-gap-size:3px;
+    --ae-mobile-inside-padding-size:3px;
+    --ae-frame-bg-color:hsl(225deg 6% 13%);
+    --ae-modal-bg-color:hsl(0deg 0% 10%);
+    --ae-modal-icon-color:hsl(168deg 97% 41%);
+    --ae-selected-color:hsl(42deg, 100%, 42%);
+}/*BREAKPOINT_CSS_CONTENT*/
+
+@media only screen and (max-width: 860px) {
+	:root{
+		--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);
+		--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);
+	}
+}
+
+body {
+    background-color: var(--ae-main-bg-color) !important;
+}
+
+#main {
+    position: relative;
+    margin: auto;
+    padding: var(--size-4);
+    padding-top: 0;
+    width: 100%;
+    min-height: 100vh !important;
+    min-width: unset !important;
+    max-width: unset !important;
+    background-color: var(--ae-main-bg-color);
+}
+
+.v-pane {
+    gap: var(--ae-outside-gap-size) !important;
+}
+
+.container {
+    &.selected {
+        background: var(--ae-primary-color) !important;
+        > .block.padded {
+            background: var(--ae-primary-color) !important;
+        }
+    }
+    > .block {
+        background: var(--ae-panel-bg-color) !important;
+        border-radius: var(--ae-panel-border-radius) !important;
+    }
+    &.z-index0 {
+        > .block {
+            background: var(--ae-main-bg-color) !important;
+        }
+    }
+    &.z-index1, &.z-index2 {
+        // padding: var(--ae-outside-gap-size);
+        border: 1px solid var(--ae-panel-border-color);
+        > .block {
+            background: var(--ae-frame-bg-color) !important;
+        }
+    }
+
+    &:not(.edit) {
+        > .block {
+            border: solid var(--ae-panel-border-width) var(--ae-panel-border-color) !important;
+        }
+    }
+}
+
+ .handle {
+     &.handle-hidden {
+         background-color: hsla(0deg 84% 60% / 70%);
+     }
+ }
+
+.widget.selected {
+    background: var(--ae-primary-color) !important;
+}
+
+.animation-wrapper > .widget {
+    background: var(--ae-panel-bg-color) !important;
+}
+
+.container.z-index2 > .block > .v-pane > .animation-wrapper > .widget:not(.edit) {
+    padding: var(--ae-inside-padding-size) !important;
+    border: 1px solid var(--ae-panel-border-color) !important;
+}
+
+.widget:has(> .gradio-button) {
+     height: 100%;
+
+     .gradio-button {
+         height: 100%;
+
+         button {
+             height: 100%;
+         }
+     }
+}
+
+.gradio-gallery > .block {
+	background: var(--ae-main-bg-color);
+	border-color: var(--ae-panel-border-color);
+    border-radius: 0px;
+
+    .thumbnail-item {
+        box-shadow: none !important;
+        border: 1px solid var(--ae-panel-border-color) !important;
+        border-radius: 0 !important;
+        background: var(--ae-main-bg-color)!important;
+        aspect-ratio: unset !important;
+        overflow: visible !important;
+        object-fit: contain !important;
+    }
+
+    .preview {
+        background: var(--ae-main-bg-color);
+
+        button {
+            outline: none!important;
+            box-shadow: none!important;
+            border: 1px solid var(--ae-input-border-color)!important;
+            border-radius: var(--ae-panel-border-radius)!important;
+            background: var(--ae-input-bg-color)!important;
+            text-align: left!important;
+            min-width: unset;
+
+            &:hover {
+                color: var(--ae-input-color)!important;
+            }
+        }
+    }
+}
+
+.gradio-gallery .preview.fixed-height {
+    height: auto;
+    min-height: auto;
+    width: 100%;
+    min-width: 100%;
+    max-height: calc(var(--container-height) - 4px);
+}
+
+/* small info upload*/
+div.float {
+    background: var(--ae-main-bg-color)!important;
+    border: 0 !important;
+    color: var(--ae-primary-color)!important;
+}
+
+.widget.edit {
+    border-width: 2px;
+    border-color: var(--ae-primary-color) !important;
+}
+
+.target-name {
+    background: var(--ae-subpanel-bg-color);
+    border-color: var(--ae-subpanel-border-color);
+
+    .title, .type {
+        color: var(--ae-label-color)
+    }
+}
+
+ .category-name {
+    background: var(--ae-panel-bg-color) !important;
+    border-color: var(--ae-panel-border-color) !important;
+
+    .title, .type {
+        color: var(--ae-label-color)
+    }
+ }
+
+ .props-entry {
+     border-width: 1px;
+     border-left: 1px var(--ae-panel-border-color) !important;
+     border-right: 1px var(--ae-panel-border-color) !important;
+ }
+
+// .container > .block {
+//     box-shadow: none !important;
+//     border-color: var(--ae-panel-border-color) !important;
+//     border-radius: 0 !important;
+//     background: var(--ae-input-bg-color) !important;
+
+//     > .v-pane {
+//         box-shadow: none !important;
+//         border-color: var(--ae-panel-border-color) !important;
+//         border-radius: 0 !important;
+//         background: var(--ae-input-bg-color) !important;
+//     }
+// }
+
+.block.gradio-accordion:hover .label-wrap {
+	color: var(--ae-main-bg-color) !important;
+	background-color: var(--ae-primary-color) !important;
+}
+
+.block.gradio-accordion > div.wrap {
+	pointer-events: all !important;
+	cursor: pointer;
+	width: auto !important;
+    height: var(--ae-accordion-header-height)!important;
+	z-index: 1;
+	left: 0 !important;
+    top: 0 !important;
+    opacity: 0 !important;
+
+}
+
+.form>.gradio-row>.form{
+	border:0 !important;
+}
+.padded {
+    padding: var(--ae-inside-padding-size) !important
+}
+.gradio-row,
+.gap {
+    gap: var(--ae-outside-gap-size) !important
+}
+button.tool {
+    max-width: 34px;
+    min-height: 34px;
+    min-width: 34px !important;
+}
+
+div.block.padded {
+    /*box-shadow: var(--block-shadow);*/
+    border-width: var(--ae-border-width);
+    border-color: var(--ae-panel-border-color);
+    border-radius: var(--ae-panel-border-radius) !important;
+    background: var(--ae-panel-bg-color);
+    /*width: 100%;
+    line-height: var(--line-sm);*/
+}
+fieldset.block.padded
+{
+    background-color: var(--ae-panel-bg-color) !important;
+	/*border-width: var(--ae-border-width) !important;*/
+    /*border-color: var(--ae-panel-border-color) !important;*/
+    border-radius: var(--ae-panel-border-radius) !important;
+}
+
+div.svelte-b6y5bg,
+div.gradio-row>.form{
+    /*box-shadow: var(--block-shadow);*/
+    border-width: var(--ae-border-width) !important;
+    border-color: var(--ae-panel-border-color) !important;
+    border-radius: var(--ae-panel-border-radius) !important;
+    background: var(--ae-panel-border-color) !important;
+    /*width: 100%;
+    line-height: var(--line-sm);*/
+}
+
+.block.gradio-dropdown,
+.block.gradio-slider,
+.block.gradio-checkbox,
+.block.gradio-textbox,
+.block.gradio-radio,
+.block.gradio-checkboxgroup,
+.block.gradio-number,
+.block.gradio-colorpicker
+{
+    border-width: 0;
+    box-shadow: none !important;
+}
+
+.wrapper.gradio-textbox textarea {
+    overflow-y: scroll;
+    box-sizing: border-box;
+}
+
+.gradio-dropdown input{
+	margin:0 !important;
+}
+
+.block.gradio-dropdown span.single-select{
+	color: var(--ae-input-color)!important;
+}
+.dropdown-arrow.svelte-p5edak {
+    fill: var(--ae-input-color)!important;
+}
+
+.wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label,
+.wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label,
+button.tool.secondary,
+button.secondary,
+.gradio-dropdown label .wrap,
+input[type=text],
+input[type=password],
+input[type=email],
+textarea,
+input[type=number],
+select {
+    outline: none!important;
+    box-shadow: none!important;
+    border: 1px solid var(--ae-input-border-color)!important;
+    border-radius: var(--ae-panel-border-radius)!important;
+    background: var(--ae-input-bg-color)!important;
+    color: var(--ae-input-color)!important;
+	text-align: left!important;
+	min-width: unset;
+}
+
+select {
+    appearance: auto;
+}
+
+select:after{
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #f00;
+  position: absolute;
+  top: 40%;
+  right: 5px;
+  content: "";
+  z-index: 98;
+ }
+
+button.tool.secondary,
+button.secondary{
+	text-align: center!important;
+}
+
+.gradio-container-3-28-1 .prose * {
+    color: var(--ae-label-color);
+}
+
+.gradio-container-3-23-0 .prose code {
+    background-color: var(--ae-panel-bg-color);
+    border-radius: var(--ae-panel-bg-color);
+    border: 1px solid var(--ae-panel-border-color);
+    padding: 0 !important;
+    margin: 0!important;
+    white-space: break-spaces !important;
+}
+
+[type=text],
+[type=email],
+[type=url],
+[type=password],
+[type=number],
+[type=date],
+[type=datetime-local],
+[type=month],
+[type=search],
+[type=tel],
+[type=time],
+[type=week],
+[multiple],
+textarea,
+select {
+    line-height: 1.5rem;
+    padding: 4px 8px;
+}
+
+button.tool.secondary,
+button.secondary,
+.gradio-dropdown label .wrap,
+input[type=text],
+input[type=password],
+input[type=email],
+textarea,
+input[type=number] {
+    outline: none!important;
+    box-shadow: none!important;
+    border: 1px solid var(--ae-input-border-color)!important;
+    border-radius: var(--ae-panel-border-radius)!important;
+    background: var(--ae-input-bg-color)!important;
+    color: var(--ae-input-color)!important;
+    text-align: left!important;
+    min-width: unset;
+}
+
+input[type=checkbox], input[type=radio] {
+    background-color: var(--ae-input-bg-color) !important;
+	border: 1px solid var(--ae-input-border-color) !important;
+    border-radius: var(--ae-panel-border-radius) !important;
+}
+input[type=checkbox]:checked, input[type=radio]:checked {
+    background-color: var(--ae-primary-color) !important;
+}
+
+.gradio-slider input[type=number] {
+	padding-right: 2px!important;
+	max-height:24px !important;
+    // width: 64px !important;
+	margin-bottom: var(--ae-inside-padding-size);
+}
+
+
+.gradio-dropdown:not(.multiselect) .wrap-inner{
+	padding: 0px 5px !important;
+	height:32px !important;
+}
+fieldset span,
+label > span{
+	color:var(--ae-label-color) !important;
+}
+.gradio-radio label > span{
+	color:var(--ae-input-color) !important;
+}
+
+input[type=number],
+input[type=text],
+input[type=password],
+input[type=email] {
+	height:34px !important;
+}
+.gradio-slider input[type=range] {
+	align-self: flex-start;
+}
+
+span.svelte-1gfkn6j:not(.has-info) {
+    margin-top: 1px;
+    margin-left: 1px;
+	margin-bottom: var(--ae-inside-padding-size);
+}
+
+/* input column alignment */
+label.block{
+	display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    min-height: 100%;
+}
+div.block.padded.gradio-slider {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+}
+
+/***********/
+/* Buttons */
+/***********/
+
+button.secondary,
+button.primary {
+    border: 1px solid var(--ae-input-border-color) !important;
+	border-radius: var(--ae-panel-border-radius) !important;
+    background: var(--ae-input-bg-color) !important;
+    color: var(--ae-input-color) !important;
+}
+
+button.secondary:hover,
+button.primary:hover {
+    background: var(--ae-primary-color) !important;
+    color: var(--ae-input-bg-color) !important;
+}
+
+/**********************/
+/* Sliders Scrollbars */
+/**********************/
+
+::-webkit-scrollbar {
+    width: 16px;
+}
+
+[id$="2img_settings_scroll"]::-webkit-scrollbar
+{
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 10px 10px var(--ae-main-bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 10px 10px var(--ae-panel-bg-color);
+
+    &.horizontal:hover, &.vertical:hover {
+        background: var(--ae-primary-color)
+    }
+}
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+    border-left: solid 6px var(--ae-main-bg-color);
+    border-radius: 0;
+}
+
+/**********/
+/* Ranges */
+/**********/
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    input[type=range] {
+        overflow: hidden;
+        width: 100%;
+        -webkit-appearance: none;
+        background-color: var(--ae-input-bg-color);
+        border: 1px solid var(--ae-input-border-color);
+		position:relative;
+    }
+	input[type=range]::after {
+		content: '';
+		position: absolute;
+		height: 13px;
+		background-image: var(--ae-slider-bg-overlay);
+		opacity: 0.15;
+		width: 100%;
+	}
+
+
+    input[type=range]::-webkit-slider-runnable-track {
+        height: 14px;
+        -webkit-appearance: none;
+        color: var(--ae-primary-color);
+        margin-top: -1px;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+        width: 0px;
+        -webkit-appearance: none;
+        height: 14px;
+        cursor: ew-resize;
+        background-color: var(--ae-primary-color);
+        box-shadow: -1024px 0 0 1024px var(--ae-primary-color);
+    }
+
+	[id$="_sub-group"] input[type=range]
+	{
+
+		background-color: var(--ae-subgroup-input-bg-color);
+		border: 1px solid var(--ae-subgroup-input-border-color);
+	}
+
+}
+
+
+/* Firefox */
+
+input[type=range]::-moz-range-progress {
+    background-color: var(--ae-primary-color);
+	height: 14px;
+	border: 1px solid var(--ae-primary-color);
+}
+
+input[type=range]::-moz-range-track {
+    background-color: var(--ae-input-bg-color);
+}
+
+input[type=range]::after {
+	content: '';
+	position: absolute;
+	height: 13px;
+	background-image: var(--ae-slider-bg-overlay);
+	opacity: 0.15;
+	width: 100%;
+}
+
+#quicksettings_overflow_container,
+#theme_overflow_container,
+[id$="2img_checkpoints_cards"],
+[id$="2img_results"],
+[id$="2img_settings_scroll"]
+{
+  scrollbar-color: var(--ae-panel-bg-color) var(--ae-main-bg-color) !important;
+  scrollbar-width: thin !important;
+  /*padding: 0 1px;*/
+}
+
+
+input[type=range]{
+    width: 100%;
+}
+
+input[type=range]::-moz-range-track {
+    width: 100%;
+    background-color: var(--ae-input-bg-color);
+    border: none;
+    border-radius: 0px;
+
+	position: relative;
+	height: 100%;
+	background-image: var(--ae-slider-bg-overlay);
+	opacity: 0.15;
+	width: 100%;
+}
+
+input[type=range]::-moz-range-thumb {
+    border: 0px solid var(--ae-primary-color);
+    width: 0px;
+    border-radius: 0%;
+    background-color: var(--ae-primary-color);
+
+}
+
+/*hide the outline behind the border*/
+input[type=range]:-moz-focusring{
+    outline: 1px solid var(--ae-primary-color);
+    outline-offset: -1px;
+}
+
+input[type=range]:focus::-moz-range-track {
+    background-color: var(--ae-input-bg-color);
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+input[type="number"]:hover,
+input[type="number"]:focus {
+    -moz-appearance: initial;
+}
+
+
+/* IE maybe later  */
+
+input[type=range]::-ms-fill-lower {
+	background-color: var(--ae-primary-color);
+}
+
+input[type=range]::-ms-fill-upper {
+    background-color: var(--ae-input-bg-color);
+}
+
+ @keyframes light-up {
+     from {
+         background-color: var(--ae-selected-color);
+     }
+     to {
+         background-color: none;
+     }
+ }
+
+.comfy-combo.updated {
+
+}
+
+.splitpanes.comfy .splitpanes__splitter {
+    background: var(--ae-panel-bg-color);
+	border: 1px solid var(--ae-panel-border-color);
+
+    &:hover:not([disabled]) {
+        background: var(--ae-primary-color);
+    }
+}
+
+.widget > .wrapper.comfy-combo .svelte-select {
+    background: var(--ae-input-bg-color) !important;
+    border-radius: 0px !important;
+	border-color: var(--ae-input-border-color) !important;
+    > .svelte-select-list {
+        background: var(--ae-panel-bg-color);
+        border-radius: 0px !important;
+        > .list-item > .item {
+            border-radius: 0px !important;
+            color: var(--ae-input-color) !important;
+            transition: none;
+
+            &.active {
+                background: var(--ae-input-focus-color);
+                color: var(--ae-input-bg-color) !important;
+            }
+
+            &.hover:not(.active) {
+                background: var(--ae-textarea-focus-color)
+            }
+        }
+    }
+    > .value-container {
+        > .selected-item {
+            color: var(--ae-input-color) !important;
+            z-index: 100;
+        }
+        > input {
+            border: none !important;
+        }
+    }
+
+    .icon.chevron {
+        color: var(--ae-input-color) !important;
+    }
+}