Greg
cf256c64f5
Click the ⚙ button in the toolbar → settings slide down between toolbar and group list. Colors (4 pickers, live preview, persist to localStorage): - Body background (defaults to rgthree teal #0e283f) - Header bar (#1e4f88) - Accent / toggle ON (#2864ad) - Row hover (#163657) All panel styling now reads from CSS custom properties so the live update is just panel.style.setProperty(key, value). Keyboard shortcuts (overrides defaults): - Add rows one at a time: type a key char, pick a group from a dropdown - × button removes a row - Empty list = defaults restore (1..9 → first 9 groups by order) - Single-key only (a-z, 0-9). Modifier keys ignored (Ctrl/Meta/Alt). Reset button wipes both localStorage entries and rebuilds settings UI with defaults. Refactored onKeyDown to go through resolveShortcut() so the same code path handles defaults and user overrides.
284 lines
6.1 KiB
CSS
284 lines
6.1 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: transparent;
|
|
border: none;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
padding: 0 4px;
|
|
}
|
|
.cnv-panel__header-collapse:hover { opacity: 0.7; }
|
|
|
|
/* 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; }
|
|
|
|
.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; }
|