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

Add cumulative P&L banner to fund overview for at-a-glance profit/loss.

Browse Source 
Expose period delta from equity curve start and surface it in the toolbar and summary cards with green/red cues.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-16 00:19:43 +08:00
parent 83a7465996
commit 717a3d5694
6 changed files with 223 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+105 -1
View File
@@ -7266,6 +7266,10 @@ html[data-theme="light"] .funds-stage {
50% { opacity: 0.55; transform: scale(0.88); }
}
.funds-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-bottom: 14px;
}
.funds-btn-refresh {
@@ -7273,15 +7277,115 @@ html[data-theme="light"] .funds-stage {
letter-spacing: 0.06em;
font-size: 0.72rem;
}
.funds-pnl-banner {
flex: 1 1 240px;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
padding: 10px 14px;
border-radius: var(--radius);
border: 1px solid var(--border-soft);
background: rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .funds-pnl-banner {
background: rgba(255, 255, 255, 0.82);
}
.funds-pnl-banner.is-pos {
border-color: color-mix(in srgb, var(--green) 45%, var(--border-soft));
background: color-mix(in srgb, var(--green) 10%, rgba(0, 0, 0, 0.28));
box-shadow: inset 0 0 28px color-mix(in srgb, var(--green) 8%, transparent);
}
.funds-pnl-banner.is-neg {
border-color: color-mix(in srgb, var(--red) 45%, var(--border-soft));
background: color-mix(in srgb, var(--red) 10%, rgba(0, 0, 0, 0.28));
box-shadow: inset 0 0 28px color-mix(in srgb, var(--red) 8%, transparent);
}
html[data-theme="light"] .funds-pnl-banner.is-pos {
background: color-mix(in srgb, var(--green) 8%, rgba(255, 255, 255, 0.9));
}
html[data-theme="light"] .funds-pnl-banner.is-neg {
background: color-mix(in srgb, var(--red) 8%, rgba(255, 255, 255, 0.9));
}
.funds-pnl-main {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
min-width: 0;
}
.funds-pnl-label {
font-family: var(--display);
font-size: 0.62rem;
letter-spacing: 0.12em;
color: var(--muted);
text-transform: uppercase;
}
.funds-pnl-value {
font-family: var(--font);
font-variant-numeric: tabular-nums;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.1;
}
.funds-pnl-pct {
font-family: var(--mono);
font-size: 0.85rem;
font-weight: 600;
opacity: 0.92;
}
.funds-pnl-value.pos,
.funds-pnl-pct.pos,
.funds-pnl-side-val.pos {
color: var(--green);
}
.funds-pnl-value.neg,
.funds-pnl-pct.neg,
.funds-pnl-side-val.neg {
color: var(--red);
}
.funds-pnl-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
padding-left: 12px;
border-left: 1px solid var(--border-soft);
}
.funds-pnl-side-label {
font-family: var(--display);
font-size: 0.58rem;
letter-spacing: 0.1em;
color: var(--muted);
text-transform: uppercase;
}
.funds-pnl-side-val {
font-family: var(--font);
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
font-weight: 600;
}
.funds-status.err {
color: var(--red);
}
.funds-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.funds-stat-card-pnl .funds-stat-val {
font-size: 1.35rem;
}
.funds-stat-sub {
margin-top: 4px;
font-size: 0.72rem;
font-family: var(--mono);
color: var(--muted);
}
.funds-stat-card {
position: relative;
background: rgba(0, 0, 0, 0.28);