2 lines
5.2 KiB
CSS
2 lines
5.2 KiB
CSS
:root{--ink:#172126;--muted:#6d7c82;--paper:#f5f7f6;--card:#fff;--line:#dce4e1;--accent:#0e766e;--accent-soft:#dff1ec;--danger:#b64242;--warn:#a86b18;--shadow:0 10px 30px #183b3210}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}.topbar{height:68px;background:#112c2b;color:#f5fffb;display:flex;align-items:center;padding:0 clamp(18px,4vw,64px);gap:42px}.brand{font-weight:900;letter-spacing:.1em;color:#fff;text-decoration:none;font-size:17px}.brand span{color:#8ed6bd}.topbar nav{display:flex;gap:22px;flex:1}.topbar nav a{color:#c2d9d2;text-decoration:none}.topbar nav a:hover{color:#fff}.ghost{background:transparent;border:1px solid #ffffff44;color:#fff;padding:7px 13px;border-radius:8px}.shell{max-width:1440px;margin:0 auto;padding:38px clamp(18px,4vw,64px) 70px}.page-heading,.detail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}h1,h2,p{margin-top:0}h1{font-size:clamp(28px,3vw,42px);line-height:1.05;margin-bottom:8px;letter-spacing:-.04em}h2{font-size:17px;margin-bottom:16px}.eyebrow{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.14em;margin-bottom:9px}.muted,small{color:var(--muted)}small{display:block;font-size:12px}.live-dot{color:var(--accent);font-size:12px}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}.cards.compact{grid-template-columns:repeat(4,1fr)}.metric,.panel{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}.metric{padding:17px}.metric span{color:var(--muted);font-size:12px}.metric strong{font-size:29px;display:block;margin-top:8px;letter-spacing:-.04em}.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.panel{padding:22px;margin-bottom:20px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-title a{color:var(--accent);font-size:12px}.coverage{display:flex;gap:clamp(20px,5vw,70px)}.coverage strong{font-size:28px;display:block}.coverage span{color:var(--muted);font-size:12px}.bar-row,.list-row,.event-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:11px 0}.bar-row:first-of-type,.list-row:first-of-type{border-top:0}.list-row{color:inherit;text-decoration:none}.list-row span{min-width:0}.list-row b,.list-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;background:#e9eeee;color:#526166}.badge.large{padding:8px 12px}.badge.online,.badge.completed{background:var(--accent-soft);color:#126d5b}.badge.degraded,.badge.warning,.badge.running{background:#fff0d6;color:var(--warn)}.badge.offline,.badge.failed,.badge.error{background:#ffe3e3;color:var(--danger)}.badge.blocked{background:#eee8fa;color:#7553a3}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:840px}th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#f9fbfa}td a{color:var(--ink);text-decoration:none}.filters{display:flex;gap:8px;flex-wrap:wrap}input,select{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:#fff;color:var(--ink)}button{cursor:pointer;border:0;border-radius:8px;padding:9px 14px;font-weight:700}.primary{background:var(--accent);color:white}.secondary{background:var(--accent-soft);color:#126d5b}.detail-head{align-items:center}.tabs{display:flex;gap:5px;margin-bottom:20px;border-bottom:1px solid var(--line)}.tabs a{padding:10px 14px;text-decoration:none;color:var(--muted);text-transform:capitalize}.tabs a.active{color:var(--accent);border-bottom:2px solid var(--accent);font-weight:800}.facts{display:grid;grid-template-columns:130px 1fr;gap:10px;margin:0}.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:600}.event-row{gap:12px;justify-content:flex-start}.event-time{color:var(--muted);font-size:11px;min-width:150px}.severity{font-size:10px;font-weight:800;margin-left:auto}.severity.error,.severity.critical{color:var(--danger)}.login-page{display:grid;place-items:center;min-height:100vh;background:#112c2b}.login-card{background:#fff;padding:36px;border-radius:18px;width:min(410px,calc(100% - 32px));box-shadow:var(--shadow)}.login-card label{display:block;margin:16px 0 6px;font-weight:700}.login-card input{width:100%;margin-top:6px}.login-card button{width:100%;margin-top:20px}.alert{padding:10px;border-radius:8px}.alert.error{color:var(--danger);background:#ffe3e3}.error-text{color:var(--danger)}@media(max-width:900px){.cards{grid-template-columns:repeat(3,1fr)}.split{grid-template-columns:1fr}.topbar{gap:16px;padding:0 18px}.topbar nav{gap:11px;overflow:auto}.topbar nav a{white-space:nowrap}}@media(max-width:560px){.cards,.cards.compact{grid-template-columns:repeat(2,1fr)}.page-heading,.detail-head{display:block}.page-heading .filters{margin-top:18px}.filters input,.filters select,.filters button{width:100%}.shell{padding-top:26px}.panel{padding:16px}.event-time{min-width:0}.event-row{display:grid;grid-template-columns:1fr auto}.event-row span:nth-child(2){grid-column:1 / -1}}
|