|
: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; |
|
} |
|
|
|
@media (prefers-color-scheme: dark) { |
|
:root { |
|
--fg-color: #fff; |
|
--bg-color: #202020; |
|
} |
|
} |
|
|
|
body { |
|
width: 100vw; |
|
height: 100vh; |
|
margin: 0; |
|
overflow: hidden; |
|
background-color: var(--bg-color); |
|
color: var(--fg-color); |
|
} |
|
|
|
#graph-canvas { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.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; |
|
position: fixed; |
|
z-index: 100; |
|
padding: 30px 30px 10px 30px; |
|
background-color: var(--comfy-menu-bg); |
|
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; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.comfy-modal select, |
|
.comfy-modal input[type=button], |
|
.comfy-modal input[type=checkbox] { |
|
margin: 3px 3px 3px 4px; |
|
} |
|
|
|
.comfy-menu { |
|
font-size: 15px; |
|
position: absolute; |
|
top: 50%; |
|
right: 0; |
|
text-align: center; |
|
z-index: 999; |
|
width: 170px; |
|
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 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-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-menu > button:hover, |
|
.comfy-menu-btns button:hover, |
|
.comfy-menu .comfy-list button:hover, |
|
.comfy-modal button:hover, |
|
.comfy-settings-btn:hover { |
|
filter: brightness(1.2); |
|
cursor: pointer; |
|
} |
|
|
|
.comfy-menu 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; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.comfy-menu 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-settings-btn { |
|
background-color: rgba(0, 0, 0, 0); |
|
font-size: 12px; |
|
padding: 0; |
|
position: absolute; |
|
right: 0; |
|
border: none; |
|
} |
|
|
|
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 { |
|
visibility: hidden |
|
} |
|
} |
|
|
|
|
|
|
|
.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; |
|
} |
|
|
|
|
|
|
|
dialog { |
|
box-shadow: 0 0 20px #888888; |
|
} |
|
|
|
dialog::backdrop { |
|
background: rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
#comfy-settings-dialog { |
|
padding: 0; |
|
width: 41rem; |
|
} |
|
|
|
#comfy-settings-dialog tr > td:first-child { |
|
text-align: right; |
|
} |
|
|
|
#comfy-settings-dialog 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); |
|
} |
|
|
|
|
|
|
|
.comfy-table { |
|
border-collapse: collapse; |
|
color: var(--input-text); |
|
font-family: Arial, sans-serif; |
|
width: 100%; |
|
} |
|
|
|
.comfy-table caption { |
|
background-color: var(--bg-color); |
|
color: var(--input-text); |
|
font-size: 1rem; |
|
font-weight: bold; |
|
padding: 8px; |
|
text-align: center; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
|
|
|
|
.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%); |
|
} |
|
|
|
.litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator) { |
|
background-color: var(--comfy-menu-bg) !important; |
|
filter: brightness(155%); |
|
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); |
|
} |
|
|
|
|
|
|
|
.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%); |
|
padding-left: 0.2em; |
|
} |
|
|
|
.litegraph.lite-search-item.generic_type { |
|
color: var(--input-text); |
|
filter: brightness(50%); |
|
} |
|
|
