가상투자 화면 추가
This commit is contained in:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user