Update frontend to 1.2.26 (#4415)

web/assets/index-BHzRuMlR.css

@@ -2909,7 +2909,7 @@ body {
   resize: none;
   border: none;
   box-sizing: border-box;
-  font-size: 10px;
+  font-size: var(--comfy-textarea-font-size);
 }
 
 .comfy-modal {
@@ -3869,26 +3869,26 @@ audio.comfy-audio.empty-audio-widget {
   color: var(--error-text);
 }
 
-.comfy-vue-node-search-container[data-v-9b4aa1b3] {
+.comfy-vue-node-search-container[data-v-b8a4ffdc] {
   display: flex;
   width: 100%;
   min-width: 24rem;
   align-items: center;
   justify-content: center;
 }
-.comfy-vue-node-search-container[data-v-9b4aa1b3] * {
+.comfy-vue-node-search-container[data-v-b8a4ffdc] * {
   pointer-events: auto;
 }
-.comfy-vue-node-preview-container[data-v-9b4aa1b3] {
+.comfy-vue-node-preview-container[data-v-b8a4ffdc] {
   position: absolute;
   left: -350px;
   top: 50px;
 }
-.comfy-vue-node-search-box[data-v-9b4aa1b3] {
+.comfy-vue-node-search-box[data-v-b8a4ffdc] {
   z-index: 10;
   flex-grow: 1;
 }
-.option-container[data-v-9b4aa1b3] {
+.option-container[data-v-b8a4ffdc] {
   display: flex;
   width: 100%;
   cursor: pointer;
@@ -3899,10 +3899,10 @@ audio.comfy-audio.empty-audio-widget {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.option-display-name[data-v-9b4aa1b3] {
+.option-display-name[data-v-b8a4ffdc] {
   font-weight: 600;
 }
-.option-category[data-v-9b4aa1b3] {
+.option-category[data-v-b8a4ffdc] {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 0.875rem;
@@ -3912,29 +3912,29 @@ audio.comfy-audio.empty-audio-widget {
   /* Keeps the text on a single line by default */
   white-space: nowrap;
 }
-.i-badge[data-v-9b4aa1b3] {
+.i-badge[data-v-b8a4ffdc] {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.o-badge[data-v-9b4aa1b3] {
+.o-badge[data-v-b8a4ffdc] {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.c-badge[data-v-9b4aa1b3] {
+.c-badge[data-v-b8a4ffdc] {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.s-badge[data-v-9b4aa1b3] {
+.s-badge[data-v-b8a4ffdc] {
   --tw-bg-opacity: 1;
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
-[data-v-9b4aa1b3] .highlight {
+[data-v-b8a4ffdc] .highlight {
   background-color: var(--p-primary-color);
   color: var(--p-primary-contrast-color);
   font-weight: bold;
@@ -3955,7 +3955,7 @@ audio.comfy-audio.empty-audio-widget {
   align-items: flex-start !important;
 }
 
-.node-tooltip[data-v-d6edb6a0] {
+.node-tooltip[data-v-d5e6001c] {
   background: var(--comfy-input-bg);
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
@@ -3971,51 +3971,121 @@ audio.comfy-audio.empty-audio-widget {
   z-index: 99999;
 }
 
-.queue-tool-header-cell {
+.result-container[data-v-0fac61d9] {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+}
+[data-v-0fac61d9] img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.p-image-preview[data-v-0fac61d9] {
+  position: static;
+  display: contents;
+}
+[data-v-0fac61d9] .image-preview-mask {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: auto;
+  height: auto;
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  padding: 10px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.5);
+  color: var(--p-image-preview-mask-color);
+  transition:
+    opacity var(--p-image-transition-duration),
+    background var(--p-image-transition-duration);
+  border-radius: 50%;
 }
-.queue-tool-body-cell {
-  display: table-cell;
-  text-align: right !important;
+
+.task-result-preview[data-v-6cf8179c] {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.task-result-preview i[data-v-6cf8179c],
+.task-result-preview span[data-v-6cf8179c] {
+  font-size: 2rem;
+}
+.task-item[data-v-6cf8179c] {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.task-item-details[data-v-6cf8179c] {
+  position: absolute;
+  bottom: 0;
+  padding: 0.6rem;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.queue-time-cell-content[data-v-89313500] {
-  width: -moz-fit-content;
-  width: fit-content;
+/* In dark mode, transparent background color for tags is not ideal for tags that
+are floating on top of images. */
+.tag-wrapper[data-v-6cf8179c] {
+  background-color: var(--p-primary-contrast-color);
+  border-radius: 6px;
+  display: inline-flex;
 }
 
-.comfy-vue-side-bar-container[data-v-68eb78dd] {
+.comfy-vue-side-bar-container[data-v-bde767d2] {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
-.comfy-vue-side-bar-header[data-v-68eb78dd] {
+.comfy-vue-side-bar-header[data-v-bde767d2] {
   flex-shrink: 0;
   border-left: none;
   border-right: none;
   border-top: none;
   border-radius: 0;
   padding: 0.25rem 1rem;
+  min-height: 2.5rem;
 }
-.comfy-vue-side-bar-header-span[data-v-68eb78dd] {
+.comfy-vue-side-bar-header-span[data-v-bde767d2] {
   font-size: small;
 }
-.comfy-vue-side-bar-body[data-v-68eb78dd] {
+.comfy-vue-side-bar-body[data-v-bde767d2] {
   flex-grow: 1;
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
 }
-.comfy-vue-side-bar-body[data-v-68eb78dd]::-webkit-scrollbar {
+.comfy-vue-side-bar-body[data-v-bde767d2]::-webkit-scrollbar {
   width: 1px;
 }
-.comfy-vue-side-bar-body[data-v-68eb78dd]::-webkit-scrollbar-thumb {
+.comfy-vue-side-bar-body[data-v-bde767d2]::-webkit-scrollbar-thumb {
   background-color: transparent;
 }
 
-.spinner[data-v-2a1001f4] {
+.queue-grid[data-v-7f831ee9] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+
+.spinner[data-v-40c18658] {
     position: absolute;
     inset: 0px;
     display: flex;

web/assets/userSelection-CH4RQEqW.js

@@ -1,3 +1,5 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -18,8 +20,8 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { j as createSpinner, g as api, $ as $el } from "./index-DIiqwEjy.js";
-class UserSelectionScreen {
+import { j as createSpinner, g as api, $ as $el } from "./index-D8Zp4vRl.js";
+const _UserSelectionScreen = class _UserSelectionScreen {
   show(users, user) {
     return __async(this, null, function* () {
       const userSelection = document.getElementById("comfy-user-selection");
@@ -128,11 +130,13 @@ class UserSelectionScreen {
       });
     });
   }
-}
+};
+__name(_UserSelectionScreen, "UserSelectionScreen");
+let UserSelectionScreen = _UserSelectionScreen;
 window.comfyAPI = window.comfyAPI || {};
 window.comfyAPI.userSelection = window.comfyAPI.userSelection || {};
 window.comfyAPI.userSelection.UserSelectionScreen = UserSelectionScreen;
 export {
   UserSelectionScreen
 };
-//# sourceMappingURL=userSelection-BifVfRyx.js.map
+//# sourceMappingURL=userSelection-CH4RQEqW.js.map

web/index.html

@@ -12,10 +12,10 @@
 				font-family: 'Roboto Mono', 'Noto Color Emoji';
 			}
 		</style> -->
-		<link rel="stylesheet" type="text/css" href="/user.css" />
-		<link rel="stylesheet" type="text/css" href="/materialdesignicons.min.css" />
-		<script type="module" crossorigin src="/assets/index-DIiqwEjy.js"></script>
-		<link rel="stylesheet" crossorigin href="/assets/index-CwWW6Xjy.css">
+		<link rel="stylesheet" type="text/css" href="user.css" />
+		<link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
+		<script type="module" crossorigin src="/assets/index-D8Zp4vRl.js"></script>
+		<link rel="stylesheet" crossorigin href="/assets/index-BHzRuMlR.css">
 	</head>
 	<body class="litegraph">
 		<div id="vue-app"></div>