mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
a28ac0c0fa
* Disable default searchbox Add headlessui and vue Add vite's vue plugin Vue app helloworld Format vue Add vue shim minimal working searchbox Add primevue dark mode Use primevue nit Add fuse fuzzy search Add tailwindcss / center searchbox Fix style Add node source chip desc text wrapping Add placeholder inputbox filter support wip Revert some filter designs Add filter modal Drop down show all nodes Change modal font Add filtered search nit Complete on focus Auto fill filterOption Fix dropdown Fix z-index Fix search bug Properly remove chip Adjust node source detection Resolve merge conflict nit * Refactor * Use badge to display filter type * nit * Trigger on canvas event * nit * Auto add data type filter when link released * nit * Auto focus when shown * Focus on add/remvoe filter * close dialog when escape pressed * Add node at fixed location * nit * Update litegraph * nit * Change theme * Increase search limit * Add node on event location * Clear filter when dialog closed * Enable/Disable new search bx * Improve app loading * Fix copy node * Update test expectations * Update test expectations [skip ci] --------- Co-authored-by: github-actions <github-actions@github.com>
652 lines
12 KiB
CSS
652 lines
12 KiB
CSS
:root {
|
|
--fg-color: #000;
|
|
--bg-color: #fff;
|
|
--comfy-menu-bg: #353535;
|
|
--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;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--fg-color: #fff;
|
|
--bg-color: #202020;
|
|
--content-bg: #4e4e4e;
|
|
--content-fg: #fff;
|
|
--content-hover-bg: #222;
|
|
--content-hover-fg: #fff;
|
|
}
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: auto auto 1fr auto;
|
|
background-color: var(--bg-color);
|
|
color: var(--fg-color);
|
|
min-height: -webkit-fill-available;
|
|
max-height: -webkit-fill-available;
|
|
min-width: -webkit-fill-available;
|
|
max-width: -webkit-fill-available;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.comfyui-body-top {
|
|
order: 0;
|
|
grid-column: 1/-1;
|
|
z-index: 10;
|
|
}
|
|
|
|
.comfyui-body-left {
|
|
order: 1;
|
|
z-index: 10;
|
|
}
|
|
|
|
#graph-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
order: 2;
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.comfyui-body-right {
|
|
order: 3;
|
|
z-index: 10;
|
|
}
|
|
|
|
.comfyui-body-bottom {
|
|
order: 4;
|
|
grid-column: 1/-1;
|
|
z-index: 10;
|
|
}
|
|
|
|
.comfy-multiline-input {
|
|
background-color: var(--comfy-input-bg);
|
|
color: var(--input-text);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
padding: 2px;
|
|
resize: none;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.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: var(--comfy-menu-bg); /* Modal background */
|
|
color: var(--error-text);
|
|
box-shadow: 0 0 20px #888888;
|
|
border-radius: 10px;
|
|
top: 50%;
|
|
left: 50%;
|
|
max-width: 80vw;
|
|
max-height: 80vh;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
justify-content: center;
|
|
font-family: monospace;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.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-menu-hamburger {
|
|
position: fixed;
|
|
top: 10px;
|
|
z-index: 9999;
|
|
right: 10px;
|
|
width: 30px;
|
|
display: none;
|
|
gap: 8px;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
}
|
|
.comfy-menu-hamburger div {
|
|
height: 3px;
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
background-color: white;
|
|
}
|
|
|
|
.comfy-menu {
|
|
font-size: 15px;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
text-align: center;
|
|
z-index: 999;
|
|
width: 190px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: var(--descrip-text);
|
|
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);
|
|
}
|
|
|
|
.comfy-menu-header {
|
|
display: flex;
|
|
}
|
|
|
|
.comfy-menu-actions {
|
|
display: flex;
|
|
gap: 3px;
|
|
align-items: center;
|
|
height: 20px;
|
|
position: relative;
|
|
top: -1px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.comfy-menu .comfy-menu-actions button {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
padding: 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.comfy-menu .comfy-menu-actions .comfy-settings-btn {
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
button.comfy-close-menu-btn {
|
|
font-size: 1em;
|
|
line-height: 12px;
|
|
color: #ccc;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.comfy-menu-queue-size {
|
|
flex: auto;
|
|
}
|
|
|
|
.comfy-menu button,
|
|
.comfy-modal button {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.comfy-menu-btns {
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.comfy-menu-btns button {
|
|
font-size: 10px;
|
|
width: 50%;
|
|
color: var(--descrip-text) !important;
|
|
}
|
|
|
|
.comfy-menu > button {
|
|
width: 100%;
|
|
}
|
|
|
|
.comfy-btn,
|
|
.comfy-menu > button,
|
|
.comfy-menu-btns button,
|
|
.comfy-menu .comfy-list button,
|
|
.comfy-modal button {
|
|
color: var(--input-text);
|
|
background-color: var(--comfy-input-bg);
|
|
border-radius: 8px;
|
|
border-color: var(--border-color);
|
|
border-style: solid;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.comfy-btn:hover:not(:disabled),
|
|
.comfy-menu > button:hover,
|
|
.comfy-menu-btns button:hover,
|
|
.comfy-menu .comfy-list button:hover,
|
|
.comfy-modal button:hover,
|
|
.comfy-menu-actions button:hover {
|
|
filter: brightness(1.2);
|
|
will-change: transform;
|
|
cursor: pointer;
|
|
}
|
|
|
|
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: var(--drag-text);
|
|
text-shadow: 1px 0 1px black;
|
|
}
|
|
|
|
span.drag-handle::after {
|
|
content: '.. .. ..';
|
|
}
|
|
|
|
.comfy-queue-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.comfy-list {
|
|
color: var(--descrip-text);
|
|
background-color: var(--comfy-menu-bg);
|
|
margin-bottom: 10px;
|
|
border-color: var(--border-color);
|
|
border-style: solid;
|
|
}
|
|
|
|
.comfy-list-items {
|
|
overflow-y: scroll;
|
|
max-height: 100px;
|
|
min-height: 25px;
|
|
background-color: var(--comfy-input-bg);
|
|
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-queue-btn {
|
|
margin: 6px 0 !important;
|
|
}
|
|
|
|
.comfy-modal.comfy-settings,
|
|
.comfy-modal.comfy-manage-templates {
|
|
text-align: center;
|
|
font-family: sans-serif;
|
|
color: var(--descrip-text);
|
|
z-index: 99;
|
|
}
|
|
|
|
.comfy-modal.comfy-settings input[type="range"] {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.comfy-modal.comfy-settings input[type="range"] + input[type="number"] {
|
|
width: 3.5em;
|
|
}
|
|
|
|
.comfy-modal input,
|
|
.comfy-modal select {
|
|
color: var(--input-text);
|
|
background-color: var(--comfy-input-bg);
|
|
border-radius: 8px;
|
|
border-color: var(--border-color);
|
|
border-style: solid;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.comfy-tooltip-indicator {
|
|
text-decoration: underline;
|
|
text-decoration-style: dashed;
|
|
}
|
|
|
|
@media only screen and (max-height: 850px) {
|
|
.comfy-menu {
|
|
top: 0 !important;
|
|
bottom: 0 !important;
|
|
left: auto !important;
|
|
right: 0 !important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.comfy-menu span.drag-handle {
|
|
display: none;
|
|
}
|
|
|
|
.comfy-menu-queue-size {
|
|
flex: unset;
|
|
}
|
|
|
|
.comfy-menu-header {
|
|
justify-content: space-between;
|
|
}
|
|
.comfy-menu-actions {
|
|
gap: 10px;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
/* Input popup */
|
|
|
|
.graphdialog {
|
|
min-height: 1em;
|
|
background-color: var(--comfy-menu-bg);
|
|
}
|
|
|
|
.graphdialog .name {
|
|
font-size: 14px;
|
|
font-family: sans-serif;
|
|
color: var(--descrip-text);
|
|
}
|
|
|
|
.graphdialog button {
|
|
margin-top: unset;
|
|
vertical-align: unset;
|
|
height: 1.6em;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.graphdialog input, .graphdialog textarea, .graphdialog select {
|
|
background-color: var(--comfy-input-bg);
|
|
border: 2px solid;
|
|
border-color: var(--border-color);
|
|
color: var(--input-text);
|
|
border-radius: 12px 0 0 12px;
|
|
}
|
|
|
|
/* Dialogs */
|
|
|
|
dialog {
|
|
box-shadow: 0 0 20px #888888;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.comfy-dialog.comfyui-dialog {
|
|
top: 0;
|
|
}
|
|
|
|
.comfy-dialog.comfy-modal {
|
|
font-family: Arial, sans-serif;
|
|
border-color: var(--bg-color);
|
|
box-shadow: none;
|
|
border: 2px solid var(--border-color);
|
|
}
|
|
|
|
.comfy-dialog .comfy-modal-content {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.comfy-dialog .comfy-modal-content h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.comfy-dialog .comfy-modal-content > p {
|
|
width: 100%;
|
|
}
|
|
|
|
.comfy-dialog .comfy-modal-content > .comfyui-button {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
#comfy-settings-dialog {
|
|
padding: 0;
|
|
width: 41rem;
|
|
}
|
|
|
|
#comfy-settings-dialog tr > td:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
#comfy-settings-dialog tbody button, #comfy-settings-dialog table > button {
|
|
background-color: var(--bg-color);
|
|
border: 1px var(--border-color) solid;
|
|
border-radius: 0;
|
|
color: var(--input-text);
|
|
font-size: 1rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
#comfy-settings-dialog button:hover {
|
|
background-color: var(--tr-odd-bg-color);
|
|
}
|
|
|
|
/* General CSS for tables */
|
|
|
|
.comfy-table {
|
|
border-collapse: collapse;
|
|
color: var(--input-text);
|
|
font-family: Arial, sans-serif;
|
|
width: 100%;
|
|
}
|
|
|
|
.comfy-table caption {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--bg-color);
|
|
color: var(--input-text);
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
padding: 8px;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.comfy-table caption .comfy-btn {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: 0;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
border: none;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
aspect-ratio: 1/1;
|
|
user-select: none;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.comfy-table caption .comfy-btn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.comfy-table tr:nth-child(even) {
|
|
background-color: var(--tr-even-bg-color);
|
|
}
|
|
|
|
.comfy-table tr:nth-child(odd) {
|
|
background-color: var(--tr-odd-bg-color);
|
|
}
|
|
|
|
.comfy-table td,
|
|
.comfy-table th {
|
|
border: 1px solid var(--border-color);
|
|
padding: 8px;
|
|
}
|
|
|
|
/* Context menu */
|
|
|
|
.litegraph .dialog {
|
|
z-index: 1;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.litegraph .litemenu-entry.has_submenu {
|
|
position: relative;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.litemenu-entry.has_submenu::after {
|
|
content: ">";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 2px;
|
|
}
|
|
|
|
.litegraph.litecontextmenu,
|
|
.litegraph.litecontextmenu.dark {
|
|
z-index: 9999 !important;
|
|
background-color: var(--comfy-menu-bg) !important;
|
|
filter: brightness(95%);
|
|
will-change: transform;
|
|
}
|
|
|
|
.litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator) {
|
|
background-color: var(--comfy-menu-bg) !important;
|
|
filter: brightness(155%);
|
|
will-change: transform;
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.litegraph.litecontextmenu .litemenu-entry.submenu,
|
|
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
|
|
background-color: var(--comfy-menu-bg) !important;
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.litegraph.litecontextmenu input {
|
|
background-color: var(--comfy-input-bg) !important;
|
|
color: var(--input-text) !important;
|
|
}
|
|
|
|
.comfy-context-menu-filter {
|
|
box-sizing: border-box;
|
|
border: 1px solid #999;
|
|
margin: 0 0 5px 5px;
|
|
width: calc(100% - 10px);
|
|
}
|
|
|
|
.comfy-img-preview {
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.comfy-img-preview img {
|
|
object-fit: contain;
|
|
width: var(--comfy-img-preview-width);
|
|
height: var(--comfy-img-preview-height);
|
|
}
|
|
|
|
.comfy-missing-nodes li button {
|
|
font-size: 12px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* Search box */
|
|
|
|
.litegraph.litesearchbox {
|
|
z-index: 9999 !important;
|
|
background-color: var(--comfy-menu-bg) !important;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
|
|
.litegraph.litesearchbox input,
|
|
.litegraph.litesearchbox select {
|
|
background-color: var(--comfy-input-bg) !important;
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.litegraph.lite-search-item {
|
|
color: var(--input-text);
|
|
background-color: var(--comfy-input-bg);
|
|
filter: brightness(80%);
|
|
will-change: transform;
|
|
padding-left: 0.2em;
|
|
}
|
|
|
|
.litegraph.lite-search-item.generic_type {
|
|
color: var(--input-text);
|
|
filter: brightness(50%);
|
|
will-change: transform;
|
|
}
|
|
|
|
@media only screen and (max-width: 450px) {
|
|
#comfy-settings-dialog .comfy-table tbody {
|
|
display: grid;
|
|
}
|
|
#comfy-settings-dialog .comfy-table tr {
|
|
display: grid;
|
|
}
|
|
#comfy-settings-dialog tr > td:first-child {
|
|
text-align: center;
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
#comfy-settings-dialog tr > td:not(:first-child) {
|
|
text-align: center;
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
audio.comfy-audio.empty-audio-widget {
|
|
display: none;
|
|
}
|
|
|
|
#vue-app {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Set auto complete panel's width as it is not accessible within vue-root */
|
|
.p-autocomplete-overlay {
|
|
max-width: 25vw;
|
|
}
|