From 4cb0e89e92e2b0ff97e3ccb26449edff0a07430d Mon Sep 17 00:00:00 2001
From: Kroonk <Tom.misch2@gmail.com>
Date: Thu, 21 May 2026 18:09:31 +0200
Subject: [PATCH] style: minimalist design for services status board with
 tooltip and horizontal traffic-light bars

---
 admin.html |   2 +-
 admin.js   |  16 +++----
 style.css  | 137 +++++++++++++----------------------------------------
 3 files changed, 40 insertions(+), 115 deletions(-)

diff --git a/admin.html b/admin.html
index dd912cf..c4ec349 100644
--- a/admin.html
+++ b/admin.html
@@ -94,6 +94,6 @@
         </section>
     </main>
 
-    <script src="/admin.js?v=12" defer></script>
+    <script src="/admin.js?v=13" defer></script>
 </body>
 </html>
diff --git a/admin.js b/admin.js
index e7e821f..c6a4431 100644
--- a/admin.js
+++ b/admin.js
@@ -383,17 +383,13 @@ function renderServicesStatus(services = []) {
       statusLabel = 'Traege';
     }
 
+    const tooltip = `${item.name}\nDomain: ${item.domain}\nStatus: ${statusLabel}\nLatenz: ${latencyText}`;
+
     return `
-      <div class="status-board-item ${statusClass}">
-        <div class="status-board-item-header">
-          <h4>${item.name}</h4>
-          <span class="status-board-item-latency">${latencyText}</span>
-        </div>
-        <div class="status-board-item-body">
-          <span class="status-board-item-domain">${item.domain}</span>
-          <div class="status-board-item-info">
-            <span class="status-board-item-status">${statusLabel}</span>
-          </div>
+      <div class="status-board-item ${statusClass}" title="${tooltip}">
+        <h4>${item.name}</h4>
+        <div class="status-board-item-bar">
+          <div class="status-board-item-bar-inner"></div>
         </div>
       </div>
     `;
diff --git a/style.css b/style.css
index 26ce6eb..4e72849 100644
--- a/style.css
+++ b/style.css
@@ -915,138 +915,67 @@ main {
    ========================================================================== */
 .services-status-board {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 12px;
-    margin-top: 6px;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    gap: 12px 14px;
+    margin-top: 8px;
+    padding: 2px 0;
 }
 
 .status-board-item {
     display: flex;
     flex-direction: column;
-    padding: 13px 14px;
-    background: rgba(14, 19, 31, 0.45);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    transition: all 0.22s cubic-bezier(0.165, 0.84, 0.44, 1);
-    position: relative;
-    overflow: hidden;
+    gap: 5px;
+    cursor: help;
 }
 
-.status-board-item:hover {
-    background: rgba(23, 29, 45, 0.65);
-    border-color: var(--border-strong);
-    transform: translateY(-2px);
-}
-
-.status-board-item-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    margin-bottom: 5px;
-}
-
-.status-board-item-header h4 {
+.status-board-item h4 {
     margin: 0;
-    font-size: 0.92rem;
-    font-weight: 650;
-    color: var(--text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.status-board-item-body {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.status-board-item-domain {
-    font-size: 0.76rem;
+    font-size: 0.78rem;
+    font-weight: 500;
     color: var(--muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    transition: color 0.15s ease;
 }
 
-.status-board-item-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 6px;
-    font-size: 0.78rem;
+.status-board-item:hover h4 {
+    color: var(--text);
 }
 
-.status-board-item-status {
-    font-weight: 650;
-    font-size: 0.78rem;
+.status-board-item-bar {
+    height: 4px;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 2px;
+    overflow: hidden;
 }
 
-.status-board-item-latency {
-    font-size: 0.74rem;
-    color: var(--dim);
-}
-
-/* Status styles with glowing left bars */
-.status-board-item.is-online {
-    border-color: rgba(52, 211, 153, 0.16);
-    background: rgba(16, 185, 129, 0.02);
-}
-.status-board-item.is-online .status-board-item-status {
-    color: var(--ok);
-}
-.status-board-item.is-online::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 3px;
+.status-board-item-bar-inner {
     height: 100%;
-    background: var(--ok);
-    box-shadow: 0 0 8px var(--ok);
+    width: 100%;
+    border-radius: inherit;
+    transition: background-color 0.25s ease;
 }
 
-.status-board-item.is-offline {
-    border-color: rgba(239, 68, 68, 0.3);
-    background: rgba(239, 68, 68, 0.05);
-}
-.status-board-item.is-offline .status-board-item-status {
-    color: var(--down);
-}
-.status-board-item.is-offline::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 3px;
-    height: 100%;
-    background: var(--down);
-    box-shadow: 0 0 8px var(--down);
+/* Subtle traffic light colors without glows */
+.status-board-item.is-online .status-board-item-bar-inner {
+    background-color: var(--ok);
 }
 
-.status-board-item.is-warning {
-    border-color: rgba(245, 158, 11, 0.25);
-    background: rgba(245, 158, 11, 0.04);
+.status-board-item.is-offline .status-board-item-bar-inner {
+    background-color: var(--down);
 }
-.status-board-item.is-warning .status-board-item-status {
-    color: var(--warn);
-}
-.status-board-item.is-warning::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 3px;
-    height: 100%;
-    background: var(--warn);
-    box-shadow: 0 0 8px var(--warn);
+
+.status-board-item.is-warning .status-board-item-bar-inner {
+    background-color: var(--warn);
 }
 
 @media (max-width: 620px) {
     .services-status-board {
-        grid-template-columns: 1fr;
-        gap: 8px;
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        gap: 10px 10px;
     }
 }
 
+