35 lines
4.0 KiB
CSS
35 lines
4.0 KiB
CSS
:root {
|
|
--paper: #ffffff;
|
|
--text: #20252b;
|
|
--grid: #d9dde1;
|
|
--current-trajectory: #1769aa;
|
|
--previous-trajectory: #8d959d;
|
|
--handoff: #d87918;
|
|
--failure: #b42318;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; background: var(--paper); color: var(--text); font: 14px/1.45 "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
|
|
header { display: flex; justify-content: space-between; align-items: end; padding: 22px 30px 16px; border-bottom: 1px solid var(--grid); }
|
|
h1, h2, p { margin: 0; } h1 { font-size: 22px; font-weight: 600; letter-spacing: .02em; } h2 { font-size: 15px; font-weight: 600; }
|
|
.eyebrow { color: #66707a; font: 11px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
|
|
#live-state { min-width: 170px; padding: 5px 8px; border-left: 3px solid var(--current-trajectory); color: #3f4851; text-align: right; }
|
|
nav { display: flex; gap: 2px; padding: 10px 30px 0; border-bottom: 1px solid var(--grid); }
|
|
nav button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #59636d; cursor: pointer; padding: 9px 12px 8px; font: inherit; }
|
|
nav button[aria-selected="true"] { border-bottom-color: var(--current-trajectory); color: var(--text); font-weight: 600; }
|
|
main { max-width: 1500px; margin: auto; padding: 22px 30px 36px; }
|
|
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px 16px; margin-bottom: 14px; }
|
|
.summary-value { border-bottom: 1px solid var(--grid); padding: 4px 0; } .summary-value small { display: block; color: #66707a; }
|
|
.world-stack { position: relative; width: 100%; min-height: 520px; border: 1px solid var(--grid); overflow: hidden; background: #fff; }
|
|
#occupancy-grid, #world-overlay { position: absolute; inset: 0; width: 100%; height: 100%; } #world-overlay { pointer-events: none; }
|
|
#ls-st, #kinematics { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
|
|
.chart { min-height: 280px; border: 1px solid var(--grid); padding: 8px; } .chart svg { display: block; width: 100%; height: 244px; }
|
|
.chart-title { font-size: 14px; font-weight: 600; } .chart-note { min-height: 20px; color: #66707a; font-size: 12px; }
|
|
.chart-grid { stroke: var(--grid); stroke-width: .55; } .chart-axis { stroke: #59636d; stroke-width: .8; } .chart-data { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
|
|
.chart-solid { stroke: var(--current-trajectory); } .chart-dashed { stroke: var(--previous-trajectory); stroke-dasharray: 5 4; } .chart-limit { stroke: var(--failure); stroke-dasharray: 3 3; }
|
|
.axis-label { fill: #48515b; font: 11px sans-serif; } .axis-tick { fill: #66707a; font: 10px sans-serif; }
|
|
.world-line { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; } .world-static { stroke: #8d959d; } .world-future { stroke: #b6bec6; stroke-dasharray: 5 4; } .world-active { stroke: #1769aa; } .world-previous { stroke: #8d959d; stroke-dasharray: 5 4; } .world-marker { fill: #d87918; stroke: #ffffff; stroke-width: .8; }
|
|
.history-panel, .configuration-panel { margin-bottom: 26px; } #cycle-history { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; } th, td { padding: 6px 8px; border-bottom: 1px solid var(--grid); text-align: left; white-space: nowrap; } th { color: #59636d; font-weight: 600; }
|
|
.config-group { margin: 13px 0; border-top: 1px solid var(--grid); } .config-group h3 { margin: 8px 0; font-size: 13px; } .config-entry { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(130px, 1fr) minmax(90px, 1fr) 70px; gap: 8px; padding: 4px 0; border-bottom: 1px dotted #e5e8eb; } .raw { color: #66707a; font-family: ui-monospace, Consolas, monospace; }
|
|
.failure { color: var(--failure); } .notice { color: var(--handoff); }
|
|
@media (max-width: 720px) { header { align-items: start; flex-direction: column; gap: 10px; } nav, main, header { padding-left: 14px; padding-right: 14px; } .world-stack { min-height: 360px; } .config-entry { grid-template-columns: 1fr 1fr; } }
|