dekun/eth_hedge_sim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cyber theme for control UI, faster status flicker, center table text.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-08-02 12:13:57 +08:00
parent ec3156021a
commit d210db19cf
1 changed files with 119 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/styles.css
+119 -53
View File
@@ -1,18 +1,26 @@
:root { :root {
--bg: #0f1419; --bg: #05080f;
--panel: #1a222c; --panel: rgba(10, 18, 32, 0.92);
--line: #2a3542; --line: rgba(0, 229, 255, 0.18);
--text: #e8eef4; --text: #e6f7ff;
--muted: #8b9aab; --muted: #7a93a8;
--accent: #3d9cf0; --accent: #00c8ff;
--ok: #3cb371; --accent-2: #39ff14;
--bad: #e35d5d; --ok: #39ff14;
--pnl-pos: #2ee59a; --bad: #ff2d55;
--pnl-neg: #ff5c5c; --pnl-pos: #39ff14;
--radius: 10px; --pnl-neg: #ff2d55;
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --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); 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 { body {
margin: 0; margin: 0;
min-height: 100vh; 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 { .shell {
@@ -38,12 +51,18 @@ body {
gap: 20px; gap: 20px;
margin-bottom: 20px; margin-bottom: 20px;
flex-wrap: wrap; flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(0, 200, 255, 0.08);
} }
.brand { .brand {
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.08em;
font-size: 1.15rem; font-size: 1.15rem;
color: var(--accent);
text-shadow: var(--glow);
text-transform: none;
} }
.nav { .nav {
@@ -55,13 +74,17 @@ body {
color: var(--muted); color: var(--muted);
text-decoration: none; text-decoration: none;
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px; border-radius: 6px;
border: 1px solid transparent;
letter-spacing: 0.04em;
} }
.nav a.active, .nav a.active,
.nav a:hover { .nav a:hover {
color: var(--text); color: var(--accent);
background: var(--panel); background: rgba(0, 200, 255, 0.08);
border-color: rgba(0, 200, 255, 0.35);
box-shadow: var(--glow);
} }
.header-right { .header-right {
@@ -91,13 +114,16 @@ body {
} }
.btn { .btn {
border: 0; border: 1px solid rgba(0, 200, 255, 0.45);
background: var(--accent); background: linear-gradient(180deg, rgba(0, 180, 255, 0.85), rgba(0, 120, 200, 0.95));
color: #fff; color: #041018;
font-weight: 650;
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
box-shadow: var(--glow);
letter-spacing: 0.03em;
} }
.btn:disabled { .btn:disabled {
@@ -106,9 +132,15 @@ body {
} }
.btn.ghost { .btn.ghost {
background: transparent; background: rgba(0, 20, 36, 0.6);
color: var(--text); color: var(--accent);
border: 1px solid var(--line); 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 { .err {
@@ -212,8 +244,13 @@ input {
overflow: auto; overflow: auto;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: var(--radius); border-radius: var(--radius);
background: var(--panel); background:
linear-gradient(180deg, rgba(0, 200, 255, 0.06), transparent 28%),
var(--panel);
width: 100%; 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 { .monitor-table {
@@ -227,19 +264,21 @@ input {
.monitor-table th, .monitor-table th,
.monitor-table td { .monitor-table td {
padding: 12px 14px; padding: 12px 14px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid rgba(0, 229, 255, 0.1);
text-align: left; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
} }
.monitor-table th { .monitor-table th {
color: var(--muted); color: var(--accent);
font-weight: 600; font-weight: 650;
background: rgba(255, 255, 255, 0.03); letter-spacing: 0.06em;
background: rgba(0, 40, 60, 0.55);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
text-shadow: 0 0 8px rgba(0, 200, 255, 0.35);
} }
.monitor-table tbody tr { .monitor-table tbody tr {
@@ -247,24 +286,33 @@ input {
} }
.monitor-table tbody tr:hover { .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 { .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 { .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 { .monitor-table .col-check {
width: 40px; width: 40px;
text-align: center;
} }
.monitor-table .col-status { .monitor-table .col-status {
width: 88px; width: 96px;
} }
.monitor-table .col-actions { .monitor-table .col-actions {
@@ -274,12 +322,16 @@ input {
.status-dots { .status-dots {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center;
gap: 8px; gap: 8px;
} }
.machine-name { .machine-name {
font-weight: 650; font-weight: 700;
font-size: 0.95rem; font-size: 0.95rem;
letter-spacing: 0.04em;
color: #dff6ff;
text-shadow: 0 0 8px rgba(0, 200, 255, 0.25);
} }
.dot { .dot {
@@ -291,27 +343,28 @@ input {
} }
.dot.ok { .dot.ok {
background: var(--ok, #3cb371); background: var(--ok);
box-shadow: 0 0 0 2px rgba(60, 179, 113, 0.25); box-shadow: var(--glow-ok);
} }
.dot.bad { .dot.bad {
background: var(--bad, #e35d5d); background: var(--bad);
box-shadow: 0 0 0 2px rgba(227, 93, 93, 0.25); box-shadow: var(--glow-bad);
} }
.dot.warn { .dot.warn {
background: #e6a23c; background: #ffcc33;
box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.3); box-shadow: 0 0 10px rgba(255, 204, 51, 0.55);
} }
.dot.muted { .dot.muted {
background: #5a6570; background: #4a5a68;
box-shadow: 0 0 0 2px rgba(90, 101, 112, 0.25); box-shadow: 0 0 6px rgba(120, 140, 160, 0.35);
} }
/* 似闪非闪：短周期 + 交错相位 */
.dot.pulse { .dot.pulse {
animation: status-blink 1.4s ease-in-out infinite; animation: status-flicker 0.28s steps(2, end) infinite;
} }
.dot.pulse.d1 { .dot.pulse.d1 {
@@ -319,24 +372,33 @@ input {
} }
.dot.pulse.d2 { .dot.pulse.d2 {
animation-delay: 0.25s; animation-delay: 0.09s;
animation-duration: 0.22s;
} }
.dot.pulse.d3 { .dot.pulse.d3 {
animation-delay: 0.5s; animation-delay: 0.05s;
animation-duration: 0.18s;
} }
@keyframes status-blink { @keyframes status-flicker {
0%, 0%,
100% { 100% {
opacity: 1; opacity: 1;
transform: scale(1); filter: brightness(1.35);
filter: brightness(1.15); 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; opacity: 0.35;
transform: scale(0.85);
filter: brightness(0.85);
} }
} }
@@ -350,6 +412,7 @@ input {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 6px;
justify-content: center;
} }
.btn-sm { .btn-sm {
@@ -403,7 +466,10 @@ input {
} }
.btn-running { .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; cursor: default;
} }