/* ============================================================================ TrackMap — Aviation / AFTN design system ---------------------------------------------------------------------------- Palette mengikuti nuansa penerbangan: - Latar : navy "night mode" ala kokpit / chart Jeppesen - Cyan : data terpilih & aksi utama (EFIS selected value) - Magenta: route / flight plan (EFIS active route) - Amber : caution + teletype AFTN - Green : engaged / active - Red : warning Font: - Barlow Condensed → heading & label (gaya papan FIDS bandara) - Inter → teks UI - JetBrains Mono → data & pesan AFTN (teletype fixed-width) File ini berisi TOKEN + komponen + override utility Tailwind, dipakai semua halaman (map, modal, editor, login). Warna jangan di-hardcode di template — pakai var(--av-*) supaya satu sumber kebenaran. DUA MODE: gelap (default) dan terang, dipilih lewat atribut `` yang dipasang `static/js/theme.js` SEBELUM paint pertama. Semua perbedaan mode HANYA berupa nilai token di blok `html[data-theme="light"]` paling bawah file ini — aturan/komponen di tengah tidak boleh tahu mode apa yang sedang aktif. Konsekuensinya: kalau menambah warna baru, tambahkan sebagai token DI KEDUA blok, jangan hardcode di komponen (kalau tidak, komponen itu akan tetap gelap saat mode terang dan tidak ada yang menyadarinya sampai dilihat mata). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { color-scheme: dark; /* scrollbar & kontrol native ikut gelap */ /* ── Surfaces ─────────────────────────────────────────────────────────── */ --av-bg-0: #050b13; /* paling dalam (track map, well) */ --av-bg-1: #0a1420; /* page */ --av-bg-2: #0f1d2e; /* panel / sidebar */ --av-bg-3: #16283d; /* raised / input */ --av-bg-4: #1e3650; /* hover */ --av-line: #1b3450; /* border halus */ --av-line-2: #24456a; /* border tegas */ /* ── Accents ────────────────────────────────────────────────────────────── Tiap aksen punya 3 tingkat: -bright (hover / stop atas gradien), base, dan -dim (stop bawah gradien). Tombol solid memakai base→dim, hover bright→base. Ink di ATAS isian aksen = --av-ink (ikut mode). */ --av-cyan: #38bdf8; /* primary action / selected data */ --av-cyan-dim: #0ea5e9; --av-cyan-bright: #7dd3fc; --av-cyan-glow: rgba(56, 189, 248, 0.45); --av-focus-ring: rgba(56, 189, 248, 0.18); --av-magenta: #e879f9; /* flight plan route */ --av-magenta-dim: #c026d3; --av-magenta-bright: #f0abfc; /* Garis rute ATS (airway) — link antar waypoint di Map Preview tab Waypoints. Dibaca DUA pemakai: CSS keterangan simbol (.tm-airway-key) dan static/js/waypoints.js lewat getComputedStyle, karena opsi warna polyline Leaflet adalah nilai JS, bukan properti CSS yang bisa mewarisi var(). */ --av-airway: #5e9bd8; /* rute konvensional (navaid): A/B/G/R, H/J/V/W */ --av-airway-rnav: #3fb0a0; /* rute RNAV: L/M/N/P, Q/T/Y/Z */ /* Batas FIR (Flight Information Region) — overlay toggleable di peta utama & Map Preview workspace perencanaan (static/js/fir-layer.js). Oranye sengaja dipakai supaya beda dari airway (biru/teal) dan amber (kuning-emas caution) — dibaca sama seperti airway, lewat getComputedStyle karena warna polyline/label Leaflet adalah nilai JS, bukan properti CSS yang mewarisi var() otomatis. */ --av-fir: #fb923c; /* garis batas FIR + label kode (WIIF/WAAF) */ --av-fir-dim: #ea580c; /* varian lebih pekat: marker waypoint entry/exit */ /* Hardware Monitor (/hwmon) — SATU warna = SATU arti di seluruh halaman (batang komposisi, grafik riwayat, dan kunci warnanya memakai token yang sama, jadi tidak mungkin lepas sinkron). Sebagian besar sengaja alias var(): nilainya ikut berubah sendiri saat blok mode terang di bawah menimpa token dasarnya, jadi tidak perlu didaftar dua kali. */ --av-hw-user: var(--av-cyan); /* waktu CPU untuk aplikasi (user+nice) */ --av-hw-system: var(--av-amber); /* waktu CPU untuk kernel (system+irq+softirq) */ --av-hw-io: var(--av-magenta); /* iowait — CPU MENUNGGU disk, bukan bekerja */ --av-hw-steal: var(--av-red); /* steal — waktu diambil hypervisor */ --av-hw-idle: var(--av-line-2); /* sisanya: menganggur */ --av-hw-cache: #2dd4bf; /* RAM cache/buffer — hijau-biru, SENGAJA beda dari "terpakai" karena bisa dilepas kapan saja */ --av-amber: #fbbf24; /* caution / AFTN */ --av-amber-dim: #d97706; --av-amber-bright: #fcd34d; --av-green: #4ade80; /* active / engaged */ --av-green-dim: #22c55e; --av-green-bright: #86efac; --av-red: #f87171; /* warning */ --av-red-dim: #dc2626; --av-red-bright: #fca5a5; /* Teks di atas isian aksen (tombol solid) — hampir hitam di mode gelap, putih di mode terang karena aksennya di sana jauh lebih pekat. */ --av-ink: #04121e; /* ── Text ─────────────────────────────────────────────────────────────── */ --av-text: #dbe9f7; --av-text-strong: #ffffff; /* judul & state hover paling terang */ --av-text-soft: #b9cfe4; --av-text-dim: #8fa9c4; --av-text-mute: #5b7692; --av-text-faint: #486a86; /* ── Lapisan melayang & bayangan ──────────────────────────────────────── */ --av-scrim: rgba(3, 8, 14, 0.78); /* latar di belakang modal */ --av-scrim-strong: rgba(2, 6, 12, 0.88); --av-well-a: rgba(5, 11, 19, 0.85); /* well semi-transparan */ --av-panel-a: rgba(22, 40, 61, 0.5); /* baris/panel semi-transparan */ --av-panel-a-hi: rgba(22, 40, 61, 0.6); --av-overlay: rgba(15, 29, 46, 0.94); /* panel melayang di atas peta */ --av-overlay-2: rgba(10, 20, 32, 0.95); /* kartu hover di atas peta */ --av-shadow: rgba(0, 0, 0, 0.5); --av-shadow-soft: rgba(0, 0, 0, 0.4); --av-shadow-deep: rgba(0, 0, 0, 0.6); --av-hairline: rgba(255, 255, 255, 0.18); /* cincin tipis di swatch */ --av-map-halo: rgba(0, 0, 0, 0.9); /* halo teks di atas peta */ --av-row-hover: rgba(56, 189, 248, 0.06); /* hover baris tabel */ --av-select-bg: rgba(56, 189, 248, 0.3); --av-select-fg: #ffffff; /* Ikon Leaflet.draw aslinya gelap → dibalik agar terbaca di panel gelap. Di mode terang tidak perlu dibalik (lihat blok light di bawah). */ --av-drawicon-filter: invert(1) hue-rotate(180deg) brightness(1.15); /* ── Panel bernuansa (badge / alert) ──────────────────────────────────── */ --av-tint-cyan: rgba(56, 189, 248, 0.1); /* isian tipis tombol aksen */ --av-tint-cyan-hi:rgba(56, 189, 248, 0.2); --av-tint-blue: rgba(12, 58, 94, 0.55); --av-tint-red: rgba(86, 22, 30, 0.5); --av-tint-green: rgba(12, 68, 46, 0.5); --av-tint-amber: rgba(88, 62, 12, 0.45); --av-tint-purple: rgba(74, 30, 92, 0.5); --av-tint-amber-2:rgba(180, 130, 20, 0.55); --av-edge-blue: rgba(56, 189, 248, 0.45); --av-edge-red: rgba(248, 113, 113, 0.5); --av-edge-green: rgba(74, 222, 128, 0.45); --av-edge-amber: rgba(251, 191, 36, 0.45); /* Baris monitor yang perlu perhatian (SAC/SIC belum terdaftar / 0 tersimpan) */ --av-row-warn: rgba(120, 83, 10, 0.18); --av-row-bad: rgba(120, 30, 30, 0.18); /* ── Type ─────────────────────────────────────────────────────────────── */ --av-font-ui: 'Inter', system-ui, -apple-system, sans-serif; --av-font-head: 'Barlow Condensed', 'Inter', sans-serif; --av-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; /* Sudut terpotong ala panel avionik — dipakai tombol & panel */ --av-chamfer: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); } /* ── Base ───────────────────────────────────────────────────────────────── */ body { background: var(--av-bg-1); color: var(--av-text); font-family: var(--av-font-ui); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .av-head { font-family: var(--av-font-head); letter-spacing: 0.06em; } .av-mono, .font-mono { font-family: var(--av-font-mono) !important; } /* Label kecil ala panel instrumen: condensed + uppercase + tracking lebar */ .av-label { font-family: var(--av-font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--av-text-dim); } /* Fokus keyboard terlihat jelas di seluruh app (aksesibilitas) */ :focus-visible { outline: 2px solid var(--av-cyan); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--av-select-bg); color: var(--av-select-fg); } /* ── Scrollbar ──────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--av-bg-1); } ::-webkit-scrollbar-thumb { background: var(--av-bg-4); border-radius: 6px; border: 2px solid var(--av-bg-1); } ::-webkit-scrollbar-thumb:hover { background: var(--av-line-2); } /* ══ Komponen ═══════════════════════════════════════════════════════════ */ /* Tombol avionik: sudut terpotong, label condensed uppercase */ .av-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.9rem; font-family: var(--av-font-head); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--av-cyan); background: linear-gradient(180deg, var(--av-bg-3), var(--av-bg-2)); border: 1px solid var(--av-line-2); clip-path: var(--av-chamfer); cursor: pointer; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } .av-btn:hover { background: linear-gradient(180deg, var(--av-bg-4), var(--av-bg-3)); border-color: var(--av-cyan); color: var(--av-text-strong); } .av-btn:active { transform: translateY(1px); } .av-btn:disabled { opacity: 0.45; cursor: not-allowed; } .av-btn-primary { color: var(--av-ink); background: linear-gradient(180deg, var(--av-cyan), var(--av-cyan-dim)); border-color: var(--av-cyan); } .av-btn-primary:hover { background: linear-gradient(180deg, var(--av-cyan-bright), var(--av-cyan)); color: var(--av-ink); } /* Panel dengan sudut terpotong, dipakai kartu/modal */ .av-panel { background: var(--av-bg-2); border: 1px solid var(--av-line); } /* Status pill — status flight plan / user */ .av-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.45rem; font-family: var(--av-font-head); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px; } .av-pill-active { color: var(--av-green); } .av-pill-draft { color: var(--av-amber); } .av-pill-completed { color: var(--av-text-mute); } .av-pill-cancelled { color: var(--av-red); } /* ══ Override utility Tailwind ══════════════════════════════════════════ Template memakai kelas Tailwind gelap bawaan (bg-gray-800, text-gray-400, bg-blue-600, …). Daripada menulis ulang ribuan baris markup, kelas-kelas itu dipetakan ke palet aviation di sini — satu tempat, semua halaman ikut. ====================================================================== */ /* Surfaces */ .bg-gray-950 { background-color: var(--av-bg-0) !important; } .bg-gray-900 { background-color: var(--av-bg-1) !important; } .bg-gray-800 { background-color: var(--av-bg-2) !important; } .bg-gray-700 { background-color: var(--av-bg-3) !important; } .bg-gray-600 { background-color: var(--av-bg-4) !important; } .hover\:bg-gray-800:hover { background-color: var(--av-bg-3) !important; } .hover\:bg-gray-700:hover { background-color: var(--av-bg-3) !important; } .hover\:bg-gray-600:hover { background-color: var(--av-bg-4) !important; } .bg-gray-800\/50 { background-color: var(--av-panel-a) !important; } .hover\:bg-gray-800\/50:hover { background-color: var(--av-panel-a-hi) !important; } .bg-gray-950\/60, .bg-gray-950\/80 { background-color: var(--av-well-a) !important; } .bg-black\/70, .bg-black\/60 { background-color: var(--av-scrim) !important; backdrop-filter: blur(3px); } /* Borders */ .border-gray-600, .border-gray-700, .border-gray-800 { border-color: var(--av-line) !important; } .border-gray-900 { border-color: var(--av-bg-0) !important; } /* Text */ .text-white { color: var(--av-text-strong) !important; } .text-gray-100, .text-gray-200 { color: var(--av-text) !important; } .text-gray-300 { color: var(--av-text-soft) !important; } .text-gray-400 { color: var(--av-text-dim) !important; } .text-gray-500 { color: var(--av-text-mute) !important; } .text-gray-600 { color: var(--av-text-faint) !important; } .text-blue-300, .text-blue-400, .text-cyan-200 { color: var(--av-cyan) !important; } .hover\:text-blue-300:hover { color: var(--av-cyan-bright) !important; } .text-indigo-400 { color: var(--av-cyan) !important; } .text-purple-300, .text-purple-400 { color: var(--av-magenta) !important; } .text-green-300, .text-green-400 { color: var(--av-green) !important; } .hover\:text-green-300:hover { color: var(--av-green-bright) !important; } .text-yellow-300, .text-yellow-400, .text-amber-200, .text-amber-300, .text-amber-400 { color: var(--av-amber) !important; } .text-red-300, .text-red-400, .text-red-500 { color: var(--av-red) !important; } .hover\:text-red-300:hover { color: var(--av-red-bright) !important; } .hover\:text-white:hover { color: var(--av-text-strong) !important; } /* Tinted panels (badge, alert) */ .bg-blue-900, .bg-blue-900\/40, .bg-blue-900\/30 { background-color: var(--av-tint-blue) !important; } .bg-red-900, .bg-red-900\/50, .bg-red-900\/40, .bg-red-900\/30 { background-color: var(--av-tint-red) !important; } .bg-green-900, .bg-green-900\/50, .bg-green-900\/40 { background-color: var(--av-tint-green) !important; } .bg-yellow-900, .bg-yellow-900\/50, .bg-yellow-900\/40, .bg-yellow-900\/10, .bg-amber-900 { background-color: var(--av-tint-amber) !important; } .bg-purple-900\/40, .bg-purple-900\/30 { background-color: var(--av-tint-purple) !important; } .bg-cyan-900\/60 { background-color: var(--av-tint-blue) !important; } .bg-red-950\/60 { background-color: var(--av-tint-red) !important; } .border-red-700, .border-red-800 { border-color: var(--av-edge-red) !important; } .border-green-700 { border-color: var(--av-edge-green) !important; } .border-yellow-700, .border-amber-700 { border-color: var(--av-edge-amber) !important; } .border-blue-700 { border-color: var(--av-edge-blue) !important; } /* Garis bawah tab aktif (/config) & border chip terpilih */ .border-cyan-400, .border-cyan-500 { border-color: var(--av-cyan) !important; } /* Tombol berwarna → tombol avionik (sudut terpotong + label condensed) */ .bg-blue-600, .bg-blue-700, .bg-purple-600, .bg-purple-700, .bg-green-600, .bg-green-700, .bg-red-600, .bg-red-700 { clip-path: var(--av-chamfer); font-family: var(--av-font-head); font-weight: 600; letter-spacing: 0.08em; border: 1px solid transparent; transition: background 0.14s ease, border-color 0.14s ease; } .bg-blue-600, .bg-blue-700 { background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-cyan), var(--av-cyan-dim)); color: var(--av-ink) !important; border-color: var(--av-cyan) !important; } .hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-500:hover { background-image: linear-gradient(180deg, var(--av-cyan-bright), var(--av-cyan)) !important; } .bg-purple-600, .bg-purple-700 { background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-magenta), var(--av-magenta-dim)); color: var(--av-ink) !important; border-color: var(--av-magenta) !important; } .hover\:bg-purple-500:hover, .hover\:bg-purple-600:hover { background-image: linear-gradient(180deg, var(--av-magenta-bright), var(--av-magenta)) !important; } .bg-green-600, .bg-green-700 { background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-green), var(--av-green-dim)); color: var(--av-ink) !important; border-color: var(--av-green) !important; } .hover\:bg-green-600:hover { background-image: linear-gradient(180deg, var(--av-green-bright), var(--av-green)) !important; } .bg-red-600, .bg-red-700 { background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-red), var(--av-red-dim)); color: var(--av-ink) !important; border-color: var(--av-red) !important; } .hover\:bg-red-700:hover, .hover\:bg-red-600:hover { background-image: linear-gradient(180deg, var(--av-red-bright), var(--av-red)) !important; } /* Varian warna lain yang dipakai template — dipetakan ke peran yang sama supaya tidak ada tombol yang "lolos" dari bahasa desain avionik. */ .bg-indigo-600, .bg-indigo-500 { clip-path: var(--av-chamfer); font-family: var(--av-font-head); font-weight: 600; letter-spacing: 0.08em; background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-cyan), var(--av-cyan-dim)); color: var(--av-ink) !important; border: 1px solid var(--av-cyan) !important; } .hover\:bg-indigo-500:hover { background-image: linear-gradient(180deg, var(--av-cyan-bright), var(--av-cyan)) !important; } .bg-teal-700, .bg-teal-600 { clip-path: var(--av-chamfer); font-family: var(--av-font-head); font-weight: 600; letter-spacing: 0.08em; background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-green), var(--av-green-dim)); color: var(--av-ink) !important; border: 1px solid var(--av-green) !important; } .hover\:bg-teal-600:hover { background-image: linear-gradient(180deg, var(--av-green-bright), var(--av-green)) !important; } .bg-orange-600, .bg-orange-500 { background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-amber), var(--av-amber-dim)); color: var(--av-ink) !important; border: 1px solid var(--av-amber) !important; } .hover\:bg-orange-500:hover { background-image: linear-gradient(180deg, var(--av-amber-bright), var(--av-amber)) !important; } .bg-red-800 { clip-path: var(--av-chamfer); font-family: var(--av-font-head); font-weight: 600; letter-spacing: 0.08em; background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-red-dim), #7f1d1d); color: #ffe4e4 !important; border: 1px solid var(--av-red) !important; } /* Titik status kecil (indikator WS di fpltxt / UDP Monitor) — bukan tombol, jangan dichamfer. bg-gray-500 di sini = titik "tidak tersambung". */ .bg-green-500, .bg-green-400 { background-color: var(--av-green) !important; background-image: none !important; } .bg-amber-500 { background-color: var(--av-amber) !important; background-image: none !important; } .bg-red-500 { background-color: var(--av-red) !important; background-image: none !important; } .bg-blue-500 { background-color: var(--av-cyan) !important; background-image: none !important; } .bg-gray-500 { background-color: var(--av-text-mute) !important; background-image: none !important; } .hover\:bg-gray-500:hover { background-color: var(--av-line-2) !important; } /* Tombol pause UDP Monitor saat aktif */ .bg-amber-600 { clip-path: var(--av-chamfer); font-family: var(--av-font-head); font-weight: 600; letter-spacing: 0.08em; background-color: transparent !important; background-image: linear-gradient(180deg, var(--av-amber), var(--av-amber-dim)); color: var(--av-ink) !important; border: 1px solid var(--av-amber) !important; } .hover\:bg-amber-500:hover { background-image: linear-gradient(180deg, var(--av-amber-bright), var(--av-amber)) !important; } /* Badge status flight plan (fp-detail) */ .bg-yellow-700 { background-color: rgba(180, 130, 20, 0.55) !important; } /* Tombol netral (bg-gray-700) — beri sudut terpotong juga agar sebahasa, tapi hanya yang benar-benar