37 lines
2.7 KiB
CSS
37 lines
2.7 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
background: #0e141b;
|
|
color: #e7edf2;
|
|
--line: #2b3742;
|
|
--muted: #9aa9b5;
|
|
--accent: #b4e15d;
|
|
--panel: #151e27;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-width: 320px; background: #0e141b; }
|
|
button { font: inherit; }
|
|
.app-shell { min-height: 100vh; padding: 24px; }
|
|
.app-header { display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
|
|
.brand { font-size: 20px; font-weight: 700; letter-spacing: 0; }
|
|
.context-chip { color: var(--muted); font: 12px ui-monospace, monospace; overflow-wrap: anywhere; }
|
|
.workspace-grid { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr); gap: 18px; max-width: 1180px; margin: 0 auto; }
|
|
.panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
|
|
.panel-title { margin: 0 0 12px; font-size: 16px; letter-spacing: 0; }
|
|
.status-line { min-height: 24px; margin: 0 0 18px; color: var(--muted); }
|
|
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
|
.operation-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
|
|
.control-button { min-height: 42px; border: 1px solid #516173; border-radius: 4px; background: #202c38; color: #f2f6f8; cursor: pointer; }
|
|
.control-button:hover, .control-button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
|
|
.state-view { min-height: 260px; max-height: 520px; margin: 0; overflow: auto; color: #c9e58e; font: 12px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.state-grid { display: grid; grid-template-columns: minmax(90px, 0.4fr) minmax(0, 1fr); gap: 8px 14px; margin: 0; }
|
|
.state-grid dt { color: var(--muted); }
|
|
.state-grid dd { margin: 0; overflow-wrap: anywhere; }
|
|
.recovery-status { margin: 0 0 8px; color: var(--muted); overflow-wrap: anywhere; }
|
|
.device-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
|
|
.hal-list { margin: 0; padding-left: 20px; color: #f0b36a; font: 12px/1.5 ui-monospace, monospace; }
|
|
.machine-canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border: 1px solid var(--line); border-radius: 4px; }
|
|
@media (max-width: 760px) { .device-buttons { grid-template-columns: 1fr; } }
|
|
@media (max-width: 760px) { .app-shell { padding: 16px; } .app-header { align-items: flex-start; flex-direction: column; } .workspace-grid { grid-template-columns: 1fr; } .controls, .operation-controls { grid-template-columns: 1fr; } }
|