890 lines
16 KiB
CSS
890 lines
16 KiB
CSS
:root {
|
|
--bg-0: #f5f7fb;
|
|
--bg-1: #ebf1f8;
|
|
--bg-2: #dce8f4;
|
|
--panel: #fbfdff;
|
|
--panel-strong: #ffffff;
|
|
--canvas: #f4f8fd;
|
|
--ink: #0f1728;
|
|
--ink-muted: #4a607c;
|
|
--ink-subtle: #7388a3;
|
|
--line: #c8d5e4;
|
|
--line-strong: #9db1c9;
|
|
--accent: #1565d8;
|
|
--accent-strong: #0f4dab;
|
|
--accent-soft: #e6f0ff;
|
|
--ok: #0f7a49;
|
|
--warn: #9b6200;
|
|
--err: #ac2f24;
|
|
--power: #d6691f;
|
|
--ground: #60748d;
|
|
--clock: #d35c2f;
|
|
--signal: #2f72e7;
|
|
--analog: #0d978e;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
|
|
--shadow-2: 0 10px 24px rgba(16, 24, 40, 0.08);
|
|
}
|
|
|
|
body.theme-dark {
|
|
--bg-0: #0b1220;
|
|
--bg-1: #0f172a;
|
|
--bg-2: #172237;
|
|
--panel: #0f1c2e;
|
|
--panel-strong: #13233a;
|
|
--canvas: #0d1728;
|
|
--ink: #e6edf7;
|
|
--ink-muted: #a7b6cd;
|
|
--ink-subtle: #7f91ad;
|
|
--line: #2a3c57;
|
|
--line-strong: #436086;
|
|
--accent: #60a5fa;
|
|
--accent-strong: #3b82f6;
|
|
--accent-soft: #162945;
|
|
--ok: #42ba86;
|
|
--warn: #f0b54f;
|
|
--err: #ef7367;
|
|
--power: #f59a4b;
|
|
--ground: #9ab0ca;
|
|
--clock: #f1835f;
|
|
--signal: #7aa4ff;
|
|
--analog: #4ec2ba;
|
|
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
--shadow-2: 0 10px 24px rgba(0, 0, 0, 0.36);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body.theme-dark {
|
|
background:
|
|
radial-gradient(circle at 0% 0%, #2f1f17 0 18%, transparent 30%),
|
|
radial-gradient(circle at 96% 5%, #122739 0 18%, transparent 30%),
|
|
linear-gradient(180deg, var(--bg-1), var(--bg-0));
|
|
}
|
|
|
|
body {
|
|
font-family: "IBM Plex Sans", "Manrope", "Segoe UI", sans-serif;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at 0% 0%, #fff4de 0 20%, transparent 30%),
|
|
radial-gradient(circle at 96% 5%, #dbf2ff 0 18%, transparent 28%),
|
|
linear-gradient(180deg, var(--bg-1), var(--bg-0));
|
|
}
|
|
|
|
button,
|
|
select,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea,
|
|
.list li,
|
|
details > summary {
|
|
transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible,
|
|
.list li:focus-visible,
|
|
details > summary:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--panel-strong);
|
|
color: var(--ink);
|
|
padding: 6px 11px;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-1);
|
|
}
|
|
|
|
button:hover {
|
|
border-color: var(--line-strong);
|
|
background: color-mix(in oklab, var(--accent-soft) 58%, var(--panel-strong));
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.48;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button.primary {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
color: #fff;
|
|
}
|
|
|
|
button.primary:hover {
|
|
background: var(--accent-strong);
|
|
border-color: var(--accent-strong);
|
|
}
|
|
|
|
button.chip {
|
|
padding: 4px 9px;
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
button.activeChip {
|
|
background: var(--accent-soft);
|
|
border-color: var(--accent);
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 88%, #ffffff), var(--panel));
|
|
backdrop-filter: blur(2px);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
.brand h1 {
|
|
margin: 0;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.08em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.brand p {
|
|
margin: 2px 0 0;
|
|
font-size: 0.84rem;
|
|
color: var(--ink-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.inlineSelect,
|
|
.inlineCheck,
|
|
.inline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.inlineSelect select {
|
|
min-width: 138px;
|
|
}
|
|
|
|
.workspace {
|
|
height: calc(100vh - 77px);
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: 270px minmax(520px, 1fr) 392px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.pane {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
background: linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel) 88%, #081120));
|
|
box-shadow: var(--shadow-1);
|
|
}
|
|
|
|
.pane.left,
|
|
.pane.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.pane.center {
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 90%, #ffffff), var(--panel));
|
|
}
|
|
|
|
.sectionHead {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sectionHead h2 {
|
|
margin: 0;
|
|
font-size: 0.92rem;
|
|
color: var(--ink);
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 0.94rem;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 8px;
|
|
background: var(--panel-strong);
|
|
color: var(--ink);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--ink-subtle);
|
|
}
|
|
|
|
textarea {
|
|
min-height: 250px;
|
|
font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
|
|
font-size: 12px;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.list {
|
|
margin: 8px 0 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
max-height: 250px;
|
|
overflow: auto;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in oklab, var(--panel-strong) 84%, transparent);
|
|
}
|
|
|
|
.list li {
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
cursor: pointer;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.list li:hover {
|
|
background: color-mix(in oklab, var(--accent-soft) 70%, var(--panel-strong));
|
|
}
|
|
|
|
.list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.list li.active {
|
|
background: var(--accent-soft);
|
|
color: #0b3a84;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.list li.listSpacer {
|
|
padding: 0;
|
|
border: none;
|
|
cursor: default;
|
|
background: transparent;
|
|
}
|
|
|
|
.quickCreate {
|
|
margin-top: 8px;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 6px;
|
|
}
|
|
|
|
.quickCreate button {
|
|
justify-self: start;
|
|
}
|
|
|
|
.legendSection {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.netLegend {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--panel-strong);
|
|
padding: 8px;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.legendRow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.8rem;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.legendSwatch {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 0;
|
|
border-top: 3px solid var(--line-strong);
|
|
}
|
|
|
|
.legendPower {
|
|
border-top-color: var(--power);
|
|
}
|
|
|
|
.legendGround {
|
|
border-top-color: var(--ground);
|
|
}
|
|
|
|
.legendClock {
|
|
border-top-color: var(--clock);
|
|
}
|
|
|
|
.legendSignal {
|
|
border-top-color: var(--signal);
|
|
}
|
|
|
|
.legendAnalog {
|
|
border-top-color: var(--analog);
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--panel-strong);
|
|
padding: 8px;
|
|
color: var(--ink-muted);
|
|
font-size: 0.85rem;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.editorCard {
|
|
margin-top: 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 9px;
|
|
background: color-mix(in oklab, var(--panel-strong) 86%, var(--panel));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.editorSection {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
margin-top: 8px;
|
|
background: color-mix(in oklab, var(--panel-strong) 88%, transparent);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editorSection > summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
padding: 8px 10px;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.editorSection > summary:hover {
|
|
background: color-mix(in oklab, var(--accent-soft) 60%, var(--panel-strong));
|
|
}
|
|
|
|
.editorSection[open] > summary {
|
|
border-bottom: 1px solid var(--line);
|
|
background: color-mix(in oklab, var(--accent-soft) 76%, var(--panel-strong));
|
|
}
|
|
|
|
.editorSection > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.editorGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.editorActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hintText {
|
|
font-size: 0.8rem;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.miniList {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--panel-strong);
|
|
max-height: 180px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.miniRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.miniRow:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.symbolPinRow {
|
|
display: grid;
|
|
align-items: start;
|
|
grid-template-columns: 1fr;
|
|
gap: 6px;
|
|
}
|
|
|
|
.symbolPinMain {
|
|
display: grid;
|
|
grid-template-columns: minmax(72px, 1fr) minmax(58px, 0.8fr) minmax(76px, 0.9fr) minmax(66px, 0.7fr) minmax(110px, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.symbolPinActions {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.symbolPinActions button {
|
|
min-width: 0;
|
|
padding: 4px 6px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.pinCol {
|
|
min-width: 0;
|
|
padding: 5px 6px;
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.symbolPinRow.invalidRow {
|
|
background: #fff3f1;
|
|
}
|
|
|
|
.symbolValidationError {
|
|
color: var(--err);
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.migrationPreview {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 8px;
|
|
margin: 6px 0;
|
|
line-height: 1.35;
|
|
background: #f5f9ff;
|
|
}
|
|
|
|
.canvasTools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 90%, #ffffff), var(--panel));
|
|
}
|
|
|
|
#compileStatus {
|
|
margin-left: auto;
|
|
color: var(--ink-muted);
|
|
font-size: 0.84rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-ok {
|
|
color: var(--ok);
|
|
}
|
|
|
|
.canvasViewport {
|
|
height: calc(100% - 52px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: grab;
|
|
background:
|
|
linear-gradient(0deg, color-mix(in oklab, var(--line) 72%, transparent) 1px, transparent 1px),
|
|
linear-gradient(90deg, color-mix(in oklab, var(--line) 72%, transparent) 1px, transparent 1px),
|
|
linear-gradient(180deg, var(--canvas), color-mix(in oklab, var(--canvas) 82%, #1c2f49));
|
|
background-size: 20px 20px, 20px 20px, auto;
|
|
}
|
|
|
|
.canvasViewport.dragging {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.canvasInner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.canvasInner svg {
|
|
display: block;
|
|
}
|
|
|
|
.selectionBox {
|
|
position: absolute;
|
|
z-index: 15;
|
|
pointer-events: none;
|
|
border: 1px solid var(--accent);
|
|
background: rgba(21, 101, 216, 0.12);
|
|
}
|
|
|
|
.pinTooltip {
|
|
position: absolute;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 6px 8px;
|
|
color: var(--ink);
|
|
background: color-mix(in oklab, var(--panel-strong) 92%, transparent);
|
|
box-shadow: var(--shadow-2);
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.selectedNoteHint {
|
|
position: absolute;
|
|
z-index: 18;
|
|
pointer-events: none;
|
|
max-width: min(460px, 56vw);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: color-mix(in oklab, var(--panel-strong) 92%, transparent);
|
|
color: var(--ink);
|
|
box-shadow: var(--shadow-2);
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.jsonActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.jsonActions button {
|
|
font-size: 0.77rem;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.jsonFeedback {
|
|
min-height: 18px;
|
|
margin-bottom: 6px;
|
|
color: var(--ink-muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.issueRow {
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
padding: 7px;
|
|
margin-bottom: 6px;
|
|
cursor: pointer;
|
|
background: var(--panel-strong);
|
|
}
|
|
|
|
.issueRow:hover {
|
|
background: color-mix(in oklab, var(--accent-soft) 66%, var(--panel-strong));
|
|
}
|
|
|
|
.issueErr {
|
|
border-color: #f3bab5;
|
|
background: #fff5f4;
|
|
}
|
|
|
|
.issueWarn {
|
|
border-color: #f0d28b;
|
|
background: #fffaf0;
|
|
}
|
|
|
|
.issueTitle {
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.issueMeta {
|
|
font-size: 0.72rem;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.issueActions {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.issueActions button {
|
|
font-size: 0.74rem;
|
|
padding: 3px 8px;
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 70;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 18px;
|
|
background: rgba(14, 22, 36, 0.54);
|
|
}
|
|
|
|
.modal.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.modalCard {
|
|
width: min(1120px, 100%);
|
|
height: min(88vh, 900px);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--panel-strong);
|
|
box-shadow: 0 24px 60px rgba(16, 24, 40, 0.24);
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.compactModal {
|
|
width: min(760px, 100%);
|
|
height: auto;
|
|
max-height: min(86vh, 760px);
|
|
}
|
|
|
|
.modalHead {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.modalHead h3 {
|
|
margin: 0;
|
|
font-size: 0.96rem;
|
|
}
|
|
|
|
.modalHint {
|
|
margin: 0;
|
|
color: var(--ink-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
#schemaViewer {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.shortcutGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
overflow: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.shortcutGrid > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 8px 10px;
|
|
font-size: 0.86rem;
|
|
color: var(--ink-muted);
|
|
background: color-mix(in oklab, var(--panel-strong) 88%, var(--panel));
|
|
}
|
|
|
|
kbd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 1px solid var(--line-strong);
|
|
border-bottom-width: 2px;
|
|
border-radius: 6px;
|
|
background: var(--panel-strong);
|
|
padding: 2px 6px;
|
|
color: var(--ink);
|
|
font-size: 0.74rem;
|
|
font-family: "JetBrains Mono", monospace;
|
|
}
|
|
|
|
.commandList {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
overflow: auto;
|
|
max-height: 46vh;
|
|
background: var(--panel-strong);
|
|
}
|
|
|
|
.commandRow {
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 1px solid var(--line);
|
|
border-radius: 0;
|
|
background: var(--panel-strong);
|
|
text-align: left;
|
|
box-shadow: none;
|
|
padding: 8px 10px;
|
|
color: var(--ink);
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.commandRow:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.commandRow:hover,
|
|
.commandRow.active {
|
|
background: color-mix(in oklab, var(--accent-soft) 70%, var(--panel-strong));
|
|
}
|
|
|
|
.flash {
|
|
animation: flashPulse 0.7s ease-in-out 0s 2;
|
|
}
|
|
|
|
@keyframes flashPulse {
|
|
0% {
|
|
opacity: 0.2;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1460px) {
|
|
.workspace {
|
|
grid-template-columns: 248px minmax(420px, 1fr) 360px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1300px) {
|
|
.workspace {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: minmax(420px, 1fr) repeat(2, minmax(240px, auto));
|
|
grid-auto-flow: row;
|
|
gap: 12px;
|
|
height: auto;
|
|
}
|
|
|
|
.pane.center {
|
|
order: -1;
|
|
min-height: 420px;
|
|
max-height: 58vh;
|
|
}
|
|
|
|
.pane.left,
|
|
.pane.right {
|
|
max-height: 320px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pane.left .list,
|
|
.pane.right .miniList {
|
|
max-height: 160px;
|
|
}
|
|
|
|
.canvasViewport {
|
|
height: min(54vh, 520px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.topbar {
|
|
position: static;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.brand h1 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.brand {
|
|
width: 100%;
|
|
}
|
|
|
|
.actions {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
padding-bottom: 4px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.actions button,
|
|
.actions select {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.actions::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.actions::-webkit-scrollbar-thumb {
|
|
background: var(--line-strong);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.workspace {
|
|
padding: 6px;
|
|
}
|
|
|
|
.editorGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.symbolPinMain {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.jsonActions {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.jsonActions button {
|
|
width: 100%;
|
|
}
|
|
|
|
.pane.left,
|
|
.pane.right {
|
|
max-height: 300px;
|
|
}
|
|
}
|