Polish option close depth display.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-11 08:57:19 +08:00
parent 6e45604d93
commit e8a55a0f85
3 changed files with 218 additions and 7 deletions
+167
View File
@@ -3597,6 +3597,173 @@ html[data-theme="light"] .options-estimate-row {
.options-page-wrap .opt-pos-card .pos-value {
font-size: 0.78rem;
}
.options-page-wrap .opt-pos-cell--depth {
grid-column: span 2;
}
.options-page-wrap .opt-bid-depth {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
}
.options-page-wrap .opt-bid-level {
display: inline-grid;
grid-template-columns: auto auto auto;
align-items: center;
gap: 4px;
min-height: 24px;
padding: 3px 7px;
border: 1px solid rgba(82, 101, 143, 0.55);
border-radius: 999px;
background: rgba(18, 24, 37, 0.72);
color: #dbe6ff;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.options-page-wrap .opt-bid-level--best {
border-color: rgba(93, 143, 255, 0.9);
background: linear-gradient(135deg, rgba(47, 86, 170, 0.72), rgba(28, 39, 68, 0.84));
box-shadow: inset 0 0 0 1px rgba(122, 164, 255, 0.1), 0 6px 14px rgba(24, 46, 92, 0.24);
}
.options-page-wrap .opt-bid-rank {
color: #91a4cc;
font-size: 0.64rem;
font-weight: 600;
}
.options-page-wrap .opt-bid-level--best .opt-bid-rank {
color: #c8d8ff;
}
.options-page-wrap .opt-bid-price {
color: #ffffff;
font-weight: 700;
}
.options-page-wrap .opt-bid-size {
color: #93a2bd;
font-size: 0.66rem;
}
.options-page-wrap .opt-close-preview {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-start;
}
.options-page-wrap .opt-close-main {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: #ff7b87;
font-size: 0.9rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1.05;
}
.options-page-wrap .opt-close-main span {
color: #9aa8c2;
font-size: 0.62rem;
font-weight: 600;
}
.options-page-wrap .opt-close-sub {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.options-page-wrap .opt-close-pill,
.options-page-wrap .opt-close-pnl {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 6px;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 650;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.options-page-wrap .opt-close-pill--ok {
color: #9fe6c1;
background: rgba(40, 154, 104, 0.16);
border: 1px solid rgba(67, 190, 128, 0.35);
}
.options-page-wrap .opt-close-pill--warn {
color: #ffd0d5;
background: rgba(214, 80, 96, 0.16);
border: 1px solid rgba(233, 104, 118, 0.35);
}
.options-page-wrap .opt-close-pnl {
color: #9aa8c2;
background: rgba(82, 101, 143, 0.18);
border: 1px solid rgba(82, 101, 143, 0.34);
}
.options-page-wrap .opt-close-pnl.is-profit {
color: #8ce9bb;
}
.options-page-wrap .opt-close-pnl.is-loss {
color: #ff97a2;
}
.options-page-wrap .opt-close-rule {
margin-top: 8px;
padding: 0;
border: 1px solid rgba(67, 82, 118, 0.55);
border-radius: 10px;
background: rgba(14, 19, 30, 0.58);
overflow: hidden;
}
.options-page-wrap .opt-close-rule summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
color: #c9d6f2;
font-size: 0.72rem;
font-weight: 650;
cursor: pointer;
user-select: none;
list-style: none;
}
.options-page-wrap .opt-close-rule summary::-webkit-details-marker {
display: none;
}
.options-page-wrap .opt-close-rule summary::after {
content: "展开";
padding: 2px 7px;
border-radius: 999px;
background: rgba(82, 101, 143, 0.25);
color: #91a4cc;
font-size: 0.62rem;
font-weight: 600;
}
.options-page-wrap .opt-close-rule[open] summary {
border-bottom: 1px solid rgba(67, 82, 118, 0.45);
background: rgba(28, 38, 60, 0.55);
}
.options-page-wrap .opt-close-rule[open] summary::after {
content: "收起";
}
.options-page-wrap .opt-close-rule-body {
padding: 8px 10px 10px;
color: #96a4bf;
font-size: 0.7rem;
line-height: 1.55;
}
.options-page-wrap .opt-close-rule-body p {
margin: 0 0 6px;
color: #b6c2dc;
}
.options-page-wrap .opt-close-rule-body ul {
margin: 0;
padding-left: 16px;
}
.options-page-wrap .opt-close-rule-body li + li {
margin-top: 3px;
}
.options-page-wrap .opt-close-rule-body code {
color: #dbe6ff;
background: rgba(82, 101, 143, 0.22);
border-radius: 4px;
padding: 1px 4px;
}
.options-page-wrap .pos-empty {
padding: 10px;
font-size: 0.72rem;