PitresAli
8ccd7689f7
Add configurable Xbox motion and action bindings, frame-aware six-axis MAVLink controls, sensor logging, camera viewing and recording, and a faster startup path. Synchronize both app copies and document companion hardware setup and verification limits.
83 lines
6.9 KiB
CSS
83 lines
6.9 KiB
CSS
/* V2 uses the existing deck, type scale, and flat settings rows. */
|
|
:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
|
|
[hidden] { display:none !important; }
|
|
.workspace-nav { display:flex; align-items:center; gap:12px; margin:0 0 10px; min-height:32px; }
|
|
.view-switch { display:flex; gap:2px; padding:3px; background:#e1e1e1; border-radius:20px; }
|
|
.view-switch button,.quiet-button { border:0; background:transparent; color:#737575; border-radius:18px; padding:6px 14px; cursor:pointer; font-size:12px; }
|
|
.view-switch [aria-pressed=true] { background:#fafafa; color:#242929; box-shadow:0 1px 3px #0000000c; }
|
|
.workspace-nav .quiet-button { margin-left:auto; }
|
|
.version-mark { color:#9a9e9d; font-size:10px; letter-spacing:.08em; }
|
|
#controller-settings { display:block; }
|
|
.controller-modal { width:min(730px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; }
|
|
.binding-head,.binding-row { display:grid; grid-template-columns:80px minmax(100px,1fr) minmax(100px,1fr) 28px 54px; gap:8px; align-items:center; }
|
|
.binding-head { font-size:10px; color:#858b89; padding:8px 0; }
|
|
.binding-row { padding:9px 0; border-top:1px solid #dedfdd; }
|
|
.binding-row > span { font-size:12px; font-weight:500; }
|
|
.binding-row meter { display:block; width:50px; height:3px; margin-top:7px; accent-color:#6d9c8b; }
|
|
.binding-row select,.binding-row input { height:34px; min-height:34px; padding:0 8px; border-radius:8px; font-size:12px; min-width:0; }
|
|
.binding-row input { text-align:center; padding:0 2px; font-variant-numeric:tabular-nums; }
|
|
.binding-swap { background:transparent; border:0; height:32px; color:#6a7470; font-size:19px; cursor:pointer; border-radius:7px; }
|
|
.binding-swap:hover { background:#e0e5e1; }
|
|
.mapping-tuning { margin-top:14px; }
|
|
.mapping-actions { margin-top:16px; font-size:12px; }
|
|
.mapping-actions summary { padding:8px 0; cursor:pointer; color:#727b76; }
|
|
.form-grid.three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
|
|
.dashboard { display:flex; flex:1; flex-direction:column; min-height:0; gap:0; overflow:auto; }
|
|
.camera-stage { flex:1 1 220px; min-height:150px; position:relative; border-radius:14px; overflow:hidden; background:#18282d; color:#f2f6f5; isolation:isolate; }
|
|
.camera-stage video,.camera-stage img,.camera-stage canvas { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:contain; }
|
|
.camera-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#8fa5aa; font-size:12px; }
|
|
.camera-empty svg { width:40px; fill:none; stroke:currentColor; stroke-width:1.4; opacity:.65; }
|
|
.camera-overlay { pointer-events:none; position:absolute; top:14px; left:16px; right:16px; display:flex; align-items:center; gap:10px; font-size:10px; text-shadow:0 1px 3px #000; color:#d7e5e4; }
|
|
#camera-badge { border:1px solid #a8c1c245; border-radius:10px; padding:3px 8px; background:#16282c55; }
|
|
#recording-badge { color:#ff9e93; font-weight:600; }
|
|
#stream-clock { margin-left:auto; font-variant-numeric:tabular-nums; }
|
|
.dashboard-actions { display:flex; align-items:center; gap:5px; padding:10px 0; flex-wrap:wrap; }
|
|
.dashboard-actions button { min-height:32px; padding:6px 12px; border-radius:18px; border:0; background:#e0e2df; color:#46524b; font-size:11px; cursor:pointer; white-space:nowrap; }
|
|
.dashboard-actions button[aria-pressed=true] { background:#d0ddd5; color:#345844; }
|
|
.dashboard-actions button:disabled { opacity:.4; cursor:default; }
|
|
.telemetry-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; border-top:1px solid #d9deda; padding:14px 0; }
|
|
.telemetry-strip > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
|
|
.telemetry-strip span { font-size:10px; color:#7b8480; }
|
|
.telemetry-strip strong { font-weight:400; font-size:clamp(18px,2.2vw,26px); color:#36463d; font-variant-numeric:tabular-nums; letter-spacing:-.035em; white-space:nowrap; }
|
|
.telemetry-strip [data-stale=true] strong { color:#a4aaa5; }
|
|
.sensor-details { border-top:1px solid #d9deda; padding:10px 0 0; font-size:11px; }
|
|
.sensor-details summary { cursor:pointer; color:#58665d; }
|
|
.sensor-details summary span { float:right; color:#939c96; font-size:10px; }
|
|
.sensor-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px 0; }
|
|
.sensor-values div { min-width:0; display:flex; flex-direction:column; gap:4px; }
|
|
.sensor-values span { color:#87908a; font-size:10px; }
|
|
.sensor-values strong { font-size:11px; font-weight:500; color:#4b5c50; font-variant-numeric:tabular-nums; }
|
|
.detected-frame { display:flex; flex-direction:column; gap:9px; color:#859086; font-size:12px; padding-top:4px; }
|
|
.detected-frame strong { color:#4b5c50; font-weight:500; }
|
|
.extra-controls { display:flex; gap:16px; margin-top:8px; padding:10px 0 0; border-top:1px solid #d9deda; }
|
|
.extra-controls label { display:grid; flex:1; min-width:0; grid-template-columns:1fr 24px; gap:4px; color:#7e8981; font-size:10px; }
|
|
.extra-controls label input { width:100%; min-width:0; grid-row:2; grid-column:1/-1; accent-color:#668c78; height:18px; }
|
|
.extra-controls output { text-align:right; font-variant-numeric:tabular-nums; }
|
|
.primary-control-zone { grid-template-rows:clamp(64px,11vh,90px) minmax(0,1fr) auto auto; }
|
|
.controls-grid { --joy-size:min(34vh,calc(100cqw - 146px),370px); }
|
|
.workspace-topbar { margin-bottom:8px; }
|
|
:is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button):active { transform:scale(.97); }
|
|
:is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button):focus-visible { outline:2px solid #6b9a84; outline-offset:2px; }
|
|
.station-modal { width:min(560px,calc(100vw - 28px)); }
|
|
body[data-view=dashboard] #controller-status { position:absolute; clip:rect(0,0,0,0); }
|
|
@media (max-width:760px) {
|
|
.binding-head,.binding-row { grid-template-columns:66px minmax(0,1fr) minmax(0,1fr) 24px 46px; gap:6px; }
|
|
.binding-row select { padding:0 4px; font-size:11px; }
|
|
.controller-modal { padding:22px 18px; }
|
|
.controls-workspace { padding:16px; }
|
|
.dashboard-actions { gap:4px; }.dashboard-actions button { padding:6px 9px; }
|
|
}
|
|
@media (max-width:600px) {
|
|
.app-shell { grid-template-columns:170px minmax(0,1fr); }
|
|
.sidebar-deck { padding:14px; }
|
|
.input-mode-switch button { padding:6px 8px; }
|
|
.controls-grid { --joy-size:min(30vh,calc(100cqw - 95px),300px); grid-template-columns:minmax(0,1fr) 70px; gap:6px; }
|
|
.control-toolbar { flex-wrap:wrap; gap:8px; }.control-toolbar .range-pill { width:100px; }
|
|
.control-toolbar .output-limit > span { width:auto; flex-basis:auto; }
|
|
.window-actions { gap:0; }.window-actions button { width:24px; }
|
|
.extra-controls { gap:8px; }.workspace-nav { gap:6px; }
|
|
.view-switch button { padding:6px 9px; }.workspace-nav .quiet-button { padding:6px; }
|
|
.version-mark { display:none; }
|
|
}
|
|
@media (prefers-reduced-motion:reduce) { :is(.view-switch button,.quiet-button,.binding-swap,.dashboard-actions button) { transition:none; transform:none !important; } }
|