Monitor: card icons + status accent borders

varaverk.css:
  .vv-ico — icon wrapper (inline-flex, opacity 0.38, flex-shrink:0)
  .vv-accent-ok/warn/err — left border colour overrides for state cards
  Smooth 0.5s transition on border-left-color for all monitor cards

monitor.php:
  All 14 card headers now have inline SVG icons:
    System (existing server), Power (existing bolt), CPU (chip+pins),
    Memory (RAM stick), Network (switch tree), Scripts (terminal),
    Fallback (shield), Partner (two servers linked), Containers (layers),
    GPU (PCIe card), Transcode (film→encode→strip), Streams (play ▶),
    Watchdog (eye), Parity (✓ circle), Pools (cylinder), Array (drive stack)

  Status accent borders applied by JS after each render:
    Fallback — ok:NORMAL, err:FAILOVER, warn:NO_INTERNET/DARK
    Partner  — ok:any remote online, warn:all offline
    Watchdog — ok:healthy, err:reboots/OOM/daemon, warn:other issues
    Array    — ok:STARTED, err:any other state
This commit is contained in:
Gmer4Lfe
2026-05-30 17:08:59 -04:00
parent da3d402f1a
commit d56b02e410
2 changed files with 133 additions and 16 deletions
+9
View File
@@ -27,6 +27,15 @@
.vv-card:hover .vv-card-cog { color: #4a4a4a; }
.vv-card-cog:hover { color: #aaa !important; background: #333; }
/* Card header icon wrapper */
.vv-ico { display:inline-flex; align-items:center; opacity:0.38; flex-shrink:0; }
/* Status accent — left border colour for state-driven cards */
.vv-accent-ok { border-left-color: #2a5a2a !important; }
.vv-accent-warn { border-left-color: #5a4000 !important; }
.vv-accent-err { border-left-color: #5a1e1e !important; }
#vv-monitor .vv-card { transition: border-left-color 0.5s; }
/* Status banner — coloured strip at top of card body */
.vv-banner { border-radius: 4px; padding: 5px 10px; margin-bottom: 10px;
display: flex; align-items: center; justify-content: space-between;