dekun
0a20ee7eec
Add a preview bar under the live order form with risk in red and profit in green; extend preview logic for all SL/TP modes across embed and standalone instances. Co-authored-by: Cursor <cursoragent@cursor.com>
232 lines
18 KiB
CSS
232 lines
18 KiB
CSS
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#0b0d14;color:#eaeaea;padding:14px 20px}
|
|
.container{width:100%;max-width:min(1440px,94vw);margin:0 auto;padding:0 clamp(8px,1.5vw,20px)}
|
|
.header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
|
|
.header h1{font-size:1.75rem;color:#dbe4ff;text-align:center;line-height:1.25}
|
|
.exchange-tag{font-size:.82rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:5px 14px;border-radius:999px;letter-spacing:.06em}
|
|
.header-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
|
|
.top-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
|
|
.top-nav a{padding:6px 10px;border:1px solid #304164;border-radius:8px;background:#151a2a;color:#8fc8ff;text-decoration:none}
|
|
.top-nav a.active{background:#2a3f6c;color:#dbe4ff}
|
|
.stat-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:16px;align-items:stretch}
|
|
.stat-item{min-width:0;min-height:76px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:#151a2a;padding:12px 10px;border-radius:10px;text-align:center;border:1px solid #2a3152}
|
|
.stat-item .label{font-size:.8rem;color:#aaa;line-height:1.25;max-width:100%}
|
|
.stat-item .value{font-size:1.25rem;font-weight:600;color:#fff;line-height:1.3;min-height:1.35em;display:flex;align-items:center;justify-content:center}
|
|
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
|
|
.card{background:#121726;border-radius:10px;padding:12px;border:1px solid #2a3150}
|
|
.full{grid-column:1/-1}
|
|
.card h2{font-size:1rem;margin-bottom:10px;color:#d4d9ff}
|
|
.form-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
|
|
.form-row > input:not([type=checkbox]):not([type=radio]),.form-row > select{flex:0 1 auto;width:10rem;max-width:200px;min-width:7rem}
|
|
#add-order-form #sltp-mode{min-width:12.5rem;max-width:16rem;width:auto}
|
|
.order-plan-preview{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:4px 0 10px;padding:10px 12px;background:#151a28;border:1px solid #2a3150;border-radius:8px;font-size:.85rem}
|
|
.order-preview-risk{color:#ff6b6b}
|
|
.order-preview-risk strong{color:#ff8f8f;font-weight:600}
|
|
.order-preview-profit{color:#4cd97f}
|
|
.order-preview-profit strong{color:#6ee7a0;font-weight:600}
|
|
.order-preview-rr{color:#cfd3ef}
|
|
.order-preview-rr strong{font-weight:600;color:#dbe4ff}
|
|
.order-preview-rr.order-preview-rr-low strong{color:#ff8f8f}
|
|
.order-preview-rr.order-preview-rr-ok strong{color:#8fc8ff}
|
|
.form-row > button,.form-row > label{flex:0 0 auto}
|
|
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
|
|
/* 复盘表单：长下拉文案需可收缩，否则会撑破四列网格 */
|
|
.journal-card .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
|
|
.journal-card .form-grid > input,
|
|
.journal-card .form-grid > select{
|
|
min-width:0;
|
|
width:100%;
|
|
max-width:100%;
|
|
}
|
|
.journal-card .form-grid select[name="entry_reason"]{
|
|
grid-column:1/-1;
|
|
font-size:.8rem;
|
|
line-height:1.35;
|
|
}
|
|
.journal-card .form-grid input[name="entry_reason_custom"]{
|
|
grid-column:1/-1;
|
|
font-size:.8rem;
|
|
}
|
|
input,select,button,textarea{padding:8px 10px;border-radius:8px;border:1px solid #2e2e45;background:#1a1a29;color:#fff;font-size:.88rem;outline:none}
|
|
button{background:linear-gradient(90deg,#4285f4,#7b42ff);border:none;cursor:pointer}
|
|
.list{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-height:240px;overflow:auto}
|
|
.list-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px;background:#1a2034;border:1px solid #2a3150;border-radius:8px}
|
|
.btn-del{padding:5px 9px;background:#2f2134;color:#ff7b7b;border-radius:8px;text-decoration:none;font-size:.8rem}
|
|
.rule-tip{font-size:.8rem;color:#95a2c2;margin-bottom:8px}
|
|
table{width:100%;border-collapse:collapse}
|
|
th,td{padding:8px;text-align:left;border-bottom:1px solid #25253b;font-size:.85rem}
|
|
th{color:#a9a9ff}
|
|
.badge{padding:2px 6px;border-radius:6px;font-size:.72rem}
|
|
.profit{background:#1e332f;color:#4cd97f}
|
|
.loss{background:#331e24;color:#ff6666}
|
|
.miss{background:#29241e;color:#eac147}
|
|
.direction{background:#1e2533;color:#4cc2ff}
|
|
.direction-long{background:#1e332f;color:#4cd97f}
|
|
.direction-short{background:#331e24;color:#ff6666}
|
|
.pnl-profit{color:#4cd97f;font-weight:600}
|
|
.pnl-loss{color:#ff6666;font-weight:600}
|
|
.flash{padding:10px;background:#1e2533;color:#4cc2ff;border-radius:10px;margin-bottom:12px;text-align:center;border:1px solid #304164}
|
|
form.is-form-submitting{opacity:.88;pointer-events:none}
|
|
form.is-form-submitting button[type=submit],form.is-form-submitting input[type=submit]{cursor:wait}
|
|
.ai-result{background:#1a1a29;border:1px solid #2e2e45;border-radius:8px;padding:10px;white-space:pre-wrap;max-height:220px;overflow:auto;font-size:.84rem;line-height:1.45;margin-top:8px}
|
|
.ai-result.ai-result-md,.detail-modal .panel-body.md-review{white-space:normal}
|
|
.ai-result-md p,.detail-modal .panel-body.md-review p{margin:6px 0;color:#dde2ff}
|
|
.ai-result-md ul,.ai-result-md ol,.detail-modal .panel-body.md-review ul,.detail-modal .panel-body.md-review ol{margin:6px 0 8px 1.25em;padding:0}
|
|
.ai-result-md li,.detail-modal .panel-body.md-review li{margin:5px 0;line-height:1.5}
|
|
.ai-result-md strong,.detail-modal .panel-body.md-review strong{color:#f0f3ff;font-weight:600}
|
|
.ai-result-md h2,.detail-modal .panel-body.md-review h2{font-size:1.02rem;color:#b8c8ff;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid #2e2e45}
|
|
.ai-result-md h3,.detail-modal .panel-body.md-review h3{font-size:.92rem;color:#c9d4ff;margin:10px 0 6px}
|
|
.ai-result-md code,.detail-modal .panel-body.md-review code{background:#252538;padding:1px 4px;border-radius:4px;font-size:.82em}
|
|
.ai-result-md .md-raw-block-title,.detail-modal .panel-body.md-review .md-raw-block-title{margin-top:14px;padding-top:10px;border-top:1px dashed #3a3a55;color:#a8b0d8;font-weight:600}
|
|
.price-up{color:#4cd97f}
|
|
.price-down{color:#ff6666}
|
|
.price-flat{color:#cfd3ef}
|
|
.panel-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
.panel-item{background:#141423;border:1px solid #24243b;border-radius:10px;padding:10px;max-height:260px;overflow:auto}
|
|
.entry{border-bottom:1px solid #2b2b43;padding:8px 0}
|
|
.entry:last-child{border-bottom:none}
|
|
.table-del{padding:4px 8px;background:#2f2134;color:#ff7b7b;border:none;border-radius:6px;cursor:pointer;font-size:.78rem}
|
|
.mood-grid{display:flex;gap:10px;flex-wrap:wrap;font-size:.82rem;color:#d7d7ea}
|
|
.mood-grid label{display:flex;align-items:center;gap:3px}
|
|
.screenshot{width:100px;border-radius:6px;cursor:pointer;margin-top:6px}
|
|
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.78);justify-content:center;align-items:center;z-index:1210}
|
|
.modal img{max-width:90%;max-height:90%;border-radius:8px}
|
|
.detail-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.78);justify-content:center;align-items:center;z-index:1200;padding:20px}
|
|
.detail-modal .panel{width:min(92vw,980px);max-height:88vh;overflow:auto;background:#121726;border:1px solid #2a3150;border-radius:10px;padding:14px}
|
|
.detail-modal .panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
|
|
.detail-modal .panel-title{font-size:1rem;color:#dbe4ff}
|
|
.detail-modal .panel-close{padding:6px 10px;background:#2f2134;color:#ffb2b2;border:none;border-radius:8px;cursor:pointer}
|
|
.detail-modal .panel-body{white-space:pre-wrap;line-height:1.5;font-size:.86rem;color:#e5e9ff}
|
|
.detail-modal .panel-image{margin-top:10px;max-width:min(100%,680px);border-radius:8px;cursor:pointer;border:1px solid #2a3150}
|
|
.detail-modal .panel-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
|
|
.detail-modal .panel-fs{padding:6px 10px;background:#1f3a5a;color:#8fc8ff;border:none;border-radius:8px;cursor:pointer;font-size:.82rem}
|
|
.detail-modal.fullscreen{padding:10px}
|
|
.detail-modal.fullscreen .panel{width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;overflow:hidden}
|
|
.detail-modal.fullscreen .panel-body{flex:1;overflow:auto;min-height:0;font-size:.9rem}
|
|
.ai-result-wrap{margin-top:8px}
|
|
.ai-result-toolbar{display:flex;gap:8px;margin-top:6px}
|
|
.ai-result-toolbar .btn-fs{padding:4px 10px;font-size:.78rem;background:#1f3a5a;color:#8fc8ff;border:none;border-radius:6px;cursor:pointer}
|
|
.table-wrap{overflow-x:auto}
|
|
.dual-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
|
|
.dual-panel-grid .card{height:100%;display:flex;flex-direction:column}
|
|
.panel-scroll{flex:1;min-height:280px;max-height:420px;overflow:auto}
|
|
.records-card{grid-column:1/-1}
|
|
.review-card{grid-column:1/-1}
|
|
.review-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
|
|
.review-card-head h2{margin:0}
|
|
.review-card-fs-btn{padding:6px 12px;background:#1f3a5a;color:#8fc8ff;border:none;border-radius:8px;cursor:pointer;font-size:.82rem;white-space:nowrap}
|
|
.review-card-fs-btn:hover{filter:brightness(1.08)}
|
|
body.review-card-fullscreen-open{overflow:hidden}
|
|
.review-card.is-fullscreen{
|
|
position:fixed;inset:12px;z-index:1100;margin:0;
|
|
width:auto !important;max-width:none;height:auto;
|
|
overflow:auto;display:flex;flex-direction:column;
|
|
box-shadow:0 12px 48px rgba(0,0,0,.55);
|
|
}
|
|
.review-card.is-fullscreen .panel-list{flex:1;min-height:320px}
|
|
.review-card.is-fullscreen .panel-item{max-height:none;height:auto;min-height:280px}
|
|
.review-card.is-fullscreen .ai-result{max-height:min(36vh, 320px)}
|
|
@media (max-width: 1200px){
|
|
.stat-box{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
|
|
}
|
|
@media (min-width: 1440px){
|
|
.panel-scroll,.pos-list{max-height:420px}
|
|
.records-card .table-wrap{max-height:620px;overflow:auto}
|
|
}
|
|
@media (min-width: 2200px){
|
|
.container{max-width:min(1720px,90vw)}
|
|
}
|
|
@media (min-width: 2560px){
|
|
.container{max-width:min(1860px,88vw)}
|
|
.dual-panel-grid{gap:18px}
|
|
}
|
|
@media (min-width: 3000px){
|
|
.container{max-width:min(1980px,86vw)}
|
|
.pos-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
|
|
}
|
|
@media (max-width: 1100px){
|
|
.grid{grid-template-columns:1fr}
|
|
.dual-panel-grid{grid-template-columns:1fr}
|
|
.records-card,.review-card{grid-column:auto}
|
|
.panel-list{grid-template-columns:1fr}
|
|
}
|
|
@media (max-width: 960px){
|
|
body{padding:10px}
|
|
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
.stat-box{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
}
|
|
.stats-detail{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:10px}
|
|
.stats-detail .stat-item{min-width:0;min-height:0;display:block;text-align:left;padding:10px 12px;align-items:stretch;gap:4px}
|
|
.stats-detail .stat-item .value{min-height:0;display:block;font-size:1.05rem}
|
|
.stats-detail .stat-item .label{font-size:.75rem}
|
|
.stats-detail .stat-item .value{font-size:1.05rem;word-break:break-all}
|
|
.export-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;font-size:.85rem}
|
|
.export-bar a{color:#8fc8ff;text-decoration:none;padding:6px 10px;border:1px solid #304164;border-radius:8px;background:#151a2a}
|
|
.export-bar a:hover{background:#1f2740}
|
|
.list-window-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;padding:10px 12px;background:#151a2a;border:1px solid #304164;border-radius:10px;font-size:.82rem}
|
|
.list-window-bar label{color:#9aa;display:flex;align-items:center;gap:6px}
|
|
.stats-segment-block{margin-top:20px;padding-top:14px;border-top:1px solid #3a4468}
|
|
.stats-segment-block h2{font-size:1.05rem;color:#dbe4ff;margin-bottom:8px}
|
|
.key-history{margin-top:12px;padding-top:10px;border-top:1px solid #2a3150}
|
|
.key-history h3{font-size:.88rem;color:#b8c4ff;margin-bottom:6px}
|
|
.key-history .sub{font-size:.72rem;color:#8892b0;margin-bottom:6px}
|
|
.key-history .list{max-height:200px}
|
|
.pos-section{margin-top:12px}
|
|
.pos-section-title{font-size:.82rem;color:#8892b0;margin-bottom:8px;font-weight:500}
|
|
.pos-list{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow:auto}
|
|
.dual-panel-grid .pos-list-live{max-height:none;overflow:visible;flex:1 1 auto}
|
|
.dual-panel-grid .panel-scroll.pos-list-live{max-height:none;overflow:visible}
|
|
.pos-card{background:#141923;border:1px solid #2a3348;border-radius:10px;padding:12px 14px}
|
|
.pos-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
|
|
.pos-meta{font-size:.74rem;color:#8b95a8;line-height:1.45;margin-bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
|
|
.pos-meta-item{display:inline-flex;align-items:center}
|
|
.pos-meta-item:not(:last-child)::after{content:'|';margin:0 8px;color:#3d4659}
|
|
.pos-meta-on{color:#6eb5ff}
|
|
.pos-meta-off{color:#7d8799}
|
|
.pos-breakeven-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:.72rem;font-weight:600;background:#1a3d2e;color:#4cd97f}
|
|
.pos-card-symbol{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
|
|
.pos-card-symbol strong{font-size:.95rem;color:#fff;font-weight:600}
|
|
.pos-side-badge{padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:500;line-height:1.2}
|
|
.pos-side-long{background:#253a6e;color:#6eb5ff}
|
|
.pos-side-short{background:#4a2230;color:#ff8a8a}
|
|
.pos-head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
|
|
.pos-entrust-btn{padding:6px 12px;background:#2a4a7a;color:#8fc8ff;border:none;border-radius:8px;font-size:.82rem;font-weight:500;cursor:pointer;white-space:nowrap}
|
|
.pos-entrust-btn:hover{background:#355d96}
|
|
.pos-close-btn{padding:6px 14px;background:#c45454;color:#fff;border-radius:8px;text-decoration:none;font-size:.82rem;font-weight:500;flex-shrink:0;white-space:nowrap;border:none;cursor:pointer;display:inline-block}
|
|
.pos-close-btn:hover{background:#d66565;color:#fff}
|
|
.pos-ex-orders{margin-top:10px;padding-top:10px;border-top:1px dashed #2a3348}
|
|
.pos-ex-orders-title{font-size:.74rem;color:#7d8799;margin-bottom:6px}
|
|
.pos-ex-order-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.78rem;color:#c5cce0;margin-top:5px}
|
|
.pos-ex-order-main{flex:1;min-width:0;line-height:1.35}
|
|
.pos-ex-cancel-btn{padding:3px 10px;background:#3a3048;color:#d4b8ff;border:none;border-radius:6px;font-size:.74rem;cursor:pointer;flex-shrink:0}
|
|
.pos-ex-cancel-btn:disabled{opacity:.4;cursor:not-allowed}
|
|
.tpsl-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;align-items:center;justify-content:center;padding:16px}
|
|
.tpsl-modal-backdrop.open{display:flex}
|
|
.tpsl-modal{background:#1a2030;border:1px solid #3a4a66;border-radius:12px;padding:16px 18px;width:min(440px,100%);max-height:90vh;overflow:auto}
|
|
.tpsl-modal h3{margin:0 0 12px;font-size:1rem;color:#fff}
|
|
.tpsl-modal .form-row{margin-bottom:10px}
|
|
.tpsl-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
|
|
.tpsl-modal-actions button{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:.85rem}
|
|
.tpsl-modal-submit{background:#2d6a4f;color:#fff}
|
|
.tpsl-modal-cancel{background:#3a3f52;color:#ddd}
|
|
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px;margin-bottom:12px}
|
|
.pos-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
|
|
.pos-label{font-size:.72rem;color:#7d8799}
|
|
.pos-value{font-size:.88rem;color:#e8ecf4;font-weight:500;line-height:1.25}
|
|
.pos-val-dash{opacity:.75;color:#8b95a8}
|
|
.pos-value.price-up{color:#4cd97f}
|
|
.pos-value.price-down{color:#ff6666}
|
|
.pos-value.price-flat{color:#e8ecf4}
|
|
.pos-footer{display:flex;flex-wrap:wrap;gap:14px 18px;font-size:.75rem;color:#6d7689}
|
|
.pos-empty{padding:18px;text-align:center;color:#8892b0;font-size:.85rem;background:#141923;border:1px dashed #2a3348;border-radius:10px}
|
|
@media (max-width:520px){.pos-grid{grid-template-columns:repeat(2,1fr)}}
|
|
.stats-card{grid-column:1/-1;margin-top:14px}
|
|
.stats-card .stats-toggle{background:#1f3a5a;color:#8fc8ff;border:none;border-radius:8px;padding:6px 10px;cursor:pointer}
|
|
.stats-card.collapsed .stats-content{display:none}
|
|
.stats-period-block{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #2a3150}
|
|
.stats-period-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
|
|
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
|
|
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
|
|
#embed-page-root{transition:opacity .12s ease}
|
|
#embed-page-root.is-embed-tab-loading{opacity:.55;pointer-events:none}
|