Kyle
cca03cd2f3
Standard parts (partsLibrary.js) - ACDC TXL palette: 15 solids plus the 16 stocked stripe combinations - 29 wire functions fix colour, stripe and gauge per signal, so a wire drawn from a given pin comes out identical on every build - 16 pre-labelled parts: Skudak VCU (GRAY/BLACK), openinverter LDU 23-pin, Dilong OBC/DCDC, BMW pedal, Honeywell CSSV1500, Bender ISO175, Bosch iBooster, Prius EPS, Volvo PS pump, cluster, DNR switch, 32-way enclosure bulkhead, contactors, VW MEB BMS - OEM colours override the in-house standard where we splice into a factory loom (VW MEB LV connector, recovered from the VW bms diagram) - Brown is ground, matching the MEB loom and European practice; orange is reserved for AC mains and OEM high-voltage runs Fuse box configurator (pdmLibrary.js) - GEP FRH-A12/A24 and the 48-way PDM as 280-footprint cavity grids - Place, drag and rotate fuses, relays, diodes, breakers and bus bars - Bus bars occupy their own collision layer and feed the blades they cross, suppressing those inputs so one wire supplies the run - Cavity capacity is tracked; Apply is blocked while a placement overlaps or overhangs - Naming a circuit renames its pins: "VCU" gives "VCU in" / "VCU out" Theming (theme.js) - Light and dark modes; canvas background, grid dots, part fill and part outline are configurable and persisted - CSS converted to custom properties with property-aware light-mode pairs, since a colour used as text and as a surface must flip differently; no rule falls below 3:1 contrast in either theme - Canvas devices, pins, labels, cable rows and the harness view are themed too, since Konva bakes colours in at draw time and cannot read CSS variables Also - Pass-through bulkheads: one device covering both connector faces, with a single centred label per circuit - Pin labels scale with the device font instead of a fixed 8px - Keyboard handling is modal-scoped, so Delete no longer removes the canvas device while the fuse box editor is open Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
750 lines
33 KiB
CSS
750 lines
33 KiB
CSS
:root {
|
|
--bg-inset: #0e0e1e;
|
|
--bg-body: #12121c;
|
|
--bg-canvas: #131320;
|
|
--bg-panel: #14142a;
|
|
--bg-modal: #16162a;
|
|
--bg-surface: #1a1a2e;
|
|
--bg-surface-2: #1a1a30;
|
|
--bg-surface-3: #1e1e34;
|
|
--bg-selected: #1e1e3a;
|
|
--bg-raised: #222238;
|
|
--border-faint: #26263f;
|
|
--border: #2a2a44;
|
|
--grid-dot: #2e2e50;
|
|
--border-strong: #3a3a5a;
|
|
--text-ghost: #33334f;
|
|
--text-faint: #444466;
|
|
--text-dim: #555577;
|
|
--text-muted: #8899bb;
|
|
--text: #c0c4e8;
|
|
--text-strong: #c8ccee;
|
|
--text-bright: #dde0f5;
|
|
--accent: #5566aa;
|
|
/* Auto-derived light-mode pairs. --cXXXXXX is a surface colour, --tXXXXXX
|
|
the same value used as text; the two flip differently because a pale
|
|
blue that works as a border is unreadable as text on white. Mid-tone
|
|
semantic colours (danger, status, wire colours) stay literal. */
|
|
--c090914: #090914;
|
|
--c0a1a14: #0a1a14;
|
|
--c0c0c1c: #0c0c1c;
|
|
--c0d0d20: #0d0d20;
|
|
--c0d1a28: #0d1a28;
|
|
--c0d2235: #0d2235;
|
|
--c0e0e1a: #0e0e1a;
|
|
--c0f2a1a: #0f2a1a;
|
|
--c10101e: #10101e;
|
|
--c111122: #111122;
|
|
--c111e30: #111e30;
|
|
--c141428: #141428;
|
|
--c151528: #151528;
|
|
--c18182e: #18182e;
|
|
--c1a1a38: #1a1a38;
|
|
--c1a1a3a: #1a1a3a;
|
|
--c1a1a40: #1a1a40;
|
|
--c1a2840: #1a2840;
|
|
--c1a2a1a: #1a2a1a;
|
|
--c1a2a4a: #1a2a4a;
|
|
--c1a3a2a: #1a3a2a;
|
|
--c1e1e36: #1e1e36;
|
|
--c1e1e38: #1e1e38;
|
|
--c1e1e40: #1e1e40;
|
|
--c1e2a4a: #1e2a4a;
|
|
--c1e3355: #1e3355;
|
|
--c1e3a6a: #1e3a6a;
|
|
--c1e4a2a: #1e4a2a;
|
|
--c22223a: #22223a;
|
|
--c22224a: #22224a;
|
|
--c223355: #223355;
|
|
--c23233c: #23233c;
|
|
--c264a8a: #264a8a;
|
|
--c2a1a4a: #2a1a4a;
|
|
--c2a2a50: #2a2a50;
|
|
--c2a2a5a: #2a2a5a;
|
|
--c2e2e54: #2e2e54;
|
|
--c333355: #333355;
|
|
--c334466: #334466;
|
|
--c336633: #336633;
|
|
--c3a1414: #3a1414;
|
|
--c3a3a66: #3a3a66;
|
|
--c3d3d63: #3d3d63;
|
|
--c554422: #554422;
|
|
--c662222: #662222;
|
|
--t6688cc: #6688cc;
|
|
--t7788aa: #7788aa;
|
|
--t77aaee: #77aaee;
|
|
--t8888aa: #8888aa;
|
|
--t88aadd: #88aadd;
|
|
--t88aaff: #88aaff;
|
|
--t88bbdd: #88bbdd;
|
|
--t88bbff: #88bbff;
|
|
--t88cc88: #88cc88;
|
|
--t88ee88: #88ee88;
|
|
--t9090cc: #9090cc;
|
|
--t9966ee: #9966ee;
|
|
--t9999cc: #9999cc;
|
|
--t99aacc: #99aacc;
|
|
--t99aadd: #99aadd;
|
|
--ta0a4c8: #a0a4c8;
|
|
--taaa: #aaa;
|
|
--taaccee: #aaccee;
|
|
--taaccff: #aaccff;
|
|
--tbbc: #bbc;
|
|
--tbbc0ee: #bbc0ee;
|
|
--tc0c8f0: #c0c8f0;
|
|
--td65a4a: #d65a4a;
|
|
--tdd6666: #dd6666;
|
|
--tddaa44: #ddaa44;
|
|
--tff6666: #ff6666;
|
|
--tff8888: #ff8888;
|
|
--tfff: #fff;
|
|
--t00cc88: #00cc88;
|
|
--t4caa77: #4caa77;
|
|
--t445566: #7f90ab;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--bg-inset: #ffffff;
|
|
--bg-body: #eceef3;
|
|
--bg-canvas: #f7f8fa;
|
|
--bg-panel: #f1f3f8;
|
|
--bg-modal: #ffffff;
|
|
--bg-surface: #f3f4f9;
|
|
--bg-surface-2: #e8ebf3;
|
|
--bg-surface-3: #e4e7f0;
|
|
--bg-selected: #dde3f4;
|
|
--bg-raised: #e6e9f1;
|
|
--border-faint: #dbdfea;
|
|
--border: #ccd1e0;
|
|
--grid-dot: #c3c9d8;
|
|
--border-strong: #b2b8cb;
|
|
--text-ghost: #b8bdcc;
|
|
--text-faint: #969cb0;
|
|
--text-dim: #7b8296;
|
|
--text-muted: #59627a;
|
|
--text: #242939;
|
|
--text-strong: #151a29;
|
|
--text-bright: #0f1320;
|
|
--accent: #5a6cba;
|
|
--c090914: #f2f2f6;
|
|
--c0a1a14: #eef4f2;
|
|
--c0c0c1c: #ededf2;
|
|
--c0d0d20: #eaeaf1;
|
|
--c0d1a28: #e6eaef;
|
|
--c0d2235: #dee6ec;
|
|
--c0e0e1a: #ededf2;
|
|
--c0f2a1a: #e4eee8;
|
|
--c10101e: #ebebf0;
|
|
--c111122: #e8e8ee;
|
|
--c111e30: #e0e5eb;
|
|
--c141428: #e4e4eb;
|
|
--c151528: #e4e4eb;
|
|
--c18182e: #e0e0e8;
|
|
--c1a1a38: #dadae4;
|
|
--c1a1a3a: #d9d9e4;
|
|
--c1a1a40: #d5d5e3;
|
|
--c1a2840: #d5dae3;
|
|
--c1a2a1a: #e2e7e2;
|
|
--c1a2a4a: #d0d5e0;
|
|
--c1a3a2a: #d9e4de;
|
|
--c1e1e36: #dadae2;
|
|
--c1e1e38: #d9d9e2;
|
|
--c1e1e40: #d4d4e0;
|
|
--c1e2a4a: #cfd3de;
|
|
--c1e3355: #c8d0dc;
|
|
--c1e3a6a: #bdc6d7;
|
|
--c1e4a2a: #cfded3;
|
|
--c22223a: #d7d7df;
|
|
--c22224a: #cecedc;
|
|
--c223355: #c8ceda;
|
|
--c23233c: #d6d6de;
|
|
--c264a8a: #a9b5cc;
|
|
--c2a1a4a: #d5d0e0;
|
|
--c2a2a50: #c9c9d6;
|
|
--c2a2a5a: #c3c3d4;
|
|
--c2e2e54: #c6c6d3;
|
|
--c333355: #c4c4d0;
|
|
--c334466: #bac0cc;
|
|
--c336633: #baccba;
|
|
--c3a1414: #e7dada;
|
|
--c3a3a66: #b9b9c8;
|
|
--c3d3d63: #babac7;
|
|
--c554422: #dad4c8;
|
|
--c662222: #d6bebe;
|
|
--t6688cc: #375fb0;
|
|
--t7788aa: #5c7097;
|
|
--t77aaee: #1154ad;
|
|
--t8888aa: #5f5f87;
|
|
--t88aadd: #285497;
|
|
--t88aaff: #002fa4;
|
|
--t88bbdd: #286a97;
|
|
--t88bbff: #0046a4;
|
|
--t88cc88: #3b913b;
|
|
--t88ee88: #1c6b28;
|
|
--t9090cc: #3c3c89;
|
|
--t9966ee: #5110bc;
|
|
--t9999cc: #3e3e81;
|
|
--t99aacc: #3e5481;
|
|
--t99aadd: #2a4187;
|
|
--ta0a4c8: #444979;
|
|
--taaa: #666666;
|
|
--taaccee: #174b80;
|
|
--taaccff: #00378a;
|
|
--tbbc: #46465e;
|
|
--tbbc0ee: #192270;
|
|
--tc0c8f0: #17266d;
|
|
--td65a4a: #cb3c29;
|
|
--tdd6666: #b52424;
|
|
--tddaa44: #d29721;
|
|
--tff6666: #bf0000;
|
|
--tff8888: #a40000;
|
|
--tfff: #292929;
|
|
--t00cc88: #00663d;
|
|
--t4caa77: #1d6941;
|
|
--t445566: #4a5568;
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* ── Reset & base ─────────────────────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body, #app { height: 100%; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; }
|
|
body { background: var(--bg-body); color: var(--text-strong); }
|
|
|
|
/* ── Layout ───────────────────────────────────────────────────────────────── */
|
|
#app { display: flex; flex-direction: column; }
|
|
|
|
#toolbar {
|
|
display: flex; align-items: center; gap: 8px; padding: 0 12px;
|
|
height: 48px; background: var(--c0e0e1a); border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0; z-index: 10;
|
|
}
|
|
.toolbar-left { display: flex; align-items: center; gap: 10px; min-width: 220px; }
|
|
.toolbar-center { display: flex; align-items: center; gap: 5px; flex: 1; justify-content: center; flex-wrap: wrap; }
|
|
.toolbar-right { display: flex; align-items: center; gap: 8px; min-width: 180px; justify-content: flex-end; }
|
|
.toolbar-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
|
|
|
|
#mode-indicator {
|
|
text-align: center; font-size: 11px; color: var(--t00cc88); background: var(--c0a1a14);
|
|
border-bottom: 1px solid var(--c1a3a2a); height: 22px; flex-shrink: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
|
|
#main { display: flex; flex: 1; overflow: hidden; }
|
|
|
|
/* ── Sidebars ─────────────────────────────────────────────────────────────── */
|
|
#left-sidebar {
|
|
width: 240px; flex-shrink: 0; background: var(--bg-panel);
|
|
border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;
|
|
}
|
|
#right-sidebar {
|
|
width: 248px; flex-shrink: 0; background: var(--bg-panel);
|
|
border-left: 1px solid var(--border); overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-section { display: flex; flex-direction: column; flex-shrink: 0; }
|
|
.section-header {
|
|
padding: 7px 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
|
|
text-transform: uppercase; color: #6666aa; background: var(--c10101e);
|
|
border-bottom: 1px solid var(--bg-raised); display: flex; align-items: center; justify-content: space-between;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Sidebar tabs ─────────────────────────────────────────────────────────── */
|
|
.tab-bar {
|
|
display: flex; border-bottom: 1px solid var(--bg-raised); background: var(--c10101e); flex-shrink: 0;
|
|
}
|
|
.sidebar-tab {
|
|
flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 500; text-align: center;
|
|
background: transparent; border: none; border-radius: 0; color: var(--text-dim);
|
|
border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s;
|
|
}
|
|
.sidebar-tab:hover { color: var(--t9999cc); background: var(--c18182e); }
|
|
.sidebar-tab.active { color: var(--t88aaff); border-bottom-color: #5577dd; }
|
|
|
|
.tab-panel { display: flex; flex-direction: column; }
|
|
|
|
/* ── Diagram list ─────────────────────────────────────────────────────────── */
|
|
#diagram-list { padding: 4px; }
|
|
.diagram-item {
|
|
padding: 6px 8px; border-radius: 5px; cursor: pointer;
|
|
display: flex; justify-content: space-between; align-items: baseline;
|
|
border: 1px solid transparent; margin-bottom: 2px;
|
|
}
|
|
.diagram-item:hover { background: var(--bg-selected); border-color: var(--border-strong); }
|
|
.diagram-item.active { background: var(--c1a2a4a); border-color: #4466aa; }
|
|
.di-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; font-size: 12px; cursor: pointer; }
|
|
.di-date { font-size: 10px; color: var(--text-dim); margin-left: 6px; white-space: nowrap; cursor: pointer; }
|
|
.di-del-btn {
|
|
flex-shrink: 0; opacity: 0; padding: 1px 5px; font-size: 13px; line-height: 1;
|
|
background: transparent; border-color: transparent; color: var(--tff6666);
|
|
transition: opacity .15s; margin-left: 4px;
|
|
}
|
|
.diagram-item:hover .di-del-btn { opacity: 1; }
|
|
.di-del-btn:hover { background: var(--c3a1414); border-color: #aa3333; }
|
|
.di-dup-btn {
|
|
flex-shrink: 0; opacity: 0; padding: 1px 5px; font-size: 13px; line-height: 1;
|
|
background: transparent; border-color: transparent; color: var(--t88aaff);
|
|
transition: opacity .15s; margin-left: 4px;
|
|
}
|
|
.diagram-item:hover .di-dup-btn { opacity: 1; }
|
|
.di-dup-btn:hover { background: var(--c1a1a40); border-color: #4466aa; }
|
|
|
|
/* ── View tab bar ────────────────────────────────────────────────────────── */
|
|
#view-tab-bar {
|
|
display: flex; align-items: center; gap: 2px;
|
|
padding: 3px 8px; background: var(--c0c0c1c); border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.view-tab {
|
|
padding: 3px 12px; font-size: 11px; border-radius: 4px 4px 0 0;
|
|
background: var(--bg-surface-2); border: 1px solid var(--border); border-bottom: none;
|
|
color: var(--t8888aa); cursor: pointer;
|
|
}
|
|
.view-tab { display: inline-flex; align-items: center; gap: 4px; }
|
|
.view-tab.active { background: var(--c1e2a4a); border-color: #4466aa; color: var(--tc0c8f0); }
|
|
.view-tab:hover:not(.active) { background: var(--c1e1e38); color: var(--taaa); }
|
|
.view-tab-close {
|
|
font-size: 13px; line-height: 1; opacity: 0.4; padding: 0 2px;
|
|
border-radius: 3px;
|
|
}
|
|
.view-tab-close:hover { opacity: 1; background: rgba(255,80,80,0.25); color: var(--tff8888); }
|
|
.view-tab-sep { width: 1px; background: var(--border); height: 18px; margin: 0 4px; }
|
|
.fb-tab { color: #6688aa; border-color: var(--c1e3355); }
|
|
.fb-tab.active { background: var(--c0d2235); border-color: #336699; color: var(--t88bbdd); }
|
|
.fb-tab:hover:not(.active) { background: var(--c0d1a28); color: var(--taaccee); }
|
|
|
|
#fb-toolbar {
|
|
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
|
|
padding: 4px 8px; background: var(--c090914); border-bottom: 1px solid var(--c1e3355);
|
|
flex-shrink: 0;
|
|
}
|
|
.fb-mode-btn {
|
|
padding: 3px 10px; font-size: 11px; border-radius: 4px;
|
|
background: var(--c0d1a28); border: 1px solid var(--c1e3355); color: #5577aa; cursor: pointer;
|
|
}
|
|
.fb-mode-btn.active { background: var(--c0d2235); border-color: #336699; color: var(--t88bbdd); }
|
|
.fb-mode-btn:hover:not(.active) { background: var(--c111e30); color: var(--taaccee); }
|
|
|
|
#fb-container { flex: 1; overflow: hidden; }
|
|
#fb-canvas { width: 100%; height: 100%; }
|
|
|
|
#btn-add-view {
|
|
padding: 2px 8px; font-size: 14px; background: transparent;
|
|
border: 1px dashed var(--c333355); border-radius: 4px; color: #556; cursor: pointer;
|
|
}
|
|
#btn-add-view:hover { border-color: var(--accent); color: var(--t99aadd); }
|
|
|
|
/* ── Device library ───────────────────────────────────────────────────────── */
|
|
#device-library { padding: 6px; display: flex; flex-direction: column; gap: 3px; }
|
|
.lib-item {
|
|
display: flex; align-items: center; gap: 8px; padding: 7px 8px;
|
|
border: 1px solid var(--border); border-radius: 5px; cursor: grab; user-select: none;
|
|
background: var(--c18182e); transition: background .1s, border-color .1s;
|
|
}
|
|
.lib-item:hover { background: var(--c22224a); border-color: #5555aa; }
|
|
.lib-item:active { cursor: grabbing; }
|
|
.lib-icon { font-size: 16px; width: 22px; text-align: center; }
|
|
.lib-label { font-size: 12px; }
|
|
|
|
/* ── Connector library ────────────────────────────────────────────────────── */
|
|
.lib-conn-item {
|
|
padding: 7px 8px; border: 1px solid var(--c1e1e38); border-radius: 5px; cursor: grab;
|
|
background: var(--c141428); margin-bottom: 3px; user-select: none; transition: background .1s, border-color .1s;
|
|
}
|
|
.lib-conn-item:hover { background: var(--c1e1e40); border-color: #4444aa; }
|
|
.lib-conn-item:active { cursor: grabbing; }
|
|
.conn-name { font-size: 12px; font-weight: 500; color: var(--tbbc0ee); }
|
|
.conn-meta { font-size: 10px; color: #556688; margin-top: 1px; }
|
|
|
|
/* ── Canvas area ──────────────────────────────────────────────────────────── */
|
|
#canvas-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
#canvas-container {
|
|
flex: 1; width: 100%;
|
|
background-color: var(--bg-canvas);
|
|
background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
#canvas-container.wire-mode { cursor: crosshair; }
|
|
|
|
#canvas-placeholder {
|
|
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
|
pointer-events: none; z-index: 5;
|
|
}
|
|
.placeholder-content { text-align: center; color: #44446a; pointer-events: all; }
|
|
.placeholder-content h2 { font-size: 28px; margin-bottom: 10px; }
|
|
.placeholder-content p { margin-bottom: 16px; }
|
|
|
|
/* ── Buttons ──────────────────────────────────────────────────────────────── */
|
|
button {
|
|
background: var(--c22223a); border: 1px solid var(--border-strong); color: var(--text);
|
|
padding: 5px 11px; border-radius: 5px; cursor: pointer; font-size: 12px;
|
|
transition: background .12s, border-color .12s; white-space: nowrap;
|
|
}
|
|
button:hover { background: var(--c2e2e54); border-color: #5555aa; }
|
|
button:active { background: var(--c1a1a3a); }
|
|
|
|
.mode-btn { padding: 5px 12px; }
|
|
.mode-btn.active { background: var(--c1e3a6a); border-color: #4488dd; color: var(--t88bbff); }
|
|
|
|
.route-btn { padding: 4px 10px; font-size: 11px; }
|
|
.route-btn.active { background: var(--c1a2a4a); border-color: #336699; color: var(--t77aaee); }
|
|
|
|
#btn-harness.active { background: var(--c1a2a1a); border-color: var(--c336633); color: var(--t88ee88); }
|
|
|
|
.danger-btn { color: var(--tff6666); border-color: var(--c662222); }
|
|
.danger-btn:hover { background: var(--c3a1414); border-color: #aa3333; }
|
|
|
|
.app-title { font-weight: 700; font-size: 15px; color: var(--t88aaff); white-space: nowrap; }
|
|
|
|
.diagram-name-input {
|
|
background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-strong);
|
|
padding: 4px 8px; border-radius: 4px; font-size: 13px; width: 180px;
|
|
}
|
|
.diagram-name-input:focus { outline: none; border-color: var(--accent); }
|
|
|
|
/* Export dropdown */
|
|
.export-wrap { position: relative; }
|
|
#export-menu {
|
|
display: none; position: absolute; right: 0; top: calc(100% + 4px);
|
|
background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 6px;
|
|
min-width: 170px; z-index: 100; overflow: hidden; flex-direction: column;
|
|
}
|
|
#export-menu.open { display: flex; }
|
|
#export-menu button { border: none; border-radius: 0; text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--bg-raised); }
|
|
#export-menu button:last-child { border-bottom: none; }
|
|
|
|
/* Saved indicator */
|
|
#saved-indicator {
|
|
font-size: 11px; color: var(--t4caa77); background: var(--c0f2a1a);
|
|
border: 1px solid var(--c1e4a2a); padding: 4px 10px; border-radius: 4px;
|
|
opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap;
|
|
}
|
|
#saved-indicator.show { opacity: 1; }
|
|
|
|
/* ── Octopart search results ──────────────────────────────────────────────── */
|
|
#octopart-results {
|
|
margin-top: 5px; border: 1px solid var(--border); border-radius: 4px;
|
|
background: var(--bg-inset); max-height: 220px; overflow-y: auto;
|
|
}
|
|
.op-result {
|
|
padding: 7px 9px; cursor: pointer; border-bottom: 1px solid var(--bg-surface-2);
|
|
transition: background 0.1s;
|
|
}
|
|
.op-result:last-child { border-bottom: none; }
|
|
.op-result:hover { background: var(--c1a1a38); }
|
|
.op-mpn { font-size: 11px; font-weight: 600; color: var(--text-strong); }
|
|
.op-mfr { font-size: 10px; color: var(--t7788aa); margin-top: 1px; }
|
|
.op-desc { font-size: 10px; color: #4a5566; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.op-ds { font-size: 10px; color: #4466aa; margin-top: 1px; }
|
|
.op-no-results { padding: 10px; font-size: 11px; color: var(--text-faint); text-align: center; }
|
|
#btn-octopart-search.searching { opacity: 0.5; pointer-events: none; }
|
|
|
|
/* ── Properties panel ─────────────────────────────────────────────────────── */
|
|
.prop-row { padding: 7px 10px; border-bottom: 1px solid var(--c1e1e36); }
|
|
.prop-row label {
|
|
display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: .06em; color: var(--text-dim); margin-bottom: 4px;
|
|
}
|
|
.prop-row input[type="text"], .prop-row input[type="number"],
|
|
.prop-row select, .prop-row textarea {
|
|
width: 100%; background: var(--bg-inset); border: 1px solid var(--border);
|
|
color: var(--text); padding: 5px 7px; border-radius: 4px; font-size: 12px; font-family: inherit;
|
|
}
|
|
.prop-row input:focus, .prop-row select:focus, .prop-row textarea:focus { outline: none; border-color: var(--accent); }
|
|
.prop-value { font-size: 12px; color: var(--t99aacc); }
|
|
.prop-value.mono { font-family: monospace; }
|
|
|
|
.color-swatch { width: 36px; height: 28px; padding: 2px; cursor: pointer; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--border-strong); }
|
|
|
|
/* Pin table */
|
|
.pin-table { width: 100%; border-collapse: collapse; font-size: 11px; }
|
|
.pin-table th { text-align: left; padding: 3px 4px; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--bg-raised); }
|
|
.pin-table td { padding: 2px 4px; border-bottom: 1px solid var(--bg-surface-2); vertical-align: middle; }
|
|
.pin-table .pin-side { color: var(--text-faint); font-size: 10px; }
|
|
.pin-input { width: 100%; background: var(--bg-inset); border: 1px solid var(--border); color: var(--text); padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 11px; }
|
|
.pin-side-select { width: 100%; background: var(--bg-inset); border: 1px solid var(--border); color: var(--text); padding: 2px 3px; border-radius: 3px; font-size: 11px; cursor: pointer; }
|
|
|
|
/* ── Connector library extras ─────────────────────────────────────────────── */
|
|
.lib-section-header {
|
|
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-dim); padding: 8px 8px 3px; border-top: 1px solid var(--bg-surface-2); margin-top: 4px;
|
|
}
|
|
.lib-section-header:first-child { border-top: none; margin-top: 0; }
|
|
|
|
.conn-item-body { flex: 1; min-width: 0; }
|
|
.conn-custom-badge {
|
|
display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .06em;
|
|
text-transform: uppercase; background: var(--c2a1a4a); color: var(--t9966ee);
|
|
border: 1px solid #4422aa; border-radius: 3px; padding: 0 4px; vertical-align: middle;
|
|
margin-left: 4px;
|
|
}
|
|
.lib-conn-item { display: flex; align-items: center; gap: 6px; }
|
|
.conn-edit-btn {
|
|
flex-shrink: 0; opacity: 0; padding: 3px 6px; font-size: 12px;
|
|
background: var(--bg-selected); border-color: var(--border-strong); transition: opacity .15s;
|
|
}
|
|
.lib-conn-item:hover .conn-edit-btn { opacity: 1; }
|
|
.conn-edit-btn:hover { background: var(--c2a2a5a); border-color: #6666aa; }
|
|
|
|
/* ── Modal ───────────────────────────────────────────────────────────────── */
|
|
#connector-modal, #drc-modal, #git-modal, #pinout-modal, #pdm-modal, #theme-modal {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000;
|
|
align-items: center; justify-content: center;
|
|
}
|
|
.modal-box {
|
|
background: var(--bg-modal); border: 1px solid var(--border-strong); border-radius: 8px;
|
|
width: 480px; max-width: 94vw; max-height: 86vh;
|
|
display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.7);
|
|
}
|
|
.modal-header {
|
|
padding: 14px 18px 12px; border-bottom: 1px solid var(--bg-raised); flex-shrink: 0;
|
|
}
|
|
.modal-header h3 { font-size: 15px; font-weight: 600; color: var(--text-strong); }
|
|
.modal-body {
|
|
padding: 14px 18px; overflow-y: auto; flex: 1;
|
|
display: flex; flex-direction: column; gap: 10px;
|
|
}
|
|
.modal-footer {
|
|
padding: 10px 18px; border-top: 1px solid var(--bg-raised);
|
|
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
|
|
}
|
|
|
|
/* ── DRC ────────────────────────────────────────────────────────────────── */
|
|
.drc-category { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
|
|
.drc-cat-header {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 8px 12px; background: var(--bg-surface-2); cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.drc-cat-header:hover { background: var(--bg-selected); }
|
|
.drc-cat-icon { font-size: 13px; }
|
|
.drc-cat-label { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); }
|
|
.drc-cat-count {
|
|
font-size: 11px; font-weight: 700; background: var(--c2a2a50);
|
|
padding: 1px 7px; border-radius: 10px; color: var(--t9090cc);
|
|
}
|
|
.drc-cat-body { padding: 4px 0; background: var(--bg-inset); }
|
|
.drc-row {
|
|
padding: 5px 14px; font-size: 11px; color: var(--ta0a4c8);
|
|
border-bottom: 1px solid var(--c151528);
|
|
}
|
|
.drc-row:last-child { border-bottom: none; }
|
|
.drc-none { color: var(--text-faint); font-style: italic; }
|
|
|
|
/* ── Git modal ────────────────────────────────────────────────────────────── */
|
|
.git-badge {
|
|
font-size: 11px; padding: 2px 8px; border-radius: 10px;
|
|
background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border);
|
|
}
|
|
.git-badge.git-clean { color: var(--t88cc88); border-color: var(--c336633); }
|
|
.git-badge.git-dirty { color: var(--tddaa44); border-color: var(--c554422); }
|
|
.git-section { display: flex; flex-direction: column; gap: 5px; }
|
|
.git-section-title {
|
|
font-size: 10px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: .06em; color: var(--text-dim);
|
|
}
|
|
.git-log-row {
|
|
display: grid; grid-template-columns: 52px 1fr 80px auto;
|
|
align-items: center; gap: 8px;
|
|
padding: 4px 6px; border-radius: 3px; background: var(--c0d0d20);
|
|
border: 1px solid transparent;
|
|
}
|
|
.git-log-row:hover { border-color: var(--border); }
|
|
.git-hash { font-family: monospace; color: var(--t6688cc); font-size: 11px; }
|
|
.git-msg { color: var(--tbbc); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.git-date { color: #445; font-size: 10px; text-align: right; }
|
|
.git-scope-btn {
|
|
font-size: 10px; padding: 2px 8px;
|
|
background: var(--c111122); border: 1px solid var(--border); color: var(--t445566); cursor: pointer;
|
|
}
|
|
.git-scope-btn:first-of-type { border-radius: 3px 0 0 3px; }
|
|
.git-scope-btn:last-of-type { border-radius: 0 3px 3px 0; border-left: none; }
|
|
.git-scope-btn.active { background: var(--c1a2840); border-color: var(--c334466); color: var(--t88aadd); }
|
|
.git-scope-btn:disabled { opacity: 0.35; cursor: default; }
|
|
.git-restore-btn {
|
|
font-size: 10px; padding: 2px 6px;
|
|
background: var(--c1a2840); border: 1px solid var(--c334466); border-radius: 3px;
|
|
color: var(--t88aadd); cursor: pointer; white-space: nowrap;
|
|
}
|
|
.git-restore-btn:hover { background: var(--c223355); color: var(--taaccff); }
|
|
|
|
.cm-label {
|
|
display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: .06em; color: var(--text-dim); margin-bottom: 4px;
|
|
}
|
|
.cm-input {
|
|
width: 100%; background: var(--bg-inset); border: 1px solid var(--border);
|
|
color: var(--text); padding: 6px 8px; border-radius: 4px; font-size: 12px; font-family: inherit;
|
|
}
|
|
.cm-input:focus { outline: none; border-color: var(--accent); }
|
|
.cm-row { display: flex; flex-direction: column; }
|
|
.cm-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
|
|
#cm-pin-labels {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
|
|
max-height: 220px; overflow-y: auto; padding: 4px 0;
|
|
}
|
|
.pin-label-row { display: flex; align-items: center; gap: 5px; }
|
|
.pin-idx {
|
|
width: 22px; text-align: right; flex-shrink: 0;
|
|
font-size: 10px; font-weight: 600; color: var(--text-dim); font-family: monospace;
|
|
}
|
|
.pin-label-input {
|
|
flex: 1; background: var(--bg-inset); border: 1px solid var(--bg-raised);
|
|
color: var(--text); padding: 4px 6px; border-radius: 3px; font-size: 11px; font-family: monospace;
|
|
}
|
|
.pin-label-input:focus { outline: none; border-color: var(--accent); }
|
|
|
|
.btn-primary {
|
|
background: var(--c1e3a6a); border-color: #4488dd; color: var(--t88bbff); font-weight: 600;
|
|
}
|
|
.btn-primary:hover { background: var(--c264a8a); border-color: #66aaff; }
|
|
.btn-primary:disabled { opacity: 0.5; cursor: default; }
|
|
|
|
/* Pin remove button */
|
|
.pin-del-btn {
|
|
padding: 0 4px; font-size: 12px; line-height: 1.4;
|
|
background: transparent; border-color: transparent; color: var(--tff6666);
|
|
opacity: 0; transition: opacity .15s;
|
|
}
|
|
.pin-table tr:hover .pin-del-btn { opacity: 1; }
|
|
.pin-del-btn:hover { background: var(--c3a1414); border-color: #aa3333; }
|
|
|
|
/* Wire drag cursor hint */
|
|
#canvas-container.wire-drag { cursor: grabbing; }
|
|
|
|
/* ── Context menu ─────────────────────────────────────────────────────────── */
|
|
#ctx-menu {
|
|
position: fixed; z-index: 9000; display: none;
|
|
background: var(--bg-surface); border: 1px solid var(--c3a3a66); border-radius: 6px;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,.55); padding: 4px 0; min-width: 170px;
|
|
user-select: none;
|
|
}
|
|
#ctx-menu.open { display: block; }
|
|
.ctx-item {
|
|
padding: 7px 14px; font-size: 12px; color: var(--text); cursor: pointer;
|
|
display: flex; align-items: center; gap: 8px; white-space: nowrap;
|
|
}
|
|
.ctx-item:hover { background: var(--c2a2a50); color: var(--tfff); }
|
|
.ctx-item.danger { color: var(--tdd6666); }
|
|
.ctx-item.danger:hover { background: var(--c3a1414); color: var(--tff8888); }
|
|
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
|
|
|
|
/* Misc */
|
|
input[type="checkbox"] { accent-color: #5588dd; width: 14px; height: 14px; cursor: pointer; }
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--c3a3a66); }
|
|
.muted { color: var(--text-faint); }
|
|
.small { font-size: 11px; }
|
|
.sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; }
|
|
|
|
/* ── Fuse box configurator ─────────────────────────────────────────────── */
|
|
.pdm-capacity { display: flex; align-items: center; gap: 10px; }
|
|
.pdm-bar {
|
|
flex: 1; height: 8px; border-radius: 4px;
|
|
background: var(--bg-inset); border: 1px solid var(--border); overflow: hidden;
|
|
}
|
|
.pdm-bar-fill { height: 100%; width: 0; background: #4a7dd6; transition: width .15s ease; }
|
|
.pdm-bar-fill.warn { background: #d6a44a; }
|
|
.pdm-bar-fill.over { background: #d65a4a; }
|
|
.pdm-capacity-text {
|
|
font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
|
|
}
|
|
.pdm-add {
|
|
font-size: 11px; padding: 4px 9px; border-radius: 4px;
|
|
background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer;
|
|
}
|
|
.pdm-add:hover { background: var(--c23233c); border-color: var(--c3d3d63); }
|
|
.pdm-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
.pdm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
|
|
.pdm-table th {
|
|
text-align: left; font-weight: 600; color: var(--text-muted); padding: 5px 6px;
|
|
border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-panel);
|
|
}
|
|
.pdm-table td { padding: 3px 6px; border-bottom: 1px solid var(--bg-surface-3); }
|
|
.pdm-cavity {
|
|
font-family: ui-monospace, Consolas, monospace; color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.pdm-table .cm-input { padding: 3px 6px; font-size: 11.5px; width: 100%; }
|
|
.pdm-del {
|
|
background: none; border: none; color: #8a6a6a; cursor: pointer; font-size: 13px; padding: 2px 5px;
|
|
}
|
|
.pdm-del:hover { color: var(--td65a4a); }
|
|
.pdm-warn { font-size: 11px; color: var(--td65a4a); }
|
|
|
|
/* ── Fuse box grid editor ──────────────────────────────────────────────── */
|
|
.pdm-split { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
|
|
.pdm-grid-pane { display: flex; flex-direction: column; gap: 8px; }
|
|
.pdm-grid {
|
|
position: relative; background: var(--bg-inset);
|
|
border: 1px solid var(--border); border-radius: 6px; padding: 6px;
|
|
user-select: none; touch-action: none;
|
|
}
|
|
.pdm-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.pdm-cell {
|
|
position: absolute; box-sizing: border-box;
|
|
border: 1px dashed var(--border-faint); border-radius: 3px;
|
|
}
|
|
.pdm-cell-num {
|
|
position: absolute; font-size: 8px; color: var(--text-ghost);
|
|
top: 1px; left: 2px; pointer-events: none;
|
|
font-family: ui-monospace, Consolas, monospace;
|
|
}
|
|
.pdm-part {
|
|
position: absolute; box-sizing: border-box; border-radius: 4px;
|
|
border: 1px solid rgba(255,255,255,.22); cursor: grab;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
font-size: 9.5px; line-height: 1.15; color: var(--tfff); text-align: center;
|
|
overflow: hidden; padding: 2px;
|
|
}
|
|
.pdm-part:active { cursor: grabbing; }
|
|
.pdm-part.sel { outline: 2px solid #e8edf7; outline-offset: -1px; z-index: 3; }
|
|
.pdm-part.bad { border-color: #ff6a58; box-shadow: 0 0 0 2px rgba(255,106,88,.5) inset; }
|
|
.pdm-part-tag { font-weight: 700; letter-spacing: .3px; }
|
|
.pdm-part-name {
|
|
font-size: 8.5px; opacity: .85; max-width: 100%;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.pdm-term {
|
|
position: absolute; width: 13px; height: 13px; border-radius: 2px;
|
|
background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.3);
|
|
font-size: 7px; color: var(--tfff); display: flex; align-items: center; justify-content: center;
|
|
pointer-events: none; font-family: ui-monospace, Consolas, monospace;
|
|
}
|
|
.pdm-side { display: flex; flex-direction: column; min-width: 0; }
|
|
.pdm-pinout-wrap {
|
|
border: 1px solid var(--border); border-radius: 5px;
|
|
max-height: 288px; overflow-y: auto; background: var(--bg-inset);
|
|
}
|
|
|
|
/* Bus bars lie across the cavities they link, so they draw as a narrow strip
|
|
on top of the components they feed rather than as a filled tile. */
|
|
.pdm-bus {
|
|
position: absolute; box-sizing: border-box; border-radius: 3px;
|
|
border: 1px solid rgba(255,255,255,.45); cursor: grab; z-index: 4;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.55);
|
|
}
|
|
.pdm-bus:active { cursor: grabbing; }
|
|
.pdm-bus.sel { outline: 2px solid #e8edf7; outline-offset: 1px; z-index: 5; }
|
|
.pdm-bus.bad { border-color: #ff6a58; box-shadow: 0 0 0 2px rgba(255,106,88,.6); }
|
|
.pdm-term.bus-fed { background: #b0563c; border-color: rgba(255,255,255,.55); }
|
|
|
|
/* ── Appearance panel ──────────────────────────────────────────────────── */
|
|
.theme-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.theme-pick input[type="color"] {
|
|
width: 46px; height: 28px; padding: 0; cursor: pointer;
|
|
background: var(--bg-inset); border: 1px solid var(--border); border-radius: 4px;
|
|
}
|
|
.theme-inline { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
|
|
.theme-swatches { display: flex; gap: 5px; }
|
|
.theme-swatch {
|
|
width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
|
|
border: 1px solid var(--border-strong);
|
|
}
|
|
.theme-swatch:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
.theme-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|