feat: split options settings into compact swap and transfer cards with aligned columns

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-07 10:18:41 +08:00
parent 75aa4b1391
commit 2a3f36d34f
7 changed files with 169 additions and 90 deletions
+91 -14
View File
@@ -2185,18 +2185,59 @@ html[data-theme="light"] .journal-detail-img-thumb {
.settings-cards-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
gap: 16px;
align-items: start;
gap: 12px;
align-items: stretch;
}
.settings-side-col {
display: flex;
flex-direction: column;
gap: 16px;
gap: 10px;
min-height: 100%;
}
.settings-card--risk {
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.settings-side-col .settings-card--export {
margin-top: auto;
}
.settings-card--compact {
padding: 10px 12px;
}
.settings-card--compact h2 {
margin: 0 0 6px;
font-size: 0.88rem;
font-weight: 600;
}
.settings-card--compact .settings-card-desc {
font-size: 0.72rem;
margin: 0 0 8px;
line-height: 1.45;
}
.settings-card--compact .settings-transfer-auto,
.settings-card--compact .settings-transfer-form {
font-size: 0.72rem;
}
.settings-card--compact .settings-transfer-form input,
.settings-card--compact .settings-transfer-form select,
.settings-card--compact .settings-transfer-form button {
font-size: 0.75rem;
padding: 4px 8px;
}
.settings-card--compact .settings-export-link {
font-size: 0.75rem;
padding: 5px 10px;
}
@media (max-width: 900px) {
@@ -2237,27 +2278,28 @@ html[data-theme="light"] .journal-detail-img-thumb {
.settings-risk-sections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
gap: 10px;
margin-top: 10px;
flex: 1;
}
.settings-subcard {
padding: 12px 14px;
padding: 10px 12px;
min-width: 0;
margin: 0;
}
.settings-subcard-title {
margin: 0 0 10px;
font-size: 0.9rem;
margin: 0 0 8px;
font-size: 0.82rem;
font-weight: 600;
color: #cfd3ef;
}
.settings-kv--compact .settings-kv-row {
grid-template-columns: 8.5em 1fr;
padding: 5px 0;
font-size: 0.8rem;
grid-template-columns: 8em 1fr;
padding: 4px 0;
font-size: 0.75rem;
}
@media (max-width: 720px) {
@@ -2604,13 +2646,48 @@ html[data-theme="light"] .settings-export-link {
.options-settings-block {
margin-bottom: 14px;
}
.options-settings-section {
margin-bottom: 10px;
}
.options-settings-section:last-child {
margin-bottom: 0;
}
.options-settings-subtitle {
font-size: 0.72rem;
font-weight: 600;
color: #a8b0cc;
margin: 0 0 6px;
}
.options-settings-arrow {
font-size: 0.75rem;
color: #8892b0;
align-self: center;
}
.options-settings-row {
flex-wrap: wrap;
gap: 8px;
gap: 6px;
align-items: center;
}
.options-settings-row select,
.options-settings-row input[type="number"] {
font-size: 0.75rem;
padding: 4px 7px;
min-height: 28px;
}
.options-settings-row .btn-sm {
font-size: 0.72rem;
padding: 4px 10px;
min-height: 28px;
}
.options-settings-hint {
font-size: 0.82rem;
margin: 0 0 8px;
font-size: 0.72rem;
margin: 0 0 6px;
line-height: 1.45;
}
.options-settings-msg {
font-size: 0.7rem;
margin-top: 4px;
min-height: 1em;
}
.pos-pnl-profit {
color: #7ee787;