6 lines
8.3 KiB
CSS
6 lines
8.3 KiB
CSS
:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#edf3f9;background:#101924;--panel:#1a2836;--border:#304050;--muted:#9eafbe;--accent:#60b0e5}*{box-sizing:border-box}[hidden]{display:none!important}
|
|
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 60% 10%,#1b2d40 0,#101924 48%,#0d141d 100%)}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}
|
|
.admin-layout{max-width:1510px;margin:0 auto;min-height:100vh;padding:0 clamp(16px,3vw,48px) 48px}.admin-header{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16;gap:20px}.brand{display:flex;align-items:center;gap:13px}.brand-orb{width:41px;height:41px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(130deg,#65b5e6,#276eac);color:#fff;font-weight:700;box-shadow:0 10px 30px #1688d32c}.brand-orb.big{width:55px;height:55px;margin:auto;font-size:1.5rem}.brand strong{display:block;font-size:1.24rem;letter-spacing:-.025em}.brand small{display:block;color:#8fa4b6;font-size:.75rem;margin-top:2px}.admin-header nav{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.admin-header nav a,.text-button{padding:11px 15px;color:#a8bbce;border-radius:10px;font-size:.9rem;background:transparent;border:0}.admin-header nav .selected{background:#4b92bc27;color:#d9f1fe;border:1px solid #73bbeb42}.admin-header nav a:hover,.text-button:hover{background:#ffffff0e;color:#fff}
|
|
.admin-main{padding-top:35px}.page-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:27px}.eyebrow{color:#7ac5f4;font-size:.72rem;letter-spacing:.16em;font-weight:700;margin:0 0 8px}.page-top h1{font-weight:620;font-size:clamp(1.85rem,3vw,2.8rem);letter-spacing:-.045em;margin:0 0 10px}.muted{color:var(--muted)}.page-top p.muted{margin:0;max-width:650px;line-height:1.6}.page-actions{display:flex;align-items:center;gap:13px;flex-shrink:0}.tag{background:#1c2f3e;border:1px solid #3c576d;color:#b4d0e0;border-radius:40px;padding:9px 12px;font-size:.81rem;white-space:nowrap}.button{border:1px solid #486071;border-radius:11px;color:#e1edf6;background:#243544;padding:11px 17px;font-weight:600;font-size:.88rem}.button:hover{filter:brightness(1.18)}.button.primary{background:#278dcb;border-color:#4baae2;color:#fff}.button.ghost{background:#213444;border-color:#466174}.button.danger{background:#703838;color:#ffded9;border-color:#aa6060;white-space:nowrap}.button.full{width:100%}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.panel{border:1px solid var(--border);border-radius:17px;background:linear-gradient(145deg,#1a2938f2,#162230ef);padding:24px;box-shadow:0 16px 40px #0002}.panel-title{display:flex;gap:13px;align-items:center;padding-bottom:17px;margin-bottom:22px;border-bottom:1px solid #ffffff16}.panel-title h2{font-size:1.1rem;margin:0 0 4px;letter-spacing:-.015em}.panel-title p{font-size:.81rem;color:#91a6b6;margin:0;line-height:1.5}.panel-symbol{background:#2a5a7b52;color:#9bd9ff;border-radius:11px;display:grid;place-items:center;font-weight:700;width:42px;height:42px;flex-shrink:0;font-size:1.3rem}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.field:last-child{margin-bottom:0}.field label{font-size:.89rem;font-weight:620;color:#e9eff4}.field small{font-size:.76rem;color:#8299ab;line-height:1.5}.field input:not([type=checkbox]):not([type=range]),.field select,.auth-box input{width:100%;background:#0f1c29;border:1px solid #3a5266;border-radius:10px;color:#f1f6fa;padding:12px 14px;outline:none;min-height:44px}.field input:focus-visible,.field select:focus-visible,.button:focus-visible{outline:2px solid #87d5ff;outline-offset:2px}.field select{cursor:pointer}.field input[type=range]{width:100%;accent-color:#65b9ee;cursor:pointer}.range-field{display:flex;align-items:center;gap:14px}.range-field output{white-space:nowrap;font-size:.86rem;color:#b1d8ee;min-width:60px;text-align:right}.switch-field{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.switch-field label small{display:block;margin-top:5px;font-weight:400}.switch-field input{width:20px;height:20px;accent-color:#63b7e9}.inline{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.inline-link{display:inline-flex;margin:4px 0}.microtext{font-size:.79rem}.message{margin:18px 0 0;min-height:20px;color:#a6c4da;font-size:.9rem}.notice{padding:13px 16px;background:#3e67343a;border:1px solid #77976566;border-radius:10px;margin-bottom:21px;color:#d8efca}.restart-panel{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:17px}.restart-panel h2{font-size:1.1rem;margin:0 0 7px}.restart-panel p{margin:0 0 5px}.auth-screen{display:grid;place-items:center;position:fixed;inset:0;background:radial-gradient(ellipse at 50% 35%,#1c3042 0%,#0b141d 80%);z-index:99;padding:20px}.auth-box{text-align:center;width:min(410px,100%);padding:34px;background:#192839;border:1px solid #395169;border-radius:21px;box-shadow:0 32px 80px #0005}.auth-box h1{font-size:1.5rem;margin:21px 0 8px}.auth-box p{color:#a7bacb;line-height:1.55;margin:0 0 22px}.auth-box form{display:flex;flex-direction:column;gap:11px;text-align:left}.auth-box label{font-weight:600;font-size:.87rem}.auth-box small{color:#8399ad}.auth-box .message{margin:13px 0}.monitor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:17px}.metric-card{display:flex;gap:13px;min-height:162px}.metric-icon{font-size:1.65rem;background:#294d673d;border:1px solid #5e90ac4a;color:#9ecce6;display:grid;place-items:center;width:47px;height:47px;flex-shrink:0;border-radius:12px}.metric-info{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:0}.metric-info strong{font-size:1rem}.metric-info p{margin:0;font-size:.8rem;line-height:1.5}.status-pill{font-size:.74rem;border-radius:30px;padding:4px 9px;background:#6c778025;color:#b8c2cb;border:1px solid #8796a133;white-space:nowrap}.status-pill[data-state="ok"]{background:#388c6433;color:#80dbab;border-color:#54ae8252}.status-pill[data-state="down"]{background:#ba4a4a29;color:#f4abab;border-color:#d7686852}.status-pill[data-state="muted"],.status-pill[data-state="warning"]{background:#ad81382c;color:#f2d18c;border-color:#b19b6466}.status-pill[data-state="unknown"]{background:#ffffff0d;color:#a6b3bf;border-color:#ffffff25}.monitor-lower{margin-bottom:17px}.service-list{display:flex;flex-direction:column;gap:4px}.service-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 5px;border-bottom:1px solid #ffffff0d}.service-row:last-child{border:0}.service-label{font-weight:600;font-size:.91rem;margin-bottom:3px}.service-sub{font-size:.77rem;color:#92a8b9;overflow-wrap:anywhere}.service-tail{display:flex;align-items:center;gap:10px;flex-shrink:0}.resource{margin:20px 0}.resource-title{display:flex;justify-content:space-between;font-size:.87rem}.resource-title strong{color:#acdfff}.meter{height:9px;background:#0d1924;border-radius:100px;overflow:hidden;margin-top:12px}.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#368cbe,#85c8f4);border-radius:100px;transition:width .3s}.resource p{margin:9px 0 0}.info-note{font-size:.8rem;color:#abc4d4;padding:14px 15px;border:1px solid #4a73823f;background:#36536824;border-radius:11px;line-height:1.5}.mcp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.mcp-item{border:1px solid #ffffff17;border-radius:11px;background:#ffffff08;padding:15px}.mcp-item strong{display:block;margin-bottom:10px}.mcp-item p{font-size:.74rem;color:#91a6b6;line-height:1.5;margin:10px 0 0}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#5dda9f;display:inline-block;margin-right:7px}
|
|
@media(max-width:1120px){.monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mcp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:780px){.admin-header{height:auto;padding:18px 0;flex-direction:column;align-items:flex-start}.admin-header nav{gap:3px}.admin-header nav a,.text-button{font-size:.8rem;padding:9px}.page-top{align-items:flex-start;flex-direction:column;gap:15px}.two-col{grid-template-columns:1fr}.restart-panel{flex-direction:column;align-items:flex-start}.monitor-grid{grid-template-columns:1fr}.mcp-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:120px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
|