가상투자 화면 추가

This commit is contained in:
Macbook
2026-05-25 13:14:36 +09:00
parent 1fe3e404fa
commit 339e2355eb
23 changed files with 2230 additions and 457 deletions
+137 -17
View File
@@ -245,8 +245,9 @@
}
.bps-right-body .ptd-right-body {
flex: 1;
flex: 1 1 0;
min-height: 0;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -254,15 +255,132 @@
padding: 0;
}
.bps-right-body .ptd-right-body > * {
flex: 1;
min-height: 0;
}
.bps-right-body .ptd-right-body > .ptd-split-panel {
gap: 8px;
}
.bps-right-body .ptd-right-body > .ptd-split-panel--right {
flex: 1 1 0;
min-height: 0;
height: 100%;
}
.ptd-split-panel--right .ptd-split-card-body {
overflow: hidden;
padding: 4px 8px 6px;
}
.ptd-split-panel--right .ptd-split-card-body > .ptd-order-card,
.ptd-split-panel--right .ptd-split-card-body > .top-panel {
flex: 1 1 0;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ptd-split-panel--right .ptd-order-card > .top-panel {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(3px, 1.4cqh, 10px);
overflow: hidden;
overscroll-behavior: contain;
padding: 2px 2px 0;
}
.ptd-split-panel--right .ptd-order-card .top-paper-hint {
flex-shrink: 0;
margin: 0;
padding: 5px 7px;
font-size: clamp(10px, 1.8cqh, 11px);
}
.ptd-split-panel--right .ptd-order-card .top-field,
.ptd-split-panel--right .ptd-order-card .top-row--balance,
.ptd-split-panel--right .ptd-order-card .top-meta {
flex-shrink: 0;
margin-bottom: 0;
margin-top: 0;
}
.ptd-split-panel--right .ptd-order-card .top-label {
margin-bottom: clamp(2px, 0.6cqh, 5px);
font-size: clamp(10px, 1.7cqh, 11px);
}
.ptd-split-panel--right .ptd-order-card .top-price-qty-block {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: clamp(2px, 1.2cqh, 8px);
margin: 0;
}
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
margin: 0;
flex-shrink: 0;
}
.ptd-split-panel--right .ptd-order-card .top-input,
.ptd-split-panel--right .ptd-order-card .top-input--full {
padding: clamp(5px, 1.4cqh, 8px) clamp(8px, 1.8cqw, 10px);
font-size: clamp(11px, 2cqh, 13px);
}
.ptd-split-panel--right .ptd-order-card .top-kind-btn {
padding: clamp(4px, 1.2cqh, 6px) 3px;
font-size: clamp(9px, 1.8cqh, 11px);
}
.ptd-split-panel--right .ptd-order-card .top-pct-btn {
padding: clamp(3px, 1cqh, 5px) 2px;
font-size: clamp(9px, 1.6cqh, 10px);
}
.ptd-split-panel--right .ptd-order-card .top-step {
width: clamp(26px, 6cqw, 32px);
font-size: clamp(12px, 2.2cqh, 14px);
}
.ptd-split-panel--right .ptd-order-card .top-balance {
font-size: clamp(11px, 2cqh, 13px);
}
.ptd-split-panel--right .ptd-order-card .top-meta {
font-size: clamp(9px, 1.6cqh, 10px);
}
.ptd-split-panel--right .ptd-order-card .top-actions {
flex-shrink: 0;
margin-top: 0;
gap: clamp(6px, 1.4cqh, 8px);
}
.ptd-split-panel--right .ptd-order-card .top-reset,
.ptd-split-panel--right .ptd-order-card .top-submit {
padding: clamp(6px, 1.6cqh, 10px) clamp(10px, 2cqw, 12px);
font-size: clamp(12px, 2.2cqh, 14px);
}
.ptd-order-card {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: none;
background: transparent;
container-type: size;
container-name: trade-card;
}
.bps-footer .ptd-metrics-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -521,29 +639,31 @@
border-radius: 0;
}
.ptd-order-card {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
border: none;
background: transparent;
container-type: size;
container-name: trade-card;
}
.ptd-order-card .ptd-order-stack { padding: 0 4px 4px; flex: 1; }
.ptd-order-card .top-panel { padding: 4px 2px; background: transparent; }
.ptd-order-card .top-field { margin-bottom: 4px; }
.ptd-order-card .top-price-qty-block .top-field { margin-bottom: 0; }
.ptd-order-card .top-price-qty-block .top-pct-row--block { margin-bottom: 4px; }
@container trade-card (min-height: 420px) {
.ptd-split-panel--right .ptd-order-card > .top-panel {
gap: clamp(6px, 2cqh, 14px);
}
.ptd-split-panel--right .ptd-order-card .top-price-qty-block {
gap: clamp(4px, 1.8cqh, 12px);
}
}
@container trade-card (max-height: 360px) {
.ptd-split-panel--right .ptd-order-card > .top-panel {
gap: 3px;
}
.ptd-order-card .top-price-qty-block {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 8px;
row-gap: 4px;
align-content: space-evenly;
}
.ptd-order-card .top-price-qty-block .top-field--price { grid-column: 1; grid-row: 1; }
.ptd-order-card .top-price-qty-block .top-field--qty { grid-column: 2; grid-row: 1; }