diff --git a/admin.html b/admin.html index c4ec349..e5dfcec 100644 --- a/admin.html +++ b/admin.html @@ -6,7 +6,7 @@ MischLabs Admin - +
@@ -94,6 +94,6 @@ - + diff --git a/admin.js b/admin.js index c6a4431..aa6a1cf 100644 --- a/admin.js +++ b/admin.js @@ -386,12 +386,12 @@ function renderServicesStatus(services = []) { const tooltip = `${item.name}\nDomain: ${item.domain}\nStatus: ${statusLabel}\nLatenz: ${latencyText}`; return ` -
+

${item.name}

-
+ `; }).join(''); } diff --git a/style.css b/style.css index 4e72849..0792a7f 100644 --- a/style.css +++ b/style.css @@ -915,23 +915,36 @@ main { ========================================================================== */ .services-status-board { display: grid; - grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); - gap: 12px 14px; - margin-top: 8px; + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 10px 12px; + margin-top: 10px; padding: 2px 0; } .status-board-item { display: flex; flex-direction: column; - gap: 5px; - cursor: help; + gap: 8px; + padding: 10px 12px; + background: rgba(17, 22, 36, 0.6); + border: 1px solid var(--border); + border-radius: var(--radius); + text-decoration: none; + color: inherit; + transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; + cursor: pointer; +} + +.status-board-item:hover { + background: rgba(23, 29, 45, 0.85); + border-color: var(--border-strong); + transform: translateY(-1px); } .status-board-item h4 { margin: 0; - font-size: 0.78rem; - font-weight: 500; + font-size: 0.82rem; + font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; @@ -940,14 +953,14 @@ main { } .status-board-item:hover h4 { - color: var(--text); + color: #fff; } .status-board-item-bar { - height: 4px; + height: 6px; width: 100%; background: rgba(255, 255, 255, 0.08); - border-radius: 2px; + border-radius: 999px; overflow: hidden; } @@ -973,8 +986,13 @@ main { @media (max-width: 620px) { .services-status-board { - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - gap: 10px 10px; + grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); + gap: 8px 8px; + } + + .status-board-item { + padding: 8px 10px; + gap: 6px; } }