Spaces:
Sleeping
Sleeping
| /* Matrix Context Console — restrained operator-console theme (no external deps). */ | |
| :root{ | |
| --bg:#050807; --panel:#0b1310; --panel2:#0e1815; --line:#1c2b25; | |
| --acc:#34e07d; --acc-dim:#1f7a48; --text:#dce7e1; --muted:#7f928a; | |
| --white:#f4faf7; --red:#ff5d57; --amber:#f9b54a; --radius:10px; | |
| --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace; | |
| --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; | |
| } | |
| *{box-sizing:border-box} | |
| body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--sans);} | |
| a{color:var(--acc);text-decoration:none} | |
| .mono{font-family:var(--mono)} | |
| .muted{color:var(--muted)} | |
| .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} | |
| /* shell */ | |
| .topbar{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#081210,#050807);position:sticky;top:0;z-index:5} | |
| .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--white)} | |
| .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)} | |
| .pill{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--muted)} | |
| .pill.ok{color:var(--acc);border-color:var(--acc-dim)} | |
| .pill.bad{color:var(--red);border-color:#5b2420} | |
| .spacer{flex:1} | |
| .layout{display:flex;min-height:calc(100vh - 49px)} | |
| .side{width:200px;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px} | |
| .tab{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--text);font-weight:500} | |
| .tab:hover{background:var(--panel)} | |
| .tab.active{background:var(--panel2);color:var(--white);box-shadow:inset 2px 0 0 var(--acc)} | |
| .tab .k{font-family:var(--mono);font-size:11px;color:var(--muted)} | |
| .main{flex:1;padding:22px 26px;max-width:1080px} | |
| h1{font-size:20px;margin:0 0 2px;color:var(--white)} | |
| h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px} | |
| .sub{color:var(--muted);margin:0 0 18px} | |
| /* offline banner */ | |
| .banner{display:none;background:#2a0f0d;border:1px solid #5b2420;color:#ffd7d4;padding:8px 14px;border-radius:8px;margin-bottom:16px;font-size:13px} | |
| .banner.show{display:block} | |
| /* cards / grid */ | |
| .grid{display:grid;gap:14px} | |
| .cols-3{grid-template-columns:repeat(3,1fr)} | |
| .cols-2{grid-template-columns:1fr 1fr} | |
| .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px} | |
| .stat{font-size:26px;font-weight:700;color:var(--white)} | |
| .kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)} | |
| .kv:last-child{border-bottom:0} | |
| /* forms */ | |
| label{display:block;font-size:12px;color:var(--muted);margin:0 0 4px} | |
| input,textarea,select{width:100%;background:#08110d;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding:8px 10px} | |
| textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:12.5px} | |
| input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc-dim)} | |
| .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} | |
| button{background:var(--acc);color:#04140b;border:0;border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer;font-family:var(--sans)} | |
| button:hover{filter:brightness(1.08)} | |
| button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)} | |
| button.sm{padding:5px 10px;font-size:12px} | |
| button:disabled{opacity:.5;cursor:not-allowed} | |
| /* chips, tables, bars */ | |
| .chip{display:inline-block;font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;margin:2px 4px 2px 0;border:1px solid var(--line);color:var(--muted)} | |
| .chip.on{color:var(--acc);border-color:var(--acc-dim);background:rgba(52,224,125,.08)} | |
| table{width:100%;border-collapse:collapse;font-size:13px} | |
| th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top} | |
| th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em} | |
| .bar{height:7px;background:#10201a;border-radius:4px;overflow:hidden;min-width:90px} | |
| .bar>span{display:block;height:100%;background:var(--acc)} | |
| pre{background:#04100b;border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;white-space:pre-wrap;font-family:var(--mono);font-size:12.5px;color:#cfeede} | |
| .log{font-family:var(--mono);font-size:12px;background:#04100b;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:200px;overflow:auto} | |
| .log .ok{color:var(--acc)} .log .code{color:var(--muted)} | |
| .tag{font-family:var(--mono);font-size:11px;color:var(--amber)} | |
| .reason{color:var(--red);font-size:12px} | |
| .right{text-align:right} | |
| .dropped td{color:var(--muted)} | |
| .note{font-size:12px;color:var(--muted);margin-top:8px} | |
| @media (max-width:820px){.cols-3,.cols-2{grid-template-columns:1fr}.side{width:64px}.tab span.t{display:none}} | |