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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user