2 lines
9.5 KiB
CSS
2 lines
9.5 KiB
CSS
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#192b45;background:#f5f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:680px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #a6c6ff;outline-offset:2px}.app-shell{display:flex;min-height:100vh}.sidebar{width:92px;flex:none;display:flex;flex-direction:column;align-items:center;background:linear-gradient(172deg,#3476f7,#245cdd 76%,#2859d0);color:#fff}.brand-symbol{width:46px;height:46px;margin:27px 0 50px;position:relative}.brand-symbol span{position:absolute;inset:5px;border:4px solid #fff;border-radius:12px;transform:rotate(-32deg)}.brand-symbol i{position:absolute;inset:15px;border-radius:50%;background:#fff}.navigation{width:100%;display:grid;gap:8px}.nav-button{width:100%;height:78px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:0;background:transparent;color:#d6e5ff;font-size:12px}.nav-button:hover,.nav-button.active{background:#174bbd;color:#fff}.nav-button.active{box-shadow:inset 3px 0 0 #fff}.sidebar-bottom{margin:auto 0 28px;font-weight:800;font-size:15px;letter-spacing:-.06em}.sidebar-bottom small{font-size:9px;font-weight:500;opacity:.7}.workspace{flex:1;min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid #ecf0f6;display:flex;align-items:center;justify-content:space-between;padding:0 43px}.topbar-brand{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:700;color:#516077;white-space:nowrap}.topbar-brand strong{color:#326ef3}.brand-dot{width:10px;height:10px;background:#3575f5;border-radius:3px;transform:rotate(-30deg);margin-right:7px}.divider{height:16px;width:1px;background:#d9e0ec;margin:0 10px}.preview-pill{border:1px solid #dae7ff;border-radius:100px;background:#f3f7ff;color:#4268ad;font-size:11px;padding:7px 11px}.page{max-width:1160px;margin:0 auto;padding:38px 44px 50px}.section-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:29px}.overline{color:#6483bc;letter-spacing:.18em;font-size:10px;font-weight:800}h1{font-size:29px;letter-spacing:-.04em;margin:9px 0 8px}h2{margin:0;font-size:17px;letter-spacing:-.02em}.section-intro p,.subpage-intro{color:#8b98aa;font-size:13px;margin:0}.status-tag{padding:9px 14px;border:1px solid #e4e9f1;background:white;border-radius:100px;color:#6c7c94;font-size:12px;white-space:nowrap}.overview-grid{display:grid;grid-template-columns:minmax(350px,1.06fr) minmax(340px,.94fr);gap:20px}.connection-card,.info-card{background:white;border:1px solid #e8edf5;border-radius:18px;box-shadow:0 8px 32px rgba(29,72,137,.035)}.connection-card{padding:26px 27px 22px;min-height:494px;display:flex;flex-direction:column;overflow:hidden}.card-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.kicker{font-size:11px;color:#7e90ac}.card-top h2{font-size:20px;margin-top:6px}.protocol{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:750;color:#4a7de8;background:#f2f6ff;padding:8px;border-radius:7px;letter-spacing:.04em}.connect-visual{position:relative;width:218px;height:218px;margin:23px auto 0;display:grid;place-items:center}.orbit{position:absolute;border-radius:50%;border:1px solid #e8f0ff}.orbit.outer{inset:0;background:repeating-conic-gradient(from -2deg,#d5e4ff 0 1deg,transparent 1deg 5deg);mask:radial-gradient(transparent 66%,black 67%,black 69%,transparent 70%);-webkit-mask:radial-gradient(transparent 66%,black 67%,black 69%,transparent 70%)}.orbit.inner{inset:19px;border:1px solid #e2ecff}.power-display{display:grid;place-items:center;width:136px;height:136px;border-radius:50%;background:linear-gradient(145deg,#5090ff,#2864ea);color:white;box-shadow:0 16px 30px #397af149,inset 0 1px 2px #ffffff66}.connection-message{text-align:center;display:grid;gap:7px;margin:0 0 25px}.connection-message strong{font-size:16px}.connection-message span{color:#8898ae;font-size:12px}.node-selector{display:flex;align-items:center;width:100%;gap:11px;text-align:left;border:1px solid #e6edf8;background:#fafcff;padding:11px 12px;border-radius:11px;color:#536785;margin-top:auto}.node-selector:hover{border-color:#92b5fc;background:#f5f9ff}.node-icon{width:35px;height:35px;border-radius:10px;background:#ecf3ff;color:#3577f4;display:grid;place-items:center;flex:none}.node-selector-copy{display:grid;gap:3px;flex:1}.node-selector-copy small{color:#93a1b4;font-size:10px}.node-selector-copy strong{font-size:12px;color:#304461}.demo-chip{font-size:10px;color:#6383b7;background:#eaf2ff;padding:5px 7px;border-radius:5px;white-space:nowrap}.right-column{display:grid;gap:18px;grid-template-rows:auto 1fr}.info-card{padding:24px}.info-heading{display:flex;align-items:center;gap:12px;margin-bottom:25px}.info-heading p,.route-preview p{font-size:11px;color:#98a5b7;margin:5px 0 0}.icon-tile{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;flex:none;background:#ecf3ff;color:#3976ef}.icon-tile.green{background:#eef8f4;color:#29a77a}.info-card label{display:block;font-size:11px;font-weight:700;color:#5d6e85;margin-bottom:8px}.input-row{display:flex;gap:8px}.input-row input{min-width:0;flex:1;height:39px;border:1px solid #dfe7f0;border-radius:8px;padding:0 11px;color:#29415f;background:#fbfcff;font-size:12px}.input-row input::placeholder{color:#a4b0bf}.input-row button,.primary-action{border:0;background:#3476f5;color:#fff;border-radius:8px;font-size:11px;font-weight:700;padding:0 15px;white-space:nowrap}.input-row button:hover,.primary-action:hover{background:#205ed9}.input-row button:disabled{opacity:.6;cursor:wait}.hint{font-size:10px;color:#9ba7b6;line-height:1.6;margin:10px 0 0}.result{display:flex;gap:8px;padding:10px;border-radius:8px;margin-top:13px;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.result svg{flex:none}.result small{font-size:10px;color:#63738a}.result.success{color:#168861;background:#ebf8f2}.result.failure{color:#b34444;background:#fff1f0}.progress-card .info-heading{margin-bottom:11px}.milestone{display:flex;align-items:center;gap:11px;border-top:1px solid #f0f3f8;padding:12px 0}.milestone-mark{width:23px;height:23px;flex:none;display:grid;place-items:center;border-radius:50%;background:#edf1f7;color:#8fa0b8;font-size:11px}.milestone-mark.done{background:#e6f7ef;color:#24a171}.milestone>span:nth-child(2){display:grid;gap:3px;flex:1}.milestone strong{font-size:11px;font-weight:600}.milestone small{font-size:10px;color:#9ba8ba}.milestone em{font-size:10px;font-style:normal;color:#9aa8ba;white-space:nowrap}.milestone-mark.done~em{color:#23a875}.footnote{font-size:11px;color:#9da9bb;margin:20px 2px}.subpage{padding-top:50px}.subpage-intro{margin:0 0 30px;line-height:1.7}.route-preview{display:flex;align-items:center;gap:20px;min-height:148px}.icon-tile.large{width:62px;height:62px;border-radius:16px}.route-preview h2{margin-top:9px}.route-preview>div{flex:1}.secondary-action{border:1px solid #d9e6ff;border-radius:9px;background:#f6f9ff;color:#3977e8;font-size:12px;font-weight:650;padding:12px;white-space:nowrap}.secondary-action:hover{background:#e9f1ff}.modal-backdrop{position:fixed;inset:0;background:#1b2c47a8;display:grid;place-items:center;padding:20px;z-index:10}.node-dialog{width:min(600px,100%);background:white;border-radius:18px;box-shadow:0 25px 80px #142d5550;padding:28px}.dialog-header{display:flex;justify-content:space-between;gap:20px}.dialog-header h2{font-size:22px;margin:6px 0}.dialog-header p{color:#92a0b2;font-size:12px;margin:0}.icon-button{width:30px;height:30px;border:0;border-radius:8px;background:#f2f5fa;color:#77869b;display:grid;place-items:center}.icon-button:hover{background:#e6edfa}.dialog-labels{display:flex;justify-content:space-between;padding:25px 12px 9px;font-size:11px;color:#a5b0bf}.node-list{display:grid;gap:5px}.node-row{height:65px;width:100%;border:1px solid transparent;border-radius:10px;background:white;display:flex;align-items:center;gap:12px;text-align:left;padding:0 12px}.node-row:hover{background:#f7faff}.node-row.selected{border-color:#cbdcff;background:#f8fbff}.radio-mark{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #d8e0eb;border-radius:50%;color:white;font-size:12px;flex:none}.selected .radio-mark{background:#3979f5;border-color:#3979f5}.node-name{display:grid;gap:4px;flex:1}.node-name strong{font-size:13px;font-weight:650;color:#2c405c}.node-name small{font-size:10px;color:#a0adbf}.latency{display:flex;align-items:end;gap:8px;font-size:12px;font-weight:700;white-space:nowrap}.latency.fast{color:#24b57e}.latency.slow{color:#e5a124}.signal-bars{height:15px;display:flex;align-items:end;gap:2px}.signal-bars i{display:block;width:3px;background:currentColor;border-radius:2px 2px 0 0}.signal-bars i:nth-child(1){height:5px}.signal-bars i:nth-child(2){height:10px}.signal-bars i:nth-child(3){height:15px}.dialog-footer{border-top:1px solid #eff2f7;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:19px;padding-top:19px;color:#a1adbb;font-size:10px}.primary-action{height:37px;padding:0 20px}@media(max-width:930px){.page{padding:28px 25px}.overview-grid{grid-template-columns:1fr}.connection-card{min-height:460px}.right-column{grid-template-columns:1fr 1fr;grid-template-rows:auto}.topbar{padding:0 25px}.info-card{padding:18px}.route-preview{flex-wrap:wrap}}@media(max-width:720px){.sidebar{width:68px}.nav-button{height:70px}.brand-symbol{margin-bottom:32px}.topbar{padding:0 18px}.page{padding:23px 17px}.right-column{grid-template-columns:1fr}.section-intro{align-items:start}.section-intro p{max-width:320px}.connection-card{padding:20px}.route-preview{align-items:start}}
|