Improve dashboard risk card styling, colors, and add risk control docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-29 22:14:11 +08:00
parent d8c6428eb5
commit 9a10ac8a51
6 changed files with 243 additions and 27 deletions
+84 -7
View File
@@ -75,10 +75,26 @@
-webkit-overflow-scrolling: touch;
}
.dashboard-risk-heading {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.35rem;
}
.dash-risk-doc-ref {
font-size: 0.72rem;
font-weight: 400;
}
.dash-risk-doc-ref code {
font-size: 0.68rem;
}
.dashboard-risk-item {
flex: 1 1 0;
min-width: 5.8rem;
padding: 0.45rem 0.55rem;
min-width: 6.4rem;
padding: 0.5rem 0.6rem;
text-align: center;
border-right: 1px solid var(--table-border);
}
@@ -88,21 +104,71 @@
}
.dashboard-risk-label {
font-size: 0.62rem;
line-height: 1.3;
font-size: 0.74rem;
line-height: 1.35;
color: var(--text-muted);
white-space: nowrap;
}
.dashboard-risk-value {
font-size: 0.8rem;
font-size: 0.92rem;
font-weight: 600;
color: var(--text-title);
margin-top: 0.18rem;
margin-top: 0.22rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dashboard-risk-value.risk-switch-on {
color: var(--profit);
}
.dashboard-risk-value.risk-switch-off {
color: var(--loss);
}
.dashboard-risk-value.risk-cap-single {
color: #5eb8ff;
}
[data-theme="light"] .dashboard-risk-value.risk-cap-single {
color: #1d4ed8;
}
.dashboard-risk-value.risk-cap-roll {
color: #c4a035;
}
[data-theme="light"] .dashboard-risk-value.risk-cap-roll {
color: #b45309;
}
.dashboard-risk-value .risk-margin-safe {
color: var(--profit);
}
.dashboard-risk-value .risk-margin-warn {
color: var(--planned-text);
}
.dashboard-risk-value .risk-margin-over {
color: var(--loss);
}
.dashboard-risk-value .risk-margin-sep {
color: var(--text-muted);
font-weight: 400;
}
.dashboard-risk-value .risk-margin-cap-inline {
color: #5eb8ff;
font-weight: 600;
}
[data-theme="light"] .dashboard-risk-value .risk-margin-cap-inline {
color: #1d4ed8;
}
.dashboard-risk-grid .stat-item {
min-width: 5.5rem;
}
@@ -131,10 +197,21 @@
vertical-align: middle;
}
.dashboard-table .badge.dir {
.dashboard-table .badge.dir-long,
.dashboard-table .badge.dir-short {
font-size: 0.72rem;
}
.dashboard-table .badge.dir-long {
background: var(--profit-bg);
color: var(--profit);
}
.dashboard-table .badge.dir-short {
background: var(--loss-bg);
color: var(--loss);
}
.dashboard-table {
width: 100%;
border-collapse: collapse;