Initial commit: X-Plane G1000 web cockpit + bridge + Tauri desktop app
- server/: Node bridge (datarefs/commands, navdata, CIFP procedures, flight plan) - web/: React cockpit (PFD/MFD/Map, VFR six-pack, AFCS, FMS CDU), PWA, collapsible sidebar - desktop/: Tauri 2 launcher (Bun sidecar, system tray, updater) + Linux build via Docker - scripts/: prep-desktop, build-linux, Gitea release + latest.json Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,491 @@
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--panel: #141414;
|
||||
--accent: #00e676;
|
||||
--amber: #ffcc00;
|
||||
/* App chrome (everything that is NOT a G1000 instrument): same clean
|
||||
macOS-dark look as the desktop launcher. */
|
||||
--ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
|
||||
--c-bg: #1c1c1e;
|
||||
--c-surface: #2c2c2e;
|
||||
--c-fill: #3a3a3c;
|
||||
--c-line: #48484a;
|
||||
--c-line-soft: #38383a;
|
||||
--c-txt: #ffffff;
|
||||
--c-txt2: #ebebf5;
|
||||
--c-mut: #8e8e93;
|
||||
--c-green: #30d158;
|
||||
--c-amber: #ffd60a;
|
||||
--c-red: #ff453a;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body, #root { height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: #eee;
|
||||
font-family: -apple-system, system-ui, "Segoe UI", monospace;
|
||||
overscroll-behavior: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.app { display: flex; flex-direction: row; height: 100vh; height: 100dvh; }
|
||||
|
||||
/* collapsible left nav rail — macOS-dark app chrome (Inter) */
|
||||
.sidebar {
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
background: var(--c-bg); border-right: 1px solid var(--c-line-soft);
|
||||
font-family: var(--ui-font);
|
||||
width: 58px; flex: 0 0 58px; transition: width .18s ease, flex-basis .18s ease;
|
||||
padding: 10px 8px;
|
||||
padding-top: max(10px, env(safe-area-inset-top));
|
||||
padding-left: max(8px, env(safe-area-inset-left));
|
||||
}
|
||||
.app.nav-wide .sidebar { width: 176px; flex-basis: 176px; }
|
||||
|
||||
.sb-top {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 6px;
|
||||
background: var(--c-surface); color: var(--c-txt);
|
||||
border: 1px solid var(--c-line-soft); border-radius: 10px;
|
||||
padding: 9px 10px; cursor: pointer; font-family: inherit; min-height: 38px;
|
||||
}
|
||||
.sb-top:hover { background: #34343a; }
|
||||
.brand { font-weight: 700; font-size: 17px; letter-spacing: .3px; white-space: nowrap; }
|
||||
.brand span { color: var(--c-green); font-weight: 500; }
|
||||
.sb-chev { color: var(--c-mut); font-size: 12px; }
|
||||
.app.nav-narrow .brand span { display: none; }
|
||||
.app.nav-narrow .sb-chev { display: none; }
|
||||
.app.nav-narrow .sb-top { justify-content: center; padding: 9px 0; }
|
||||
|
||||
.snav { display: flex; flex-direction: column; gap: 5px; flex: 1; margin-top: 4px; }
|
||||
.snav-i {
|
||||
display: flex; align-items: center; gap: 13px;
|
||||
background: transparent; color: var(--c-mut);
|
||||
border: 1px solid transparent; border-radius: 10px;
|
||||
padding: 10px 11px; font-size: 14px; font-weight: 500; font-family: inherit;
|
||||
cursor: pointer; width: 100%; text-align: left; overflow: hidden;
|
||||
transition: background .12s, color .12s;
|
||||
}
|
||||
.snav-i:hover { background: var(--c-surface); color: var(--c-txt2); }
|
||||
.snav-i.active { background: rgba(48,209,88,.16); color: var(--c-green); border-color: rgba(48,209,88,.35); }
|
||||
.snav-ic { flex: 0 0 22px; }
|
||||
.snav-lbl { white-space: nowrap; }
|
||||
.app.nav-narrow .snav-lbl { display: none; }
|
||||
.app.nav-narrow .snav-i { justify-content: center; padding: 10px 0; gap: 0; }
|
||||
|
||||
.sb-conn { display: flex; align-items: center; gap: 11px; padding: 9px 11px; font-size: 11px; font-weight: 600; letter-spacing: .8px; color: var(--c-mut); }
|
||||
.sb-conn .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--c-mut); }
|
||||
.sb-conn.ok .dot { background: var(--c-green); box-shadow: 0 0 8px var(--c-green); }
|
||||
.sb-conn.warn .dot { background: var(--c-amber); }
|
||||
.sb-conn.bad .dot { background: var(--c-red); }
|
||||
.app.nav-narrow .sb-conn { justify-content: center; padding: 9px 0; }
|
||||
|
||||
/* main screen */
|
||||
.screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; min-width: 0; }
|
||||
|
||||
/* VFR analog panel (C172 steam gauges on a metal panel) */
|
||||
.vfr-panel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(150deg, #44474d 0%, #303338 40%, #232529 100%);
|
||||
overflow: auto; padding: 18px; }
|
||||
.vfr-layout { display: flex; align-items: center; gap: clamp(14px, 3vw, 40px); }
|
||||
.vfr-cluster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; align-content: center; max-width: 270px; }
|
||||
.vfr-cluster .vfr-clock { grid-column: 1 / -1; }
|
||||
.vfr-main { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vw, 26px); }
|
||||
.vfr-grid { display: grid; grid-template-columns: repeat(3, minmax(140px, 215px)); gap: clamp(10px, 2.2vw, 26px); }
|
||||
.vfr-tach { width: clamp(130px, 16vw, 180px); }
|
||||
.vfr-gauge, .vfr-sg { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.vfr-gauge svg, .vfr-sg svg { width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.55)); }
|
||||
.vfr-name, .vfr-sname { font-family: var(--ui-font); letter-spacing: 1.2px; color: #c9d0d7; font-weight: 600; }
|
||||
.vfr-name { font-size: 11px; } .vfr-sname { font-size: 9px; }
|
||||
.vfr-clock { background: #0c0d0f; border: 1px solid #2a2f36; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
|
||||
.vc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
||||
.vc-row b { font-family: 'Saira Condensed', monospace; color: #46e0c0; font-size: 18px; }
|
||||
.vc-row span { color: #7d8893; font-size: 9px; letter-spacing: 1px; }
|
||||
|
||||
/* Garmin-like condensed type on every PFD/MFD readout (CSS overrides the
|
||||
monospace presentation attributes inside the SVG). */
|
||||
.g1000 text, .g1000 tspan { font-family: 'Saira Condensed', 'Saira Semi Condensed', sans-serif; font-weight: 600; }
|
||||
|
||||
/* PFD */
|
||||
.pfd, .g1000 { width: 100%; height: 100%; max-height: 100%; display: block; }
|
||||
.pfd-wrap { position: relative; width: 100%; height: 100%; }
|
||||
.pfd-wrap .g1000 { position: relative; z-index: 1; }
|
||||
/* SVT (synthetic vision) terrain behind the attitude window */
|
||||
.svt-pos { position: absolute; z-index: 0; overflow: hidden; }
|
||||
.svt-fallback {
|
||||
width: 100%; height: 100%; overflow: hidden;
|
||||
background: linear-gradient(#1f86d6 0%, #6fb2e6 49%, #7a5230 51%, #4a2d12 100%);
|
||||
}
|
||||
/* INSET moving map, bottom-left corner of the PFD (toggled by INSET softkey) */
|
||||
.pfd-inset { position: absolute; z-index: 2; overflow: hidden; border: 2px solid #c8d0d8; box-shadow: 0 0 0 1px #000; }
|
||||
.pfd-inset .mapwrap, .pfd-inset .leaflet-host { width: 100%; height: 100%; }
|
||||
.mapwrap.inset .leaflet-control-container { display: none; }
|
||||
/* NRST (nearest) window — pops over the right side of the PFD */
|
||||
.nrst-window {
|
||||
position: absolute; z-index: 4; top: 9%; right: 1.5%; width: 41%; max-width: 440px;
|
||||
background: rgba(8, 10, 12, 0.94); border: 1px solid #4a5560; border-radius: 3px;
|
||||
color: #fff; font-family: 'Roboto Mono', monospace; box-shadow: 0 4px 18px rgba(0,0,0,0.6);
|
||||
}
|
||||
.nrst-head { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: #11161b; border-bottom: 1px solid #2c343c; }
|
||||
.nrst-title { color: #39d3c0; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
|
||||
.nrst-tabs { display: flex; gap: 3px; margin-left: auto; }
|
||||
.nrst-tabs button { background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; border-radius: 2px; font: inherit; font-size: 11px; padding: 2px 9px; cursor: pointer; }
|
||||
.nrst-tabs button.on { background: #0c9; color: #04201c; border-color: #0c9; font-weight: bold; }
|
||||
.nrst-x { background: none; border: none; color: #9fb0bd; cursor: pointer; font-size: 14px; padding: 0 2px; }
|
||||
.nrst-cols, .nrst-row { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1.1fr; align-items: baseline; padding: 2px 8px; column-gap: 4px; }
|
||||
.nrst-cols { color: #6f808d; font-size: 10px; border-bottom: 1px solid #222; padding-bottom: 4px; }
|
||||
.nrst-row { font-size: 14px; border-bottom: 1px solid #161b20; }
|
||||
.nrst-row .c-id { color: #0ff; font-weight: bold; }
|
||||
.nrst-row .c-brg, .nrst-row .c-dis { color: #fff; text-align: right; }
|
||||
.nrst-row .c-dis u { color: #6f808d; font-size: 9px; text-decoration: none; margin-left: 1px; }
|
||||
.nrst-row .c-xtra { color: #39d3c0; text-align: right; }
|
||||
.nrst-row .c-name { grid-column: 1 / -1; color: #8b9aa6; font-size: 10px; margin-top: -1px; }
|
||||
.nrst-list { max-height: 62vh; overflow-y: auto; }
|
||||
.nrst-empty { color: #6f808d; text-align: center; padding: 12px; font-size: 12px; }
|
||||
/* XPDR squawk-entry readout above the softkey keypad */
|
||||
.squawk-entry { text-align: center; color: #9fb0bd; font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: 1px; padding: 3px 0; }
|
||||
.squawk-entry b { color: #19ff19; font-size: 18px; letter-spacing: 5px; margin-left: 6px; }
|
||||
/* TMR/REF window — left side of the PFD */
|
||||
.tmr-window {
|
||||
position: absolute; z-index: 4; top: 9%; left: 1.5%; width: 30%; max-width: 320px;
|
||||
background: rgba(8, 10, 12, 0.94); border: 1px solid #4a5560; border-radius: 3px;
|
||||
color: #fff; font-family: 'Roboto Mono', monospace; box-shadow: 0 4px 18px rgba(0,0,0,0.6);
|
||||
}
|
||||
.tmr-body { padding: 8px 10px; }
|
||||
.tmr-clock { font-size: 34px; font-weight: bold; text-align: center; color: #fff; letter-spacing: 2px; }
|
||||
.tmr-dir { display: flex; gap: 4px; justify-content: center; margin: 4px 0; }
|
||||
.tmr-dir button { background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; font: inherit; font-size: 11px; padding: 2px 12px; cursor: pointer; }
|
||||
.tmr-dir button.on { background: #0c9; color: #04201c; font-weight: bold; }
|
||||
.tmr-ctl { display: flex; gap: 6px; margin: 6px 0; }
|
||||
.tmr-ctl .fbtn { flex: 1; }
|
||||
.tmr-target { display: flex; align-items: center; gap: 6px; justify-content: center; color: #cfd6dd; font-size: 13px; }
|
||||
.tmr-target label { color: #6f808d; font-size: 10px; }
|
||||
.tmr-target button { background: #1c242c; color: #fff; border: 1px solid #2c343c; width: 24px; cursor: pointer; }
|
||||
.tmr-sec { color: #39d3c0; font-size: 10px; margin: 8px 0 4px; border-top: 1px solid #222; padding-top: 6px; }
|
||||
.tmr-vspeeds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
||||
.tmr-vspeeds button { display: flex; align-items: baseline; gap: 5px; background: #141a20; border: 1px solid #222b33; color: #cfd6dd; font: inherit; padding: 4px 6px; cursor: pointer; }
|
||||
.tmr-vspeeds button.on { border-color: #0c9; background: #0a1f1b; }
|
||||
.tmr-vspeeds button i { color: #0a8; font-style: normal; } .tmr-vspeeds button b { color: #fff; margin-left: auto; } .tmr-vspeeds button u { color: #6f808d; font-size: 9px; text-decoration: none; }
|
||||
.tmr-mins { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
|
||||
.tmr-mins button:first-child { background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer; }
|
||||
.tmr-mins button:first-child.on { background: #0c9; color: #04201c; font-weight: bold; }
|
||||
.tmr-mins > button:not(:first-child) { background: #1c242c; color: #fff; border: 1px solid #2c343c; width: 24px; cursor: pointer; }
|
||||
.tmr-mins span { color: #fff; margin-left: auto; } .tmr-mins span.alert { color: #ffd24a; font-weight: bold; }
|
||||
.tmr-minalert { margin-top: 6px; text-align: center; background: #ffd24a; color: #1a1400; font-weight: bold; padding: 3px; border-radius: 2px; letter-spacing: 2px; }
|
||||
/* Modal dialogs (Direct-To, …) */
|
||||
.dlg-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }
|
||||
.dlg { background: #0c1015; border: 1px solid #3a4651; border-radius: 5px; min-width: 320px; color: #fff; font-family: 'Roboto Mono', monospace; box-shadow: 0 8px 30px rgba(0,0,0,0.7); }
|
||||
.dlg-head { background: #11161b; padding: 8px 12px; border-bottom: 1px solid #2c343c; color: #fff; font-weight: bold; letter-spacing: 1px; border-radius: 5px 5px 0 0; }
|
||||
.dto-arrow { color: #e040fb; margin-right: 8px; }
|
||||
.dto-body { padding: 12px; }
|
||||
.dto-lbl { color: #6f808d; font-size: 11px; display: block; margin-bottom: 4px; }
|
||||
.dto-input { width: 100%; box-sizing: border-box; background: #05080b; border: 1px solid #2c343c; color: #0ff; font: inherit; font-size: 20px; letter-spacing: 3px; padding: 6px 10px; text-transform: uppercase; }
|
||||
.dto-hits { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
|
||||
.dto-hits button { display: flex; align-items: baseline; gap: 8px; background: #141a20; border: 1px solid #222b33; color: #cfd6dd; font: inherit; padding: 5px 8px; cursor: pointer; text-align: left; }
|
||||
.dto-hits button.on { border-color: #0c9; background: #0a1f1b; }
|
||||
.dto-hits button b { color: #0ff; } .dto-hits button i { color: #0a8; font-style: normal; font-size: 11px; } .dto-hits button span { color: #6f808d; font-size: 11px; margin-left: auto; }
|
||||
.dto-sel { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #222; }
|
||||
.dto-sel .dto-id { color: #0ff; font-size: 20px; font-weight: bold; }
|
||||
.dto-sel .dto-type { color: #0a8; font-size: 11px; }
|
||||
.dto-sel .dto-vec { color: #e040fb; margin-left: auto; font-weight: bold; }
|
||||
.dlg-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #2c343c; }
|
||||
.dlg-actions .fbtn { flex: 1; }
|
||||
/* PROC dialog */
|
||||
.dlg.proc { width: 640px; max-width: 92vw; }
|
||||
.proc-body { padding: 12px; }
|
||||
.proc-apt { display: flex; align-items: center; gap: 8px; }
|
||||
.proc-apt label { color: #6f808d; font-size: 11px; }
|
||||
.proc-apt input { flex: 1; background: #05080b; border: 1px solid #2c343c; color: #0ff; font: inherit; font-size: 18px; letter-spacing: 2px; padding: 5px 10px; text-transform: uppercase; }
|
||||
.proc-apt .fbtn { flex: 0 0 auto; }
|
||||
.proc-err { color: #ffae42; font-size: 12px; margin-top: 6px; }
|
||||
.proc-tabs { display: flex; gap: 4px; margin: 10px 0 6px; }
|
||||
.proc-tabs button { flex: 1; background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; font: inherit; font-size: 12px; padding: 5px; cursor: pointer; }
|
||||
.proc-tabs button.on { background: #0c9; color: #04201c; font-weight: bold; border-color: #0c9; }
|
||||
.proc-cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; height: 300px; }
|
||||
.proc-list, .proc-preview { background: #05080b; border: 1px solid #1c242c; overflow-y: auto; display: flex; flex-direction: column; }
|
||||
.proc-coltitle { position: sticky; top: 0; background: #11161b; color: #6f808d; font-size: 10px; padding: 4px 8px; border-bottom: 1px solid #222; }
|
||||
.proc-list button { background: none; border: none; border-bottom: 1px solid #11161b; color: #cfd6dd; font: inherit; font-size: 14px; text-align: left; padding: 6px 8px; cursor: pointer; }
|
||||
.proc-list button:hover { background: #11161b; }
|
||||
.proc-list button.on { background: #0a1f1b; color: #0ff; font-weight: bold; }
|
||||
.proc-empty { color: #6f808d; font-size: 11px; padding: 8px; }
|
||||
.proc-leg { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #11161b; font-size: 13px; }
|
||||
.proc-leg b { color: #0ff; } .proc-leg u { color: #39d3c0; font-size: 10px; text-decoration: none; margin-left: auto; }
|
||||
/* G1000 vector nav symbology drawn from X-Plane's own nav data */
|
||||
.nav-divicon { background: none; border: none; }
|
||||
.nav-sym { position: relative; width: 18px; height: 18px; }
|
||||
.nav-lbl { position: absolute; left: 19px; top: 1px; font: 700 11px/1 monospace; white-space: nowrap;
|
||||
text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 1px #000; }
|
||||
/* Bank pivots about the aircraft reference (attitude centre), which sits ~28%
|
||||
down the full-screen terrain box — so terrain roll tracks the attitude. */
|
||||
.svt-canvas { width: 100%; height: 100%; transform-origin: 50% 28%; }
|
||||
.svt-canvas .maplibregl-canvas { width: 100% !important; height: 100% !important; }
|
||||
|
||||
/* ---- GDU-1040 bezel ---- */
|
||||
.bezel {
|
||||
width: 100%; height: 100%; display: flex; align-items: stretch; gap: 0;
|
||||
background: linear-gradient(150deg, #3a3c40, #202123 55%, #2c2d30);
|
||||
border-radius: 18px; padding: 12px; box-shadow: inset 0 1px 0 #4a4c50, 0 8px 30px #000;
|
||||
font-family: 'Saira Semi Condensed', sans-serif;
|
||||
}
|
||||
.bezel-core { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
||||
.bezel-title { text-align: center; color: #c9ced3; font-size: 14px; font-weight: 700; letter-spacing: 3px; padding: 2px 0 6px; }
|
||||
.bezel-screen {
|
||||
flex: 1; background: #000; border-radius: 6px; overflow: hidden; position: relative;
|
||||
border: 2px solid #0a0a0a; box-shadow: inset 0 0 18px #000, inset 0 0 2px #1a3a5a;
|
||||
display: flex; min-height: 0;
|
||||
}
|
||||
.bezel-screen > * { width: 100%; height: 100%; }
|
||||
.softkeys { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; padding: 8px 2px 2px; }
|
||||
.softkey {
|
||||
height: 30px; display: flex; align-items: center; justify-content: center;
|
||||
background: linear-gradient(#202224, #131416); border: 1px solid #000; border-top: 1px solid #45474b;
|
||||
border-radius: 4px; color: #cfd6dc; font-size: 12px; font-weight: 600; letter-spacing: .3px;
|
||||
box-shadow: 0 1px 2px #000; cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.softkey:not(.empty):hover { background: linear-gradient(#2a2c2f, #1a1b1e); border-top-color: #5a5d61; }
|
||||
.softkey:not(.empty):active { background: #0d0e10; box-shadow: inset 0 1px 3px #000; }
|
||||
.softkey.empty { color: transparent; cursor: default; }
|
||||
.softkey.on { background: #e8edf2; color: #0a0c0e; border-top-color: #fff; font-weight: 800; }
|
||||
.softkey.caution { color: #1a1b1e; background: linear-gradient(#ffd23a, #e0b400); border-top-color: #fff2a8; font-weight: 800; }
|
||||
|
||||
.bezel-knobs { display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 4px 6px; gap: 6px; }
|
||||
.bezel-knobs.left { width: 88px; } .bezel-knobs.right { width: 100px; }
|
||||
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
|
||||
.knob-lbl { color: #d2d7dc; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
|
||||
.knob-sub { color: #8b9197; font-size: 8.5px; font-weight: 600; letter-spacing: .3px; text-align: center; }
|
||||
.knob-extra { position: absolute; right: -10px; top: 6px; width: 20px; height: 16px; background: #1a1b1e; border: 1px solid #000; border-radius: 3px; color: #cfd6dc; font-size: 11px; text-align: center; line-height: 16px; }
|
||||
.knob.outer {
|
||||
width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;
|
||||
background: radial-gradient(circle at 35% 30%, #55585d, #2a2c2f 70%); box-shadow: 0 2px 5px #000, inset 0 1px 0 #6a6d72;
|
||||
}
|
||||
.knob-wrap.big .knob.outer { width: 58px; height: 58px; }
|
||||
.knob.inner { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #44474b, #1c1e20); box-shadow: inset 0 1px 0 #5a5d61; }
|
||||
.knob.joy .joy-cross { position: absolute; color: #6a6d72; font-size: 22px; font-weight: 700; pointer-events: none; }
|
||||
.knob.outer { cursor: pointer; border: none; padding: 0; }
|
||||
.knob.outer:active { box-shadow: 0 1px 2px #000, inset 0 2px 4px #000; }
|
||||
|
||||
/* concentric knob + its rotation arrows */
|
||||
.knob-cluster { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px; }
|
||||
.knob-arrow {
|
||||
position: absolute; width: 16px; height: 16px; padding: 0; line-height: 1;
|
||||
background: #1a1b1e; border: 1px solid #000; border-radius: 3px; color: #b9c0c6;
|
||||
font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.knob-arrow:hover { background: #2a2c2f; color: #fff; }
|
||||
.knob-arrow:active { background: #000; }
|
||||
.knob-arrow.left { left: -2px; } .knob-arrow.right { right: -2px; }
|
||||
.knob-arrow.top { top: -2px; } .knob-arrow.bottom { bottom: -2px; }
|
||||
|
||||
.pan-pad { display: grid; grid-template-columns: repeat(2, 14px); gap: 2px; margin-top: 3px; }
|
||||
.pan-pad button {
|
||||
width: 14px; height: 12px; padding: 0; background: #1a1b1e; border: 1px solid #000;
|
||||
border-radius: 2px; color: #b9c0c6; font-size: 7px; cursor: pointer;
|
||||
}
|
||||
.pan-pad button:active { background: #000; }
|
||||
|
||||
.bezel-btn {
|
||||
background: linear-gradient(#26282b, #16171a); border: 1px solid #000; border-top: 1px solid #3e4044;
|
||||
border-radius: 5px; color: #cfd6dc; font-size: 11px; font-weight: 700; text-align: center;
|
||||
padding: 6px 4px; min-width: 40px; line-height: 1.1; cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.bezel-btn:hover { background: linear-gradient(#303236, #1c1d20); border-top-color: #55585d; }
|
||||
.bezel-btn:active { background: #0d0e10; box-shadow: inset 0 1px 3px #000; }
|
||||
.bezel-btn.sm { font-size: 10px; padding: 5px 3px; min-width: 0; }
|
||||
.bezel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; }
|
||||
|
||||
/* autopilot mode controller (MFD left bezel) */
|
||||
.ap-controller { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; }
|
||||
.ap-key {
|
||||
background: linear-gradient(#26282b, #131416); border: 1px solid #000; border-top: 1px solid #3e4044;
|
||||
border-radius: 4px; color: #d6dbe0; font-size: 11px; font-weight: 700; letter-spacing: .2px;
|
||||
padding: 7px 2px; line-height: 1; font-family: 'Saira Semi Condensed', sans-serif;
|
||||
}
|
||||
.ap-key:active { transform: scale(0.95); }
|
||||
.ap-key.on { background: #0a8f3c; color: #fff; border-color: #0c0; box-shadow: 0 0 8px rgba(0,200,80,.6); }
|
||||
|
||||
/* G1000 MFD: top NAV/COM bar, engine strip (EIS) left, moving map right */
|
||||
.mfd-g1000 { display: flex; flex-direction: column; width: 100%; height: 100%; background: #000; }
|
||||
.mfd-topbar { width: 100%; height: auto; flex-shrink: 0; display: block; border-bottom: 1px solid #3a3a3a; }
|
||||
.mfd-body { flex: 1; display: flex; min-height: 0; }
|
||||
.eis-svg { width: 178px; flex-shrink: 0; height: 100%; background: #0a0a0a; border-right: 1px solid #222; }
|
||||
.mfd-map { flex: 1; position: relative; min-width: 0; }
|
||||
.leaflet-host.dark { background: #000; }
|
||||
/* G1000 chrome over the map */
|
||||
.map-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 650; }
|
||||
.map-rose { position: absolute; left: 50%; top: 50%; width: min(74%, 380px); height: min(74%, 380px); transform: translate(-50%, -50%); }
|
||||
.mc-tr { position: absolute; right: 6px; top: 6px; display: flex; gap: 6px; align-items: center;
|
||||
font: 600 12px/1 monospace; color: #fff; background: #000a; padding: 4px 6px; }
|
||||
.mc-tr span { color: #cfe3ff; }
|
||||
.mc-range { position: absolute; right: 6px; bottom: 36px; font: 700 14px/1 monospace; color: #0ff;
|
||||
background: #000; border: 1px solid #555; padding: 4px 8px; }
|
||||
.mc-mode { position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 3px;
|
||||
font: 600 12px/1 monospace; color: #0ff; background: #000a; padding: 4px 6px; }
|
||||
.mc-mode em { width: 8px; height: 8px; border: 1px solid #0ff; display: inline-block; }
|
||||
.mc-mode em.on { background: #0ff; }
|
||||
|
||||
/* Autopilot — GMC-710-style AFCS mode controller (app chrome look) */
|
||||
.afcs { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
|
||||
background: radial-gradient(120% 100% at 50% 0%, #1f2227, #0c0d0f); padding: 20px; font-family: var(--ui-font); }
|
||||
.afcs-unit { width: min(880px, 100%); background: linear-gradient(#202329, #15171b);
|
||||
border: 1px solid #34383f; border-radius: 16px; padding: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); display: flex; flex-direction: column; gap: 14px; }
|
||||
|
||||
.afcs-ann { display: flex; align-items: center; gap: 10px; background: #07080a; border: 1px solid #2a2f36;
|
||||
border-radius: 10px; padding: 10px 14px; font-family: 'Saira Semi Condensed', var(--ui-font); }
|
||||
.ann { color: #4a525b; font-size: 17px; font-weight: 700; letter-spacing: 1px; }
|
||||
.ann.on { color: #2ee06a; text-shadow: 0 0 10px rgba(46,224,106,.5); }
|
||||
.ann.mode { color: #2ee06a; text-shadow: 0 0 10px rgba(46,224,106,.5); font-size: 18px; }
|
||||
.ann-sep { width: 1px; height: 18px; background: #2a2f36; }
|
||||
.ann-gap { flex: 1; }
|
||||
.ann.val { color: #fff; font-size: 18px; } .ann.val i { color: #7d8893; font-style: normal; font-size: 11px; margin-left: 2px; }
|
||||
|
||||
.afcs-keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
|
||||
.apk { background: linear-gradient(#2b2f36, #1c2026); color: #cdd4db; border: 1px solid #3a3f47;
|
||||
border-radius: 9px; padding: 14px 4px; font-family: var(--ui-font); font-size: 14px; font-weight: 700;
|
||||
letter-spacing: .5px; cursor: pointer; transition: all .12s; }
|
||||
.apk:hover { border-color: #4a525b; }
|
||||
.apk:active { transform: translateY(1px); }
|
||||
.apk.on { background: linear-gradient(#1f8f47, #146b34); color: #fff; border-color: #2ee06a;
|
||||
box-shadow: 0 0 16px rgba(46,224,106,.45), inset 0 1px 0 rgba(255,255,255,.15); }
|
||||
.apk.sm { padding: 9px 12px; font-size: 12px; }
|
||||
|
||||
.afcs-sels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||||
.apsel { background: #07080a; border: 1px solid #2a2f36; border-radius: 12px; padding: 10px; text-align: center; }
|
||||
.apsel-lbl { color: #2ee06a; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
|
||||
.apsel-val { font-family: 'Saira Condensed', monospace; font-size: 34px; font-weight: 700; color: #fff; line-height: 1.1; margin: 2px 0 6px; }
|
||||
.apsel-val span { font-size: 14px; color: #7d8893; margin-left: 3px; }
|
||||
.apsel-knob { display: flex; align-items: center; justify-content: center; gap: 10px; }
|
||||
.apsel-knob button { width: 46px; height: 40px; background: linear-gradient(#2b2f36, #1c2026); color: #cdd4db;
|
||||
border: 1px solid #3a3f47; border-radius: 8px; font-size: 20px; cursor: pointer; }
|
||||
.apsel-knob button:active { background: #146b34; color: #fff; }
|
||||
.knobdot { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3f47, #15171b); border: 1px solid #444; }
|
||||
|
||||
.afcs-pitch { display: flex; align-items: center; gap: 10px; }
|
||||
.afcs-pitch span { color: #7d8893; font-size: 11px; letter-spacing: 1.5px; font-weight: 600; }
|
||||
|
||||
/* FMS as an X-Plane-style CDU/FMC */
|
||||
.cdu { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
|
||||
background: radial-gradient(120% 100% at 50% 0%, #1c1f24, #0b0c0e); padding: 16px; font-family: var(--ui-font); }
|
||||
.cdu-unit { width: min(560px, 100%); background: linear-gradient(#23262c, #15171b); border: 1px solid #34383f;
|
||||
border-radius: 18px; padding: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 12px; }
|
||||
.cdu-screenwrap { display: flex; align-items: stretch; gap: 8px; }
|
||||
.cdu-lsks { display: flex; flex-direction: column; justify-content: space-around; padding: 38px 0 30px; gap: 6px; }
|
||||
.cdu-lsk { width: 18px; height: 26px; border-radius: 4px; background: linear-gradient(#3a3f47, #23262c); border: 1px solid #4a525b; cursor: pointer; }
|
||||
.cdu-lsk:active { background: #146b34; }
|
||||
.cdu-screen { flex: 1; background: #04140a; border: 1px solid #0b3; border-radius: 8px; padding: 10px 12px;
|
||||
font-family: 'Saira Semi Condensed', monospace; color: #34e06a; min-height: 240px;
|
||||
box-shadow: inset 0 0 30px rgba(0,80,30,.4); display: flex; flex-direction: column; }
|
||||
.cdu-hdr { display: flex; justify-content: space-between; color: #9fffc0; font-size: 13px; letter-spacing: 1px; border-bottom: 1px solid #084d24; padding-bottom: 4px; }
|
||||
.cdu-cols { display: grid; grid-template-columns: 1fr 60px 60px; color: #1f9d52; font-size: 10px; margin-top: 4px; }
|
||||
.cdu-row { display: grid; grid-template-columns: 1fr 60px 60px; align-items: baseline; font-size: 17px; padding: 3px 0; border-bottom: 1px solid #06250f; }
|
||||
.cdu-row.act { background: rgba(255,32,255,.12); }
|
||||
.cdu-row.act .cdu-wpt, .cdu-row.act .cdu-dtk, .cdu-row.act .cdu-dist { color: #ff5bff; }
|
||||
.cdu-wpt { color: #fff; font-weight: 600; } .cdu-wpt i { color: #1f9d52; font-style: normal; font-size: 11px; margin-left: 7px; }
|
||||
.cdu-dtk, .cdu-dist { color: #34e06a; text-align: right; }
|
||||
.cdu-add { color: #1f9d52; font-size: 14px; } .cdu-empty { color: #084d24; }
|
||||
.cdu-scratch { margin-top: auto; border-top: 1px solid #084d24; padding-top: 6px; display: flex; justify-content: space-between; min-height: 22px; }
|
||||
.cdu-sp { color: #fff; font-size: 16px; letter-spacing: 2px; background: #06250f; padding: 1px 8px; border-radius: 3px; min-width: 90px; }
|
||||
.cdu-msg { color: #ffd24a; font-size: 13px; } .cdu-msg.ok { color: #34e06a; }
|
||||
|
||||
.cdu-fn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
|
||||
.cdu-pad { display: flex; flex-direction: column; gap: 7px; }
|
||||
.cdu-padrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
|
||||
.cdu-padrow:nth-child(n+5) { grid-template-columns: repeat(5, 1fr); max-width: 72%; margin: 0 auto; width: 100%; }
|
||||
.cdu-k { background: linear-gradient(#2b2f36, #1c2026); color: #dfe5ec; border: 1px solid #3a3f47; border-radius: 8px;
|
||||
padding: 11px 4px; font-family: var(--ui-font); font-size: 14px; font-weight: 600; cursor: pointer; }
|
||||
.cdu-k:hover { border-color: #4a525b; } .cdu-k:active { transform: translateY(1px); background: #146b34; color: #fff; }
|
||||
.cdu-k.fn { font-size: 12px; letter-spacing: .5px; color: #9fb0bd; }
|
||||
.cdu-k.fn.arm { background: #7d5a10; color: #fff; border-color: #ffd24a; }
|
||||
.cdu-k.fn.exec { background: linear-gradient(#1f8f47, #146b34); color: #fff; border-color: #2ee06a; }
|
||||
|
||||
/* MFD */
|
||||
.mfd { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; }
|
||||
.rose { width: min(58vh, 440px); height: auto; }
|
||||
.mfd-data { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.mfd-cell {
|
||||
background: var(--panel); border: 1px solid #262626; border-radius: 12px;
|
||||
padding: 14px 18px; min-width: 150px; display: flex; flex-direction: column; gap: 4px;
|
||||
}
|
||||
.mfd-cell .k { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
|
||||
.mfd-cell .v { font-size: 30px; font-weight: 800; font-family: monospace; }
|
||||
|
||||
/* ---- Map ---- */
|
||||
.mapwrap { position: relative; width: 100%; height: 100%; }
|
||||
.leaflet-host { position: absolute; inset: 0; background: #1a1a1a; }
|
||||
.leaflet-container { font-family: monospace; }
|
||||
.ac-divicon svg { transition: transform .2s linear; transform-origin: 50% 50%; filter: drop-shadow(0 0 3px #000); }
|
||||
.wp-label { background: #000a; border: none; color: #ff20ff; font-weight: 700; font-family: monospace; }
|
||||
.map-hud {
|
||||
position: absolute; top: 10px; left: 10px; z-index: 500;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
}
|
||||
.hud-cell {
|
||||
background: #000c; border: 1px solid #333; border-radius: 8px; padding: 5px 10px;
|
||||
display: flex; gap: 10px; align-items: baseline; min-width: 150px;
|
||||
}
|
||||
.hud-cell span { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
|
||||
.hud-cell b { font-family: monospace; font-size: 18px; margin-left: auto; }
|
||||
.follow-btn {
|
||||
position: absolute; right: 10px; top: 10px; z-index: 500;
|
||||
background: #000c; color: #888; border: 1px solid #333; border-radius: 8px;
|
||||
padding: 8px 14px; font-weight: 700; font-family: monospace;
|
||||
}
|
||||
.follow-btn.on { color: var(--accent); border-color: var(--accent); }
|
||||
.map-hint {
|
||||
position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 500;
|
||||
background: #000a; color: #ccc; padding: 5px 12px; border-radius: 8px; font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---- FMS (CDU style) ---- */
|
||||
.fms {
|
||||
width: min(720px, 100%); height: 100%; display: flex; flex-direction: column;
|
||||
background: #04140a; border: 1px solid #0a3; border-radius: 12px; overflow: hidden;
|
||||
font-family: monospace; color: #29f06a;
|
||||
}
|
||||
.fms-head {
|
||||
display: flex; justify-content: space-between; padding: 12px 16px;
|
||||
background: #062; color: #d6ffe6; font-weight: 800; letter-spacing: 1px; font-size: 15px;
|
||||
}
|
||||
.fms-total { color: #bff8d4; }
|
||||
.fms-rows { flex: 1; overflow-y: auto; padding: 6px 0; }
|
||||
.fms-row {
|
||||
display: grid; grid-template-columns: 34px 1fr 64px 64px 40px; align-items: center;
|
||||
gap: 8px; padding: 10px 16px; border-bottom: 1px solid #0a2a18; font-size: 17px;
|
||||
}
|
||||
.fms-colhead { color: #0a6; font-size: 12px; letter-spacing: 1px; border-bottom: 1px solid #0a3; }
|
||||
.fms-empty { padding: 24px 16px; color: #0a6; text-align: center; }
|
||||
.fms-row .wid { font-weight: 800; color: #d6ffe6; }
|
||||
.fms-row .wtype { font-style: normal; color: #0a8; font-size: 11px; margin-left: 8px; }
|
||||
.fms-row .dtk, .fms-row .dist { color: #29f06a; }
|
||||
.fms-row.orig .dist { color: #ffae42; }
|
||||
.fms-row { cursor: pointer; }
|
||||
.fms-row.active { background: rgba(255, 32, 255, 0.12); border-left: 3px solid #ff20ff; }
|
||||
.fms-row.active .wid { color: #ff7bff; }
|
||||
.fms-row.active .dtk, .fms-row.active .dist { color: #ff20ff; }
|
||||
.fms-row .del { background: none; border: none; color: #c44; font-size: 18px; cursor: pointer; }
|
||||
.fms-scratch { background: #021008; border-top: 2px solid #0a3; padding: 10px; }
|
||||
.fms-hits { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
|
||||
.fms-hits button {
|
||||
text-align: left; background: #08240f; border: 1px solid #0a3; border-radius: 6px;
|
||||
padding: 8px 12px; color: #29f06a; font-family: monospace;
|
||||
}
|
||||
.fms-hits button b { color: #d6ffe6; } .fms-hits button i { color: #0a8; font-style: normal; margin: 0 8px; }
|
||||
.fms-hits button span { color: #0a7; font-size: 12px; }
|
||||
.fms-input { display: flex; gap: 8px; }
|
||||
.fms-input input {
|
||||
flex: 1; background: #000; border: 1px solid #0a5; border-radius: 8px; color: #ffae42;
|
||||
font-family: monospace; font-size: 18px; padding: 12px; letter-spacing: 1px;
|
||||
}
|
||||
.fbtn {
|
||||
background: #08240f; color: #29f06a; border: 1px solid #0a5; border-radius: 8px;
|
||||
padding: 12px 16px; font-weight: 800; font-family: monospace; letter-spacing: 1px;
|
||||
}
|
||||
.fbtn.add { background: #0a5; color: #021008; }
|
||||
.fbtn.export { background: #ffae42; color: #2a1500; border-color: #ffae42; flex: 1; }
|
||||
.fbtn:disabled { opacity: .4; }
|
||||
.fms-actions { display: flex; gap: 8px; margin-top: 8px; }
|
||||
.fms-export { margin-top: 8px; font-size: 13px; padding: 8px; border-radius: 6px; }
|
||||
.fms-export.ok { background: #06330f; color: #9f9; }
|
||||
.fms-export.err { background: #330606; color: #f99; }
|
||||
Reference in New Issue
Block a user