Files
Nuked88-ComfyUI-N-Sidebar/app/css/base_style_sb.css
T
2024-08-18 00:09:16 +02:00

835 lines
19 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;
box-sizing: content-box;
}
sidebar * {
box-sizing: revert; /* o qualsiasi valore tu voglia usare */
}
.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;
width: 100%;
}
.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%);
}
#searchInputSB {
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: 44px;
z-index: 400;
}
.clearIcon, .searchCategoryIcon, .clearIconCustomCategory, .searchCategoryIconCustomCategory, .clearIconCustomTemplate, .searchTemplateIconCustomTemplate, .clearIconCustomWorkflow, .searchWorkflowIconCustomWorkflow {
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, .clearIconCustomTemplate:hover, .clearIconCustomWorkflow:hover {
opacity: 1.0;
}
.clearIcon,.clearIconCustomTemplate,.clearIconCustomWorkflow {
line-height: 1.25 !important
}
.searchCategoryIcon, .searchCategoryIconCustomCategory, .searchTemplateIconCustomTemplate, .searchWorkflowIconCustomWorkflow {
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;
box-sizing: content-box;
}
.searchCategoryIcon:hover, .searchCategoryIconCustomCategory:hover, .searchTemplateIconCustomTemplate:hover, .searchWorkflowIconCustomWorkflow: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;
}
.sidebarCategory {
border-bottom:var(--comfy-input-bg) solid 1px;
text-wrap: nowrap;
}
#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);*/
}
.displayName{
float: left;
width: 87%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
/* margin: 2% auto;*/
/*display: flex;*/
align-items: center;
padding-left: 3%;
/*height: 14px;*/
}
.categoryName{
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
.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;
box-sizing: content-box;
}
.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%);
}
#searchInputSB.closed {
display: none;
}
.content_sidebar.closed {
width: 0 !important;
}
.searchCategoryIcon.closed {
display: none;
}
.clearIcon.closed {
display: none;
}
.sidebarCategory .pinButton, .sidebarItem .pinButton {
background-color: transparent;
border: 0;
position: absolute;
width: 10%;
float: left;
/* padding-top: 4px; */
/* font-size: 39px; */
height: 1.5em;
}
#sb_scrollToTopButton.closed {
display: none !important;
}
#sidebarBookmarks .pinButton {
background-color: transparent;
border: 0;
/*position: absolute;
right: 0;*/
position: relative;
width: 10%;
float: left;
}
.previewButton {
background-color: transparent;
border: 0;
position: absolute;
right: 35px;
}
.pinned {
fill: var(--descrip-text) !important;
opacity: 1 !important;
}
.svg_class {
width: 24px;
height: 18px;
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;
box-sizing: content-box;
}
#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="text"]{
background: var(--comfy-menu-bg);
color: var(--drag-text);
padding: 5px;
float: right;
width: 129px;
margin-right: 47px;
border-radius: 5px;
border: solid 1px var(--descrip-text);
}
#sb_settingsDiv .setting textarea{
background: var(--comfy-menu-bg);
color: var(--drag-text);
padding: 5px;
float: right;
width: calc(100% - 60px);
resize: vertical;
margin-right: 47px;
border-radius: 5px;
border: solid 1px var(--descrip-text);
}
#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;
}
#sbModal{
display: none;
z-index: 9999;
}