184 lines
12 KiB
CSS
184 lines
12 KiB
CSS
:root {
|
|
--bg: #05080F;
|
|
--pri: #0088FF;
|
|
--sec: #FF8C00;
|
|
--ok: #00ff91;
|
|
--txt: rgba(0,255,145,.8);
|
|
--txt2: rgba(0,210,130,.38);
|
|
--mono: "Consolas","Cascadia Code","Cascadia Mono","Courier New",monospace;
|
|
}
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
html { height:100%; }
|
|
body {
|
|
font-family:var(--mono);
|
|
background-color:var(--bg);
|
|
background-image:
|
|
linear-gradient(rgba(0,255,145,.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,255,145,.04) 1px, transparent 1px);
|
|
background-size:32px 32px;
|
|
color:var(--txt);
|
|
display:flex; flex-direction:column; height:100%; overflow:hidden;
|
|
}
|
|
|
|
/* ── HEADER ─────────────────────────────────────── */
|
|
header {
|
|
height:52px;
|
|
background:linear-gradient(135deg, #060D1A 0%, #0C1C38 100%);
|
|
border-bottom:2px solid var(--pri);
|
|
box-shadow:0 2px 24px rgba(0,136,255,.28);
|
|
display:flex; align-items:center; padding:0 16px; gap:14px; flex-shrink:0; z-index:10;
|
|
}
|
|
.hdr-icon { width:32px; height:32px; flex-shrink:0; }
|
|
.hdr-title { font-weight:700; font-size:14px; color:#fff; letter-spacing:5px; text-transform:uppercase; white-space:nowrap; }
|
|
.hdr-title em { font-style:normal; color:var(--pri); }
|
|
.hdr-div { width:1px; height:28px; background:rgba(255,255,255,.12); flex-shrink:0; }
|
|
.hdr-badge { font-size:7px; color:var(--pri); border:1px solid rgba(0,136,255,.5); padding:2px 8px; letter-spacing:2.5px; text-transform:uppercase; white-space:nowrap; }
|
|
.hdr-gap { flex:1; }
|
|
.hdr-status { font-size:8px; color:rgba(0,255,145,.55); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
|
|
.hdr-back { color:rgba(0,255,145,.45); text-decoration:none; font-size:8px; letter-spacing:2px; text-transform:uppercase; }
|
|
.hdr-back:hover { color:rgba(0,255,145,.8); }
|
|
.hdr-clk { display:flex; flex-direction:column; align-items:flex-end; }
|
|
.hdr-clk-lbl { font-size:7px; color:rgba(255,255,255,.35); letter-spacing:2px; text-transform:uppercase; }
|
|
.hdr-clk-val { font-weight:700; font-size:14px; color:#fff; letter-spacing:3px; line-height:1.1; }
|
|
|
|
/* ── PANEL ──────────────────────────────────────── */
|
|
.panel {
|
|
position:relative;
|
|
background:
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/14px 1px no-repeat,
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/1px 14px no-repeat,
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/14px 1px no-repeat,
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/1px 14px no-repeat,
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/14px 1px no-repeat,
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/1px 14px no-repeat,
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/14px 1px no-repeat,
|
|
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/1px 14px no-repeat,
|
|
#070D18;
|
|
border:1px solid rgba(0,255,145,.1);
|
|
box-shadow:0 0 24px rgba(0,0,0,.5), inset 0 0 40px rgba(0,255,145,.018);
|
|
}
|
|
.p-hdr {
|
|
display:flex; align-items:center; gap:7px; padding:7px 12px;
|
|
border-bottom:1px solid rgba(0,255,145,.08);
|
|
background:linear-gradient(90deg, rgba(0,255,145,.05) 0%, transparent 100%);
|
|
}
|
|
.p-dot { width:5px; height:5px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); flex-shrink:0; }
|
|
.p-lbl { font-size:8px; letter-spacing:3px; color:rgba(0,255,145,.7); text-transform:uppercase; font-weight:bold; }
|
|
.p-tag { margin-left:auto; font-size:7px; color:rgba(0,255,145,.25); letter-spacing:1px; }
|
|
|
|
/* ── STATUS ROWS ────────────────────────────────── */
|
|
.sr { display:flex; align-items:center; padding:5px 12px; gap:8px; border-bottom:1px solid rgba(0,255,145,.04); }
|
|
.sr:last-child { border-bottom:none; }
|
|
.sr-led { width:6px; height:6px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,255,145,.15); background:#0a1408; }
|
|
.sr-led.led-ok { background:#00ff91; border-color:#00ff91; box-shadow:0 0 5px #00ff91, 0 0 12px rgba(0,255,145,.55); }
|
|
.sr-led.led-blue { background:#0088FF; border-color:#0088FF; box-shadow:0 0 5px #0088FF, 0 0 12px rgba(0,136,255,.5); }
|
|
.sr-led.led-off { background:#0d1208; border-color:rgba(0,255,145,.08); }
|
|
.sr-key { font-size:7px; letter-spacing:2px; color:rgba(0,210,130,.4); text-transform:uppercase; min-width:80px; flex-shrink:0; }
|
|
.sr-val { font-size:9px; font-weight:700; letter-spacing:.8px; margin-left:auto; color:rgba(0,255,145,.85); }
|
|
.state_active { color:#00ff91; }
|
|
.state_inactive { color:#FF3333; }
|
|
.state_unknown { color:#FF8C00; }
|
|
|
|
/* ── MAIN LAYOUT ────────────────────────────────── */
|
|
.admin-main {
|
|
flex:1; min-height:0; overflow-y:auto;
|
|
display:flex; flex-direction:column; gap:12px;
|
|
padding:12px; width:100%;
|
|
}
|
|
.admin-col { display:flex; flex-direction:column; gap:12px; }
|
|
|
|
/* ── RESPONSIVE ─────────────────────────────────── */
|
|
@media (min-width:640px) {
|
|
.admin-main { flex-direction:row; overflow:hidden; max-width:1200px; margin:0 auto; }
|
|
.admin-col { flex:1; min-width:0; overflow-y:auto; min-height:0; }
|
|
.admin-col:first-child { flex:0 0 320px; }
|
|
}
|
|
@media (min-width:1024px) {
|
|
.admin-main { padding:16px; gap:16px; }
|
|
.admin-col:first-child { flex:0 0 380px; }
|
|
}
|
|
@media (max-width:479px) {
|
|
.hdr-badge, .hdr-clk { display:none; }
|
|
}
|
|
|
|
/* ── BUTTONS ────────────────────────────────────── */
|
|
.button {
|
|
font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
|
|
padding:9px 12px; border:1px solid rgba(0,255,145,.2); background:rgba(0,255,145,.03);
|
|
color:rgba(0,255,145,.6); cursor:pointer; transition:all .15s;
|
|
}
|
|
.button:hover { background:rgba(0,255,145,.08); color:var(--ok); }
|
|
.button:disabled { opacity:.3; cursor:not-allowed; }
|
|
.buttonA { border-color:rgba(0,136,255,.4); background:rgba(0,136,255,.06); color:rgba(0,136,255,.8); }
|
|
.buttonA:hover { background:rgba(0,136,255,.14); color:#55AAFF; border-color:rgba(0,136,255,.7); }
|
|
.buttonA:disabled { opacity:.3; }
|
|
.buttonX { border-color:rgba(0,255,145,.3); background:rgba(0,255,145,.04); color:rgba(0,255,145,.7); }
|
|
.buttonX:hover { background:rgba(0,255,145,.1); color:var(--ok); }
|
|
.buttonWarm { border-color:rgba(255,140,0,.35); background:rgba(255,140,0,.04); color:rgba(255,140,0,.7); }
|
|
.buttonWarm:hover { background:rgba(255,140,0,.12); color:#FF8C00; }
|
|
.buttonWarm:disabled { opacity:.3; }
|
|
.buttonDanger { border-color:rgba(255,51,51,.35); background:rgba(255,51,51,.04); color:rgba(255,51,51,.7); }
|
|
.buttonDanger:hover { background:rgba(255,51,51,.12); color:#FF3333; }
|
|
|
|
/* ── CONTAINER CONTROL ──────────────────────────── */
|
|
.container-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px; }
|
|
.container-grid .button { padding:10px 8px; }
|
|
|
|
/* ── COPY TEXT ──────────────────────────────────── */
|
|
.copy-text { font-size:8px; color:rgba(0,210,130,.45); letter-spacing:.5px; line-height:1.6; padding:8px 12px; border-bottom:1px solid rgba(0,255,145,.05); }
|
|
|
|
/* ── TAB BAR ────────────────────────────────────── */
|
|
.tab-bar { display:flex; gap:2px; padding:10px 12px 0; }
|
|
.motor_test_tab_button {
|
|
font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
|
|
padding:7px 16px; border:1px solid rgba(0,255,145,.15); border-bottom:none;
|
|
background:transparent; color:rgba(0,255,145,.3); cursor:pointer; transition:all .15s;
|
|
}
|
|
.motor_test_tab_button:hover { color:rgba(0,255,145,.6); border-color:rgba(0,255,145,.35); }
|
|
.motor_test_tab_button.is_active { background:rgba(0,255,145,.06); color:#00ff91; border-color:rgba(0,255,145,.4); }
|
|
.tab-content-wrap { border-top:1px solid rgba(0,255,145,.08); }
|
|
|
|
/* ── TAB PANELS ─────────────────────────────────── */
|
|
.motor_test_tab_panel { display:none; }
|
|
.motor_test_tab_panel.is_active { display:block; }
|
|
|
|
/* ── TWO-COLUMN TAB LAYOUT ──────────────────────── */
|
|
.tab-row { display:grid; grid-template-columns:1fr 1fr; gap:0; }
|
|
.tab-box { padding:12px; }
|
|
.tab-box + .tab-box { border-left:1px solid rgba(0,255,145,.06); }
|
|
.tab-box-lbl { font-size:6px; letter-spacing:4px; color:rgba(0,255,145,.35); text-transform:uppercase; margin-bottom:8px; }
|
|
|
|
/* ── WHEEL SELECTOR ─────────────────────────────── */
|
|
.wheel_selector { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
|
|
.wheel_option { display:flex; align-items:center; gap:6px; cursor:pointer; padding:6px 8px; border:1px solid rgba(0,255,145,.1); background:rgba(0,255,145,.02); transition:all .12s; }
|
|
.wheel_option:hover { border-color:rgba(0,255,145,.3); background:rgba(0,255,145,.05); }
|
|
.wheel_option input[type="radio"] { accent-color:var(--ok); width:12px; height:12px; flex-shrink:0; }
|
|
.wheel_option span { font-size:8px; letter-spacing:.8px; color:rgba(0,255,145,.6); }
|
|
.wheel_option:has(input:checked) { border-color:rgba(0,255,145,.5); background:rgba(0,255,145,.07); }
|
|
.wheel_option:has(input:checked) span { color:var(--ok); }
|
|
|
|
/* ── MOTOR TEST GRID ────────────────────────────── */
|
|
.motor_test_grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
|
|
.motor_test_grid .button { padding:12px 8px; }
|
|
|
|
/* ── NEUTRAL TOOLBAR ────────────────────────────── */
|
|
.neutral-toolbar { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid rgba(0,255,145,.05); }
|
|
.neutral-toolbar .button { padding:7px 14px; font-size:8px; }
|
|
|
|
/* ── NEUTRAL CARDS ──────────────────────────────── */
|
|
.steering_neutral_grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px; padding:12px; }
|
|
.steering_neutral_card { border:1px solid rgba(0,255,145,.12); background:rgba(0,255,145,.025); padding:10px; }
|
|
.steering_neutral_card.is_dirty { border-color:rgba(255,140,0,.4); background:rgba(255,140,0,.03); }
|
|
.steering_neutral_compact_row { display:flex; flex-direction:column; gap:8px; }
|
|
.steering_neutral_card_header_compact { }
|
|
.steering_neutral_title { font-size:8px; letter-spacing:1.5px; color:rgba(0,255,145,.7); text-transform:uppercase; display:block; }
|
|
.steering_neutral_value_row_compact { display:flex; align-items:center; gap:6px; }
|
|
.steering_neutral_value { font-size:14px; font-weight:700; color:rgba(0,255,145,.9); letter-spacing:2px; flex:1; text-align:center; }
|
|
.is_dirty .steering_neutral_value { color:#FF8C00; }
|
|
.steering_neutral_adjust { padding:4px 10px !important; font-size:12px !important; letter-spacing:0 !important; }
|
|
|
|
/* ── BACK LINKS ─────────────────────────────────── */
|
|
.back-row { display:flex; gap:12px; padding:10px 12px; }
|
|
.back-link { font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(0,255,145,.4); text-decoration:none; padding:7px 14px; border:1px solid rgba(0,255,145,.15); transition:all .15s; }
|
|
.back-link:hover { color:rgba(0,255,145,.8); border-color:rgba(0,255,145,.4); }
|