Set known slot in/out types

src/scss/global.scss

@@ -1,4 +1,5 @@
 @import "gradio";
+@import "litegraph";
 
 body {
     overflow: hidden;
@@ -110,10 +111,12 @@ input, textarea {
     border-radius: 0 !important;
 }
 
-select {
-    color: var(--body-text-color);
-    background: var(--input-background-fill);
-    border: var(--input-border-width) solid var(--input-border-color)
+:not(.litegraph) {
+    select {
+        color: var(--body-text-color);
+        background: var(--input-background-fill);
+        border: var(--input-border-width) solid var(--input-border-color)
+    }
 }
 
 .container {

src/scss/litegraph.scss

@@ -0,0 +1,108 @@
+// Improvements to litegraph's css.
+// Taken from ComfyUI.
+
+:root {
+	--litegraph-fg-color: #000;
+	--litegraph-bg-color: #fff;
+	--litegraph-comfy-menu-bg: #353535;
+	--litegraph-comfy-input-bg: #222;
+	--litegraph-input-text: #ddd;
+	--litegraph-descrip-text: #999;
+	--litegraph-drag-text: #ccc;
+	--litegraph-error-text: #ff4444;
+	--litegraph-border-color: #4e4e4e;
+}
+
+.litegraph {
+    /* Input popup */
+    &.graphdialog {
+        min-height: 1em;
+        background-color: var(--litegraph-comfy-menu-bg);
+        .name {
+            font-size: 14px;
+            font-family: sans-serif;
+            color: var(--litegraph-descrip-text);
+        }
+        button {
+            margin-top: unset;
+            vertical-align: unset;
+            height: 1.6em;
+            padding-right: 8px;
+        }
+    }
+    .graphdialog input, .graphdialog textarea, .graphdialog select {
+        background-color: var(--litegraph-comfy-input-bg);
+        border: 2px solid;
+        border-color: var(--litegraph-border-color);
+        color: var(--litegraph-input-text);
+        border-radius: 12px 0 0 12px;
+    }
+
+    /* Context Menu */
+    .litemenu-entry {
+        &.has_submenu {
+            position: relative;
+            padding-right: 20px;
+        }
+    }
+    &.litecontextmenu {
+        .litemenu-entry {
+            &:hover {
+                &:not(.disabled):not(.separator) {
+                    background-color: var(--litegraph-comfy-menu-bg) !important;
+                    filter: brightness(155%);
+                    color: var(--litegraph-input-text);
+                }
+            }
+        }
+        input {
+            background-color: var(--litegraph-comfy-input-bg) !important;
+            color: var(--litegraph-input-text) !important;
+        }
+    }
+    &.litesearchbox {
+        z-index: 9999 !important;
+        background-color: var(--litegraph-comfy-menu-bg) !important;
+        overflow: hidden;
+    }
+    &.lite-search-item {
+        color: var(--litegraph-input-text);
+        background-color: var(--litegraph-comfy-input-bg);
+        filter: brightness(80%);
+        padding-left: 0.2em;
+        &.generic_type {
+            color: var(--litegraph-input-text);
+            filter: brightness(50%);
+        }
+    }
+}
+
+.litemenu-entry {
+    &.has_submenu {
+        &::after {
+            content: ">";
+            position: absolute;
+            top: 0;
+            right: 2px;
+        }
+    }
+}
+
+.litegraph.litecontextmenu,
+.litegraph.litecontextmenu.dark {
+    z-index: 9999 !important;
+    background-color: var(--litegraph-comfy-menu-bg) !important;
+    filter: brightness(95%);
+}
+
+.litegraph.litecontextmenu .litemenu-entry.submenu,
+.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
+    background-color: var(--litegraph-comfy-menu-bg) !important;
+    color: var(--litegraph-input-text);
+}
+
+.litegraph.litesearchbox input,
+.litegraph.litesearchbox select {
+    background-color: var(--litegraph-comfy-input-bg) !important;
+    color: var(--litegraph-input-text);
+}