diff --git a/web/index.html b/web/index.html
index 86156a7f8..fdad7072e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,17 +1,20 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/style.css b/web/style.css
index 7c3d7efa5..4527196ea 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,201 +1,197 @@
-:root {
- --fg-color: #000;
- --bg-color: #fff;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --fg-color: #fff;
- --bg-color: #202020;
- }
-}
-
-body {
- width: 100vw;
- height: 100vh;
- margin: 0;
- overflow: hidden;
- background-color: var(--bg-color);
- color: var(--fg-color);
-}
-
-#graph-canvas {
- width: 100%;
- height: 100%;
-}
-
-.comfy-multiline-input {
- background-color: var(--bg-color);
- color: var(--fg-color);
- overflow: hidden;
- overflow-y: auto;
- padding: 2px;
- resize: none;
- border: none;
-}
-
-.comfy-modal {
- display: none; /* Hidden by default */
- position: fixed; /* Stay in place */
- z-index: 100; /* Sit on top */
- padding: 30px 30px 10px 30px;
- background-color: #ff0000; /* Modal background */
- box-shadow: 0px 0px 20px #888888;
- border-radius: 10px;
- text-align: center;
- top: 50%;
- left: 50%;
- max-width: 80vw;
- max-height: 80vh;
- transform: translate(-50%, -50%);
- overflow: hidden;
- min-width: 60%;
- justify-content: center;
-}
-
-.comfy-modal-content {
- display: flex;
- flex-direction: column;
-}
-
-.comfy-modal p {
- overflow: auto;
- white-space: pre-line; /* This will respect line breaks */
- margin-bottom: 20px; /* Add some margin between the text and the close button*/
-}
-
-.comfy-modal select,
-.comfy-modal input[type=button],
-.comfy-modal input[type=checkbox] {
- margin: 3px 3px 3px 4px;
-}
-
-.comfy-modal button {
- cursor: pointer;
- color: #aaaaaa;
- border: none;
- background-color: transparent;
- font-size: 24px;
- font-weight: bold;
- width: 100%;
-}
-
-.comfy-modal button:hover,
-.comfy-modal button:focus {
- color: #000;
- text-decoration: none;
- cursor: pointer;
-}
-
-.comfy-menu {
- width: 200px;
- font-size: 15px;
- position: absolute;
- top: 50%;
- right: 0%;
- background-color: white;
- color: #000;
- text-align: center;
- z-index: 100;
- width: 170px;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.comfy-menu button {
- font-size: 20px;
-}
-
-.comfy-menu-btns {
- margin-bottom: 10px;
- width: 100%;
-}
-
-.comfy-menu-btns button {
- font-size: 10px;
- width: 50%;
-}
-
-.comfy-menu span.drag-handle {
- width: 10px;
- height: 20px;
- display: inline-block;
- overflow: hidden;
- line-height: 5px;
- padding: 3px 4px;
- cursor: move;
- vertical-align: middle;
- margin-top: -.4em;
- margin-left: -.2em;
- font-size: 12px;
- font-family: sans-serif;
- letter-spacing: 2px;
- color: #cccccc;
- text-shadow: 1px 0 1px black;
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.comfy-menu span.drag-handle::after {
- content: '.. .. ..';
-}
-
-.comfy-queue-btn {
- width: 100%;
-}
-
-.comfy-list {
- background-color: rgb(225, 225, 225);
- margin-bottom: 10px;
-}
-
-.comfy-list-items {
- overflow-y: scroll;
- max-height: 100px;
- background-color: #d0d0d0;
- padding: 5px;
-}
-
-.comfy-list h4 {
- min-width: 160px;
- margin: 0;
- padding: 3px;
- font-weight: normal;
-}
-
-.comfy-list-items button {
- font-size: 10px;
-}
-
-.comfy-list-actions {
- margin: 5px;
- display: flex;
- gap: 5px;
- justify-content: center;
-}
-
-.comfy-list-actions button {
- font-size: 12px;
-}
-
-button.comfy-settings-btn {
- font-size: 12px;
- padding: 0;
- position: absolute;
- right: 0;
- border: none;
-}
-
-.comfy-modal.comfy-settings {
- background-color: var(--bg-color);
- color: var(--fg-color);
- z-index: 99;
-}
-
-@media only screen and (max-height: 850px) {
- .comfy-menu {
- margin-top: -70px;
- }
-}
+:root {
+ --fg-color: #d5d5d5;
+ --bg-color: #202020;
+ --sel-color: #332222;
+ --item-color: #252525;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --fg-color: #fff;
+ --bg-color: #202020;
+ }
+}
+
+body {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+ background-color: var(--bg-color);
+ color: var(--fg-color);
+}
+
+#graph-canvas {
+ width: 100%;
+ height: 100%;
+}
+
+.comfy-multiline-input {
+ background-color: var(--bg-color);
+ color: var(--fg-color);
+ overflow: hidden;
+ overflow-y: auto;
+ padding: 2px;
+ resize: none;
+ border: none;
+}
+
+.comfy-modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 100; /* Sit on top */
+ padding: 30px 30px 10px 30px;
+ background-color: #ff0000; /* Modal background */
+ box-shadow: 0px 0px 20px #888888;
+ border-radius: 10px;
+ text-align: center;
+ top: 50%;
+ left: 50%;
+ max-width: 80vw;
+ max-height: 80vh;
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+ min-width: 60%;
+ justify-content: center;
+}
+
+.comfy-modal-content {
+ display: flex;
+ flex-direction: column;
+}
+
+.comfy-modal p {
+ overflow: auto;
+ white-space: pre-line; /* This will respect line breaks */
+ margin-bottom: 20px; /* Add some margin between the text and the close button*/
+}
+
+.comfy-modal button {
+ cursor: pointer;
+ color: #aaaaaa;
+ border: none;
+ background-color: transparent;
+ font-size: 24px;
+ font-weight: bold;
+ width: 100%;
+}
+
+.comfy-modal button:hover,
+.comfy-modal button:focus {
+ color: #000;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.comfy-menu {
+ width: 200px;
+ font-size: 15px;
+ position: absolute;
+ top: 50%;
+ right: 0%;
+ background-color: white;
+ color: #000;
+ text-align: center;
+ z-index: 100;
+ width: 170px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.comfy-menu button {
+ font-size: 20px;
+}
+
+.comfy-menu-btns {
+ margin-bottom: 10px;
+ width: 100%;
+}
+
+.comfy-menu-btns button {
+ font-size: 10px;
+ width: 50%;
+}
+
+.comfy-menu span.drag-handle {
+ width: 10px;
+ height: 20px;
+ display: inline-block;
+ overflow: hidden;
+ line-height: 5px;
+ padding: 3px 4px;
+ cursor: move;
+ vertical-align: middle;
+ margin-top: -.4em;
+ margin-left: -.2em;
+ font-size: 12px;
+ font-family: sans-serif;
+ letter-spacing: 2px;
+ color: #cccccc;
+ text-shadow: 1px 0 1px black;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.comfy-menu span.drag-handle::after {
+ content: '.. .. ..';
+}
+
+.comfy-queue-btn {
+ width: 100%;
+}
+
+.comfy-list {
+ background-color: rgb(225, 225, 225);
+ margin-bottom: 10px;
+}
+
+.comfy-list-items {
+ overflow-y: scroll;
+ max-height: 100px;
+ background-color: #d0d0d0;
+ padding: 5px;
+}
+
+.comfy-list h4 {
+ min-width: 160px;
+ margin: 0;
+ padding: 3px;
+ font-weight: normal;
+}
+
+.comfy-list-items button {
+ font-size: 10px;
+}
+
+.comfy-list-actions {
+ margin: 5px;
+ display: flex;
+ gap: 5px;
+ justify-content: center;
+}
+
+.comfy-list-actions button {
+ font-size: 12px;
+}
+
+button.comfy-settings-btn {
+ font-size: 12px;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ border: none;
+}
+
+.comfy-modal.comfy-settings {
+ background-color: var(--bg-color);
+ color: var(--fg-color);
+ z-index: 99;
+}
+
+@media only screen and (max-height: 850px) {
+ .comfy-menu {
+ margin-top: -70px;
+ }
+}