212 lines
12 KiB
CSS
212 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:4px 10px; gap:7px; border-bottom:1px solid rgba(0,255,145,.04); transition:background .1s; }
|
|
.sr:last-child { border-bottom:none; }
|
|
.sr:hover { background:rgba(0,255,145,.02); }
|
|
.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-warn { background:#FF8C00; border-color:#FF8C00; box-shadow:0 0 5px #FF8C00, 0 0 12px rgba(255,140,0,.5); }
|
|
.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); box-shadow:none; }
|
|
.sr-key { font-size:7px; letter-spacing:2px; color:rgba(0,210,130,.4); text-transform:uppercase; min-width:60px; flex-shrink:0; }
|
|
.sr-val { font-size:9px; font-weight:700; letter-spacing:.8px; margin-left:auto; color:rgba(0,255,145,.85); text-align:right; }
|
|
|
|
/* ── SERVICE STATE ──────────────────────────────── */
|
|
.state_active { color:#00ff91; }
|
|
.state_inactive { color:#FF3333; }
|
|
.state_unknown { color:#FF8C00; }
|
|
@keyframes statusBlink { 0%,100%{opacity:1} 50%{opacity:.1} }
|
|
|
|
/* ── SECTION DIVIDER ────────────────────────────── */
|
|
.ss-hdr {
|
|
display:flex; align-items:center; gap:7px;
|
|
padding:5px 10px 4px;
|
|
background:rgba(0,255,145,.035);
|
|
border-top:1px solid rgba(0,255,145,.1);
|
|
border-bottom:1px solid rgba(0,255,145,.05);
|
|
}
|
|
.ss-hdr-line { flex:1; height:1px; background:repeating-linear-gradient(90deg, rgba(0,255,145,.22) 0, rgba(0,255,145,.22) 3px, transparent 3px, transparent 6px); }
|
|
.ss-hdr-txt { font-size:6px; letter-spacing:4px; color:rgba(0,255,145,.45); text-transform:uppercase; }
|
|
|
|
/* ── GAUGE ──────────────────────────────────────── */
|
|
.sr-gauge { padding-bottom:6px; }
|
|
.gauge { flex:1; height:8px; background:rgba(0,255,145,.04); border:1px solid rgba(0,255,145,.14); position:relative; overflow:hidden; }
|
|
.gauge::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(4,8,16,.88) 8px, rgba(4,8,16,.88) 9px); z-index:2; pointer-events:none; }
|
|
.gauge-fill { height:100%; width:0%; position:relative; z-index:1; transition:width .6s cubic-bezier(.25,.46,.45,.94); }
|
|
.gauge-temp .gauge-fill { background:linear-gradient(90deg, rgba(180,60,0,.7), rgba(255,160,0,.9)); box-shadow:2px 0 14px rgba(255,140,0,.45); }
|
|
.gauge-num { font-size:8px; font-weight:700; min-width:52px; text-align:right; letter-spacing:.5px; color:rgba(255,160,0,.8); }
|
|
|
|
/* ── 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:1100px; margin:0 auto; }
|
|
.admin-col { flex:1; min-width:0; overflow-y:auto; min-height:0; }
|
|
}
|
|
@media (min-width:1024px) {
|
|
.admin-main { padding:16px; gap:16px; }
|
|
}
|
|
@media (max-width:479px) {
|
|
.hdr-badge, .hdr-clk { display:none; }
|
|
}
|
|
|
|
/* ── ACTION BUTTONS ─────────────────────────────── */
|
|
.act-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px; }
|
|
.act-btn {
|
|
font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
|
|
padding:10px 8px; 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;
|
|
}
|
|
.act-btn:hover { background:rgba(0,255,145,.08); color:var(--ok); border-color:rgba(0,255,145,.5); }
|
|
.act-btn.warm { border-color:rgba(255,140,0,.35); color:rgba(255,140,0,.7); background:rgba(255,140,0,.04); }
|
|
.act-btn.warm:hover { background:rgba(255,140,0,.12); color:#FF8C00; border-color:rgba(255,140,0,.7); }
|
|
.act-btn.danger { border-color:rgba(255,51,51,.35); color:rgba(255,51,51,.7); background:rgba(255,51,51,.04); }
|
|
.act-btn.danger:hover { background:rgba(255,51,51,.12); color:#FF3333; border-color:rgba(255,51,51,.7); }
|
|
.act-btn.full { grid-column:span 2; }
|
|
.act-btn.subtle { border-color:rgba(0,255,145,.1); color:rgba(0,255,145,.3); }
|
|
.act-btn.subtle:hover { color:rgba(0,255,145,.6); border-color:rgba(0,255,145,.35); }
|
|
|
|
/* ── LINK CARD ──────────────────────────────────── */
|
|
.link-card { display:flex; align-items:center; gap:12px; padding:10px 12px; }
|
|
.link-card-text strong { display:block; font-size:9px; letter-spacing:1.5px; color:rgba(0,255,145,.8); margin-bottom:3px; text-transform:uppercase; }
|
|
.link-card-text p { font-size:8px; color:rgba(0,210,130,.45); letter-spacing:.5px; }
|
|
.link-card-action { margin-left:auto; flex-shrink:0; }
|
|
.link-btn {
|
|
font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
|
|
padding:8px 14px; border:1px solid rgba(0,136,255,.4); background:rgba(0,136,255,.06);
|
|
color:rgba(0,136,255,.8); cursor:pointer; text-decoration:none; display:inline-block; transition:all .15s;
|
|
}
|
|
.link-btn:hover { background:rgba(0,136,255,.14); color:#55AAFF; border-color:rgba(0,136,255,.7); }
|
|
|
|
/* ── DROPDOWN CONTROL ───────────────────────────── */
|
|
.dropdown-row { display:flex; align-items:center; gap:10px; padding:10px 12px; }
|
|
.dropdown-row label { font-size:7px; letter-spacing:2px; color:rgba(0,210,130,.4); text-transform:uppercase; min-width:40px; }
|
|
.ctrl-select {
|
|
font-family:var(--mono); font-size:8px; letter-spacing:1px;
|
|
color:rgba(0,255,145,.8); background:#050A14;
|
|
border:1px solid rgba(0,255,145,.2); padding:6px 8px;
|
|
cursor:pointer; outline:none; flex:1;
|
|
}
|
|
.ctrl-select:focus { border-color:rgba(0,255,145,.5); }
|
|
.ctrl-status { font-size:7px; letter-spacing:1.5px; color:rgba(0,255,145,.45); white-space:nowrap; min-width:50px; text-align:right; }
|
|
|
|
/* ── AUTH OVERLAY ───────────────────────────────── */
|
|
.auth-overlay {
|
|
position:fixed; inset:0; background:rgba(5,8,15,.93);
|
|
display:flex; align-items:center; justify-content:center;
|
|
z-index:1000; backdrop-filter:blur(4px);
|
|
}
|
|
.auth-box {
|
|
width:320px; display:flex; flex-direction:column; gap:14px; padding:28px 24px;
|
|
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,.12);
|
|
box-shadow:0 0 60px rgba(0,0,0,.8), 0 0 40px rgba(0,136,255,.08);
|
|
}
|
|
.auth-eyebrow { font-size:7px; letter-spacing:3px; color:rgba(0,210,130,.5); text-transform:uppercase; }
|
|
.auth-title { font-size:20px; font-weight:700; color:#fff; letter-spacing:4px; text-transform:uppercase; }
|
|
.auth-sub { font-size:8px; color:rgba(0,255,145,.35); letter-spacing:1px; }
|
|
.auth-input {
|
|
font-family:var(--mono); font-size:16px; background:#050A14;
|
|
border:1px solid rgba(0,255,145,.2); color:var(--ok);
|
|
padding:10px 12px; outline:none; letter-spacing:6px; width:100%;
|
|
}
|
|
.auth-input:focus { border-color:rgba(0,255,145,.5); }
|
|
.auth-error { font-size:8px; color:#FF3333; letter-spacing:1px; min-height:12px; }
|
|
.auth-submit {
|
|
font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase;
|
|
padding:11px; border:1px solid rgba(0,136,255,.5); background:rgba(0,136,255,.1);
|
|
color:rgba(0,136,255,.9); cursor:pointer; transition:all .15s; width:100%;
|
|
}
|
|
.auth-submit:hover { background:rgba(0,136,255,.22); color:#55AAFF; }
|