2 lines
8.2 KiB
CSS
2 lines
8.2 KiB
CSS
:root{--bg: #06111e;--text: #ecf7ff;--muted: #8fa7c2;--border: rgba(196, 225, 255, .12);--glass: rgba(9, 21, 37, .68);--shadow: 0 28px 72px rgba(1, 7, 16, .42);--mint: #63e7c2;--sky: #60cbff;--sun: #ffc86b;--rose: #ff7f96}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Avenir Next,SF Pro Display,Segoe UI Variable,PingFang SC,Microsoft YaHei,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(68,139,255,.28),transparent 34%),radial-gradient(circle at 80% 20%,rgba(56,217,183,.18),transparent 26%),linear-gradient(160deg,#050d18,#081420 48%,#040914);overflow-x:hidden}body::selection{background:#60cbff4d}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-thumb{background:#82a3c45c;border-radius:999px;border:2px solid rgba(4,9,20,.4)}::-webkit-scrollbar-track{background:#ffffff08}button,input{font:inherit}.nebula-app{position:relative;min-height:100vh;display:grid;grid-template-columns:320px 1fr;gap:20px;padding:20px}.ambient,.mesh{position:fixed;pointer-events:none}.ambient{width:360px;height:360px;border-radius:50%;filter:blur(26px);opacity:.42;animation:drift 18s ease-in-out infinite}.ambient-a{top:28px;left:4%;background:radial-gradient(circle,rgba(82,143,255,.56),transparent 70%)}.ambient-b{right:10%;bottom:2%;background:radial-gradient(circle,rgba(88,229,202,.32),transparent 70%);animation-delay:-6s}.mesh{top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(circle at center,rgba(255,255,255,.75),transparent 82%);mask-image:radial-gradient(circle at center,rgba(255,255,255,.75),transparent 82%)}.glass-panel{position:relative;z-index:1;border-radius:30px;background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);box-shadow:var(--shadow);overflow:hidden;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.glass-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 32%,transparent 65%,rgba(99,231,194,.05));pointer-events:none}.glass-panel:hover{transform:translateY(-2px);border-color:#63e7c22e;box-shadow:0 34px 82px #01071075}.command-rail{padding:24px;display:grid;align-content:start;gap:18px;position:sticky;top:20px;height:calc(100vh - 40px)}.command-rail h1,.main-grid h2,.main-grid h3,.module-card h4{margin:8px 0;letter-spacing:-.03em}.eyebrow,.module-id{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:.76rem}.muted{color:var(--muted);line-height:1.5}.stream-badge,.chip,.metric-card,.module-card,.node-card,.feed-card,.terminal-surface{border:1px solid rgba(255,255,255,.08);background:#ffffff0d}.stream-badge{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px}.stream-dot{width:10px;height:10px;border-radius:50%;background:#9faec2;box-shadow:0 0 18px #9faec280}.stream-dot.live{background:var(--mint);box-shadow:0 0 22px #63e7c2c7}.stream-dot.degraded,.stream-dot.connecting{background:var(--sun);box-shadow:0 0 22px #ffc86bad}.rail-actions,.shield-actions{display:grid;gap:10px}.rail-metric-stack{display:grid;gap:12px}.metric-card{padding:16px;border-radius:22px}.metric-card span{display:block;color:var(--muted);font-size:.8rem}.metric-card strong{display:block;margin-top:10px;font-size:2rem}.metric-card.mint strong{color:var(--mint)}.metric-card.sky strong{color:var(--sky)}.metric-card.sun strong{color:var(--sun)}.metric-card.rose strong{color:var(--rose)}.main-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.hero-panel,.module-panel,.node-panel,.ssh-panel,.threat-panel,.audit-panel{padding:22px}.hero-panel{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;min-height:320px}.hero-panel:after{content:"";position:absolute;right:-60px;top:-50px;width:240px;height:240px;background:radial-gradient(circle,rgba(99,231,194,.18),transparent 68%);pointer-events:none}.hero-copy p:last-child{color:#d8edff;margin:0;line-height:1.6}.hero-copy{display:grid;align-content:start;gap:14px}.hero-side{display:grid;align-content:space-between;gap:18px}.hero-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.info-pill{padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#ffffff0d}.info-pill span{display:block;color:var(--muted);font-size:.78rem}.info-pill strong{display:block;margin-top:8px;font-size:1rem;color:#f2f9ff}.hero-meters,.feed-stack,.module-grid{display:grid;gap:14px}.module-panel,.ssh-panel{grid-column:1 / -1}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.chip{display:inline-flex;align-items:center;padding:9px 12px;border-radius:999px;color:#d6effd;font-size:.84rem}.progress-meter{display:grid;gap:8px}.meter-head{display:flex;justify-content:space-between;align-items:center}.meter-head span{color:var(--muted)}.meter-track{height:10px;border-radius:999px;background:#ffffff14;overflow:hidden}.meter-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#53bcff,#63e7c2 55%,#ffc86b);transition:width .36s ease}.primary,.ghost,.text-button{border:0;cursor:pointer;transition:transform .18s ease,background .18s ease,opacity .18s ease}.primary,.ghost{border-radius:16px;padding:12px 16px}.primary{background:linear-gradient(135deg,#36d8b0,#1da8f1);color:#031019;box-shadow:0 14px 28px #2da8f12e}.primary.danger{background:linear-gradient(135deg,#ff9d7e,#ff617f)}.ghost{background:#ffffff12;color:var(--text);border:1px solid rgba(255,255,255,.08)}.ghost.danger{border-color:#ff7f964d;color:#ffdce3}.text-button{background:transparent;color:var(--sky);padding:0}button:hover{transform:translateY(-1px)}.module-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.module-card,.node-card,.feed-card{border-radius:22px;padding:16px;transition:transform .18s ease,border-color .18s ease,background .18s ease}.module-card:hover,.node-card:hover,.feed-card:hover{transform:translateY(-1px)}.module-card p,.node-card p,.feed-card p{margin:6px 0 0;color:var(--muted);line-height:1.5}.module-card.warning,.node-card.selected,.feed-card.warning{border-color:#ffc86b47}.module-card.danger,.feed-card.danger{border-color:#ff7f9661}.module-foot,.node-stats{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:#d7ecfb;font-size:.86rem}.node-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.node-card{cursor:pointer}.node-card.local{background:linear-gradient(135deg,#63e7c21f,#1f70ff14)}.node-card.selected{box-shadow:inset 0 0 0 1px #ffc86b2e}.connect-form,.command-form{display:grid;gap:10px}.handshake-banner{display:grid;gap:6px;margin-bottom:14px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#ffffff0d}.handshake-banner strong{font-size:.92rem}.handshake-banner span{color:var(--muted);font-size:.86rem}.handshake-banner.approved{border-color:#63e7c252}.handshake-banner.denied{border-color:#ff7f965c}.connect-form{grid-template-columns:repeat(7,minmax(0,1fr))}.command-form{grid-template-columns:1fr auto;margin-top:12px}input{width:100%;min-width:0;padding:12px 14px;color:var(--text);border-radius:15px;border:1px solid rgba(255,255,255,.08);background:#ffffff0f;outline:none}input:focus{border-color:#60cbff6b;box-shadow:0 0 0 4px #60cbff14}.terminal-surface{margin-top:12px;min-height:320px;max-height:420px;overflow:auto;padding:18px;border-radius:24px;font-family:SF Mono,Cascadia Code,JetBrains Mono,monospace;font-size:.9rem;line-height:1.6;white-space:pre-wrap;background:linear-gradient(180deg,#030b14eb,#06121ee0),radial-gradient(circle at top right,rgba(96,203,255,.08),transparent 30%)}.filter-input{max-width:260px}@keyframes drift{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-18px,0) scale(1.04)}}@media(max-width:1220px){.nebula-app{grid-template-columns:1fr}.command-rail{order:2;position:static;height:auto}}@media(max-width:900px){.main-grid,.connect-form,.node-grid,.hero-panel,.hero-pills{grid-template-columns:1fr}.section-head{flex-direction:column}}
|