karim
6738e6085b
- PFD VNAV: magenta flight-plan target altitude on the alt scale (S.110), V DEV deviation scale + chevron (left, shown in VNAV when not on an ILS), VS TGT chevron on the VSI (S.113) - GPS phase annunciation is now dynamic: APR (approach leg) / TERM (<30 nm to destination) / ENR, instead of a fixed label - flight-plan ALT can be toggled designated(blue) <-> reference(white) by clicking the cell (S.106); only designated altitudes drive the VNAV profile - setPlan now preserves the dsgn/appr waypoint flags across the shared plan - AFCS vertical mode labelled VPTH (manual) instead of VNV Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
746 lines
54 KiB
CSS
746 lines
54 KiB
CSS
: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;
|
||
/* monochrome chrome palette (191919 / 0f0f0f / f0f0f0) — no colour accent */
|
||
--c-bg: #0f0f0f;
|
||
--c-surface: #191919;
|
||
--c-fill: #232323;
|
||
--c-line: #3a3a3a;
|
||
--c-line-soft: #2a2a2a;
|
||
--c-txt: #f0f0f0;
|
||
--c-txt2: #e0e0e0;
|
||
--c-mut: #8a8a8a;
|
||
--c-on: #f0f0f0; /* active/primary highlight (inverted) */
|
||
--c-green: #30d158; /* kept only for the green LCD/display look */
|
||
--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-mut); 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(255,255,255,.09); color: var(--c-txt); border-color: #444; }
|
||
.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-ap { display: flex; justify-content: center; margin-top: clamp(8px, 1.5vw, 18px); }
|
||
/* KAP 140 autopilot (steam-gauge C172) */
|
||
.kap140 { display: flex; align-items: center; gap: 12px; background: linear-gradient(#2a2c30, #161719);
|
||
border: 1px solid #0a0a0a; border-top: 1px solid #4a4d52; border-radius: 10px; padding: 11px 14px; font-family: var(--ui-font);
|
||
box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
|
||
.kap-brand { color: #8893a0; font-size: 9px; font-weight: 700; letter-spacing: 1px; writing-mode: vertical-rl; transform: rotate(180deg); }
|
||
.kap-lcd { background: #06160b; border: 1px solid #0a4d24; border-radius: 4px; padding: 7px 11px; min-width: 168px;
|
||
box-shadow: inset 0 0 16px rgba(0,90,35,.5); font-family: 'Saira Semi Condensed', monospace; }
|
||
.kap-l1 { display: flex; gap: 12px; align-items: center; }
|
||
.kap-l1 .an { color: #0c3a1e; font-weight: 700; font-size: 14px; letter-spacing: 1px; }
|
||
.kap-l1 .an.on { color: #3bff6e; text-shadow: 0 0 8px rgba(59,255,110,.5); }
|
||
.kap-l2 { display: flex; gap: 14px; align-items: baseline; margin-top: 3px; color: #3bff6e; }
|
||
.kap-l2 .big { font-size: 22px; font-weight: 700; }
|
||
.kap-l2 .u { font-size: 10px; color: #1f9d52; margin-left: 2px; }
|
||
.kap-l2 .vs { font-size: 14px; }
|
||
.kap-keys { display: flex; gap: 7px; align-items: stretch; }
|
||
/* physical, G1000-style buttons */
|
||
.kap-btn { background: linear-gradient(#3b3e44, #23262b); color: #eef2f6; border: 1px solid #08090b; border-top: 1px solid #5c6168;
|
||
border-radius: 7px; padding: 13px 11px; font-family: var(--ui-font); font-size: 12px; font-weight: 700; letter-spacing: .3px; cursor: pointer; min-width: 44px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10); }
|
||
.kap-btn:hover { background: linear-gradient(#454951, #2a2d33); }
|
||
.kap-btn:active { transform: translateY(1px); background: linear-gradient(#1a8f44, #136b32); color: #fff; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
|
||
.kap-btn.sm { padding: 6px 9px; font-size: 10px; min-width: 0; }
|
||
.kap-updn { display: flex; flex-direction: column; gap: 4px; }
|
||
/* clickable rotary: top half = up, bottom half = down */
|
||
.kap-knob { display: flex; flex-direction: column; align-items: center; gap: 3px; }
|
||
.kap-dial { position: relative; width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
|
||
background: radial-gradient(circle at 38% 30%, #4e535b, #14161a 72%); border: 1px solid #08090b;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 0; }
|
||
.kap-dial .kdir { color: #aeb6bf; font-size: 11px; line-height: 1; user-select: none; }
|
||
.kap-dial:hover .kdir { color: #fff; }
|
||
.kap-knoblbl { color: #8893a0; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
|
||
.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 */
|
||
/* G1000 windows: flat opaque rectangles embedded in the display — no shadow,
|
||
no rounded corners, thin light border. They look part of the screen. */
|
||
.nrst-window {
|
||
position: absolute; z-index: 4; right: var(--gwin-right, 4%); bottom: var(--gwin-bottom, 6%); top: auto;
|
||
width: var(--gwin-maxw, 290px); max-height: var(--gwin-maxh, 44%);
|
||
display: flex; flex-direction: column;
|
||
background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||
color: #fff; font-family: 'Roboto Mono', monospace;
|
||
}
|
||
.nrst-list { flex: 1; }
|
||
/* NEAREST AIRPORTS: two-line entries like the real GDU (ident/brg/dis/approach
|
||
then com-type/freq/runway-length) */
|
||
.apt-entry { padding: 4px 8px 5px; border-bottom: 1px solid #161b20; }
|
||
.apt-l1 { display: grid; grid-template-columns: 1fr auto auto auto; align-items: baseline; column-gap: 8px; }
|
||
.apt-l2 { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; column-gap: 6px; margin-top: 1px; }
|
||
.apt-id { color: #36d2ff; font-size: 16px; font-weight: bold; justify-self: start; }
|
||
.apt-id.cur { background: #19b8e6; color: #042230; padding: 0 4px; border-radius: 1px; }
|
||
.apt-brg, .apt-dis { color: #fff; font-size: 14px; text-align: right; }
|
||
.apt-dis u { color: #6f808d; font-size: 9px; text-decoration: none; margin-left: 1px; }
|
||
.apt-app { color: #fff; font-size: 12px; min-width: 30px; text-align: right; }
|
||
.apt-app.ils { color: #16d24a; }
|
||
.apt-comlbl { color: #6f808d; font-size: 11px; }
|
||
.apt-com { color: #fff; font-size: 13px; }
|
||
.apt-rwlbl { color: #6f808d; font-size: 11px; }
|
||
.apt-rw { color: #fff; font-size: 13px; text-align: right; }
|
||
.nrst-head { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: #11161b; border-bottom: 1px solid #2c343c; }
|
||
.nrst-title { color: #36d2ff; font-size: 13px; font-weight: bold; letter-spacing: 2px; }
|
||
.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: #19b8e6; color: #042230; border-color: #19b8e6; 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; }
|
||
/* DME + ALERTS popups (PFD DME / CAUTION softkeys) — left side, G1000 style */
|
||
.pfd-pop {
|
||
position: absolute; z-index: 4; right: var(--gwin-right, 4%); bottom: var(--gwin-bottom, 6%); left: auto; top: auto;
|
||
width: var(--gwin-maxw, 290px); max-height: var(--gwin-maxh, 44%);
|
||
background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||
color: #fff; font-family: 'Roboto Mono', monospace;
|
||
}
|
||
.pfd-pop.alerts { top: auto; }
|
||
.pop-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 8px 12px; font-size: 15px; }
|
||
.pop-grid b { color: #6f808d; font-weight: normal; }
|
||
.pop-grid span { color: #fff; text-align: right; }
|
||
.pop-tabs { display: flex; gap: 3px; padding: 6px 8px; border-top: 1px solid #2c343c; }
|
||
.pop-tabs button { flex: 1; background: #1c242c; color: #9fb0bd; border: 1px solid #2c343c; border-radius: 2px; font: inherit; font-size: 11px; padding: 3px 0; cursor: pointer; }
|
||
.pop-tabs button.on { background: #0c9; color: #04201c; border-color: #0c9; font-weight: bold; }
|
||
/* airway name labels on the MFD map */
|
||
.awy-divicon { background: none; border: none; }
|
||
.awy-lbl { color: #8fd0f0; font: 10px 'Roboto Mono', monospace; background: rgba(0,0,0,0.45); padding: 0 2px; border-radius: 2px; white-space: nowrap; }
|
||
/* altitude alerter: flash the selected-altitude box (approaching / deviation) */
|
||
.alt-alert { animation: altflash 1s steps(1, end) infinite; }
|
||
@keyframes altflash { 50% { opacity: 0.25; } }
|
||
.alerts-list { padding: 6px 0; max-height: 40vh; overflow-y: auto; }
|
||
.alert-row { padding: 4px 12px; font-size: 14px; border-bottom: 1px solid #161b20; }
|
||
.alert-row.warn { color: #ff5a4d; font-weight: bold; }
|
||
.alert-row.cau { color: #ffce46; }
|
||
.alert-none { padding: 10px 12px; color: #6f808d; font-size: 13px; }
|
||
/* full-area NRST (MFD page) */
|
||
.nrst-window.full { position: absolute; inset: 0; width: auto; max-width: none; border: none; border-radius: 0;
|
||
background: #0a0d10; box-shadow: none; z-index: 660; display: flex; flex-direction: column; }
|
||
.nrst-window.full .nrst-list { max-height: none; flex: 1; }
|
||
/* FLIGHT PLAN page (MFD full / PFD window) */
|
||
.fpl.full { position: absolute; inset: 0; z-index: 660; background: #0a0d10; display: flex; flex-direction: column; }
|
||
.fpl.win { width: 320px; max-height: 44%; background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||
display: flex; flex-direction: column; font-size: 13px; }
|
||
.fpl-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #0a0f14; border-bottom: 1px solid #2c343c;
|
||
color: #36d2ff; font-family: var(--ui-font); font-weight: 700; font-size: 13px; letter-spacing: 2px; }
|
||
.fpl-tot { margin-left: auto; color: #fff; font-size: 12px; font-family: 'Saira Condensed', monospace; }
|
||
.fpl-x { background: none; border: none; color: #9fb0bd; cursor: pointer; font-size: 15px; padding: 0 2px; }
|
||
.fpl-cols, .fpl-row { display: grid; grid-template-columns: 1.5fr .8fr .8fr .8fr .9fr 30px; align-items: center; gap: 6px; padding: 4px 12px; }
|
||
.fpl-cols { color: #6f808d; font-size: 10px; border-bottom: 1px solid #222; letter-spacing: .5px; }
|
||
.fpl-cols span:nth-child(n+2) { text-align: right; }
|
||
.fpl-rows { flex: 1; overflow-y: auto; }
|
||
.fpl-row { font-size: 16px; border-bottom: 1px solid #161b20; cursor: pointer; font-family: 'Saira Condensed', monospace; }
|
||
.fpl-row:hover { background: #11161b; }
|
||
.fpl-row.act { background: rgba(255,32,255,.12); }
|
||
.fpl-row.sel { box-shadow: inset 0 0 0 1px #0ff; }
|
||
.r-wpt { color: #0ff; font-weight: 700; } .r-wpt i { color: #0a8; font-style: normal; font-size: 10px; margin-left: 6px; }
|
||
.r-wpt b { font-weight: 700; } .r-wpt b.cur { background: #19b8e6; color: #042230; padding: 0 4px; border-radius: 1px; }
|
||
.r-dtk, .r-dis, .r-cum { color: #e7edf2; text-align: right; }
|
||
.r-alt { color: #6f808d; text-align: right; }
|
||
.r-alt { cursor: pointer; }
|
||
.r-alt.dsgn { color: #4fa8ff; } /* designated (VNAV) altitude = blue, per manual S.105 */
|
||
.r-alt.refr { color: #e7edf2; } /* reference altitude = white (not in the VNAV profile) */
|
||
/* CURRENT VNV PROFILE panel (MFD flight-plan page) */
|
||
.fpl-vnav { border-top: 1px solid #2c343c; padding: 6px 12px 8px; font-family: 'Roboto Mono', monospace; }
|
||
.fpl-vnav-h { color: #36d2ff; font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; }
|
||
.fpl-vnav-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 10px; align-items: baseline; }
|
||
.fpl-vnav-grid b { color: #6f808d; font-weight: normal; font-size: 11px; }
|
||
.fpl-vnav-grid span { color: #fff; font-size: 14px; }
|
||
.fpl-vnav-grid span u { color: #6f808d; font-size: 9px; text-decoration: none; margin-left: 1px; }
|
||
.fpl-vnav-grid .vwpt { color: #4fa8ff; }
|
||
.fpl-vnav-none { color: #6f808d; font-size: 12px; }
|
||
/* ORIG / DEST subtitle (PFD window) */
|
||
.fpl-od { color: #36d2ff; text-align: center; font-family: 'Roboto Mono', monospace; font-size: 14px; padding: 3px 0; border-bottom: 1px solid #1c242c; letter-spacing: 1px; }
|
||
/* compact window: DTK/DIS only (drop CUM/ALT), no editor — like the real FPL window */
|
||
.fpl.win .fpl-cols span:nth-child(4), .fpl.win .fpl-cols span:nth-child(5),
|
||
.fpl.win .r-cum, .fpl.win .r-alt, .fpl.win .r-del, .fpl.win .fpl-entry { display: none; }
|
||
.fpl.win .fpl-cols, .fpl.win .fpl-row { grid-template-columns: 1.4fr .8fr 1fr; }
|
||
.fpl.win .fpl-row { font-size: 15px; }
|
||
.fpl-row.act .r-wpt, .fpl-row.act .r-dtk, .fpl-row.act .r-dis, .fpl-row.act .r-cum, .fpl-row.act .r-alt { color: #ff5bff; }
|
||
.r-del { background: none; border: none; color: #c44; font-size: 15px; cursor: pointer; }
|
||
.fpl-empty { color: #6f808d; text-align: center; padding: 18px; font-size: 13px; font-family: var(--ui-font); }
|
||
.fpl-entry { border-top: 1px solid #2c343c; padding: 10px 12px; background: #0c1116; font-family: var(--ui-font); }
|
||
.fpl-hits { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
|
||
.fpl-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; }
|
||
.fpl-hits b { color: #0ff; } .fpl-hits i { color: #0a8; font-style: normal; font-size: 11px; } .fpl-hits span { color: #6f808d; font-size: 11px; margin-left: auto; }
|
||
.fpl-inrow { display: flex; gap: 8px; }
|
||
.fpl-inrow input { flex: 1; background: #05080b; border: 1px solid #2c343c; color: #0ff; font: inherit; font-size: 15px; letter-spacing: 1px; padding: 9px 10px; text-transform: uppercase; }
|
||
.fpl-actions { display: flex; gap: 8px; margin-top: 8px; }
|
||
.fpl-btn { flex: 1; background: #232323; color: #e0e0e0; border: 1px solid #3a3a3a; border-radius: 8px; padding: 9px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
|
||
.fpl-btn.add { background: #f0f0f0; color: #0f0f0f; border-color: transparent; flex: 0 0 auto; padding: 9px 16px; }
|
||
.fpl-btn:hover:not(:disabled) { filter: brightness(1.15); } .fpl-btn:disabled { opacity: .4; cursor: default; }
|
||
.fpl-msg { margin-top: 6px; font-size: 12px; } .fpl-msg.ok { color: #39d3c0; } .fpl-msg.err { color: #ffae42; }
|
||
/* saved-plans load picker */
|
||
.fpl-load { position: absolute; inset: 0; z-index: 10; background: #000a; display: flex; align-items: center; justify-content: center; }
|
||
.fpl-load-box { width: min(380px, 90%); max-height: 80%; background: #0c1116; border: 1px solid #2c343c; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 12px 36px rgba(0,0,0,.6); }
|
||
.fpl-load-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #11161b; border-bottom: 1px solid #2c343c; color: #39d3c0; font-family: var(--ui-font); font-weight: 700; font-size: 13px; }
|
||
.fpl-load-head button { background: none; border: none; color: #9fb0bd; cursor: pointer; font-size: 14px; }
|
||
.fpl-load-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
|
||
.fpl-load-list button { background: #141a20; border: 1px solid #222b33; color: #0ff; font-family: 'Saira Condensed', monospace; font-size: 16px; font-weight: 700; text-align: left; padding: 9px 12px; border-radius: 6px; cursor: pointer; }
|
||
.fpl-load-list button:hover { background: #1c252e; }
|
||
.fpl-load-list button i { color: #6f808d; font-style: normal; font-size: 11px; margin-left: 6px; }
|
||
/* page-group indicator (bottom-right), like the real G1000; tap = next page */
|
||
.mfd-pageind { position: absolute; right: 6px; bottom: 6px; z-index: 700; display: flex; align-items: center; gap: 6px;
|
||
background: #000a; border: 1px solid #2c343c; border-radius: 4px; padding: 5px 8px; cursor: pointer;
|
||
font: 700 12px/1 monospace; color: #0ff; }
|
||
.mfd-pageind em { width: 8px; height: 8px; border: 1px solid #0ff; display: inline-block; }
|
||
.mfd-pageind em.on { background: #0ff; }
|
||
.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; right: var(--gwin-right, 4%); bottom: var(--gwin-bottom, 6%);
|
||
width: var(--gwin-maxw, 290px); max-height: var(--gwin-maxh, 44%); overflow-y: auto;
|
||
background: #05080b; border: 1px solid #7e8a94; border-radius: 0;
|
||
color: #fff; font-family: 'Roboto Mono', monospace;
|
||
}
|
||
.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; }
|
||
/* G1000 side-window dialogs (PROC / Direct-To / FPL): compact panels in the
|
||
display's lower-right, no screen dimming — like the real unit. */
|
||
.gwin-backdrop { position: absolute; inset: 0; z-index: 20; background: transparent; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 var(--gwin-right, 4%) var(--gwin-bottom, 6%) 0; }
|
||
.dlg { background: #05080b; border: 1px solid #7e8a94; border-radius: 0; min-width: 0; color: #fff; font-family: 'Roboto Mono', monospace; }
|
||
/* G1000 side-windows fill the lower-right zone (clear of HSI + baro box) */
|
||
.gwin-backdrop .dlg, .fpl.win { width: var(--gwin-maxw, 290px); max-width: var(--gwin-maxw, 290px); max-height: var(--gwin-maxh, 44%); }
|
||
.dlg-head { background: #0a0f14; padding: 6px 12px; border-bottom: 1px solid #2c343c; color: #36d2ff; font-weight: bold; letter-spacing: 2px; text-align: center; border-radius: 2px 2px 0 0; }
|
||
.dto-arrow { color: #e040fb; margin-right: 8px; }
|
||
.dto-body { padding: 10px 12px 12px; }
|
||
.dto-ident { display: block; width: 100%; box-sizing: border-box; background: none; border: none; border-bottom: 1px solid #2c343c;
|
||
color: #36d2ff; font: inherit; font-size: 24px; font-weight: bold; letter-spacing: 3px; padding: 2px 2px 4px; text-transform: uppercase; outline: none; }
|
||
.dto-ident::placeholder { color: #2c4a57; }
|
||
.dto-name { color: #cdd6dd; font-size: 13px; min-height: 17px; padding: 3px 2px 0; }
|
||
.dto-hits { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
|
||
.dto-hits button { display: flex; align-items: baseline; gap: 10px; background: #0c1116; border: 1px solid #1c242c; color: #cfd6dd; font: inherit; padding: 4px 8px; cursor: pointer; text-align: left; }
|
||
.dto-hits button:hover { background: #13202a; border-color: #36d2ff; }
|
||
.dto-hits button b { color: #36d2ff; } .dto-hits button span { color: #6f808d; font-size: 11px; margin-left: auto; }
|
||
.dto-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 7px 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #222; }
|
||
.dto-grid b { color: #6f808d; font-weight: normal; font-size: 12px; }
|
||
.dto-grid span { color: #fff; font-size: 15px; }
|
||
.dto-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
|
||
.dto-act { background: #0c1116; border: 1px solid #7e8a94; color: #36d2ff; font: inherit; font-weight: bold; letter-spacing: 1px; font-size: 14px; padding: 5px 14px; cursor: pointer; }
|
||
.dto-act:hover:not(:disabled) { background: #19b8e6; color: #042230; border-color: #19b8e6; }
|
||
.dto-act:disabled { opacity: .4; cursor: default; }
|
||
.dlg-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #2c343c; }
|
||
.dlg-actions .fbtn { flex: 1; }
|
||
/* PROC dialog */
|
||
.dlg.proc, .dlg.proc.menu { width: var(--gwin-maxw, 290px); max-width: var(--gwin-maxw, 290px); display: flex; flex-direction: column; }
|
||
.dlg.proc .proc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
|
||
.proc-menu { display: flex; flex-direction: column; padding: 4px 0; }
|
||
.proc-menu-i { background: none; border: none; border-bottom: 1px solid #11161b; color: #d7e2ea; font: inherit; font-family: 'Roboto Mono', monospace; font-size: 13px; text-align: left; padding: 6px 12px; cursor: pointer; letter-spacing: .5px; }
|
||
.proc-menu-i:hover { background: #11161b; }
|
||
.proc-menu-i.sel { background: #19b8e6; color: #042230; font-weight: bold; }
|
||
.proc-back { background: #1c242c; border: 1px solid #2c343c; color: #36d2ff; font: inherit; font-size: 14px; line-height: 1; padding: 4px 9px; cursor: pointer; border-radius: 2px; }
|
||
.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: #19b8e6; color: #042230; font-weight: bold; border-color: #19b8e6; }
|
||
.proc-cols { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 5px; flex: 1; min-height: 0; }
|
||
.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: #19b8e6; color: #042230; 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: 12px;
|
||
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; overflow: hidden; position: relative;
|
||
display: flex; flex-direction: column; min-height: 0;
|
||
}
|
||
.screen-content { flex: 1; min-height: 0; width: 100%; position: relative; }
|
||
.screen-content > * { width: 100%; height: 100%; }
|
||
/* on-screen softkey label row (lowest line of the display) */
|
||
.sk-labels { flex: 0 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
|
||
padding: 3px 2px; background: #000; border-top: 1px solid #1c1c1c; }
|
||
.skl { display: flex; align-items: center; justify-content: center; height: 20px; border-radius: 3px;
|
||
color: #e8edf2; font-size: 11px; font-weight: 700; letter-spacing: .3px; font-family: 'Saira Semi Condensed', sans-serif; }
|
||
.skl.empty { color: transparent; }
|
||
.skl.on { background: #e8edf2; color: #0a0c0e; }
|
||
.skl.caution { background: linear-gradient(#ffd23a, #e0b400); color: #1a1b1e; }
|
||
.softkeys { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; padding: 4px 2px 1px; }
|
||
.softkey {
|
||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||
background: linear-gradient(#202224, #131416); border: 1px solid #000; border-top: 1px solid #45474b;
|
||
border-radius: 3px; color: #cfd6dc; font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
|
||
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; padding: 12px 6px; gap: 14px; flex: 0 0 104px; width: 104px; }
|
||
/* NAV/HDG (+ AP block on MFD) group at the top, ALT pinned to the bottom */
|
||
.bezel-knobs.left { justify-content: flex-start; }
|
||
.bezel-knobs.left > .knob-wrap:last-child { margin-top: auto; }
|
||
/* COM at top … FMS at bottom, evenly spread */
|
||
.bezel-knobs.right { justify-content: space-between; }
|
||
.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-swap { position: absolute; right: 2px; top: 0; width: 26px; height: 20px; background: linear-gradient(#2a2c2f, #16171a); border: 1px solid #000; border-top: 1px solid #45474b; border-radius: 4px; color: #0ff; font-size: 13px; cursor: pointer; padding: 0; line-height: 1; }
|
||
.knob-swap:active { background: #000; }
|
||
.knob-emerg { position: absolute; left: 2px; top: 2px; color: #c33; font-size: 8px; font-weight: 700; letter-spacing: .3px; }
|
||
.knob.outer {
|
||
width: 60px; height: 60px; 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: 68px; height: 68px; }
|
||
.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; }
|
||
/* RANGE knob: white surround ring + zoom −/+ and curved arrows (like the GDU) */
|
||
.knob.joy { overflow: visible; }
|
||
.rng-ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #d2d7dc; pointer-events: none; }
|
||
.rng-sign { position: absolute; top: 50%; transform: translateY(-50%); color: #d2d7dc; font-size: 17px; font-weight: 700; pointer-events: none; line-height: 1; }
|
||
.rng-sign.m { left: -23px; } .rng-sign.p { right: -23px; }
|
||
.rng-arc { position: absolute; top: -14px; color: #d2d7dc; font-size: 15px; pointer-events: none; }
|
||
.rng-arc.l { left: -10px; } .rng-arc.r { right: -10px; }
|
||
.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; }
|
||
.knob-cluster.zones { padding: 5px; }
|
||
/* settings panel */
|
||
.set-lbl { color: var(--c-mut); font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-bottom: 8px; font-family: var(--ui-font); }
|
||
.set-opt { display: flex; gap: 8px; }
|
||
.set-opt .fbtn { flex: 1; }
|
||
.set-hint { color: var(--c-mut); font-size: 11px; margin-top: 10px; line-height: 1.45; font-family: var(--ui-font); }
|
||
/* radio tuner — KAP-140 green LCD + macOS-dark launcher chrome */
|
||
.rtuner { width: min(400px, 94vw); background: linear-gradient(#23262c, #15171b); border: 1px solid #0a0a0a;
|
||
border-top: 1px solid #4a4d52; border-radius: 16px; padding: 16px; font-family: var(--ui-font);
|
||
box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
|
||
.rt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||
.rt-title { color: var(--c-txt); font-size: 18px; font-weight: 700; letter-spacing: .5px; }
|
||
.rt-kind { color: #cfd6dd; background: #0f0f0f; border: 1px solid #3a3a3a; font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; }
|
||
/* green LCD with both frequencies */
|
||
.rt-lcd { display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
||
background: #06160b; border: 1px solid #0a4d24; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
|
||
box-shadow: inset 0 0 22px rgba(0,90,35,.5); }
|
||
.rt-f { display: flex; flex-direction: column; gap: 3px; }
|
||
.rt-f.right { align-items: flex-end; }
|
||
.rt-f span { color: #1f9d52; font-size: 10px; letter-spacing: 1.5px; }
|
||
.rt-f b { font-family: 'Saira Condensed', monospace; font-size: 30px; font-weight: 700; line-height: 1; }
|
||
.rt-f b.act { color: #3bff6e; text-shadow: 0 0 12px rgba(59,255,110,.55); }
|
||
.rt-f b.sby { color: #f0f0f0; text-shadow: 0 0 8px rgba(240,240,240,.3); }
|
||
.rt-swap { flex: 0 0 auto; width: 48px; height: 40px; background: linear-gradient(#2b2b2b, #161616); color: #e0e0e0;
|
||
border: 1px solid #08090b; border-top: 1px solid #4a4a4a; border-radius: 9px; font-size: 22px; cursor: pointer;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
|
||
.rt-swap:hover { color: #fff; } .rt-swap:active { transform: translateY(1px); background: #3a3a3a; color: #fff; }
|
||
.rt-tune { display: flex; flex-direction: column; gap: 10px; }
|
||
.rt-row { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 10px; align-items: center; }
|
||
.rt-unit { color: var(--c-txt2); font-size: 13px; font-weight: 700; letter-spacing: .5px; text-align: center;
|
||
background: #2c2f35; border: 1px solid #3a3f47; border-radius: 8px; padding: 8px 0; }
|
||
.rt-step { background: linear-gradient(#3b3e44, #23262b); color: #eef2f6; border: 1px solid #08090b; border-top: 1px solid #5c6168;
|
||
border-radius: 10px; padding: 16px 0; font-size: 24px; font-weight: 700; cursor: pointer;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1); }
|
||
.rt-step:hover { background: linear-gradient(#454545, #2a2a2a); }
|
||
.rt-step:active { transform: translateY(1px); background: linear-gradient(#3a3a3a, #1f1f1f); color: #fff; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
|
||
.rt-actions { display: flex; gap: 10px; margin-top: 16px; }
|
||
.rt-btn { flex: 1; background: #232323; color: var(--c-txt2); border: 1px solid #3a3a3a; border-radius: 10px; padding: 13px; font-family: var(--ui-font); font-size: 14px; font-weight: 700; cursor: pointer; }
|
||
.rt-btn:hover { background: #2e2e2e; }
|
||
.rt-btn.primary { background: #f0f0f0; color: #0f0f0f; border-color: transparent; }
|
||
.rt-btn.primary:active { transform: translateY(1px); filter: brightness(.92); }
|
||
|
||
.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; }
|
||
.mc-wind { position: absolute; left: 6px; top: 6px; display: flex; gap: 6px; align-items: center;
|
||
font: 600 12px/1 monospace; color: #fff; background: #000a; padding: 4px 7px; }
|
||
.mc-wind i { color: #9ab; font-style: normal; }
|
||
.mc-windarr { display: inline-block; font-size: 16px; line-height: 1; color: #cfe3ff; }
|
||
|
||
/* 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: #f0f0f0; color: #0f0f0f; }
|
||
.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; }
|
||
|
||
/* ---------------- Audio Panel (X1000) ---------------- */
|
||
.audio-panel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--c-bg, #0f0f0f); }
|
||
.apnl { width: min(420px, 94%); background: #15191e; border: 1px solid #2c343c; border-radius: 10px; padding: 14px 16px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.5); font-family: var(--ui-font, 'Inter', system-ui); }
|
||
.apnl-title { text-align: center; color: #36d2ff; font-weight: 700; letter-spacing: 2px; font-size: 14px; margin-bottom: 12px; }
|
||
.apnl-grp { margin-bottom: 12px; }
|
||
.apnl-h { color: #6f808d; font-size: 10px; letter-spacing: 1px; margin-bottom: 5px; }
|
||
.apnl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
|
||
.apk { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #1c2229; border: 1px solid #313a44; border-radius: 6px; color: #c9d3db; font: inherit; font-size: 12px; font-weight: 600; padding: 9px 6px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
|
||
.apk:hover { background: #232a32; }
|
||
.apk .apk-s { font-size: 9px; color: #6f808d; font-weight: 400; }
|
||
.apk.on { border-color: #19b8e6; background: #0d2c38; color: #7fe0ff; box-shadow: 0 0 0 1px #19b8e6, 0 0 10px rgba(25,184,230,.25); }
|
||
.apk.mic.on { border-color: #16c116; background: #0c2a0c; color: #7bf07b; box-shadow: 0 0 0 1px #16c116, 0 0 10px rgba(22,193,22,.25); }
|
||
.apnl-vol { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #9fb0bd; font-size: 11px; }
|
||
.apnl-vol input { flex: 1; accent-color: #19b8e6; }
|
||
.apnl-vol b { color: #fff; font-size: 12px; min-width: 26px; text-align: right; }
|
||
.apnl-backup { width: 100%; margin-top: 6px; background: #3a0d0d; border: 1px solid #b53333; border-radius: 8px; color: #ff8a8a; font: inherit; font-weight: 700; letter-spacing: 1px; font-size: 12px; padding: 11px; cursor: pointer; }
|
||
.apnl-backup:hover { background: #5a1414; color: #ffb0b0; }
|