OPTIONAL: 1.5 width node borders

Big run button
Fade text area border
2026-04-19 22:09:37 +00:00 · 2025-05-01 13:06:11 +10:00 · 2025-05-01 13:05:34 +10:00 · 2025-05-01 12:28:51 +10:00 · 2025-05-01 12:25:01 +10:00 · 2025-05-01 12:24:19 +10:00
15 changed files with 47 additions and 13 deletions
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="user.css" />
    <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
+
  </head>
  <body class="litegraph grid">
    <div id="vue-app"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
        "@alloc/quick-lru": "^5.2.0",
        "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
        "@comfyorg/comfyui-electron-types": "^0.4.42",
-        "@comfyorg/litegraph": "^0.14.3",
+        "@comfyorg/litegraph": "^0.14.4",
        "@primevue/forms": "^4.2.5",
        "@primevue/themes": "^4.2.5",
        "@sentry/vue": "^8.48.0",
@@ -482,9 +482,9 @@
      "license": "GPL-3.0-only"
    },
    "node_modules/@comfyorg/litegraph": {
-      "version": "0.14.3",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.14.3.tgz",
-      "integrity": "sha512-jf+jFaNTkv4AkkNnseO5FZj7JkNKrLQZ+w9xCBQkARv3i0hhuh4YOSHdVrM7afUc///jMs3fsdEtOArVhd6UEA==",
+      "version": "0.14.4",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.14.4.tgz",
+      "integrity": "sha512-tclWj0u8uvLgSO39lTiDKoip5wfy4SwnDp6A6Lz3kKziZ8DopPDyGrJ0q/hvro2yOGucSV4jIq+V7V85DJ3+vg==",
      "license": "MIT"
    },
    "node_modules/@cspotcode/source-map-support": {
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
    "@alloc/quick-lru": "^5.2.0",
    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
    "@comfyorg/comfyui-electron-types": "^0.4.42",
-    "@comfyorg/litegraph": "^0.14.3",
+    "@comfyorg/litegraph": "^0.14.4",
    "@primevue/forms": "^4.2.5",
    "@primevue/themes": "^4.2.5",
    "@sentry/vue": "^8.48.0",
--- a/public/fonts/ABCRom.woff2
+++ b/public/fonts/ABCRom.woff2
--- a/src/assets/css/fonts.css
+++ b/src/assets/css/fonts.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'ABCRom';
+  src: url('fonts/ABCRom.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;   /* prevents invisible text flash */
+}
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -61,7 +61,7 @@ body {
  overflow-y: auto;
  padding: 2px;
  resize: none;
-  border: none;
+  border: 1px solid #f0ff4144;
  box-sizing: border-box;
  font-size: var(--comfy-textarea-font-size);
 }
@@ -149,6 +149,10 @@ body {
  font-size: 15px;
 }

+textarea {
+  font-family: 'ABCRom', monospace;
+}
+
 .comfy-modal-content {
  display: flex;
  flex-direction: column;
@@ -599,7 +603,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d,
 .comfy-load-3d-animation,
 .comfy-preview-3d,
-.comfy-preview-3d-animation{
+.comfy-preview-3d-animation {
  display: flex;
  flex-direction: column;
  background: transparent;
@@ -611,7 +615,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d canvas,
 .comfy-load-3d-animation canvas,
 .comfy-preview-3d canvas,
-.comfy-preview-3d-animation canvas{
+.comfy-preview-3d-animation canvas {
  display: flex;
  width: 100% !important;
  height: 100% !important;
--- a/src/assets/palettes/dark.json
+++ b/src/assets/palettes/dark.json
@@ -54,6 +54,7 @@
      "bg-color": "#202020",
      "comfy-menu-bg": "#353535",
      "comfy-menu-secondary-bg": "#303030",
+      "font-family": "Arial, Helvetica, sans-serif",
      "comfy-input-bg": "#222",
      "input-text": "#ddd",
      "descrip-text": "#999",
--- a/src/assets/palettes/light.json
+++ b/src/assets/palettes/light.json
@@ -68,7 +68,8 @@
      "content-fg": "#222",
      "content-hover-bg": "#adadad",
      "content-hover-fg": "#222",
-      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem"
+      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem",
+      "font-family": "ABCRom"
    }
  }
 }
--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyQueueButton.vue
@@ -17,7 +17,6 @@
    >
      <template #icon>
        <i-lucide:list-start v-if="workspaceStore.shiftDown" />
-        <i-lucide:play v-else-if="queueMode === 'disabled'" />
        <i-lucide:fast-forward v-else-if="queueMode === 'instant'" />
        <i-lucide:step-forward v-else-if="queueMode === 'change'" />
      </template>
@@ -148,4 +147,20 @@ const queuePrompt = async (e: Event) => {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
 }
+:deep(.p-splitbutton-dropdown),
+:deep(.p-splitbutton-button) {
+  font-family: 'ABCRom' !important;
+  font-weight: 1000 !important;
+  font-style: italic !important;
+  font-size: 1.5rem !important;
+  padding: 0 0.25rem !important;
+  margin: 0 !important;
+  color: #f0ff41 !important;
+  background-color: #172dd7 !important;
+  border: 0 !important;
+
+  > .p-button-label {
+    font-weight: 1000 !important;
+  }
+}
 </style>
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -105,7 +105,7 @@ onMounted(() => {
  background: var(--comfy-menu-bg);
  color: var(--fg-color);
  box-shadow: var(--bar-shadow);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-family);
  font-size: 0.8em;
  box-sizing: border-box;
  z-index: 1000;
--- a/src/extensions/core/groupNodeManage.css
+++ b/src/extensions/core/groupNodeManage.css
@@ -2,7 +2,7 @@
  background: var(--bg-color);
  color: var(--fg-color);
  padding: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-family);
  border-color: black;
  margin: 20vh auto;
  max-height: 60vh;
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,7 @@ import Tooltip from 'primevue/tooltip'
 import { createApp } from 'vue'
 import { VueFire, VueFireAuth } from 'vuefire'

+import '@/assets/css/fonts.css'
 import '@/assets/css/style.css'
 import { FIREBASE_CONFIG } from '@/config/firebase'
 import router from '@/router'
--- a/src/schemas/colorPaletteSchema.ts
+++ b/src/schemas/colorPaletteSchema.ts
@@ -63,6 +63,7 @@ const comfyBaseSchema = z.object({
  ['comfy-menu-bg']: z.string(),
  ['comfy-menu-secondary-bg']: z.string(),
  ['comfy-input-bg']: z.string(),
+  ['font-family']: z.string(),
  ['input-text']: z.string(),
  ['descrip-text']: z.string(),
  ['drag-text']: z.string(),
--- a/src/scripts/ui/menu/menu.css
+++ b/src/scripts/ui/menu/menu.css
@@ -169,7 +169,7 @@

 .comfy-widget-selection-dialog div {
  color: var(--fg-color);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'ABCRom', sans-serif;
 }

 .comfy-widget-selection-dialog h2 {
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -86,6 +86,9 @@ export const useLitegraphService = () => {
       * @internal Setup stroke styles for the node under various conditions.
       */
      #setupStrokeStyles() {
+        this.strokeStyles['noice'] = function (this: LGraphNode) {
+          return { color: '#f0ff41', lineWidth: 1.5, padding: 0.5 }
+        }
        this.strokeStyles['running'] = function (this: LGraphNode) {
          if (this.id == app.runningNodeId) {
            return { color: '#0f0' }
Author	SHA1	Message	Date
filtered	1c75ade4ad	OPTIONAL: 1.5 width node borders	2025-05-01 13:06:11 +10:00
filtered	92c4177bb6	Big run button	2025-05-01 13:05:34 +10:00
filtered	3ac5ab0414	Fade text area border	2025-05-01 12:28:51 +10:00
filtered	94819cbdc9	Hard-code multiline input border	2025-05-01 12:25:01 +10:00
filtered	5cb69f3027	Hard-coded node border	2025-05-01 12:24:19 +10:00
webfiltered	5167ad135c	[chore] Update litegraph to 0.14.4	2025-05-01 10:42:21 +10:00
Chenlei Hu	574e421cc0	Apply to textarea	2025-04-30 18:32:12 -04:00
Yoland Y	baf9839c9e	WIP: this should work, now just need to swap everything to this font	2025-04-30 15:24:11 -07:00