mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-11 16:30:57 +00:00
272f4315fa
* Initial move to sidebar Remove broken CSS Move action buttons Migrate open workflows Add basic browse WIP Add insert support Remove legacy workflow manager Remove unused CSS Reorder Remove legacy workflow UI nit * Support bookmark Add workflow bookmark store nit Add back bookmark functionality Correctly load bookmarks nit Fix many other issues Fix this binding style divider * Extract tree leaf component * Hide bookmark section when no bookmarks * nit * Fix save * Add workflows searchbox * Add search support * Show total opened * Add basic test * Add more tests * Fix redo/undo test * Temporarily disable browser tab title test
359 lines
7.1 KiB
CSS
359 lines
7.1 KiB
CSS
:root {
|
|
--comfy-floating-menu-height: 45px;
|
|
}
|
|
|
|
.mdi.rotate270::before {
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
/* Generic */
|
|
.comfyui-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
transition: box-shadow 0.1s;
|
|
}
|
|
|
|
.comfyui-button:active {
|
|
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.comfyui-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.primary .comfyui-button,
|
|
.primary.comfyui-button {
|
|
background-color: var(--primary-bg) !important;
|
|
color: var(--primary-fg) !important;
|
|
}
|
|
|
|
.primary .comfyui-button:not(:disabled):hover,
|
|
.primary.comfyui-button:not(:disabled):hover {
|
|
background-color: var(--primary-hover-bg) !important;
|
|
color: var(--primary-hover-fg) !important;
|
|
}
|
|
|
|
/* Popup */
|
|
.comfyui-popup {
|
|
position: absolute;
|
|
left: var(--left);
|
|
right: var(--right);
|
|
top: var(--top);
|
|
bottom: var(--bottom);
|
|
z-index: 2000;
|
|
max-height: calc(100vh - var(--limit) - 10px);
|
|
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.comfyui-popup:not(.open) {
|
|
display: none;
|
|
}
|
|
|
|
.comfyui-popup.right.open {
|
|
border-top-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
/* Split button */
|
|
.comfyui-split-button {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.comfyui-split-primary {
|
|
flex: auto;
|
|
}
|
|
|
|
.comfyui-split-primary .comfyui-button {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right: 1px solid var(--comfy-menu-bg);
|
|
width: 100%;
|
|
}
|
|
|
|
.comfyui-split-arrow .comfyui-button {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.comfyui-split-button-popup {
|
|
white-space: nowrap;
|
|
background-color: var(--content-bg);
|
|
color: var(--content-fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
}
|
|
|
|
.comfyui-split-button-popup.hover {
|
|
z-index: 2001;
|
|
}
|
|
.comfyui-split-button-popup > .comfyui-button {
|
|
border: none;
|
|
background-color: transparent;
|
|
color: var(--fg-color);
|
|
padding: 8px 12px 8px 8px;
|
|
}
|
|
|
|
.comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
|
|
background-color: var(--comfy-input-bg);
|
|
}
|
|
|
|
/* Button group */
|
|
.comfyui-button-group {
|
|
display: flex;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.comfyui-button-group:empty {
|
|
display: none;
|
|
}
|
|
.comfyui-button-group > .comfyui-button,
|
|
.comfyui-button-group > .comfyui-button-wrapper > .comfyui-button {
|
|
padding: 4px 10px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Menu */
|
|
.comfyui-menu {
|
|
width: 100vw;
|
|
background: var(--comfy-menu-bg);
|
|
color: var(--fg-color);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 0.8em;
|
|
display: flex;
|
|
padding: 4px 8px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
box-sizing: border-box;
|
|
z-index: 1000;
|
|
order: 0;
|
|
grid-column: 1/-1;
|
|
overflow: auto;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.comfyui-menu.floating {
|
|
width: max-content;
|
|
padding: 8px 0 8px 12px;
|
|
overflow: hidden;
|
|
border-bottom-right-radius: 12px;
|
|
height: var(--comfy-floating-menu-height);
|
|
position: absolute;
|
|
}
|
|
|
|
.comfyui-menu.floating .comfyui-logo {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.comfyui-floating-menu .comfyui-body-left {
|
|
margin-top: var(--comfy-floating-menu-height);
|
|
}
|
|
|
|
.comfyui-menu>* {
|
|
flex-shrink: 0;
|
|
}
|
|
.comfyui-menu .mdi::before {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.comfyui-menu .comfyui-button {
|
|
background: var(--comfy-input-bg);
|
|
color: var(--fg-color);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comfyui-menu .comfyui-button:not(:disabled):hover {
|
|
background: var(--border-color);
|
|
color: var(--content-fg);
|
|
}
|
|
|
|
.comfyui-menu .comfyui-split-button-popup > .comfyui-button {
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.comfyui-menu .comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
|
|
background-color: var(--comfy-input-bg);
|
|
}
|
|
|
|
.comfyui-menu .comfyui-split-button-popup.left {
|
|
border-top-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.comfyui-menu .comfyui-button.popup-open {
|
|
background-color: var(--content-bg);
|
|
color: var(--content-fg);
|
|
}
|
|
|
|
.comfyui-menu-push {
|
|
margin-left: -0.8em;
|
|
flex: auto;
|
|
}
|
|
|
|
.comfyui-logo {
|
|
font-size: 1.2em;
|
|
margin: 0;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
|
|
/** Send to workflow widget selection dialog */
|
|
.comfy-widget-selection-dialog {
|
|
border: none;
|
|
}
|
|
|
|
.comfy-widget-selection-dialog div {
|
|
color: var(--fg-color);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.comfy-widget-selection-dialog h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.comfy-widget-selection-dialog section {
|
|
width: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.comfy-widget-selection-item {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.comfy-widget-selection-item span {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.comfy-widget-selection-item span::before {
|
|
content: '#' attr(data-id);
|
|
opacity: 0.5;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.comfy-modal .comfy-widget-selection-item button {
|
|
font-size: 1em;
|
|
}
|
|
|
|
/***** Responsive *****/
|
|
.lg.comfyui-menu .lt-lg-show {
|
|
display: none !important;
|
|
}
|
|
.comfyui-menu:not(.lg) .nlg-hide {
|
|
display: none !important;
|
|
}
|
|
/** Large screen */
|
|
.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-button span,
|
|
.lg.comfyui-menu>.comfyui-menu-mobile-collapse.comfyui-button span {
|
|
display: none;
|
|
}
|
|
.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-popup .comfyui-button span {
|
|
display: unset;
|
|
}
|
|
|
|
/** Non large screen */
|
|
.lt-lg.comfyui-menu {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu > *:not(.comfyui-menu-mobile-collapse) {
|
|
order: 1;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
|
|
order: 9999;
|
|
width: 100%;
|
|
}
|
|
|
|
.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
|
|
order: -1;
|
|
}
|
|
|
|
.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-button {
|
|
top: unset;
|
|
bottom: 4px;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button-group {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button {
|
|
padding: 10px;
|
|
}
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-popup {
|
|
position: static;
|
|
background-color: var(--comfy-input-bg);
|
|
max-width: unset;
|
|
max-height: 50vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu:not(.expanded) > .comfyui-menu-mobile-collapse {
|
|
display: none;
|
|
}
|
|
|
|
.lt-lg .comfyui-queue-button {
|
|
margin-right: 44px;
|
|
}
|
|
|
|
.lt-lg .comfyui-menu-button {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 8px;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-view-list-popup {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.lt-lg.comfyui-menu .comfyui-workflows-popup {
|
|
width: 100vw;
|
|
}
|
|
|
|
/** Small */
|
|
.lt-md .comfyui-workflows-button-inner {
|
|
width: unset !important;
|
|
}
|
|
.lt-md .comfyui-workflows-label {
|
|
display: none;
|
|
}
|
|
|
|
/** Extra small */
|
|
.lt-sm .comfyui-queue-button {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
.lt-sm .comfyui-queue-button .comfyui-button {
|
|
justify-content: center;
|
|
}
|
|
.lt-sm .comfyui-interrupt-button {
|
|
margin-right: 45px;
|
|
}
|
|
.comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
|
|
bottom: 41px;
|
|
}
|
|
|