diff --git a/.stylelintrc.json b/.stylelintrc.json
index e53789123e..276ac81567 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -7,15 +7,15 @@
}
],
"rules": {
- "import-notation": "url",
+ "import-notation": "string",
"font-family-no-missing-generic-family-keyword": true,
- "declaration-block-no-redundant-longhand-properties": true,
"declaration-property-value-no-unknown": [
true,
{
"ignoreProperties": {
"speak": ["none"],
- "app-region": ["drag", "no-drag"]
+ "app-region": ["drag", "no-drag"],
+ "/^(width|height)$/": ["/^v-bind/"]
}
}
],
@@ -35,7 +35,7 @@
"selector-max-type": 2,
"declaration-block-no-duplicate-properties": true,
"block-no-empty": true,
- "no-descending-specificity": true,
+ "no-descending-specificity": null,
"no-duplicate-at-import-rules": true,
"at-rule-no-unknown": [
true,
@@ -57,7 +57,8 @@
true,
{
"ignoreFunctions": [
- "theme"
+ "theme",
+ "v-bind"
]
}
]
diff --git a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
index 7d930d00e1..6b139c1e9e 100644
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -286,6 +286,12 @@ const onFocus = async () => {
.p-accordionheader {
@apply rounded-t-xl rounded-b-none;
}
+
+ .p-accordionheader-toggle-icon {
+ &::before {
+ content: '\e902';
+ }
+ }
}
.p-accordioncontent {
@@ -302,13 +308,5 @@ const onFocus = async () => {
content: '\e933';
}
}
-
- .p-accordionpanel-active {
- .p-accordionheader-toggle-icon {
- &::before {
- content: '\e902';
- }
- }
- }
}
diff --git a/apps/desktop-ui/src/views/DesktopUpdateView.vue b/apps/desktop-ui/src/views/DesktopUpdateView.vue
index efaa6d1f44..1cb9135e1b 100644
--- a/apps/desktop-ui/src/views/DesktopUpdateView.vue
+++ b/apps/desktop-ui/src/views/DesktopUpdateView.vue
@@ -65,12 +65,12 @@ onUnmounted(() => electron.Validation.dispose())
.download-bg::before {
@apply m-0 absolute text-muted;
- font-family: 'primeicons';
+ font-family: 'primeicons', sans-serif;
top: -2rem;
right: 2rem;
speak: none;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
diff --git a/apps/desktop-ui/src/views/MaintenanceView.vue b/apps/desktop-ui/src/views/MaintenanceView.vue
index facc08dfb5..dbe1b269ef 100644
--- a/apps/desktop-ui/src/views/MaintenanceView.vue
+++ b/apps/desktop-ui/src/views/MaintenanceView.vue
@@ -186,12 +186,12 @@ onUnmounted(() => electron.Validation.dispose())
.backspan::before {
@apply m-0 absolute text-muted;
- font-family: 'primeicons';
+ font-family: 'primeicons', sans-serif;
top: -2rem;
right: -2rem;
speak: none;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
diff --git a/apps/desktop-ui/src/views/ServerStartView.vue b/apps/desktop-ui/src/views/ServerStartView.vue
index dd6409991e..b7d1f4eaca 100644
--- a/apps/desktop-ui/src/views/ServerStartView.vue
+++ b/apps/desktop-ui/src/views/ServerStartView.vue
@@ -18,16 +18,16 @@
style="
background: radial-gradient(
ellipse 800px 600px at center,
- rgba(23, 23, 23, 0.95) 0%,
- rgba(23, 23, 23, 0.93) 10%,
- rgba(23, 23, 23, 0.9) 20%,
- rgba(23, 23, 23, 0.85) 30%,
- rgba(23, 23, 23, 0.75) 40%,
- rgba(23, 23, 23, 0.6) 50%,
- rgba(23, 23, 23, 0.4) 60%,
- rgba(23, 23, 23, 0.2) 70%,
- rgba(23, 23, 23, 0.1) 80%,
- rgba(23, 23, 23, 0.05) 90%,
+ rgb(23 23 23 / 0.95) 0%,
+ rgb(23 23 23 / 0.93) 10%,
+ rgb(23 23 23 / 0.9) 20%,
+ rgb(23 23 23 / 0.85) 30%,
+ rgb(23 23 23 / 0.75) 40%,
+ rgb(23 23 23 / 0.6) 50%,
+ rgb(23 23 23 / 0.4) 60%,
+ rgb(23 23 23 / 0.2) 70%,
+ rgb(23 23 23 / 0.1) 80%,
+ rgb(23 23 23 / 0.05) 90%,
transparent 100%
);
"
diff --git a/knip.config.ts b/knip.config.ts
index 5d975c8b4c..0ed7361e2a 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -44,9 +44,9 @@ const config: KnipConfig = {
compilers: {
// https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
css: (text: string) =>
- [
- ...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)
- ].join('\n')
+ [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
+ .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
+ .join('\n')
},
vite: {
config: ['vite?(.*).config.mts']
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index fcadf31de9..af18f4e3ed 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -9,35 +9,6 @@
@config '../../tailwind.config.ts';
-:root {
- --fg-color: #000;
- --bg-color: #fff;
- --comfy-menu-bg: #353535;
- --comfy-menu-secondary-bg: #292929;
- --comfy-topbar-height: 2.5rem;
- --comfy-input-bg: #222;
- --input-text: #ddd;
- --descrip-text: #999;
- --drag-text: #ccc;
- --error-text: #ff4444;
- --border-color: #4e4e4e;
- --tr-even-bg-color: #222;
- --tr-odd-bg-color: #353535;
- --primary-bg: #236692;
- --primary-fg: #ffffff;
- --primary-hover-bg: #3485bb;
- --primary-hover-fg: #ffffff;
- --content-bg: #e0e0e0;
- --content-fg: #000;
- --content-hover-bg: #adadad;
- --content-hover-fg: #000;
-
- /* Code styling colors for help menu*/
- --code-text-color: rgba(0, 122, 255, 1);
- --code-bg-color: rgba(96, 165, 250, 0.2);
- --code-block-bg-color: rgba(60, 60, 60, 0.12);
-}
-
@media (prefers-color-scheme: dark) {
:root {
--fg-color: #fff;
@@ -129,6 +100,35 @@
}
:root {
+ --fg-color: #000;
+ --bg-color: #fff;
+ --comfy-menu-bg: #353535;
+ --comfy-menu-secondary-bg: #292929;
+ --comfy-topbar-height: 2.5rem;
+ --comfy-input-bg: #222;
+ --input-text: #ddd;
+ --descrip-text: #999;
+ --drag-text: #ccc;
+ --error-text: #ff4444;
+ --border-color: #4e4e4e;
+ --tr-even-bg-color: #222;
+ --tr-odd-bg-color: #353535;
+ --primary-bg: #236692;
+ --primary-fg: #ffffff;
+ --primary-hover-bg: #3485bb;
+ --primary-hover-fg: #ffffff;
+ --content-bg: #e0e0e0;
+ --content-fg: #000;
+ --content-hover-bg: #adadad;
+ --content-hover-fg: #000;
+
+ /* Code styling colors for help menu*/
+ --code-text-color: rgb(0 122 255 / 1);
+ --code-bg-color: rgb(96 165 250 / 0.2);
+ --code-block-bg-color: rgb(60 60 60 / 0.12);
+
+ /* --- */
+
--backdrop: var(--color-white);
--dialog-surface: var(--color-neutral-200);
--node-component-border: var(--color-gray-400);
@@ -150,7 +150,9 @@
--node-component-tooltip-border: var(--color-sand-100);
--node-component-tooltip-surface: var(--color-white);
--node-component-widget-input: var(--fg-color);
- --node-component-widget-input-surface: rgb(from var(--color-zinc-500) r g b / 10%);
+ --node-component-widget-input-surface: rgb(
+ from var(--color-zinc-500) r g b / 10%
+ );
--node-component-widget-skeleton-surface: var(--color-zinc-300);
--node-stroke: var(--color-stone-100);
}
@@ -496,7 +498,7 @@ body {
/* Strong and emphasis */
.comfy-markdown-content strong {
- font-weight: bold;
+ font-weight: 700;
}
.comfy-markdown-content em {
@@ -507,7 +509,7 @@ body {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
- padding: 30px 30px 10px 30px;
+ padding: 30px 30px 10px;
background-color: var(--comfy-menu-bg); /* Modal background */
color: var(--error-text);
box-shadow: 0 0 20px #888888;
@@ -555,8 +557,8 @@ body {
background-color: var(--comfy-menu-bg);
font-family: sans-serif;
padding: 10px;
- border-radius: 0 8px 8px 8px;
- box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
+ border-radius: 0 8px 8px;
+ box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4);
}
.comfy-menu-header {
@@ -574,7 +576,7 @@ body {
}
.comfy-menu .comfy-menu-actions button {
- background-color: rgba(0, 0, 0, 0);
+ background-color: rgb(0 0 0 / 0);
padding: 0;
border: none;
cursor: pointer;
@@ -689,7 +691,7 @@ span.drag-handle::after {
min-width: 160px;
margin: 0;
padding: 3px;
- font-weight: normal;
+ font-weight: 400;
}
.comfy-list-items button {
@@ -806,7 +808,7 @@ dialog {
}
dialog::backdrop {
- background: rgba(0, 0, 0, 0.5);
+ background: rgb(0 0 0 / 0.5);
}
.comfy-dialog.comfyui-dialog.comfy-modal {
@@ -1012,9 +1014,6 @@ audio.comfy-audio.empty-audio-widget {
.lg-node {
/* Disable text selection on all nodes */
user-select: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
}
.lg-node .lg-slot,
@@ -1041,7 +1040,6 @@ audio.comfy-audio.empty-audio-widget {
filter: none;
backdrop-filter: none;
text-shadow: none;
- -webkit-mask-image: none;
mask-image: none;
clip-path: none;
background-image: none;
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index 45cbfc9f36..c5e0f6dcee 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -136,7 +136,7 @@ useEventListener(window, 'click', hideTooltip)
pointer-events: none;
background: var(--comfy-input-bg);
border-radius: 5px;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 0 5px rgb(0 0 0 / 0.4);
color: var(--input-text);
font-family: sans-serif;
left: 0;
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index 40dad529df..323746aba7 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -229,10 +229,10 @@ watch(
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index 708d9f9056..16b8ed1f54 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -526,7 +526,7 @@ onMounted(async () => {
overflow-y: auto;
background: var(--p-content-background);
border-radius: 12px;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
border: 1px solid var(--p-content-border-color);
backdrop-filter: blur(8px);
position: relative;
@@ -611,7 +611,7 @@ onMounted(async () => {
font-size: 0.8rem;
font-weight: 600;
color: var(--p-text-muted-color);
- margin: 0 0 0.5rem 0;
+ margin: 0 0 0.5rem;
padding: 0 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -669,7 +669,7 @@ onMounted(async () => {
background: var(--p-content-background);
border-radius: 12px;
border: 1px solid var(--p-content-border-color);
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
overflow: hidden;
transition: opacity 0.15s ease-out;
}
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index 4fffeeaf89..7a5304f234 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -202,7 +202,6 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
._sb_node_preview {
background-color: var(--comfy-menu-bg);
font-family: 'Open Sans', sans-serif;
- font-size: small;
color: var(--descrip-text);
border: 1px solid var(--descrip-text);
min-width: 300px;
@@ -265,7 +264,7 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
._long_field {
background: var(--bg-color);
border: 2px solid var(--border-color);
- margin: 5px 5px 0 5px;
+ margin: 5px 5px 0;
border-radius: 10px;
line-height: 1.7;
text-wrap: nowrap;
@@ -278,7 +277,7 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
._sb_preview_badge {
text-align: center;
background: var(--comfy-input-bg);
- font-weight: bold;
+ font-weight: 700;
color: var(--error-text);
}
diff --git a/src/components/searchbox/NodeSearchItem.vue b/src/components/searchbox/NodeSearchItem.vue
index 406963f222..b0c53f45a0 100644
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -89,7 +89,7 @@ const props = defineProps<{
:deep(.highlight) {
background-color: var(--p-primary-color);
color: var(--p-primary-contrast-color);
- font-weight: bold;
+ font-weight: 700;
border-radius: 0.25rem;
padding: 0 0.125rem;
margin: -0.125rem 0.125rem;
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 4edce9b5bf..e09ab5baab 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -89,7 +89,7 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
.side-bar-button-selected .side-bar-button-icon {
font-size: var(--sidebar-icon-size) !important;
- font-weight: bold;
+ font-weight: 700;
}
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
index 3d5032b98c..9de3d236f2 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
@@ -72,7 +72,7 @@ const modelDef = props.modelDef
object-fit: contain;
}
.model_preview_title {
- font-weight: bold;
+ font-weight: 700;
text-align: center;
font-size: 14px;
}
@@ -89,6 +89,6 @@ const modelDef = props.modelDef
font-size: 10px;
}
.model_preview_prefix {
- font-weight: bold;
+ font-weight: 700;
}
diff --git a/src/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue
index 6f4297d5e1..4b51a25e31 100644
--- a/src/components/sidebar/tabs/queue/TaskItem.vue
+++ b/src/components/sidebar/tabs/queue/TaskItem.vue
@@ -66,7 +66,7 @@
outlined
@click="handleOutputLengthClick"
>
- {{ flatOutputs.length }}
+ {{ flatOutputs.length }}
diff --git a/src/components/topbar/WorkflowTabPopover.vue b/src/components/topbar/WorkflowTabPopover.vue
index df8a4e7ec4..9972263897 100644
--- a/src/components/topbar/WorkflowTabPopover.vue
+++ b/src/components/topbar/WorkflowTabPopover.vue
@@ -223,8 +223,8 @@ defineExpose({
@apply shadow-2xl;
}
-.workflow-popover-fade.p-popover:after,
-.workflow-popover-fade.p-popover:before {
+.workflow-popover-fade.p-popover::after,
+.workflow-popover-fade.p-popover::before {
--p-popover-border-color: var(--comfy-menu-secondary-bg);
left: 50%;
transform: translateX(calc(-50% + var(--shift)));
diff --git a/src/extensions/core/groupNodeManage.css b/src/extensions/core/groupNodeManage.css
index 11c2e7f54f..b72e5606bd 100644
--- a/src/extensions/core/groupNodeManage.css
+++ b/src/extensions/core/groupNodeManage.css
@@ -30,14 +30,14 @@
}
.comfy-group-manage h2 {
margin: 0;
- font-weight: normal;
+ font-weight: 400;
}
.comfy-group-manage main {
display: flex;
overflow: hidden;
}
.comfy-group-manage .drag-handle {
- font-weight: bold;
+ font-weight: 700;
}
.comfy-group-manage-list {
border-right: 1px solid var(--comfy-menu-bg);
@@ -49,8 +49,7 @@
}
.comfy-group-manage-list-items {
max-height: calc(100% - 40px);
- overflow-y: scroll;
- overflow-x: hidden;
+ overflow: hidden scroll;
}
.comfy-group-manage-list li {
display: flex;
diff --git a/src/platform/updates/components/ReleaseNotificationToast.vue b/src/platform/updates/components/ReleaseNotificationToast.vue
index 1abcf472e8..94f21a5546 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -172,7 +172,7 @@ onMounted(async () => {
width: 448px;
padding: 16px 16px 8px;
background: #353535;
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
border-radius: 12px;
outline: 1px solid #4e4e4e;
outline-offset: -1px;
@@ -193,7 +193,7 @@ onMounted(async () => {
width: 42px;
height: 42px;
padding: 10px;
- background: rgba(0, 122, 255, 0.2);
+ background: rgb(0 122 255 / 0.2);
border-radius: 8px;
display: flex;
justify-content: center;
diff --git a/src/platform/updates/components/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
index 7349d89ef6..c4a898faf2 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -218,7 +218,7 @@ defineExpose({
width: 400px;
outline: 1px solid #4e4e4e;
outline-offset: -1px;
- box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 8px 32px rgb(0 0 0 / 0.3);
position: relative;
}
@@ -293,12 +293,6 @@ defineExpose({
transform: translate(-50%, -50%) rotate(-45deg);
}
-/* Content Section */
-.popup-content {
- display: flex;
- flex-direction: column;
-}
-
.content-text {
color: white;
font-size: 14px;
diff --git a/src/scripts/ui/menu/menu.css b/src/scripts/ui/menu/menu.css
index 33589de9c4..31404df5a1 100644
--- a/src/scripts/ui/menu/menu.css
+++ b/src/scripts/ui/menu/menu.css
@@ -17,7 +17,7 @@
}
.comfyui-button:active {
- box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.5);
+ box-shadow: inset 1px 1px 10px rgb(0 0 0 / 0.5);
}
.comfyui-button:disabled {
@@ -39,13 +39,13 @@
/* Popup */
.comfyui-popup {
position: absolute;
- left: var(--left);
- right: var(--right);
top: var(--top);
+ right: var(--right);
bottom: var(--bottom);
+ left: var(--left);
z-index: 2000;
max-height: calc(100vh - var(--limit) - 10px);
- box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
+ box-shadow: 3px 3px 5px 0 rgb(0 0 0 / 0.3);
}
.comfyui-popup:not(.open) {
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index 5b6c15582e..bce7cb901b 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -239,6 +239,6 @@ const toggleExtensionsPanel = () => {