2 lines
8.1 KiB
CSS
2 lines
8.1 KiB
CSS
:root{font-family:Inter,"Segoe UI","Microsoft YaHei UI",sans-serif;color:#172033;background:#f7f8fc;font-synthesis:none;--accent:#3451e8;--accent-soft:#edf1ff;--line:#dfe4ef;--muted:#6e7890;--green:#0aa36c;--red:#db4a55}*{box-sizing:border-box}body{margin:0;min-width:980px;min-height:100vh;background:#f7f8fc}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:172px 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:172px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{height:76px;padding:20px 22px;color:var(--accent);font-size:23px;font-weight:750;letter-spacing:-.5px;border-bottom:1px solid var(--line)}.brand span{display:block;margin-top:2px;color:#7e88a0;font-size:10px;font-weight:650;letter-spacing:1.7px;text-transform:uppercase}.sidebar nav{padding:18px 10px;display:grid;gap:6px}.nav-item{height:48px;border:0;background:transparent;color:#59647a;display:flex;gap:13px;align-items:center;padding:0 16px;border-radius:8px;font-size:14px;cursor:pointer}.nav-item svg{width:21px}.nav-item.selected{color:var(--accent);background:var(--accent-soft);font-weight:700;box-shadow:inset 3px 0 var(--accent)}.sidebar-foot{margin-top:auto;padding:18px 22px;border-top:1px solid var(--line);display:grid;gap:4px;color:#8b94a7;font-size:10px}.version{color:#44506a;font-weight:700}.app-shell>main{grid-column:2;min-width:0}.status-strip{height:76px;background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:0 4.5vw;color:#4d5870;font-size:13px}.status-strip>div{display:flex;align-items:center;gap:7px;justify-content:center;border-right:1px solid var(--line)}.status-strip>div:last-child{border:0}.status-strip strong{color:#182238;font-weight:650}.status-strip i,.site-row i{width:8px;height:8px;border-radius:50%;display:inline-block}.healthy{background:var(--green)}.offline{background:#aeb5c3}.workspace{padding:22px clamp(18px,2.5vw,36px) 28px;max-width:1500px;margin:auto}.connection-path{height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:0 4vw}.endpoint{display:flex;align-items:center;gap:12px;min-width:170px}.endpoint.site{justify-content:flex-end}.endpoint-icon{width:46px;height:46px;border:1px solid #b8c6ff;border-radius:50%;background:#f6f8ff;color:var(--accent);display:grid;place-items:center}.endpoint-icon svg{width:23px}.endpoint div{display:grid;gap:4px}.endpoint b{font-size:13px}.endpoint small{color:var(--muted);font-size:11px}.path-line{display:flex;align-items:center;gap:8px}.path-line span{height:1px;background:var(--accent);flex:1;position:relative}.path-line span:first-child:after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--accent);border-top:3px solid transparent;border-bottom:3px solid transparent}.path-line i{width:5px;height:5px;border-radius:50%;background:#92a5f7}.setup-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:12px}.panel,.session-panel,.logs-panel{background:#fff;border:1px solid var(--line);border-radius:9px}.panel{min-height:294px;padding-bottom:14px}.panel-heading{height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}h2{margin:0;font-size:16px;letter-spacing:-.2px}.panel-heading>span{font-size:11px;color:var(--muted)}.table-head,.site-row{display:grid;grid-template-columns:1.45fr .55fr .72fr;align-items:center}.table-head{padding:14px 20px 8px;color:#7f899e;font-size:10px;font-weight:650;text-transform:uppercase}.site-row{width:calc(100% - 28px);height:45px;margin:3px 14px;border:1px solid transparent;background:transparent;border-radius:7px;text-align:left;color:#29334a;font-size:12px;cursor:pointer}.site-row>span:first-child{display:flex;align-items:center;gap:9px;font-weight:650}.site-row.selected{border-color:var(--accent);background:#f4f6ff;color:#233fc9}.site-row.disabled{opacity:.45}.good-text{color:var(--green)!important}.muted{color:#9aa2b2}.wide{width:calc(100% - 28px);margin:16px 14px 0}.primary,.danger,.secondary,.text-action{border-radius:7px;height:38px;font-size:12px;font-weight:700;cursor:pointer}.primary{border:1px solid var(--accent);background:var(--accent);color:#fff}.primary:disabled{border-color:#cbd1df;background:#e7eaf1;color:#9aa2b2;cursor:not-allowed}.cidr-panel label{display:block;margin:12px 18px 6px;color:#556078;font-size:11px}.cidr-panel form{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 18px}.cidr-panel input{height:42px;padding:0 13px;border:1px solid #b9c3d6;border-radius:7px;outline:none;font-size:13px}.cidr-panel input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e7ebff}.secondary,.text-action{border:1px solid #b9c7ff;background:#fff;color:var(--accent);padding:0 14px}.text-action{height:32px;display:flex;align-items:center;gap:6px}.text-action svg{width:14px}.cidr-list{margin:10px 18px;display:grid;gap:6px}.cidr-list>div{height:36px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;gap:9px;padding:0 10px}.cidr-list code{font-family:"Cascadia Code",monospace;font-size:11px;flex:1}.grip{color:#a6adba}.cidr-list button{border:0;background:transparent;color:#9aa2b2;display:grid;place-items:center}.cidr-list button svg{width:14px}.preflight{margin:8px 18px 0;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;color:#4a566c;font-size:11px}.preflight>svg{width:17px;color:var(--green)}.preflight strong{color:var(--green)}.preflight button{margin-left:auto;border:0;background:transparent;color:var(--accent);font-size:11px;font-weight:650}.error-banner{padding:10px 14px;background:#fff2f3;color:#b52f3c;border:1px solid #f2c2c6;border-radius:7px}.session-panel{margin-top:12px;min-height:148px;padding:18px;display:grid;grid-template-columns:minmax(300px,1.7fr) repeat(3,minmax(100px,.62fr)) auto;align-items:center}.session-copy{align-self:stretch;padding-right:20px;border-right:1px solid var(--line)}.session-copy dl{display:grid;grid-template-columns:82px 1fr;gap:5px;margin:12px 0 0;font-size:10px}.session-copy dt{color:#7e8799}.session-copy dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mono{font-family:"Cascadia Code",monospace}.metric{height:88px;border-right:1px solid var(--line);display:grid;place-content:center;text-align:center;gap:7px}.metric span,.metric small{font-size:10px;color:var(--muted)}.metric strong{font-size:22px;color:#2848d8;letter-spacing:-.5px}.danger{margin-left:22px;border:1px solid #ed6973;background:#fff;color:#cf3542;padding:0 18px}.danger:disabled{opacity:.4}.logs-panel{margin-top:12px;min-height:168px;overflow:hidden}.logs{font-family:"Cascadia Code",monospace;font-size:10px;padding:10px 18px;display:grid;gap:8px}.logs>div{display:grid;grid-template-columns:85px 44px 1fr;gap:10px}.logs time{color:#778197}.logs b{color:#315be1}.logs b.warn{color:#d48a00}.logs b.error{color:#d13a48}.loading{height:100vh;display:grid;place-items:center;color:#667086}.error-banner{font-size:12px}@media(max-width:1120px){.app-shell{grid-template-columns:80px 1fr}.sidebar{width:80px}.brand{font-size:17px;padding:22px 10px;text-align:center}.brand span,.nav-item:not(.selected)::after,.nav-item{font-size:0}.nav-item{justify-content:center;padding:0}.sidebar-foot{padding:14px 8px;text-align:center}.setup-grid{grid-template-columns:1fr}.session-panel{grid-template-columns:1.5fr repeat(3,.6fr)}.session-panel .danger{grid-column:1/-1;margin:14px 0 0}.connection-path{padding:0}.workspace{padding:16px}.status-strip{padding:0 12px}}@media(prefers-reduced-motion:no-preference){.path-line i{animation:pulse 1.8s ease-in-out infinite}.path-line i:nth-of-type(2){animation-delay:.2s}.path-line i:nth-of-type(3){animation-delay:.4s}@keyframes pulse{50%{transform:scale(1.5);opacity:.45}}}.preflight.fail,.preflight.fail strong{color:var(--red)}.preflight.checking,.preflight.checking strong{color:var(--muted)}.settings-panel{max-width:760px;margin-top:38px}.settings-panel dl{display:grid;grid-template-columns:170px 1fr;gap:18px 28px;padding:24px;margin:0}.settings-panel dt{color:var(--muted)}.settings-panel dd{margin:0;font-weight:650}.settings-panel>p{margin:0;padding:18px 24px;border-top:1px solid var(--line);color:var(--muted);line-height:1.7}
|