Greg
40394461ad
Two issues: 1) Enabled rows now have a visual indicator beyond the toggle pill: - Bold title text tinted toward the accent color - Left edge stripe in the accent color (via inset box-shadow) - Subtle gradient wash from the accent color into the row bg All driven by --cnv-accent so it picks up the user's custom color. Applied at render time AND on every periodic sync so external toggles (via the canvas muter directly) update the panel too. 2) Shortcut edits weren't persisting. Root cause: I only attached a "change" event listener to the shortcut list, and text inputs only fire change on blur. So typing a key char then immediately picking a group from the select could lose the unsaved key value when the panel closed without the input ever blurring. Fix: also attach an "input" listener — fires per keystroke for text inputs and on selection for selects. Either path now persists.
298 lines
6.7 KiB
CSS
298 lines
6.7 KiB
CSS
/* comfyui-navigator panel. Colors are CSS variables so the runtime
|
|
settings panel can override them; defaults match rgthree's Fast
|
|
Groups Muter aesthetic. */
|
|
|
|
.cnv-panel {
|
|
--cnv-bg: #0e283f;
|
|
--cnv-header-bg: #1e4f88;
|
|
--cnv-accent: #2864ad;
|
|
--cnv-text: #ffffff;
|
|
--cnv-text-dim: #6f93bf;
|
|
--cnv-row-hover: #163657;
|
|
--cnv-border: #000000;
|
|
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 12px;
|
|
width: 290px;
|
|
max-height: calc(100vh - 120px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--cnv-bg);
|
|
border: 1px solid var(--cnv-border);
|
|
border-radius: 8px;
|
|
font: 12px/1.3 ui-sans-serif, system-ui, sans-serif;
|
|
color: var(--cnv-text);
|
|
user-select: none;
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.cnv-panel--dragging { opacity: 0.92; }
|
|
.cnv-panel--dragging * { cursor: grabbing !important; }
|
|
|
|
/* Header = the muter's title bar */
|
|
.cnv-panel__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 10px;
|
|
background: var(--cnv-header-bg);
|
|
color: var(--cnv-text);
|
|
cursor: grab;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.cnv-panel__header-grip {
|
|
opacity: 0.55;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.cnv-panel__header-title {
|
|
flex: 1;
|
|
}
|
|
|
|
.cnv-panel__header-count {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: #ffffff;
|
|
border-radius: 999px;
|
|
padding: 1px 8px;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.cnv-panel__header-collapse {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 4px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
padding: 2px 8px;
|
|
min-width: 24px;
|
|
}
|
|
.cnv-panel__header-collapse:hover { background: rgba(255, 255, 255, 0.18); }
|
|
|
|
/* Toolbar replaces the old search box */
|
|
.cnv-panel__toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 5px 8px;
|
|
background: #0a1e30;
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
.cnv-tb-btn {
|
|
background: var(--cnv-header-bg);
|
|
border: 1px solid var(--cnv-border);
|
|
border-radius: 3px;
|
|
color: var(--cnv-text);
|
|
font: 11px/1 ui-sans-serif, system-ui, sans-serif;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
}
|
|
.cnv-tb-btn:hover { background: var(--cnv-accent); }
|
|
.cnv-tb-btn:active { filter: brightness(0.8); }
|
|
|
|
.cnv-tb-btn--icon {
|
|
padding: 4px 6px;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: #6f93bf;
|
|
font-size: 13px;
|
|
}
|
|
.cnv-tb-btn--icon:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.cnv-tb-spacer { flex: 1; }
|
|
|
|
.cnv-panel__list {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Rows mirror the muter's widget rows */
|
|
.cnv-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
background: var(--cnv-bg);
|
|
border-bottom: 1px solid var(--cnv-border);
|
|
cursor: pointer;
|
|
min-height: 24px;
|
|
}
|
|
.cnv-row:hover { background: var(--cnv-row-hover); }
|
|
.cnv-row:last-child { border-bottom: none; }
|
|
|
|
/* Enabled row: bolder title + left accent stripe + slightly brighter bg */
|
|
.cnv-row--enabled {
|
|
background: linear-gradient(to right, color-mix(in srgb, var(--cnv-accent) 14%, transparent), transparent 30%);
|
|
box-shadow: inset 2px 0 0 var(--cnv-accent);
|
|
}
|
|
.cnv-row--enabled .cnv-row__title {
|
|
font-weight: 600;
|
|
color: color-mix(in srgb, var(--cnv-accent) 35%, var(--cnv-text));
|
|
}
|
|
.cnv-row--enabled:hover { background: var(--cnv-row-hover); }
|
|
|
|
.cnv-row__title {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cnv-row__shortcut {
|
|
font-size: 10px;
|
|
color: #466a91;
|
|
font-family: ui-monospace, monospace;
|
|
}
|
|
|
|
/* Toggle = compact pill like rgthree's "no/yes + circle" */
|
|
.cnv-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
background: #07172a;
|
|
border: 1px solid #000;
|
|
border-radius: 999px;
|
|
padding: 1px 6px 1px 4px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
color: #cfe3ff;
|
|
min-width: 42px;
|
|
justify-content: space-between;
|
|
flex-shrink: 0;
|
|
}
|
|
.cnv-toggle__knob {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
opacity: 0.4;
|
|
}
|
|
.cnv-toggle__label { line-height: 1; }
|
|
.cnv-toggle--on { color: var(--cnv-text); }
|
|
.cnv-toggle--on .cnv-toggle__knob { opacity: 1; background: var(--cnv-accent); box-shadow: 0 0 6px var(--cnv-accent); }
|
|
.cnv-toggle--placeholder { opacity: 0.35; cursor: default; border-style: dashed; }
|
|
|
|
.cnv-panel--collapsed .cnv-panel__toolbar,
|
|
.cnv-panel--collapsed .cnv-panel__list,
|
|
.cnv-panel--collapsed .cnv-settings { display: none; }
|
|
|
|
/* Settings panel — slides in below toolbar when ⚙ clicked */
|
|
.cnv-settings {
|
|
background: #0a1e30;
|
|
border-bottom: 1px solid var(--cnv-border);
|
|
padding: 10px;
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.cnv-settings--open { display: flex; }
|
|
|
|
.cnv-settings__section-title {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--cnv-text-dim);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.cnv-color-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.cnv-color-row__label { color: var(--cnv-text-dim); }
|
|
.cnv-color-row input[type="color"] {
|
|
width: 28px;
|
|
height: 22px;
|
|
border: 1px solid var(--cnv-border);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.cnv-shortcut-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 4px;
|
|
font-size: 11px;
|
|
}
|
|
.cnv-shortcut-row__key {
|
|
width: 36px;
|
|
text-align: center;
|
|
background: #07172a;
|
|
border: 1px solid var(--cnv-border);
|
|
border-radius: 3px;
|
|
color: var(--cnv-text);
|
|
font: 11px ui-monospace, monospace;
|
|
padding: 3px 0;
|
|
outline: none;
|
|
}
|
|
.cnv-shortcut-row__key:focus { border-color: var(--cnv-accent); }
|
|
.cnv-shortcut-row__group {
|
|
flex: 1;
|
|
background: #07172a;
|
|
border: 1px solid var(--cnv-border);
|
|
border-radius: 3px;
|
|
color: var(--cnv-text);
|
|
font: 11px ui-sans-serif, system-ui, sans-serif;
|
|
padding: 3px 5px;
|
|
outline: none;
|
|
}
|
|
.cnv-shortcut-row__remove {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--cnv-text-dim);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
padding: 0 4px;
|
|
}
|
|
.cnv-shortcut-row__remove:hover { color: #ef4444; }
|
|
|
|
.cnv-settings__add-btn {
|
|
background: transparent;
|
|
border: 1px dashed var(--cnv-text-dim);
|
|
border-radius: 3px;
|
|
color: var(--cnv-text-dim);
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
font-size: 11px;
|
|
}
|
|
.cnv-settings__add-btn:hover {
|
|
color: var(--cnv-text);
|
|
border-color: var(--cnv-accent);
|
|
}
|
|
|
|
.cnv-settings__reset {
|
|
background: transparent;
|
|
border: 1px solid var(--cnv-border);
|
|
border-radius: 3px;
|
|
color: var(--cnv-text-dim);
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
font-size: 10px;
|
|
align-self: flex-end;
|
|
}
|
|
.cnv-settings__reset:hover { color: #ef4444; }
|