Nuked
d01019587b
ADDEDD CUSTOM CATEGORIES Added custom setting panel Re-Implemented the 'original' search function to support translated versions of ComfyUI (requires testing) Added LEFT and RIGHT positioning options Added "Auto Hide" feature Now you have the option to use the default node ordering in ComfyUI instead of the alphabetical one Added the possibility to perform a Soft or Factory Reset of the configuration Now most configuration settings are stored in the settings.json file. Fixed some bugs Added some other bugs for sure!
756 lines
16 KiB
CSS
756 lines
16 KiB
CSS
.litegraph .dialog {
|
|
z-index: 100 !important;
|
|
}
|
|
|
|
.sidebar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -250px;
|
|
left: -250px;
|
|
width: fit-content;
|
|
height: calc(100% - 19px);
|
|
color: var(--drag-text);
|
|
transition: left 0.3s ease;
|
|
z-index: 2;
|
|
padding-top: 19px;
|
|
left: 0;
|
|
user-select: none;
|
|
|
|
|
|
}
|
|
|
|
.sidebar ul {
|
|
list-style-type: none;
|
|
/* border-bottom: 6px solid rgb(from var(--comfy-input-bg) r g b / 60%);*/
|
|
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
margin-bottom: 8px;
|
|
margin-top: 0;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.sidebar li {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
color: var(--input-text);
|
|
}
|
|
|
|
.content_sidebar {
|
|
|
|
background: rgb(from var(--comfy-menu-bg) r g b / 100%);
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
float: left;
|
|
backdrop-filter: blur(5px);
|
|
width: calc(100% - 45px);
|
|
}
|
|
|
|
.dragHandle {
|
|
position: relative;
|
|
float: left;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 5px;
|
|
cursor: ew-resize;
|
|
background: rgb(62, 62, 62);
|
|
background: linear-gradient(90deg, rgb(62 62 62 / 46%) 0%, rgb(39 39 39 / 47%) 50%, rgb(28 28 28 / 31%) 100%);
|
|
}
|
|
|
|
#searchInput {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
border: none;
|
|
user-select: none;
|
|
background: var(--comfy-input-bg);
|
|
color: var(--input-text);
|
|
line-height: 1.4;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.sidebar-header {
|
|
position: absolute;
|
|
width: calc(100% - 75px);
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
margin-left: 10px;
|
|
|
|
z-index: 400;
|
|
|
|
}
|
|
|
|
.clearIcon, .searchCategoryIcon, .clearIconCustomCategory, .searchCategoryIconCustomCategory {
|
|
position: absolute;
|
|
padding: 5px;
|
|
right: 30px;
|
|
color: var(--input-text);
|
|
font-size: x-large;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
user-select: none;
|
|
line-height: 1.4;
|
|
top: 0;
|
|
}
|
|
|
|
|
|
.clearIcon:hover, .clearIconCustomCategory:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.searchCategoryIcon, .searchCategoryIconCustomCategory {
|
|
right: 0px;
|
|
padding: 3px;
|
|
font-size: larger;
|
|
background: var(--border-color);
|
|
color: var(--drag-text);
|
|
margin: 4px;
|
|
border-radius: 5px;
|
|
width: 18px;
|
|
text-align: center;
|
|
top: 0;
|
|
|
|
|
|
}
|
|
|
|
.searchCategoryIcon:hover, .searchCategoryIconCustomCategory:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sidebarCategory, #sidebarBookmarks {
|
|
list-style-type: none;
|
|
font-family: 'Open Sans', sans-serif;
|
|
text-transform: capitalize;
|
|
margin: 2px;
|
|
background-color: var(--comfy-input-bg);
|
|
opacity: 1;
|
|
border-radius: 8px;
|
|
padding-top: 11px;
|
|
font-size: 15px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
#sidebarCustomNodes {
|
|
list-style-type: none;
|
|
font-family: 'Open Sans', sans-serif;
|
|
text-transform: capitalize;
|
|
margin: 0px;
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
padding-left: 0;
|
|
padding-right: 0px;
|
|
padding-top: 0px;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.sidebarItem:hover {
|
|
background: color-mix(in srgb, currentColor 15%, transparent);
|
|
}
|
|
|
|
.sidebarItem {
|
|
list-style-type: none;
|
|
font-family: 'Open Sans', sans-serif;
|
|
text-transform: capitalize;
|
|
margin: 2px;
|
|
background: color-mix(in srgb, var(--border-color) 35%, transparent);
|
|
opacity: 1;
|
|
border-radius: 8px;
|
|
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-width: calc(100% - 39px);
|
|
}
|
|
|
|
|
|
.content_sidebar::-webkit-scrollbar {
|
|
margin-top: 0.5rem;
|
|
height: 1rem;
|
|
width: .5rem;
|
|
top: 10px;
|
|
}
|
|
|
|
.content_sidebar::-webkit-scrollbar:horizontal {
|
|
height: .5rem;
|
|
width: 1rem
|
|
}
|
|
|
|
.content_sidebar::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
border-radius: 9999px
|
|
}
|
|
|
|
.content_sidebar::-webkit-scrollbar-thumb {
|
|
--tw-border-opacity: 1;
|
|
background-color: hsla(0, 0%, 50%, .8);
|
|
border-color: rgba(255, 255, 255, 0, 0, 0);
|
|
border-radius: 9999px;
|
|
border-width: 1px
|
|
}
|
|
|
|
.content_sidebar::-webkit-scrollbar-thumb:hover {
|
|
--tw-bg-opacity: 1;
|
|
|
|
background-color: rgba(150, 150, 150, var(--tw-bg-opacity))
|
|
}
|
|
|
|
#spacer {
|
|
height: 45px;
|
|
}
|
|
|
|
|
|
.view_button {
|
|
position: relative;
|
|
float: unset;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
padding: 5px;
|
|
font-size: 20px;
|
|
background-color: var(--comfy-input-bg);
|
|
opacity: 0.7;
|
|
border-radius: 5px;
|
|
|
|
margin-top:2px;
|
|
}
|
|
.view_button:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
#sidebar_views {
|
|
position: relative;
|
|
float: left;
|
|
text-align: center;
|
|
|
|
cursor: pointer;
|
|
user-select: none;
|
|
padding: 0px 2px 2px 2px;
|
|
font-size: 20px;
|
|
border-bottom-right-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
height: 100%;
|
|
width: 30px;
|
|
border: 0;
|
|
border-left: 2px rgb(from var(--comfy-menu-bg) r g b / 100%);
|
|
border-style: solid;
|
|
padding-bottom: 0px;
|
|
backdrop-filter: blur(16px) !important;
|
|
background: rgb(from var(--comfy-menu-bg) r g b / 100%);
|
|
}
|
|
|
|
|
|
#searchInput.closed {
|
|
display: none;
|
|
}
|
|
|
|
.content_sidebar.closed {
|
|
width: 0 !important;
|
|
}
|
|
|
|
.searchCategoryIcon.closed {
|
|
display: none;
|
|
}
|
|
|
|
.clearIcon.closed {
|
|
display: none;
|
|
}
|
|
|
|
.sidebarCategory .pinButton {
|
|
background-color: transparent;
|
|
border: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
|
|
#sidebarBookmarks .pinButton {
|
|
|
|
background-color: transparent;
|
|
border: 0;
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.previewButton {
|
|
background-color: transparent;
|
|
border: 0;
|
|
position: absolute;
|
|
right: 35px;
|
|
}
|
|
|
|
.pinned {
|
|
fill: var(--descrip-text) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.svg_class {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--border-color);
|
|
cursor: pointer;
|
|
/* hacky fix */
|
|
margin-top: -5px;
|
|
margin-left: -25px;
|
|
}
|
|
|
|
.pin_normal {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.pin_normal:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.svg_class:hover {
|
|
fill: var(--border-color);
|
|
|
|
}
|
|
|
|
|
|
#sidebarBookmarks .sidebarItem {
|
|
margin-left: 10px;
|
|
margin-right: 29px;
|
|
|
|
}
|
|
|
|
.sb_label {
|
|
font-family: 'Open Sans', sans-serif;
|
|
position: relative;
|
|
margin: 5px;
|
|
font-weight: bold;
|
|
|
|
background: var(--comfy-input-bg);
|
|
border-radius: 3px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
display: block;
|
|
width: calc(100% - 20px);
|
|
text-align: center;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.expand_node, .pin_node {
|
|
position: absolute;
|
|
right: 5px;
|
|
background: transparent;
|
|
border: 0;
|
|
|
|
}
|
|
|
|
.expand_node svg, .pin_node svg {
|
|
|
|
width: 20px;
|
|
height: 20px;
|
|
background: transparent;
|
|
fill: var(--input-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sb_dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: grey;
|
|
}
|
|
|
|
.node_header {
|
|
line-height: 1;
|
|
padding: 8px 13px 7px;
|
|
background: var(--comfy-input-bg);
|
|
margin-bottom: 5px;
|
|
font-size: 15px;
|
|
text-wrap: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.headdot {
|
|
width: 10px;
|
|
height: 10px;
|
|
float: inline-start;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.sb_hidden {
|
|
display: none;
|
|
}
|
|
|
|
.IMAGE {
|
|
background-color: #64b5f6;
|
|
}
|
|
|
|
.VAE {
|
|
background-color: #ff6e6e;
|
|
}
|
|
|
|
.LATENT {
|
|
background-color: #ff9cf9;
|
|
}
|
|
|
|
.MASK {
|
|
background-color: #81c784;
|
|
}
|
|
|
|
.CONDITIONING {
|
|
background-color: #ffa931;
|
|
}
|
|
|
|
.CLIP {
|
|
background-color: #ffd500;
|
|
}
|
|
|
|
.MODEL {
|
|
background-color: #b39ddb;
|
|
}
|
|
|
|
.CONTROL_NET {
|
|
background-color: #a5d6a7;
|
|
}
|
|
|
|
|
|
#previewDiv {
|
|
position: absolute;
|
|
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);
|
|
display: none;
|
|
min-width: 300px;
|
|
width: min-content;
|
|
height: fit-content;
|
|
z-index: 9999;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
|
|
#previewDiv .sb_description {
|
|
margin: 10px;
|
|
padding: 6px;
|
|
background: var(--border-color);
|
|
border-radius: 5px;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.sb_table {
|
|
display: grid;
|
|
|
|
grid-column-gap: 10px;
|
|
/* Spazio tra le colonne */
|
|
width: 100%;
|
|
/* Imposta la larghezza della tabella al 100% del contenitore */
|
|
}
|
|
|
|
.sb_row {
|
|
display: grid;
|
|
grid-template-columns: 10px 1fr 1fr 1fr 10px;
|
|
grid-column-gap: 10px;
|
|
align-items: baseline;
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
|
|
.sb_row_string {
|
|
grid-template-columns: 10px 1fr 1fr 10fr 1fr;
|
|
}
|
|
|
|
.sb_col {
|
|
border: 0px solid #000;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-direction: row-reverse;
|
|
flex-wrap: nowrap;
|
|
align-content: flex-start;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sb_inherit {
|
|
display: inherit;
|
|
}
|
|
|
|
.long_field {
|
|
background: var(--bg-color);
|
|
border: 2px solid var(--border-color);
|
|
margin: 5px 5px 0 5px;
|
|
border-radius: 10px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.sb_arrow {
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
.sb_preview_badge {
|
|
text-align: center;
|
|
background: var(--comfy-input-bg);
|
|
font-weight: bold;
|
|
color: var(--error-text);
|
|
}
|
|
|
|
#sb_scrollToTopButton {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 56px;
|
|
cursor: pointer;
|
|
display: none;
|
|
|
|
border-radius: 20%;
|
|
background: var(--comfy-menu-bg);
|
|
padding: 4px;
|
|
border: 1px solid #4c4c4c;
|
|
}
|
|
|
|
#sb_scrollToTopButton svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: var(--descrip-text);
|
|
}
|
|
|
|
|
|
|
|
|
|
.panel_sidebar{
|
|
min-height: 200px;
|
|
|
|
border-radius: 5px;
|
|
margin-left: 7px;
|
|
}
|
|
|
|
.panel_sidebar label{
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.custom-menu {
|
|
box-shadow: inset 0px 0px 0px rgb(44 44 44 / 5%), inset 1px -1px 0px 0px rgb(22 22 22 / 50%), 0px 0px 9px 0px rgb(0, 0, 0);
|
|
font-family: Arial, sans-serif;
|
|
display: none;
|
|
position: absolute;
|
|
background-color: var(--bg-color);
|
|
border: 0px solid #313131;
|
|
color: var(--input-text);
|
|
padding: 5px 0;
|
|
border-radius: 5px;
|
|
z-index: 9999;
|
|
/* backdrop-filter: blur(5px);
|
|
background: rgb(from #353535 r g b / 50%);*/
|
|
}
|
|
.custom-menu ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
.custom-menu li {
|
|
padding: 8px 15px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
#menu-options li {
|
|
|
|
min-width: 134px;
|
|
}
|
|
|
|
|
|
|
|
.custom-menu .sub-menu li:first-child {
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
|
|
|
|
.custom-menu .sub-menu li:last-child {
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
.custom-menu li:hover {
|
|
background-color: var(--border-color);
|
|
}
|
|
.sub-menu {
|
|
|
|
box-shadow: inset 0px 0px 0px rgb(44 44 44 / 5%), inset 1px -1px 0px 0px rgb(22 22 22 / 50%), 0px 0px 9px 0px rgb(0, 0, 0);
|
|
font-family: Arial, sans-serif;
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
background-color: var(--bg-color);
|
|
border: 0px solid #313131;
|
|
border-radius: 5px;
|
|
border-top-left-radius: 0px;
|
|
|
|
z-index: 1001; /* Ensure sub-menu appears above main menu */
|
|
/*
|
|
backdrop-filter: blur(5px);
|
|
background: rgb(from #353535 r g b / 50%);*/
|
|
}
|
|
|
|
.cat_empty {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
|
|
/* Settings */
|
|
#switch_settings{
|
|
bottom: 5px;
|
|
position: absolute;
|
|
width: 19px;
|
|
height: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
#sb_settingsDiv{
|
|
outline: 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: var(--bg-color);
|
|
color: var(--input-text);
|
|
box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.05), inset -1px -1px 0px rgba(0, 0, 0, 0.5), 2px 2px 20px rgb(0, 0, 0);
|
|
max-width: 800px;
|
|
box-sizing: border-box;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 0.8rem;
|
|
padding: 5px 20px 20px 20px;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1001;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
#sb_settingsDiv .setting{
|
|
height: 28px;
|
|
width: 450px;
|
|
margin-bottom: 7px;
|
|
}
|
|
#sb_settingsDiv .setting input[type="range"]{
|
|
height: 28px;
|
|
|
|
}
|
|
|
|
#sb_settingsDiv .setting input[type="checkbox"]{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
#sb_settingsDiv .setting input{
|
|
float: right;
|
|
}
|
|
#sb_settingsDiv .setting label{
|
|
line-height: 1.8;
|
|
}
|
|
#sb_settingsDiv .slider-container{
|
|
float: right;
|
|
width: 36px;
|
|
background: var(--comfy-menu-bg);
|
|
padding: 3px;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
margin: 5px auto;
|
|
}
|
|
|
|
#sb_settingsDiv h1{
|
|
margin: 0 0 20px 0;
|
|
padding: 0 0 5px 0;
|
|
text-align: center;
|
|
border-bottom: 5px solid var(--border-color);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#sb_settingsDiv button{
|
|
|
|
padding: 9px;
|
|
/* position: absolute; */
|
|
bottom: 0;
|
|
width: 100%;
|
|
margin: 0 0 20px 0;
|
|
background: var(--comfy-menu-bg);
|
|
color: var(--input-text);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
#sb_settingsDiv button:hover{
|
|
filter: brightness(120%);
|
|
}
|
|
|
|
#sb_settingsDiv i{
|
|
margin-left: 4px;
|
|
color: #0075ff;
|
|
font-style: normal;
|
|
font-size: larger;
|
|
}
|
|
|
|
/* MODALS */
|
|
.sb-modal-title{
|
|
position: absolute;
|
|
top: 4px;
|
|
margin-top: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sb-modal-backdrop, .sb-modal-backdrop-settings {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.2); /* Add desired opacity */
|
|
z-index: 1000; /* Make sure the backdrop is behind the modal */
|
|
}
|
|
|
|
|
|
#sb_settingsDiv select{
|
|
background: var(--comfy-menu-bg);
|
|
color: var(--drag-text);
|
|
padding: 5px;
|
|
float: right;
|
|
width: 129px;
|
|
margin-right: 47px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.colorBlob {
|
|
float: right;
|
|
overflow: hidden;
|
|
margin-top: 34px;
|
|
width: 100%;
|
|
height: 125px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.colorBlob input[type='color'] {
|
|
width: 106%;
|
|
height: 112%;
|
|
margin: -6px;
|
|
}
|
|
|
|
|
|
|
|
#switch_home,#switch_custom_view{
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
}
|
|
|
|
#switch_sidebar{
|
|
|
|
margin-top: 5px;
|
|
} |