Cyber theme for control UI, faster status flicker, center table text.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+119
-53
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user