345 lines
17 KiB
CSS
345 lines
17 KiB
CSS
/* ============================================================================
|
||
NUMEX CORE — SKY COMMAND · ATC kontrol merkezi teması
|
||
Tasarım kararı: derin lâcivert-siyah zemin · amber/fosfor vurgu · monospace
|
||
telemetri · yoğun bilgi yerleşimi. Kurgusal simülasyon arayüzü.
|
||
========================================================================== */
|
||
:root {
|
||
--bg: #05080d;
|
||
--bg2: #0a1018;
|
||
--panel: #0c1420;
|
||
--panel2: #0f1a28;
|
||
--line: #1c2b3d;
|
||
--line2: #24384f;
|
||
--txt: #c9d8e6;
|
||
--dim: #6d8399;
|
||
--amber: #ffb53d;
|
||
--cyan: #4fd1e0;
|
||
--green: #43d17a;
|
||
--red: #ff4d5e;
|
||
--violet: #9d8cff;
|
||
--mono: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
|
||
--sans: "Segoe UI", Inter, system-ui, sans-serif;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body {
|
||
margin: 0; padding: 0; height: 100%;
|
||
background: var(--bg); color: var(--txt);
|
||
font-family: var(--sans); font-size: 13px;
|
||
overflow: hidden;
|
||
}
|
||
body {
|
||
background-image:
|
||
radial-gradient(1200px 600px at 50% -10%, rgba(79,209,224,.07), transparent 70%),
|
||
radial-gradient(900px 500px at 100% 110%, rgba(255,181,61,.05), transparent 70%);
|
||
}
|
||
#app { display: flex; flex-direction: column; height: 100vh; }
|
||
|
||
/* ---------------- üst bar ---------------- */
|
||
#topbar {
|
||
display: flex; align-items: center; gap: 18px;
|
||
padding: 8px 14px; border-bottom: 1px solid var(--line);
|
||
background: linear-gradient(180deg, #0b1520, #070c13);
|
||
flex: 0 0 auto;
|
||
}
|
||
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||
.brand .logo { color: var(--amber); font-size: 22px; text-shadow: 0 0 12px rgba(255,181,61,.6); }
|
||
.brand h1 {
|
||
margin: 0; font-size: 15px; letter-spacing: 2.2px; font-weight: 700;
|
||
font-family: var(--mono); color: #eaf3fb; white-space: nowrap;
|
||
}
|
||
.brand .dim { color: var(--dim); }
|
||
.brand .sub { margin: 1px 0 0; font-size: 10px; color: var(--dim); letter-spacing: .6px; }
|
||
.brand .sub b { color: var(--amber); }
|
||
|
||
#tabs { display: flex; gap: 4px; margin-left: 8px; }
|
||
.tab {
|
||
background: transparent; border: 1px solid transparent; color: var(--dim);
|
||
padding: 7px 13px; border-radius: 3px; cursor: pointer;
|
||
font-family: var(--mono); font-size: 11px; letter-spacing: 1.1px; font-weight: 600;
|
||
transition: .15s;
|
||
}
|
||
.tab:hover { color: var(--txt); background: #101c29; }
|
||
.tab.active { color: #04121a; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(79,209,224,.35); }
|
||
|
||
.clock { margin-left: auto; text-align: right; }
|
||
#simClock { font-family: var(--mono); font-size: 19px; color: var(--amber); letter-spacing: 1.5px; line-height: 1; }
|
||
.clocklabel { font-size: 9px; color: var(--dim); letter-spacing: 1.6px; }
|
||
|
||
.controls { display: flex; align-items: center; gap: 8px; }
|
||
.btn {
|
||
background: #13202e; color: var(--txt); border: 1px solid var(--line2);
|
||
padding: 7px 12px; border-radius: 3px; cursor: pointer;
|
||
font-family: var(--mono); font-size: 11px; letter-spacing: .8px; font-weight: 600;
|
||
}
|
||
.btn:hover { background: #1b2c3e; border-color: var(--cyan); color: #fff; }
|
||
.btn.primary { background: rgba(255,181,61,.12); border-color: rgba(255,181,61,.5); color: var(--amber); }
|
||
.btn.primary:hover { background: rgba(255,181,61,.2); }
|
||
.sel { font-size: 10px; color: var(--dim); display: flex; align-items: center; gap: 5px; letter-spacing: 1px; }
|
||
select, input[type="text"] {
|
||
background: #0a141f; color: var(--txt); border: 1px solid var(--line2);
|
||
border-radius: 3px; padding: 5px 7px; font-family: var(--mono); font-size: 11px; outline: none;
|
||
}
|
||
select:focus, input[type="text"]:focus { border-color: var(--cyan); }
|
||
|
||
/* ---------------- KPI ---------------- */
|
||
#kpis {
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
|
||
gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); flex: 0 0 auto;
|
||
}
|
||
.kpi { background: #080f18; padding: 6px 10px; }
|
||
.kpi .v { font-family: var(--mono); font-size: 17px; color: #eaf3fb; line-height: 1.1; }
|
||
.kpi .l { font-size: 9px; color: var(--dim); letter-spacing: 1.2px; margin-top: 1px; }
|
||
.kpi.k-warn .v { color: var(--amber); }
|
||
.kpi.k-crit .v { color: var(--red); }
|
||
.kpi.k-ok .v { color: var(--green); }
|
||
|
||
/* ---------------- görünümler / paneller ---------------- */
|
||
.view { display: none; flex: 1 1 auto; gap: 8px; padding: 8px; min-height: 0; overflow: hidden; }
|
||
.view.active { display: grid; }
|
||
#view-radar { grid-template-columns: minmax(230px, 1.05fr) minmax(320px, 2.1fr) minmax(280px, 1.15fr); }
|
||
#view-ops { grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.35fr); }
|
||
#view-airport { grid-template-columns: 1fr; }
|
||
|
||
.panel {
|
||
background: linear-gradient(180deg, var(--panel), #08101a);
|
||
border: 1px solid var(--line); border-radius: 4px;
|
||
display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
|
||
}
|
||
.panel-head {
|
||
display: flex; align-items: center; gap: 8px; justify-content: space-between;
|
||
padding: 7px 10px; border-bottom: 1px solid var(--line);
|
||
background: #0b1725; flex: 0 0 auto;
|
||
}
|
||
.panel-head.mt { margin-top: 6px; }
|
||
.panel-head h2 {
|
||
margin: 0; font-size: 11px; letter-spacing: 1.8px; color: var(--cyan);
|
||
font-family: var(--mono); font-weight: 600; text-transform: uppercase;
|
||
}
|
||
.badge {
|
||
font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 9px;
|
||
background: #17293a; color: var(--cyan); border: 1px solid var(--line2);
|
||
}
|
||
.badge.warn { color: var(--amber); border-color: rgba(255,181,61,.4); background: rgba(255,181,61,.1); }
|
||
.dim { color: var(--dim); }
|
||
.tiny { font-size: 9.5px; }
|
||
.scroll-y { overflow-y: auto; min-height: 0; }
|
||
.scroll-y::-webkit-scrollbar, #flightList::-webkit-scrollbar, #eventLog::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
.scroll-y::-webkit-scrollbar-thumb, #flightList::-webkit-scrollbar-thumb, #eventLog::-webkit-scrollbar-thumb {
|
||
background: #1e3448; border-radius: 4px;
|
||
}
|
||
.scroll-y::-webkit-scrollbar-track, #flightList::-webkit-scrollbar-track, #eventLog::-webkit-scrollbar-track { background: #070d15; }
|
||
|
||
/* ---------------- uçuş listesi ---------------- */
|
||
.filters { display: flex; gap: 5px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
|
||
.filters input { flex: 1 1 auto; min-width: 0; }
|
||
#flightList { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
|
||
#flightList li {
|
||
display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
|
||
padding: 5px 9px; border-bottom: 1px solid #0f1a26; cursor: pointer;
|
||
border-left: 2px solid transparent;
|
||
}
|
||
#flightList li:hover { background: #101d2b; }
|
||
#flightList li.sel { background: #12283a; border-left-color: var(--cyan); }
|
||
#flightList li.emg { border-left-color: var(--red); background: rgba(255,77,94,.07); }
|
||
#flightList .cs { font-family: var(--mono); font-size: 12px; color: #e7f1fa; font-weight: 600; letter-spacing: .5px; }
|
||
#flightList .st { font-size: 9.5px; color: var(--dim); letter-spacing: .4px; }
|
||
#flightList .tel { font-family: var(--mono); font-size: 10px; color: var(--amber); white-space: nowrap; }
|
||
#flightList .fuel { grid-column: 1 / -1; height: 3px; background: #14212e; border-radius: 2px; overflow: hidden; }
|
||
#flightList .fuel i { display: block; height: 100%; background: var(--green); }
|
||
#flightList .fuel i.w { background: var(--amber); }
|
||
#flightList .fuel i.c { background: var(--red); }
|
||
.panel-foot {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 5px 9px; border-top: 1px solid var(--line); flex: 0 0 auto;
|
||
}
|
||
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dim); cursor: pointer; }
|
||
.chk input { accent-color: var(--cyan); }
|
||
|
||
/* ---------------- radar ---------------- */
|
||
.radar-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
|
||
.legend { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--dim); }
|
||
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
|
||
.dot.air { background: var(--cyan); }
|
||
.dot.gnd { background: #8aa4b8; }
|
||
.dot.emg { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
||
.radar-wrap { flex: 1 1 auto; position: relative; min-height: 0; background: #040a10; }
|
||
#radar { width: 100%; height: 100%; display: block; }
|
||
.radar-frame {
|
||
position: absolute; inset: 10px; border: 1px solid rgba(79,209,224,.13);
|
||
border-radius: 50%; pointer-events: none;
|
||
}
|
||
.radar-corner {
|
||
position: absolute; font-family: var(--mono); font-size: 9.5px; color: rgba(109,131,153,.85);
|
||
letter-spacing: 1px; pointer-events: none;
|
||
}
|
||
.radar-corner.tl { top: 8px; left: 12px; }
|
||
.radar-corner.tr { top: 8px; right: 12px; color: var(--amber); }
|
||
.radar-corner.bl { bottom: 8px; left: 12px; }
|
||
.radar-corner.br { bottom: 8px; right: 12px; }
|
||
.radar-strip {
|
||
flex: 0 0 auto; display: flex; gap: 14px; padding: 5px 10px;
|
||
border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; color: var(--dim);
|
||
overflow-x: auto; white-space: nowrap;
|
||
}
|
||
.radar-strip b { color: var(--txt); }
|
||
|
||
/* ---------------- detay ---------------- */
|
||
#detailBody { padding: 9px 10px; }
|
||
.empty { color: var(--dim); font-size: 11px; text-align: center; padding: 22px 8px; }
|
||
.dl { display: grid; grid-template-columns: 88px 1fr; gap: 3px 8px; font-family: var(--mono); font-size: 11px; margin-bottom: 8px; }
|
||
.dl dt { color: var(--dim); font-size: 10px; letter-spacing: .4px; }
|
||
.dl dd { margin: 0; color: #eaf3fb; }
|
||
.dl dd.em { color: var(--amber); }
|
||
.plane-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
|
||
.plane-title b { font-family: var(--mono); font-size: 17px; color: #fff; letter-spacing: 1px; }
|
||
.plane-title span { font-size: 10px; color: var(--dim); }
|
||
.pill {
|
||
font-family: var(--mono); font-size: 9px; padding: 1px 6px; border-radius: 8px;
|
||
border: 1px solid var(--line2); color: var(--dim);
|
||
}
|
||
.pill.emg { color: var(--red); border-color: rgba(255,77,94,.5); background: rgba(255,77,94,.1); }
|
||
.pill.hi { color: var(--amber); border-color: rgba(255,181,61,.45); }
|
||
.bar { height: 5px; background: #14212e; border-radius: 3px; overflow: hidden; margin: 3px 0 8px; }
|
||
.bar i { display: block; height: 100%; background: var(--green); transition: width .2s; }
|
||
.bar i.w { background: var(--amber); }
|
||
.bar i.c { background: var(--red); }
|
||
.sec { font-size: 9.5px; letter-spacing: 1.5px; color: var(--cyan); font-family: var(--mono); margin: 10px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
|
||
.planbox { font-family: var(--mono); font-size: 10.5px; color: #b8cfe1; background: #08121c; border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; line-height: 1.6; }
|
||
.actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
|
||
.mini {
|
||
background: #13202e; border: 1px solid var(--line2); color: var(--txt);
|
||
padding: 4px 8px; border-radius: 3px; cursor: pointer;
|
||
font-family: var(--mono); font-size: 10px; letter-spacing: .5px;
|
||
}
|
||
.mini:hover { border-color: var(--cyan); color: #fff; background: #1a2a3b; }
|
||
.mini:disabled { opacity: .38; cursor: not-allowed; }
|
||
.mini.on { background: rgba(79,209,224,.16); border-color: var(--cyan); color: #bff3fa; }
|
||
|
||
/* ---------------- 3D ---------------- */
|
||
.panel.full3d { height: 100%; }
|
||
#threeWrap { position: relative; flex: 1 1 auto; min-height: 0; background: #02060b; }
|
||
#three { width: 100%; height: 100%; display: block; }
|
||
.camtools { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
|
||
#threeHud {
|
||
position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px;
|
||
pointer-events: none;
|
||
}
|
||
#followBox, #threeInfo {
|
||
font-family: var(--mono); font-size: 10px; color: var(--dim);
|
||
background: rgba(6,12,18,.82); border: 1px solid var(--line); border-radius: 3px;
|
||
padding: 4px 8px; pointer-events: auto; letter-spacing: .5px;
|
||
}
|
||
#followBox b { color: var(--amber); }
|
||
.fps {
|
||
position: absolute; right: 10px; top: 10px; font-family: var(--mono); font-size: 10px;
|
||
color: var(--green); background: rgba(6,12,18,.82); border: 1px solid var(--line);
|
||
padding: 3px 8px; border-radius: 3px;
|
||
}
|
||
|
||
/* ---------------- operasyon ---------------- */
|
||
.scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
|
||
.scn {
|
||
display: flex; flex-direction: column; gap: 1px; text-align: left;
|
||
background: #0d1a26; border: 1px solid var(--line2); border-radius: 4px;
|
||
padding: 7px 9px; cursor: pointer; color: var(--txt); transition: .15s;
|
||
}
|
||
.scn:hover { border-color: var(--amber); background: #14222f; transform: translateY(-1px); }
|
||
.scn b { font-family: var(--mono); font-size: 14px; color: var(--amber); line-height: 1; }
|
||
.scn span { font-size: 11.5px; font-weight: 600; color: #e6f0f9; }
|
||
.scn i { font-size: 9px; color: var(--dim); font-style: normal; }
|
||
.scn.danger { border-color: rgba(255,77,94,.4); }
|
||
.scn.danger b { color: var(--red); }
|
||
.scn.calm b { color: var(--green); }
|
||
.auth { padding: 8px 10px; }
|
||
.modes { display: flex; gap: 5px; margin-bottom: 7px; }
|
||
.mode {
|
||
flex: 1 1 0; background: #0d1a26; border: 1px solid var(--line2); color: var(--dim);
|
||
padding: 7px 6px; border-radius: 3px; cursor: pointer;
|
||
font-family: var(--mono); font-size: 10px; letter-spacing: .7px; font-weight: 600;
|
||
}
|
||
.mode.active { background: rgba(79,209,224,.14); border-color: var(--cyan); color: #c6f4fa; }
|
||
.mode[data-mode="OTOMATIK"].active { background: rgba(255,181,61,.14); border-color: var(--amber); color: #ffd79a; }
|
||
.limits { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; font-size: 10px; color: var(--dim); }
|
||
.limits input[type="range"] { width: 100%; accent-color: var(--amber); }
|
||
.limits b { color: var(--amber); font-family: var(--mono); }
|
||
.dentry { margin-top: 8px; font-size: 10px; color: var(--dim); font-family: var(--mono); }
|
||
.dentry b { color: var(--red); }
|
||
.wx { padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-family: var(--mono); font-size: 10.5px; }
|
||
.wx div span { color: var(--dim); font-size: 9.5px; display: block; letter-spacing: .6px; }
|
||
|
||
#alertList { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
|
||
.alert {
|
||
border: 1px solid var(--line2); border-left: 3px solid var(--amber);
|
||
background: #0c1825; border-radius: 3px; padding: 7px 9px;
|
||
}
|
||
.alert.KRITIK { border-left-color: var(--red); background: rgba(255,77,94,.05); }
|
||
.alert.BILGI { border-left-color: var(--cyan); }
|
||
.alert .ah { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
|
||
.alert .ah b { font-family: var(--mono); font-size: 11.5px; color: #eaf3fb; }
|
||
.alert .sev { font-family: var(--mono); font-size: 8.5px; letter-spacing: .8px; padding: 1px 5px; border-radius: 7px; background: #17293a; color: var(--amber); }
|
||
.alert.KRITIK .sev { color: var(--red); background: rgba(255,77,94,.12); }
|
||
.alert.BILGI .sev { color: var(--cyan); }
|
||
.alert .type { font-size: 9px; color: var(--dim); letter-spacing: 1px; font-family: var(--mono); margin-bottom: 3px; }
|
||
.alert ol { margin: 4px 0 0; padding-left: 15px; font-size: 10.5px; color: #a9c0d3; line-height: 1.55; }
|
||
.alert ol b { color: #d8e8f4; font-weight: 600; }
|
||
.alert .dec { display: flex; gap: 5px; margin-top: 6px; }
|
||
.noalert { color: var(--green); text-align: center; padding: 20px; font-size: 11px; font-family: var(--mono); }
|
||
|
||
/* ---------------- alt panel ---------------- */
|
||
#bottom {
|
||
flex: 0 0 auto; height: 168px; display: flex; flex-direction: column;
|
||
border-top: 1px solid var(--line); background: #070e16;
|
||
}
|
||
.bottom-head {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 5px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
|
||
}
|
||
.bottom-head h2 { margin: 0; font-size: 10.5px; letter-spacing: 1.8px; color: var(--cyan); font-family: var(--mono); }
|
||
.btools { display: flex; align-items: center; gap: 8px; }
|
||
#eventLog { flex: 1 1 auto; font-family: var(--mono); font-size: 10.5px; }
|
||
.ev { display: grid; grid-template-columns: 58px 46px 78px 1fr; gap: 8px; padding: 2px 10px; border-bottom: 1px solid #0b141d; }
|
||
.ev:hover { background: #0d1a26; }
|
||
.ev .t { color: #4e6a80; }
|
||
.ev .k { color: var(--cyan); font-size: 9px; letter-spacing: .5px; padding-top: 1px; }
|
||
.ev .k.DENY { color: var(--red); }
|
||
.ev .k.CRISIS { color: var(--amber); }
|
||
.ev .k.STATE { color: var(--violet); }
|
||
.ev .k.ACT { color: var(--green); }
|
||
.ev .k.RWY { color: #8aa4b8; }
|
||
.ev .f { color: #e2eefa; }
|
||
.ev .m { color: #9db4c7; }
|
||
.ev .m em { color: #63798d; font-style: normal; }
|
||
|
||
/* ---------------- toast ---------------- */
|
||
#toast {
|
||
position: fixed; left: 50%; bottom: 190px; transform: translate(-50%, 20px);
|
||
background: #10202e; border: 1px solid var(--cyan); color: #d8f6fb;
|
||
padding: 8px 16px; border-radius: 4px; font-family: var(--mono); font-size: 11.5px;
|
||
opacity: 0; pointer-events: none; transition: .25s; z-index: 50; max-width: 70vw;
|
||
box-shadow: 0 8px 30px rgba(0,0,0,.6);
|
||
}
|
||
#toast.show { opacity: 1; transform: translate(-50%, 0); }
|
||
#toast.err { border-color: var(--red); color: #ffd7db; }
|
||
|
||
/* ---------------- responsive ---------------- */
|
||
@media (max-width: 1180px) {
|
||
#view-radar { grid-template-columns: 1fr 1.6fr; }
|
||
#panel-detail { grid-column: 1 / -1; max-height: 200px; }
|
||
#view-ops { grid-template-columns: 1fr; overflow-y: auto; }
|
||
}
|
||
@media (max-width: 860px) {
|
||
html, body { overflow: auto; font-size: 12.5px; }
|
||
#app { height: auto; min-height: 100vh; }
|
||
#topbar { flex-wrap: wrap; }
|
||
.clock { margin-left: 0; }
|
||
#view-radar { grid-template-columns: 1fr; overflow-y: visible; }
|
||
#panel-flights { max-height: 260px; }
|
||
#panel-radar { min-height: 340px; }
|
||
#panel-detail { max-height: none; }
|
||
.scenarios { grid-template-columns: 1fr; }
|
||
#bottom { height: auto; }
|
||
#eventLog { max-height: 180px; }
|
||
.ev { grid-template-columns: 50px 40px 1fr; }
|
||
.ev .f { display: none; }
|
||
}
|