From d210db19cf1928f7b7e434ba1b9a18af290e00e2 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sun, 2 Aug 2026 12:13:57 +0800
Subject: [PATCH] Cyber theme for control UI, faster status flicker, center
 table text.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 control/frontend/src/styles.css | 172 ++++++++++++++++++++++----------
 1 file changed, 119 insertions(+), 53 deletions(-)

diff --git a/control/frontend/src/styles.css b/control/frontend/src/styles.css
index 0364f45..aaac805 100644
--- a/control/frontend/src/styles.css
+++ b/control/frontend/src/styles.css
@@ -1,18 +1,26 @@
 :root {
-  --bg: #0f1419;
-  --panel: #1a222c;
-  --line: #2a3542;
-  --text: #e8eef4;
-  --muted: #8b9aab;
-  --accent: #3d9cf0;
-  --ok: #3cb371;
-  --bad: #e35d5d;
-  --pnl-pos: #2ee59a;
-  --pnl-neg: #ff5c5c;
-  --radius: 10px;
-  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --bg: #05080f;
+  --panel: rgba(10, 18, 32, 0.92);
+  --line: rgba(0, 229, 255, 0.18);
+  --text: #e6f7ff;
+  --muted: #7a93a8;
+  --accent: #00c8ff;
+  --accent-2: #39ff14;
+  --ok: #39ff14;
+  --bad: #ff2d55;
+  --pnl-pos: #39ff14;
+  --pnl-neg: #ff2d55;
+  --radius: 8px;
+  --glow: 0 0 12px rgba(0, 200, 255, 0.35);
+  --glow-ok: 0 0 10px rgba(57, 255, 20, 0.55);
+  --glow-bad: 0 0 10px rgba(255, 45, 85, 0.5);
+  font-family: "Consolas", "Cascadia Mono", "Segoe UI", "PingFang SC",
+    "Microsoft YaHei", monospace;
   color: var(--text);
-  background: radial-gradient(1200px 600px at 10% -10%, #1a3048, var(--bg));
+  background:
+    radial-gradient(900px 480px at 8% -8%, rgba(0, 120, 180, 0.28), transparent 55%),
+    radial-gradient(700px 420px at 92% 0%, rgba(0, 255, 140, 0.08), transparent 50%),
+    linear-gradient(180deg, #071018 0%, var(--bg) 40%, #04060c 100%);
 }
 
 * {
@@ -22,6 +30,11 @@
 body {
   margin: 0;
   min-height: 100vh;
+  background-image:
+    linear-gradient(rgba(0, 200, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 200, 255, 0.03) 1px, transparent 1px);
+  background-size: 48px 48px;
+  background-attachment: fixed;
 }
 
 .shell {
@@ -38,12 +51,18 @@ body {
   gap: 20px;
   margin-bottom: 20px;
   flex-wrap: wrap;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--line);
+  box-shadow: 0 1px 0 rgba(0, 200, 255, 0.08);
 }
 
 .brand {
   font-weight: 700;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.08em;
   font-size: 1.15rem;
+  color: var(--accent);
+  text-shadow: var(--glow);
+  text-transform: none;
 }
 
 .nav {
@@ -55,13 +74,17 @@ body {
   color: var(--muted);
   text-decoration: none;
   padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  letter-spacing: 0.04em;
 }
 
 .nav a.active,
 .nav a:hover {
-  color: var(--text);
-  background: var(--panel);
+  color: var(--accent);
+  background: rgba(0, 200, 255, 0.08);
+  border-color: rgba(0, 200, 255, 0.35);
+  box-shadow: var(--glow);
 }
 
 .header-right {
@@ -91,13 +114,16 @@ body {
 }
 
 .btn {
-  border: 0;
-  background: var(--accent);
-  color: #fff;
+  border: 1px solid rgba(0, 200, 255, 0.45);
+  background: linear-gradient(180deg, rgba(0, 180, 255, 0.85), rgba(0, 120, 200, 0.95));
+  color: #041018;
+  font-weight: 650;
   padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font: inherit;
+  box-shadow: var(--glow);
+  letter-spacing: 0.03em;
 }
 
 .btn:disabled {
@@ -106,9 +132,15 @@ body {
 }
 
 .btn.ghost {
-  background: transparent;
-  color: var(--text);
+  background: rgba(0, 20, 36, 0.6);
+  color: var(--accent);
   border: 1px solid var(--line);
+  box-shadow: none;
+}
+
+.btn.ghost:hover:not(:disabled) {
+  border-color: rgba(0, 200, 255, 0.55);
+  box-shadow: var(--glow);
 }
 
 .err {
@@ -212,8 +244,13 @@ input {
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  background: var(--panel);
+  background:
+    linear-gradient(180deg, rgba(0, 200, 255, 0.06), transparent 28%),
+    var(--panel);
   width: 100%;
+  box-shadow:
+    0 0 0 1px rgba(0, 200, 255, 0.08),
+    0 0 28px rgba(0, 140, 255, 0.12);
 }
 
 .monitor-table {
@@ -227,19 +264,21 @@ input {
 .monitor-table th,
 .monitor-table td {
   padding: 12px 14px;
-  border-bottom: 1px solid var(--line);
-  text-align: left;
+  border-bottom: 1px solid rgba(0, 229, 255, 0.1);
+  text-align: center;
   white-space: nowrap;
   vertical-align: middle;
 }
 
 .monitor-table th {
-  color: var(--muted);
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.03);
+  color: var(--accent);
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  background: rgba(0, 40, 60, 0.55);
   position: sticky;
   top: 0;
   z-index: 1;
+  text-shadow: 0 0 8px rgba(0, 200, 255, 0.35);
 }
 
 .monitor-table tbody tr {
@@ -247,24 +286,33 @@ input {
 }
 
 .monitor-table tbody tr:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(0, 200, 255, 0.06);
 }
 
 .monitor-table tbody tr.is-running {
-  box-shadow: inset 3px 0 0 rgba(60, 179, 113, 0.85);
+  box-shadow: inset 3px 0 0 var(--ok);
+  background: linear-gradient(
+    90deg,
+    rgba(57, 255, 20, 0.08),
+    transparent 28%
+  );
 }
 
 .monitor-table tbody tr.is-stopped {
-  box-shadow: inset 3px 0 0 rgba(227, 93, 93, 0.75);
+  box-shadow: inset 3px 0 0 var(--bad);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 45, 85, 0.07),
+    transparent 28%
+  );
 }
 
 .monitor-table .col-check {
   width: 40px;
-  text-align: center;
 }
 
 .monitor-table .col-status {
-  width: 88px;
+  width: 96px;
 }
 
 .monitor-table .col-actions {
@@ -274,12 +322,16 @@ input {
 .status-dots {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
 }
 
 .machine-name {
-  font-weight: 650;
+  font-weight: 700;
   font-size: 0.95rem;
+  letter-spacing: 0.04em;
+  color: #dff6ff;
+  text-shadow: 0 0 8px rgba(0, 200, 255, 0.25);
 }
 
 .dot {
@@ -291,27 +343,28 @@ input {
 }
 
 .dot.ok {
-  background: var(--ok, #3cb371);
-  box-shadow: 0 0 0 2px rgba(60, 179, 113, 0.25);
+  background: var(--ok);
+  box-shadow: var(--glow-ok);
 }
 
 .dot.bad {
-  background: var(--bad, #e35d5d);
-  box-shadow: 0 0 0 2px rgba(227, 93, 93, 0.25);
+  background: var(--bad);
+  box-shadow: var(--glow-bad);
 }
 
 .dot.warn {
-  background: #e6a23c;
-  box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.3);
+  background: #ffcc33;
+  box-shadow: 0 0 10px rgba(255, 204, 51, 0.55);
 }
 
 .dot.muted {
-  background: #5a6570;
-  box-shadow: 0 0 0 2px rgba(90, 101, 112, 0.25);
+  background: #4a5a68;
+  box-shadow: 0 0 6px rgba(120, 140, 160, 0.35);
 }
 
+/* 似闪非闪：短周期 + 交错相位 */
 .dot.pulse {
-  animation: status-blink 1.4s ease-in-out infinite;
+  animation: status-flicker 0.28s steps(2, end) infinite;
 }
 
 .dot.pulse.d1 {
@@ -319,24 +372,33 @@ input {
 }
 
 .dot.pulse.d2 {
-  animation-delay: 0.25s;
+  animation-delay: 0.09s;
+  animation-duration: 0.22s;
 }
 
 .dot.pulse.d3 {
-  animation-delay: 0.5s;
+  animation-delay: 0.05s;
+  animation-duration: 0.18s;
 }
 
-@keyframes status-blink {
+@keyframes status-flicker {
   0%,
   100% {
     opacity: 1;
-    transform: scale(1);
-    filter: brightness(1.15);
+    filter: brightness(1.35);
+    transform: scale(1.05);
   }
-  50% {
+  40% {
+    opacity: 0.15;
+    filter: brightness(0.7);
+    transform: scale(0.92);
+  }
+  55% {
+    opacity: 1;
+    filter: brightness(1.5);
+  }
+  70% {
     opacity: 0.35;
-    transform: scale(0.85);
-    filter: brightness(0.85);
   }
 }
 
@@ -350,6 +412,7 @@ input {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
+  justify-content: center;
 }
 
 .btn-sm {
@@ -403,7 +466,10 @@ input {
 }
 
 .btn-running {
-  background: rgba(60, 179, 113, 0.85) !important;
+  background: linear-gradient(180deg, rgba(57, 255, 20, 0.95), rgba(20, 160, 40, 0.95)) !important;
+  border-color: rgba(57, 255, 20, 0.65) !important;
+  color: #041208 !important;
+  box-shadow: var(--glow-ok) !important;
   cursor: default;
 }