9 lines
2.5 KiB
CSS
9 lines
2.5 KiB
CSS
:root { color: #e7edf6; background: #0e1521; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
|
|
* { box-sizing: border-box; } body { margin: 0; } a { color: #a9ccff; text-decoration: none; } a:hover { text-decoration: underline; }
|
|
.shell { max-width: 1240px; padding: 0 28px 48px; margin: auto; } header { min-height: 70px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid #263446; margin-bottom: 44px; } .brand { color:#fff; font-weight:700; font-size:18px; } nav { display:flex; gap:24px; } nav a { color:#91a2b8; padding:24px 0; } nav a.active { color:#fff; border-bottom:2px solid #58a6ff; }
|
|
.title { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; } h1 { margin:0; font-size:28px; } h2 { margin:38px 0 14px; font-size:18px; } p { color:#91a2b8; margin:7px 0 0; } button { border:1px solid #3c6d9d; color:#dbeafe; background:#17395b; border-radius:6px; padding:9px 13px; cursor:pointer; }
|
|
.cards { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; } .cards article, .details > div { background:#151f2e; border:1px solid #263446; border-radius:8px; padding:18px; min-height:94px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; } small { color:#91a2b8; font-size:12px; } strong { font-size:23px; }
|
|
.status { display:inline-flex; width:max-content; align-items:center; gap:6px; border-radius:999px; padding:4px 9px; font-size:11px; font-weight:700; letter-spacing:.03em; } .status--good { color:#8ee6bb; background:#123c2c; } .status--pending { color:#ffd98a; background:#493718; } .status--bad { color:#ffabb0; background:#48232b; }
|
|
.table-wrap { overflow-x:auto; border:1px solid #263446; border-radius:8px; background:#151f2e; } table { width:100%; border-collapse:collapse; min-width:750px; } th,td { padding:14px 16px; text-align:left; border-bottom:1px solid #263446; font-size:14px; } th { color:#91a2b8; font-size:11px; text-transform:uppercase; letter-spacing:.05em; } tbody tr:last-child td { border-bottom:0; } .details { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .details span { word-break:break-word; } .loading,.error { padding:20px; background:#151f2e; border-radius:8px; } .error { color:#ffabb0; }
|
|
@media (max-width: 760px) { .shell { padding:0 16px 32px; } header { margin-bottom:28px; } .cards,.details { grid-template-columns:repeat(2, 1fr); } nav { gap:12px; } } @media (max-width: 440px) { .cards,.details { grid-template-columns:1fr; } }
|