mAi
1c234f3f46
m: 'We should also be able to resize frames, the same way we do with
devices.' Mirrors the device-resize pattern (89686d0).
- 10×10 SVG handle drawn at each frame's bottom-right corner with class
.frame-resize-handle + cursor: nwse-resize. Appended after the label
so it sits on top of the rect and wins the pointerdown.
- startFrameResize captures the pointer, stops propagation so the
rect's pointerdown (= startDrag 'frame') doesn't also fire, and
updates f.width / f.height on every pointermove using svgPoint
deltas — works at any zoom level via the same world-coord conversion
the rest of the canvas uses.
- Clamps to 200×150 minimum during the drag (frames need more room
than devices since they host devices + IO markers + clamps).
- On pointerup: PATCH /api/projects/:pid/frames/:id with the new width
+ height. Contained children stay at their absolute positions — the
frame body drag is what moves them; resize only changes the frame's
own bounds, so devices/IO markers/clamps inside don't shift.
784 lines
18 KiB
CSS
784 lines
18 KiB
CSS
:root {
|
||
--bg: #fafafa;
|
||
--surface: #ffffff;
|
||
--surface-2: #f4f4f5;
|
||
--border: #d4d4d8;
|
||
--text: #18181b;
|
||
--text-muted: #71717a;
|
||
--accent: #1971c2;
|
||
--danger: #e03131;
|
||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
--radius: 4px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
border: 0;
|
||
}
|
||
|
||
/* ---------- topbar ---------- */
|
||
|
||
.topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 8px 16px;
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.brand {
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.project-picker {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.topbar-spacer { flex: 1; }
|
||
|
||
/* ---------- layout ---------- */
|
||
|
||
.layout {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr 280px;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
.sidebar,
|
||
.inspector {
|
||
background: var(--surface);
|
||
padding: 12px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar { border-right: 1px solid var(--border); }
|
||
.inspector { border-left: 1px solid var(--border); }
|
||
|
||
.sidebar-heading {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--text-muted);
|
||
margin: 0 0 8px 0;
|
||
}
|
||
|
||
.tool-list,
|
||
.legend-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 8px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.legend-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 4px 6px;
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
}
|
||
.legend-row:hover { background: var(--surface-2); }
|
||
.legend-row[aria-current="true"] {
|
||
background: var(--surface-2);
|
||
outline: 1px solid var(--accent);
|
||
}
|
||
.legend-swatch {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 3px;
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
flex-shrink: 0;
|
||
}
|
||
.legend-name { flex: 1; }
|
||
.legend-edit {
|
||
background: transparent;
|
||
border: 0;
|
||
cursor: pointer;
|
||
color: var(--text-muted);
|
||
padding: 2px 4px;
|
||
border-radius: 2px;
|
||
font-size: 12px;
|
||
}
|
||
.legend-edit:hover { color: var(--text); background: var(--surface-2); }
|
||
|
||
/* ---------- canvas ---------- */
|
||
|
||
.canvas-wrap {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: #f7f7f7;
|
||
background-image:
|
||
linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
|
||
background-size: 50px 50px;
|
||
}
|
||
|
||
#canvas {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.empty-hint {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: var(--text-muted);
|
||
font-size: 14px;
|
||
pointer-events: none;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
padding: 8px 14px;
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
.muted { color: var(--text-muted); }
|
||
|
||
/* ---------- canvas elements ---------- */
|
||
|
||
.frame-rect {
|
||
fill: rgba(25, 113, 194, 0.04);
|
||
stroke: var(--accent);
|
||
stroke-width: 1.5;
|
||
stroke-dasharray: 6 4;
|
||
}
|
||
.frame-rect.selected,
|
||
.frame-rect:hover { stroke-width: 2.5; }
|
||
|
||
.frame-label {
|
||
fill: var(--accent);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: grab;
|
||
}
|
||
|
||
/* Frame bottom-right resize affordance. Mirrors .device-resize-handle
|
||
but uses the accent-on-frame palette so it reads as part of the frame
|
||
chrome rather than the device. */
|
||
.frame-resize-handle {
|
||
fill: rgba(0, 0, 0, 0.15);
|
||
stroke: rgba(0, 0, 0, 0.25);
|
||
stroke-width: 1;
|
||
cursor: nwse-resize;
|
||
}
|
||
.frame-resize-handle:hover {
|
||
fill: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* Stroke + fill come from the device's user-set colour, written as
|
||
inline style in renderCanvas — leaving them out of .device-rect so
|
||
the author CSS doesn't override the inline style. */
|
||
.device-rect {
|
||
stroke-width: 1.5;
|
||
}
|
||
.device-rect.selected { stroke-width: 3; }
|
||
.device-rect:hover { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); }
|
||
|
||
/* Bottom-right resize affordance per device. Subtle grey by default,
|
||
stronger on hover so m can find it without it dominating the rect. */
|
||
.device-resize-handle {
|
||
fill: rgba(120, 120, 120, 0.35);
|
||
stroke: rgba(60, 60, 60, 0.45);
|
||
stroke-width: 1;
|
||
cursor: nwse-resize;
|
||
}
|
||
.device-resize-handle:hover {
|
||
fill: rgba(60, 60, 60, 0.65);
|
||
}
|
||
|
||
.device-label {
|
||
fill: var(--text);
|
||
font-size: 12px;
|
||
text-anchor: middle;
|
||
dominant-baseline: central;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.svg-draggable { cursor: grab; }
|
||
.svg-draggable.dragging { cursor: grabbing; }
|
||
|
||
/* Tool cursor while a tool is armed. The `* { ... !important }` descendant
|
||
rule is the load-bearing part: without it, the `.svg-draggable` rules
|
||
on individual frame/device rects win by element specificity and
|
||
override the SVG-root cursor — so hovering a frame with +Dev armed
|
||
shows `grab`, which lies about what a click will do. */
|
||
.canvas-wrap.tool-frame #canvas,
|
||
.canvas-wrap.tool-frame #canvas *,
|
||
.canvas-wrap.tool-device #canvas,
|
||
.canvas-wrap.tool-device #canvas *,
|
||
.canvas-wrap.tool-io #canvas,
|
||
.canvas-wrap.tool-io #canvas *,
|
||
.canvas-wrap.tool-clamp #canvas,
|
||
.canvas-wrap.tool-clamp #canvas *,
|
||
.canvas-wrap.tool-cable #canvas,
|
||
.canvas-wrap.tool-cable #canvas * { cursor: crosshair !important; }
|
||
|
||
/* Clamps — small grey rounded squares (v5 §11). Cables route through
|
||
them in `ord` sequence. */
|
||
.clamp {
|
||
fill: rgba(120, 120, 120, 0.85);
|
||
stroke: rgba(40, 40, 40, 0.85);
|
||
stroke-width: 1.5;
|
||
cursor: grab;
|
||
}
|
||
.clamp.selected {
|
||
stroke-width: 3;
|
||
filter: drop-shadow(0 0 4px var(--accent));
|
||
}
|
||
.clamp-label {
|
||
fill: var(--text-muted);
|
||
font-size: 10px;
|
||
pointer-events: none;
|
||
}
|
||
/* Shared-segment count badge — m sees ×N next to clamps that route
|
||
≥ 2 cables. */
|
||
.clamp-badge {
|
||
fill: var(--text);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
pointer-events: none;
|
||
}
|
||
/* Bundle overlay — thick striped polyline drawn on top of individual
|
||
cables along shared segments. v5 §11.3. */
|
||
.bundle-line {
|
||
fill: none;
|
||
pointer-events: none;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.btn-link {
|
||
background: transparent;
|
||
border: 0;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
padding: 0 4px;
|
||
line-height: 1;
|
||
}
|
||
.btn-link:hover { color: var(--danger); }
|
||
|
||
/* Highlight a port that's been picked as the cable-draw source. */
|
||
.port-circle.cable-from {
|
||
stroke-width: 3;
|
||
filter: drop-shadow(0 0 4px var(--accent));
|
||
}
|
||
|
||
/* Zoom cluster — % + Fit button next to Admin. */
|
||
.zoom-cluster {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-left: 8px;
|
||
padding-left: 12px;
|
||
border-left: 1px solid var(--border);
|
||
}
|
||
#zoom-pct {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
min-width: 38px;
|
||
text-align: right;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.canvas-wrap.panning #canvas,
|
||
.canvas-wrap.panning #canvas * { cursor: grabbing !important; }
|
||
.canvas-wrap.space-pan-ready #canvas,
|
||
.canvas-wrap.space-pan-ready #canvas * { cursor: grab !important; }
|
||
|
||
/* Header toast — slice 8 export feedback */
|
||
.toast {
|
||
display: inline-block;
|
||
margin-left: 12px;
|
||
font-size: 13px;
|
||
padding: 4px 10px;
|
||
border-radius: var(--radius);
|
||
background: var(--surface-2);
|
||
color: var(--text);
|
||
max-width: 420px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.toast.ok { background: #e8f5e9; color: #1b5e20; }
|
||
.toast.error { background: #fdecea; color: #911313; }
|
||
.toast a { color: inherit; text-decoration: underline; }
|
||
|
||
/* IO markers — diamonds. Power-by-convention, so the default fill is
|
||
the Power cable_type colour (#e03131). Rotated 45° rect is the
|
||
easiest way to draw a diamond that still hit-tests at the rotated
|
||
bounds (a <polygon> would also work; rect-with-rotate keeps the
|
||
same DOM shape as device/frame so the drag helpers reuse). */
|
||
.io-marker {
|
||
fill: var(--danger);
|
||
fill-opacity: 0.18;
|
||
stroke: var(--danger);
|
||
stroke-width: 1.5;
|
||
}
|
||
.io-marker.selected,
|
||
.io-marker:hover { stroke-width: 2.5; }
|
||
.io-marker-label {
|
||
fill: var(--danger);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-anchor: middle;
|
||
dominant-baseline: central;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
/* Ports — small circles laid out along the device edge. Both fill and
|
||
stroke come from the cable_type the port carries (set inline in JS)
|
||
so the port reads clearly as a coloured anchor on the device. */
|
||
.port-circle {
|
||
stroke-width: 2;
|
||
cursor: crosshair;
|
||
}
|
||
.port-circle.selected {
|
||
stroke-width: 3;
|
||
filter: drop-shadow(0 0 4px var(--accent));
|
||
}
|
||
|
||
.port-row {
|
||
display: grid;
|
||
grid-template-columns: 14px 1fr auto;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
padding: 2px 4px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.port-row:hover { background: var(--surface-2); }
|
||
.port-row .swatch,
|
||
.swatch {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
margin-right: 6px;
|
||
vertical-align: middle;
|
||
}
|
||
.port-row .label { color: var(--text); }
|
||
.port-row .conn { color: var(--text-muted); font-size: 11px; }
|
||
|
||
/* Requirements sidebar list */
|
||
.requirement-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 8px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.requirement-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
padding: 3px 6px;
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
}
|
||
.requirement-row:hover { background: var(--surface-2); }
|
||
.requirement-row[aria-current="true"] {
|
||
background: var(--surface-2);
|
||
outline: 1px solid var(--accent);
|
||
}
|
||
.requirement-row .pair { color: var(--text); }
|
||
.requirement-row .pair .type { color: var(--text-muted); font-size: 11px; }
|
||
.requirement-row .badge {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
}
|
||
.requirement-row .badge.must { background: var(--danger); }
|
||
.requirement-row .badge.nice { background: var(--text-muted); }
|
||
|
||
/* Tool-armed: drag-req tool cursor */
|
||
.canvas-wrap.tool-req #canvas,
|
||
.canvas-wrap.tool-req #canvas * { cursor: crosshair !important; }
|
||
|
||
/* Drag-line preview while dragging from device A toward device B. */
|
||
.req-drag-line {
|
||
stroke: var(--accent);
|
||
stroke-width: 2;
|
||
stroke-dasharray: 6 4;
|
||
fill: none;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Cables on the canvas. Stroke colour comes from the cable_type;
|
||
solver-owned cables (auto=1) render with a slightly dashed pattern
|
||
so m can tell at a glance which the solver placed. */
|
||
.cable-line {
|
||
fill: none;
|
||
stroke-width: 2;
|
||
cursor: pointer;
|
||
}
|
||
.cable-line.auto { stroke-dasharray: 8 3; }
|
||
.cable-line:hover { stroke-width: 4; }
|
||
.cable-line.selected { stroke-width: 4; }
|
||
|
||
/* Endpoint handles — only rendered for the currently-selected cable.
|
||
Grab cursor on idle, grabbing while dragging (.replugging on root). */
|
||
.cable-handle {
|
||
cursor: grab;
|
||
stroke-width: 2;
|
||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
|
||
}
|
||
.cable-handle:hover { stroke-width: 3; }
|
||
.canvas-wrap.replugging .cable-handle,
|
||
.canvas-wrap.replugging #canvas * { cursor: grabbing !important; }
|
||
|
||
/* Solve preview-diff modal */
|
||
.modal-wide { width: 560px; }
|
||
|
||
/* Admin modal — wider, tabbed */
|
||
.modal-wide.admin-shell-host { width: 760px; }
|
||
#modal-admin { width: 760px; max-width: 90vw; }
|
||
.admin-shell { padding: 16px; min-height: 460px; }
|
||
.admin-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
.admin-header h2 { margin: 0; }
|
||
.admin-close { font-size: 16px; padding: 4px 8px; }
|
||
.admin-tabs {
|
||
display: flex;
|
||
gap: 2px;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 12px;
|
||
}
|
||
.admin-tab {
|
||
background: transparent;
|
||
border: 0;
|
||
border-bottom: 2px solid transparent;
|
||
padding: 8px 12px;
|
||
font: inherit;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
}
|
||
.admin-tab:hover { color: var(--text); }
|
||
.admin-tab[aria-selected="true"] {
|
||
color: var(--text);
|
||
border-bottom-color: var(--accent);
|
||
}
|
||
.admin-body {
|
||
font-size: 13px;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
.admin-row {
|
||
display: grid;
|
||
gap: 6px 12px;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.admin-row:last-child { border-bottom: 0; }
|
||
.admin-row .field { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
|
||
.admin-row .field span { color: var(--text-muted); font-size: 12px; }
|
||
.admin-row .field input,
|
||
.admin-row .field textarea,
|
||
.admin-row .field select {
|
||
width: 100%;
|
||
font: inherit;
|
||
padding: 4px 6px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
}
|
||
.admin-row .actions { display: flex; gap: 6px; justify-content: flex-end; }
|
||
.admin-row.locked { opacity: 0.85; }
|
||
.admin-row .locked-badge {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
background: var(--surface-2);
|
||
color: var(--text-muted);
|
||
}
|
||
.admin-row-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
.admin-row-title .swatch { display: inline-block; }
|
||
.admin-empty { color: var(--text-muted); padding: 16px 0; }
|
||
.admin-add-row {
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.port-profile-list {
|
||
margin: 4px 0 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.port-profile-list li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 2px 0;
|
||
}
|
||
.tmpl-detail {
|
||
margin: 4px 0 0 0;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.tmpl-detail ul { margin: 4px 0 0 16px; padding: 0; }
|
||
|
||
.sv-body { font-size: 13px; }
|
||
.sv-body h3 {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--text-muted);
|
||
margin: 12px 0 4px;
|
||
}
|
||
.sv-body ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.sv-body li {
|
||
padding: 4px 8px;
|
||
border-radius: var(--radius);
|
||
background: var(--surface-2);
|
||
}
|
||
.sv-body li.added { border-left: 3px solid #2f9e44; }
|
||
.sv-body li.removed { border-left: 3px solid var(--danger); text-decoration: line-through; }
|
||
.sv-body li.unmet { border-left: 3px solid #f59f00; }
|
||
.sv-body li.unmet .quickfix {
|
||
display: inline-block;
|
||
margin-left: 8px;
|
||
font-size: 11px;
|
||
padding: 1px 6px;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tp-preview {
|
||
font-size: 13px;
|
||
background: var(--surface-2);
|
||
border-radius: var(--radius);
|
||
padding: 8px 12px;
|
||
margin: 8px 0;
|
||
}
|
||
.tp-preview h4 {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--text-muted);
|
||
margin: 6px 0 4px;
|
||
}
|
||
.tp-preview ul { list-style: none; padding: 0; margin: 0; }
|
||
.tp-preview li { padding: 2px 0; }
|
||
.tp-preview .skip {
|
||
margin-right: 6px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.rubber-band {
|
||
fill: rgba(25, 113, 194, 0.08);
|
||
stroke: var(--accent);
|
||
stroke-width: 1;
|
||
stroke-dasharray: 4 4;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* tool buttons toggle armed-state */
|
||
.btn[data-tool].armed {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
/* ---------- inspector ---------- */
|
||
|
||
.inspector dl {
|
||
margin: 0;
|
||
display: grid;
|
||
grid-template-columns: 80px 1fr;
|
||
gap: 4px 8px;
|
||
font-size: 12px;
|
||
}
|
||
.inspector dt { color: var(--text-muted); }
|
||
.inspector dd { margin: 0; }
|
||
|
||
.inspector .inline-input {
|
||
font: inherit;
|
||
width: 100%;
|
||
padding: 4px 6px;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
background: #fff;
|
||
}
|
||
.inspector .inline-input:focus {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: -1px;
|
||
border-color: var(--accent);
|
||
}
|
||
.inspector .section-title {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--text-muted);
|
||
margin: 12px 0 6px 0;
|
||
}
|
||
.inspector .inspector-actions {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* foreignObject used to inline-name a freshly-placed frame/device */
|
||
.inline-namer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.inline-namer input {
|
||
font: inherit;
|
||
font-size: 12px;
|
||
padding: 2px 4px;
|
||
border: 2px solid var(--accent);
|
||
border-radius: var(--radius);
|
||
background: #fff;
|
||
width: calc(100% - 8px);
|
||
max-width: 200px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ---------- buttons ---------- */
|
||
|
||
.btn {
|
||
font: inherit;
|
||
background: var(--surface);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
padding: 4px 10px;
|
||
border-radius: var(--radius);
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.btn:hover { background: var(--surface-2); }
|
||
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
|
||
|
||
.btn-tiny { padding: 2px 8px; font-size: 12px; }
|
||
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||
.btn-primary:hover { background: #155da3; }
|
||
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
|
||
.btn-danger:hover { background: #b02828; }
|
||
|
||
/* ---------- dialog ---------- */
|
||
|
||
.modal {
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
width: 380px;
|
||
max-width: calc(100vw - 32px);
|
||
background: var(--surface);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
|
||
}
|
||
.modal::backdrop { background: rgba(0,0,0,0.3); }
|
||
.modal form { padding: 16px; }
|
||
.modal h2 { margin: 0 0 12px 0; font-size: 16px; }
|
||
.modal .banner {
|
||
background: #fff8e1;
|
||
border: 1px solid #f5d76e;
|
||
color: #5b4500;
|
||
padding: 8px 10px;
|
||
border-radius: var(--radius);
|
||
font-size: 13px;
|
||
margin: 0 0 12px 0;
|
||
}
|
||
.modal .actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
.modal .form-error {
|
||
color: var(--danger);
|
||
font-size: 13px;
|
||
margin: 6px 0 0 0;
|
||
}
|
||
|
||
.field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin: 0 0 10px 0;
|
||
}
|
||
.field span {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.field input,
|
||
.field textarea {
|
||
font: inherit;
|
||
padding: 6px 8px;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
background: #fff;
|
||
width: 100%;
|
||
}
|
||
.field input:focus,
|
||
.field textarea:focus {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: -1px;
|
||
border-color: var(--accent);
|
||
}
|