|
@@ -110,13 +110,12 @@ onUnmounted(() => clearInterval(timer))
|
|
|
/* === Theme tokens === */
|
|
/* === Theme tokens === */
|
|
|
.monitor {
|
|
.monitor {
|
|
|
--bg: #0c1922;
|
|
--bg: #0c1922;
|
|
|
- --panel: #111f2b;
|
|
|
|
|
- --text: #d4dfe8;
|
|
|
|
|
- --muted: #6b7f94;
|
|
|
|
|
- --green: #00d68f;
|
|
|
|
|
|
|
+ --panel: #152534;
|
|
|
|
|
+ --text: #e2ecf5;
|
|
|
|
|
+ --muted: #8ca8c4;
|
|
|
|
|
+ --green: #00e6a0;
|
|
|
--amber: #fca33b;
|
|
--amber: #fca33b;
|
|
|
--red: #ff4757;
|
|
--red: #ff4757;
|
|
|
- --cyber: #00d68f;
|
|
|
|
|
|
|
|
|
|
background: var(--bg);
|
|
background: var(--bg);
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
@@ -141,7 +140,7 @@ onUnmounted(() => clearInterval(timer))
|
|
|
box-shadow: 0 0 6px var(--green);
|
|
box-shadow: 0 0 6px var(--green);
|
|
|
}
|
|
}
|
|
|
.is-critical .bar-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
|
.is-critical .bar-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
|
|
-.bar-label { font-size: 16px; font-weight: 600; letter-spacing: .04em; }
|
|
|
|
|
|
|
+.bar-label { font-size: 17px; font-weight: 700; letter-spacing: .04em; color: #e8f0f8; }
|
|
|
.bar-right { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
|
|
.bar-right { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
|
|
|
.bar-status { color: var(--green); }
|
|
.bar-status { color: var(--green); }
|
|
|
.is-critical .bar-status { color: var(--red); }
|
|
.is-critical .bar-status { color: var(--red); }
|
|
@@ -172,8 +171,8 @@ onUnmounted(() => clearInterval(timer))
|
|
|
|
|
|
|
|
/* Label */
|
|
/* Label */
|
|
|
.readout-label {
|
|
.readout-label {
|
|
|
- font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
|
|
|
|
|
- color: var(--muted); margin: 0 0 10px; font-weight: 500;
|
|
|
|
|
|
|
+ font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
|
|
|
|
|
+ color: #a0bedb; margin: 0 0 10px; font-weight: 600;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Value */
|
|
/* Value */
|
|
@@ -208,8 +207,8 @@ onUnmounted(() => clearInterval(timer))
|
|
|
padding: 20px 24px 16px;
|
|
padding: 20px 24px 16px;
|
|
|
}
|
|
}
|
|
|
.panel-title {
|
|
.panel-title {
|
|
|
- margin: 0 0 14px; font-size: 12px; text-transform: uppercase;
|
|
|
|
|
- letter-spacing: .1em; color: var(--muted); font-weight: 500;
|
|
|
|
|
|
|
+ margin: 0 0 14px; font-size: 13px; text-transform: uppercase;
|
|
|
|
|
+ letter-spacing: .08em; color: #a0bedb; font-weight: 600;
|
|
|
}
|
|
}
|
|
|
.device-grid {
|
|
.device-grid {
|
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
|
|
@@ -227,13 +226,13 @@ onUnmounted(() => clearInterval(timer))
|
|
|
box-shadow: 0 0 5px var(--green); flex-shrink: 0;
|
|
box-shadow: 0 0 5px var(--green); flex-shrink: 0;
|
|
|
}
|
|
}
|
|
|
.device-indicator.offline { background: var(--red); box-shadow: 0 0 5px var(--red); }
|
|
.device-indicator.offline { background: var(--red); box-shadow: 0 0 5px var(--red); }
|
|
|
-.device-channel { font-weight: 600; font-size: 13px; min-width: 80px; }
|
|
|
|
|
|
|
+.device-channel { font-weight: 600; font-size: 13px; min-width: 80px; color: #dce8f2; }
|
|
|
.device-dir {
|
|
.device-dir {
|
|
|
- font-size: 11px; color: var(--muted); background: #162330;
|
|
|
|
|
|
|
+ font-size: 11px; color: #8aa8c2; background: #162330;
|
|
|
padding: 2px 8px; border-radius: 3px;
|
|
padding: 2px 8px; border-radius: 3px;
|
|
|
}
|
|
}
|
|
|
-.device-name { color: var(--muted); font-size: 13px; margin-left: auto; }
|
|
|
|
|
-.device-empty { color: var(--muted); font-size: 13px; font-style: italic; padding: 8px; }
|
|
|
|
|
|
|
+.device-name { color: #849eb6; font-size: 13px; margin-left: auto; }
|
|
|
|
|
+.device-empty { color: #8aa8c2; font-size: 13px; padding: 8px; }
|
|
|
|
|
|
|
|
/* === Responsive === */
|
|
/* === Responsive === */
|
|
|
@media (max-width: 900px) {
|
|
@media (max-width: 900px) {
|