109 lines
2.9 KiB
SCSS
109 lines
2.9 KiB
SCSS
// Improvements to litegraph's css.
|
|
// Taken from ComfyUI.
|
|
|
|
:root {
|
|
--litegraph-fg-color: #000;
|
|
--litegraph-bg-color: #fff;
|
|
--litegraph-comfy-menu-bg: #353535;
|
|
--litegraph-comfy-input-bg: #222;
|
|
--litegraph-input-text: #ddd;
|
|
--litegraph-descrip-text: #999;
|
|
--litegraph-drag-text: #ccc;
|
|
--litegraph-error-text: #ff4444;
|
|
--litegraph-border-color: #4e4e4e;
|
|
}
|
|
|
|
.litegraph {
|
|
/* Input popup */
|
|
&.graphdialog {
|
|
min-height: 1em;
|
|
background-color: var(--litegraph-comfy-menu-bg);
|
|
.name {
|
|
font-size: 14px;
|
|
font-family: sans-serif;
|
|
color: var(--litegraph-descrip-text);
|
|
}
|
|
button {
|
|
margin-top: unset;
|
|
vertical-align: unset;
|
|
height: 1.6em;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
.graphdialog input, .graphdialog textarea, .graphdialog select {
|
|
background-color: var(--litegraph-comfy-input-bg);
|
|
border: 2px solid;
|
|
border-color: var(--litegraph-border-color);
|
|
color: var(--litegraph-input-text);
|
|
border-radius: 12px 0 0 12px;
|
|
}
|
|
|
|
/* Context Menu */
|
|
.litemenu-entry {
|
|
&.has_submenu {
|
|
position: relative;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
&.litecontextmenu {
|
|
.litemenu-entry {
|
|
&:hover {
|
|
&:not(.disabled):not(.separator) {
|
|
background-color: var(--litegraph-comfy-menu-bg) !important;
|
|
filter: brightness(155%);
|
|
color: var(--litegraph-input-text);
|
|
}
|
|
}
|
|
}
|
|
input {
|
|
background-color: var(--litegraph-comfy-input-bg) !important;
|
|
color: var(--litegraph-input-text) !important;
|
|
}
|
|
}
|
|
&.litesearchbox {
|
|
z-index: 9999 !important;
|
|
background-color: var(--litegraph-comfy-menu-bg) !important;
|
|
overflow: hidden;
|
|
}
|
|
&.lite-search-item {
|
|
color: var(--litegraph-input-text);
|
|
background-color: var(--litegraph-comfy-input-bg);
|
|
filter: brightness(80%);
|
|
padding-left: 0.2em;
|
|
&.generic_type {
|
|
color: var(--litegraph-input-text);
|
|
filter: brightness(50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.litemenu-entry {
|
|
&.has_submenu {
|
|
&::after {
|
|
content: ">";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.litegraph.litecontextmenu,
|
|
.litegraph.litecontextmenu.dark {
|
|
z-index: 9999 !important;
|
|
background-color: var(--litegraph-comfy-menu-bg) !important;
|
|
filter: brightness(95%);
|
|
}
|
|
|
|
.litegraph.litecontextmenu .litemenu-entry.submenu,
|
|
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
|
|
background-color: var(--litegraph-comfy-menu-bg) !important;
|
|
color: var(--litegraph-input-text);
|
|
}
|
|
|
|
.litegraph.litesearchbox input,
|
|
.litegraph.litesearchbox select {
|
|
background-color: var(--litegraph-comfy-input-bg) !important;
|
|
color: var(--litegraph-input-text);
|
|
}
|