Options: loosen order dialog spacing and stack mode/note rows.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-20 08:15:55 +08:00
parent 4e614eb9ed
commit 972ef4f910
4 changed files with 139 additions and 64 deletions
+107 -36
View File
@@ -3937,14 +3937,14 @@ html[data-theme="light"] .options-strike-table--t .opt-strike-row-atm td {
display: none !important;
}
.opt-order-dialog {
width: min(96vw, 720px);
width: min(96vw, 760px);
max-height: 92vh;
overflow: auto;
background: var(--card-bg, #121726);
color: inherit;
border: 1px solid rgba(127, 127, 127, 0.35);
border-radius: 12px;
padding: 14px 16px 16px;
border-radius: 14px;
padding: 18px 20px 20px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.opt-order-layout {
@@ -3952,6 +3952,18 @@ html[data-theme="light"] .options-strike-table--t .opt-strike-row-atm td {
}
.opt-order-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.opt-order-dialog #opt-order-inst,
.opt-order-dialog .options-order-inst {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
word-break: break-all;
margin: 0;
}
.opt-order-pending-head {
display: flex;
@@ -4040,48 +4052,73 @@ html[data-theme="light"] .opt-pending-item {
gap: 8px;
margin-bottom: 10px;
}
.opt-order-dialog-head {
margin-bottom: 4px;
}
.opt-order-dialog-head .opt-order-title {
margin: 0;
margin-right: auto;
font-size: 0.95rem;
font-size: 1.02rem;
color: #9ec0ff;
font-weight: 650;
}
.opt-order-dialog-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
gap: 10px;
margin-top: 4px;
}
.opt-order-dialog-actions .btn-primary,
.opt-order-dialog-actions .btn-secondary {
flex: 1 1 140px;
min-height: 38px;
font-size: 0.86rem;
padding: 8px 14px;
}
.opt-order-dialog #opt-order-msg {
margin-top: 2px;
min-height: 1.2em;
line-height: 1.4;
}
.options-order-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin: 10px 0;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 12px 14px;
margin: 0;
padding: 12px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.options-order-grid .k {
display: block;
font-size: 0.68rem;
font-size: 0.7rem;
color: #8892b0;
margin-bottom: 3px;
}
.options-order-grid .v,
.options-page-wrap .options-order-grid .v {
font-size: 0.8rem;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.35;
}
.options-estimate-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin: 0;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.12);
font-size: 0.78rem;
}
.opt-est-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 8px 0 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.08);
font-size: 0.74rem;
gap: 10px 12px;
}
.opt-order-chip {
display: inline-flex;
@@ -4090,11 +4127,20 @@ html[data-theme="light"] .opt-pending-item {
margin: 0;
cursor: pointer;
user-select: none;
font-size: 0.72rem;
padding: 3px 10px;
min-height: 26px;
font-size: 0.76rem;
padding: 6px 12px;
min-height: 32px;
line-height: 1.2;
white-space: nowrap;
border: 1px solid rgba(140, 160, 200, 0.35);
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: inherit;
box-sizing: border-box;
}
.opt-order-chip:hover {
border-color: rgba(140, 170, 230, 0.55);
background: rgba(255, 255, 255, 0.07);
}
.opt-size-mode-chip {
position: relative;
@@ -4116,40 +4162,52 @@ html[data-theme="light"] .opt-pending-item {
box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.45);
}
.options-estimate-row .opt-target-idx {
width: 120px;
font-size: 0.74rem;
padding: 3px 6px;
width: 140px;
font-size: 0.8rem;
padding: 6px 8px;
min-height: 32px;
box-sizing: border-box;
}
.options-estimate-row .k {
color: #8892b0;
}
.options-estimate-row .v {
font-size: 0.82rem;
font-size: 0.86rem;
font-weight: 600;
}
.options-estimate-row .opt-est-note {
font-size: 0.66rem;
display: block;
font-size: 0.7rem;
line-height: 1.45;
opacity: 0.85;
}
html[data-theme="light"] .options-estimate-row {
html[data-theme="light"] .options-estimate-row,
html[data-theme="light"] .options-order-grid {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .opt-order-chip {
border-color: rgba(0, 0, 0, 0.16);
background: #fff;
}
.options-hint {
font-size: 0.75rem;
margin-bottom: 6px;
}
.options-page-wrap .options-order-mode-row {
font-size: 0.74rem;
gap: 6px;
font-size: 0.78rem;
gap: 10px;
}
.options-page-wrap .options-order-mode-row input[type="number"],
.options-page-wrap .options-order-mode-row input[type="text"] {
font-size: 0.74rem;
padding: 3px 6px;
font-size: 0.8rem;
padding: 6px 8px;
min-height: 32px;
box-sizing: border-box;
}
.options-page-wrap .options-order-mode-row .btn-primary {
font-size: 0.74rem;
padding: 4px 10px;
font-size: 0.8rem;
padding: 6px 12px;
}
.options-page-wrap .opt-row-actions .btn-primary,
.options-page-wrap .opt-row-actions .btn-secondary {
@@ -4191,13 +4249,26 @@ html[data-theme="light"] .options-estimate-row {
background: rgba(255, 209, 102, 0.12);
}
.options-order-mode-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin: 0;
}
.opt-size-mode-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
gap: 10px;
}
.options-order-mode-row input[type="number"] {
width: 88px;
width: 96px;
}
.options-order-mode-row .opt-signal-note,
.options-order-mode-row #opt-signal-note {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.options-order-mode-row .opt-order-chip {
flex: 0 0 auto;