diff --git a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png index ade1f674d6..a371964baa 100644 Binary files a/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png and b/browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png differ diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png index a73ca4c33b..ccfcbd7ba6 100644 Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png differ diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png index 67190e3354..a6d0ffdbab 100644 Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png differ diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png index 013a56f85a..a77af5fc8a 100644 Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png differ diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png index 54b98eaecd..c5855906dd 100644 Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png differ diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png index 67190e3354..a6d0ffdbab 100644 Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png differ diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css index ba0e343d8a..abe1f5d558 100644 --- a/packages/design-system/src/css/style.css +++ b/packages/design-system/src/css/style.css @@ -1190,24 +1190,19 @@ dialog::backdrop { .litegraph.litecontextmenu, .litegraph.litecontextmenu.dark { z-index: 9999 !important; - background-color: var(--comfy-menu-bg) !important; + background-color: var(--comfy-menu-bg); } -.litegraph.litecontextmenu - .litemenu-entry:hover:not(.disabled):not(.separator) { - background-color: var(--comfy-menu-hover-bg, var(--border-color)) !important; - color: var(--fg-color); -} .litegraph.litecontextmenu .litemenu-entry.submenu, .litegraph.litecontextmenu.dark .litemenu-entry.submenu { - background-color: var(--comfy-menu-bg) !important; - color: var(--input-text); + background-color: var(--comfy-menu-bg); + color: var(--fg-color); } .litegraph.litecontextmenu input { - background-color: var(--comfy-input-bg) !important; - color: var(--input-text) !important; + background-color: var(--comfy-input-bg); + color: var(--input-text); } .comfy-context-menu-filter { @@ -1248,14 +1243,14 @@ dialog::backdrop { .litegraph.litesearchbox { z-index: 9999 !important; - background-color: var(--comfy-menu-bg) !important; + background-color: var(--comfy-menu-bg); overflow: hidden; display: block; } .litegraph.litesearchbox input, .litegraph.litesearchbox select { - background-color: var(--comfy-input-bg) !important; + background-color: var(--comfy-input-bg); color: var(--input-text); } diff --git a/src/lib/litegraph/public/css/litegraph.css b/src/lib/litegraph/public/css/litegraph.css index 0dc83dca9c..9a644149b9 100644 --- a/src/lib/litegraph/public/css/litegraph.css +++ b/src/lib/litegraph/public/css/litegraph.css @@ -21,8 +21,8 @@ min-width: 100px; color: #aaf; padding: 0; - box-shadow: 0 0 10px black !important; - background-color: #2e2e2e !important; + box-shadow: 0 0 10px black; + background-color: #2e2e2e; z-index: 10; max-height: -webkit-fill-available; overflow-y: auto; @@ -36,10 +36,6 @@ } } -.litegraph.litecontextmenu.dark { - background-color: #000 !important; -} - .litegraph.litecontextmenu .litemenu-title img { margin-top: 2px; margin-left: 2px; @@ -51,14 +47,6 @@ padding: 2px; } -.litegraph.litecontextmenu .litemenu-entry.submenu { - background-color: #2e2e2e !important; -} - -.litegraph.litecontextmenu.dark .litemenu-entry.submenu { - background-color: #000 !important; -} - .litegraph .litemenubar ul { font-family: Tahoma, sans-serif; margin: 0; @@ -132,14 +120,13 @@ .litegraph .litemenu-entry.separator { display: block; - border-top: 1px solid #333; - border-bottom: 1px solid #666; + border-top: 1px solid var(--border-default); width: 100%; height: 0px; margin: 3px 0 2px 0; background-color: transparent; - padding: 0 !important; - cursor: default !important; + padding: 0; + cursor: default; } .litegraph .litemenu-entry.has_submenu { @@ -155,8 +142,8 @@ } .litegraph .litemenu-entry:hover:not(.disabled):not(.separator) { - background-color: #444 !important; - color: #eee; + background-color: var(--palette-interface-panel-hover-surface); + color: var(--content-hover-fg); transition: all 0.2s; } @@ -259,7 +246,8 @@ margin-top: -150px; margin-left: -200px; - background-color: #2a2a2a; + color: var(--base-foreground); + background-color: var(--comfy-menu-bg); min-width: 400px; min-height: 200px; @@ -299,8 +287,7 @@ } .litegraph .dialog .dialog-header { - color: #aaa; - border-bottom: 1px solid #161616; + border-bottom: 1px solid var(--border-default); } .litegraph .dialog .dialog-header { @@ -310,11 +297,12 @@ height: 50px; padding: 10px; margin: 0; - border-top: 1px solid #1a1a1a; + border-top: 1px solid var(--border-default); } .litegraph .dialog .dialog-header .dialog-title { - font: 20px "Arial"; + font: 1rem; + font-family: Inter, Arial, sans-serif; margin: 4px; padding: 4px 10px; display: inline-block; @@ -326,7 +314,7 @@ width: 100%; min-height: 100px; display: inline-block; - color: #aaa; + /* color: #aaa; */ /*background-color: black;*/ overflow: auto; } @@ -362,8 +350,7 @@ display: block; width: calc(100% - 4px); height: 1px; - border-top: 1px solid #000; - border-bottom: 1px solid #333; + border-top: 1px solid var(--border-default); margin: 10px 2px; padding: 0; } @@ -373,12 +360,8 @@ padding: 4px; } -.litegraph .dialog .property:hover { - background: #545454; -} - .litegraph .dialog .property_name { - color: #737373; + color: var(--muted-foreground); display: inline-block; text-align: left; vertical-align: top; @@ -395,8 +378,8 @@ .litegraph .dialog .property_value { display: inline-block; text-align: right; - color: #aaa; - background-color: #1a1a1a; + color: var(--input-text); + background-color: var(--component-node-widget-background); /*width: calc( 100% - 122px );*/ max-width: calc(100% - 162px); min-width: 200px; @@ -432,18 +415,18 @@ border-radius: 4px; padding: 4px 20px; margin-left: 0px; - background-color: #060606; - color: #8e8e8e; + background-color: var(--secondary-background); + color: var(--base-foreground); } .litegraph .dialog .btn:hover { - background-color: #111; - color: #fff; + background-color: var(--secondary-background-hover); + color: var(--base-foreground); } .litegraph .dialog .btn.delete:hover { - background-color: #f33; - color: black; + background-color: var(--color-danger-100); + color: var(--base-foreground); } .litegraph .bullet_icon { @@ -497,11 +480,11 @@ .graphmenu-entry.danger, .litemenu-entry.danger { - color: var(--error-text) !important; + color: var(--error-text); } .litegraph .litemenu-entry.danger:hover:not(.disabled) { - color: var(--error-text) !important; + color: var(--error-text); opacity: 0.8; } @@ -518,8 +501,7 @@ } .graphmenu-entry.separator { - background-color: #111; - border-bottom: 1px solid #666; + background-color: var(--border-default); height: 1px; width: calc(100% - 20px); -moz-width: calc(100% - 20px); @@ -551,7 +533,7 @@ min-height: 2em; background-color: #333; font-size: 1.2em; - box-shadow: 0 0 10px black !important; + box-shadow: 0 0 10px black; z-index: 10; }