MilesandClaude Opus 4.6
fff96df2ca
Floating RGBA color picker panel for coloring selected ComfyUI nodes. Integrates with the MCE bottom bar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
116 lines
2.4 KiB
CSS
116 lines
2.4 KiB
CSS
/* ComfyUI-NodeColorizer floating panel */
|
|
|
|
#mce-node-colorizer-panel {
|
|
position: fixed;
|
|
z-index: 10050;
|
|
width: 320px;
|
|
max-width: calc(100vw - 24px);
|
|
|
|
border-radius: 14px;
|
|
padding: 10px;
|
|
|
|
background: rgba(25, 25, 28, 0.95);
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
|
|
|
color: rgba(255, 255, 255, 0.92);
|
|
font: 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
|
cursor: move;
|
|
user-select: none;
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-title {
|
|
font-weight: 700;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-close {
|
|
cursor: pointer;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.10);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
border-radius: 10px;
|
|
padding: 6px 10px;
|
|
}
|
|
#mce-node-colorizer-panel .nc-close:hover {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-body {
|
|
padding: 10px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-row {
|
|
display: grid;
|
|
grid-template-columns: 56px 1fr 50px;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-row label {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
#mce-node-colorizer-panel input[type="range"] {
|
|
width: 100%;
|
|
}
|
|
|
|
#mce-node-colorizer-panel input[type="number"] {
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-preview {
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
#mce-node-colorizer-panel .nc-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#mce-node-colorizer-panel button.nc-btn {
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 9px 12px;
|
|
cursor: pointer;
|
|
|
|
background: rgba(255, 255, 255, 0.10);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
#mce-node-colorizer-panel button.nc-btn:hover {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
#mce-node-colorizer-panel button.nc-btn.primary {
|
|
background: rgba(255, 0, 0, 0.24);
|
|
border: 1px solid rgba(255, 0, 0, 0.30);
|
|
}
|
|
#mce-node-colorizer-panel button.nc-btn.primary:hover {
|
|
background: rgba(255, 0, 0, 0.30);
|
|
}
|
|
|