가상투자 화면 추가
This commit is contained in:
Macbook
@@ -254,10 +254,10 @@
|
||||
}
|
||||
|
||||
.bps-right-body {
|
||||
flex: 1;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
padding: 8px 10px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -1,5 +1,119 @@
|
||||
/* 가상투자 대시보드 */
|
||||
|
||||
.vtd-unified-head {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px 14px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--se-border);
|
||||
flex-shrink: 0;
|
||||
background: var(--se-center-bg, var(--se-panel-card-bg));
|
||||
}
|
||||
|
||||
.vtd-unified-head-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--se-text);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-unified-head-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vtd-unified-head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-unified-head .vtd-session-actions {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.vtd-unified-head .vtd-session-select {
|
||||
min-width: 120px;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.vtd-unified-head {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vtd-unified-head-center {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.vtd-unified-head-right {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.vtd-session-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px 16px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--se-border);
|
||||
flex-shrink: 0;
|
||||
background: var(--se-center-bg, var(--se-panel-card-bg));
|
||||
}
|
||||
|
||||
.vtd-session-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vtd-session-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--se-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vtd-session-select {
|
||||
min-width: 140px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--se-border);
|
||||
background: var(--se-panel-card-bg);
|
||||
color: var(--se-text);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vtd-session-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.vtd-session-btn {
|
||||
padding: 5px 14px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.vtd-session-btn--start {
|
||||
background: var(--se-btn-gold-bg);
|
||||
border-color: var(--se-btn-gold-border);
|
||||
color: var(--se-btn-gold-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vtd-header-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -207,6 +321,85 @@
|
||||
color: var(--se-text-muted);
|
||||
}
|
||||
|
||||
/* 현재가·전일대비 (실시간 차트 마켓 패널과 동일 스타일) */
|
||||
.vtd-target-quote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 6px 4px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.vtd-target-quote-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vtd-target-quote-pair {
|
||||
font-size: 10px;
|
||||
color: var(--se-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vtd-target-quote-right {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.vtd-target-price {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vtd-target-change {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vtd-target-up { color: var(--up, #ef5350); }
|
||||
.vtd-target-dn { color: var(--down, #26a69a); }
|
||||
.vtd-target-even { color: var(--se-text-muted); }
|
||||
|
||||
.vtd-target-arrow {
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-target-arrow--rise { color: var(--up, #ef5350); }
|
||||
.vtd-target-arrow--fall { color: var(--down, #26a69a); }
|
||||
.vtd-target-arrow--even { color: var(--se-text-muted); font-size: 8px; }
|
||||
|
||||
@keyframes vtd-target-flash-rise {
|
||||
0% { background: color-mix(in srgb, var(--up, #ef5350) 28%, transparent); }
|
||||
100% { background: transparent; }
|
||||
}
|
||||
|
||||
@keyframes vtd-target-flash-fall {
|
||||
0% { background: color-mix(in srgb, var(--down, #26a69a) 28%, transparent); }
|
||||
100% { background: transparent; }
|
||||
}
|
||||
|
||||
.vtd-target-quote--flash-rise {
|
||||
animation: vtd-target-flash-rise 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
.vtd-target-quote--flash-fall {
|
||||
animation: vtd-target-flash-fall 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
.vtd-target-remove {
|
||||
flex-shrink: 0;
|
||||
width: 22px;
|
||||
@@ -224,13 +417,31 @@
|
||||
color: var(--down, #ef5350);
|
||||
}
|
||||
|
||||
.vtd-target-strat {
|
||||
display: block;
|
||||
.vtd-target-strategy-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vtd-target-strat select {
|
||||
width: 100%;
|
||||
.vtd-target-strategy-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--se-text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-target-strategy-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 5px 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--se-border);
|
||||
background: var(--se-panel-card-bg);
|
||||
color: var(--se-text);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vtd-muted {
|
||||
@@ -260,6 +471,183 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtd-grid-wrap--focus {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* 카드 — 전체화면(분할) 진입 버튼 */
|
||||
.vtd-card-focus-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--accent, #3f7ef5) 35%, var(--se-border));
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--accent, #3f7ef5) 8%, transparent);
|
||||
color: var(--accent, #3f7ef5);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.vtd-card-focus-btn:hover {
|
||||
background: color-mix(in srgb, var(--accent, #3f7ef5) 20%, transparent);
|
||||
border-color: var(--accent, #3f7ef5);
|
||||
}
|
||||
|
||||
/* 종목 전체보기 — 좌 차트 · 우 신호 */
|
||||
.vtd-focus-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
gap: 8px;
|
||||
border: 1px solid color-mix(in srgb, #c9a227 35%, var(--se-border));
|
||||
border-radius: 12px;
|
||||
background: var(--se-panel-card-bg);
|
||||
padding: 10px 12px 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtd-focus-wrap--receiving {
|
||||
border-color: #69f0ae !important;
|
||||
box-shadow:
|
||||
0 0 0 1px #69f0ae,
|
||||
0 0 10px 4px #69f0ae66,
|
||||
inset 0 0 32px color-mix(in srgb, #b9f6ca 12%, transparent);
|
||||
}
|
||||
|
||||
.vtd-focus-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vtd-focus-head-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vtd-focus-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.vtd-focus-exit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--se-border);
|
||||
border-radius: 8px;
|
||||
background: var(--se-btn-bg, var(--se-panel-card-bg));
|
||||
color: var(--se-text);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.vtd-focus-exit-btn:hover {
|
||||
border-color: var(--accent, #3f7ef5);
|
||||
background: color-mix(in srgb, var(--accent, #3f7ef5) 10%, transparent);
|
||||
color: var(--accent, #3f7ef5);
|
||||
}
|
||||
|
||||
.vtd-focus-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.vtd-focus-split {
|
||||
grid-template-columns: 1fr;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.vtd-focus-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 1px solid var(--se-border);
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--se-center-bg, #131722) 60%, var(--se-panel-card-bg));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtd-focus-pane-head {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--se-text-muted);
|
||||
border-bottom: 1px solid var(--se-border);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vtd-focus-pane-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtd-focus-pane--signal .vtd-focus-pane-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.vtd-sig-panel-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vtd-sig-panel-wrap--receiving .vtd-sig-panel {
|
||||
box-shadow: inset 0 0 24px color-mix(in srgb, #b9f6ca 8%, transparent);
|
||||
}
|
||||
|
||||
.vtd-focus-sig-meta {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-card-chart-panel--fill {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vtd-card-chart-canvas--fill {
|
||||
flex: 1;
|
||||
min-height: 280px;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vtd-focus-pane--chart .vtd-card-chart-panel--fill {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vtd-grid-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -282,10 +670,26 @@
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
gap: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vtd-grid-head-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.vtd-grid-head-divider {
|
||||
width: 1px;
|
||||
height: 22px;
|
||||
margin: 0 10px;
|
||||
background: color-mix(in srgb, var(--se-border) 90%, var(--se-text-muted));
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.vtd-view-toggle {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
@@ -343,6 +747,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vtd-grid {
|
||||
@@ -397,13 +803,68 @@
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #3f7ef5) 12%, transparent);
|
||||
}
|
||||
|
||||
/* 실시간 데이터 수신 — 실시간 차트 ws-dot.receiving 과 동일 형광 연두 음영 */
|
||||
.vtd-card--receiving {
|
||||
border-color: #69f0ae !important;
|
||||
box-shadow:
|
||||
0 0 0 1px #69f0ae,
|
||||
0 0 10px 4px #69f0ae66,
|
||||
0 0 22px 8px #b9f6ca33,
|
||||
inset 0 0 48px color-mix(in srgb, #b9f6ca 14%, transparent);
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
color-mix(in srgb, #b9f6ca 18%, #1a2035) 0%,
|
||||
color-mix(in srgb, #69f0ae 6%, var(--se-panel-card-bg)) 45%,
|
||||
var(--se-panel-card-bg) 70%
|
||||
);
|
||||
transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out, background 0.15s ease-out;
|
||||
}
|
||||
|
||||
.vtd-card--receiving .vtd-sig-panel {
|
||||
box-shadow: inset 0 0 24px color-mix(in srgb, #b9f6ca 8%, transparent);
|
||||
}
|
||||
|
||||
.vtd-card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vtd-card-head-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vtd-card-strategy-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vtd-card-strategy-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--se-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vtd-card-strategy-select {
|
||||
min-width: 100px;
|
||||
max-width: 180px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--se-border);
|
||||
background: var(--se-panel-card-bg);
|
||||
color: var(--se-text);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.vtd-card-head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -411,6 +872,116 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 카드 내 신호 / 차트 전환 */
|
||||
.vtd-card-mode-toggle {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--se-border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-card-mode-btn {
|
||||
padding: 4px 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--se-text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.vtd-card-mode-btn + .vtd-card-mode-btn {
|
||||
border-left: 1px solid var(--se-border);
|
||||
}
|
||||
|
||||
.vtd-card-mode-btn:hover:not(.vtd-card-mode-btn--on) {
|
||||
background: color-mix(in srgb, var(--se-text-muted) 8%, transparent);
|
||||
color: var(--se-text);
|
||||
}
|
||||
|
||||
.vtd-card-mode-btn--on {
|
||||
background: color-mix(in srgb, var(--accent, #3f7ef5) 22%, transparent);
|
||||
color: var(--accent, #3f7ef5);
|
||||
}
|
||||
|
||||
.vtd-card--chart-mode {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.vtd-card-chart-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vtd-card-chart-tf-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.vtd-card-chart-tf {
|
||||
padding: 3px 8px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--se-border);
|
||||
background: transparent;
|
||||
color: var(--se-text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vtd-card-chart-tf--on {
|
||||
border-color: var(--accent, #3f7ef5);
|
||||
background: color-mix(in srgb, var(--accent, #3f7ef5) 15%, transparent);
|
||||
color: var(--accent, #3f7ef5);
|
||||
}
|
||||
|
||||
.vtd-card-chart-canvas {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 340px;
|
||||
height: min(42vh, 400px);
|
||||
border: 1px solid var(--se-border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: var(--se-center-bg, #131722);
|
||||
}
|
||||
|
||||
.vtd-card-chart-canvas .chart-hover-toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.vtd-card-chart-canvas > .tv-chart-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vtd-card-chart-loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--se-center-bg, #131722) 75%, transparent);
|
||||
font-size: 11px;
|
||||
color: var(--se-text-muted);
|
||||
}
|
||||
|
||||
.vtd-card-chart-empty {
|
||||
margin: 4px 0 0;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.vtd-card-chart-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -451,16 +1022,6 @@
|
||||
color: var(--se-text-muted);
|
||||
}
|
||||
|
||||
.vtd-card-strat {
|
||||
font-size: 11px;
|
||||
color: var(--accent, #3f7ef5);
|
||||
text-align: right;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vtd-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -497,15 +1058,30 @@
|
||||
}
|
||||
|
||||
.vtd-live-badge--live {
|
||||
color: #26a69a;
|
||||
color: #69f0ae;
|
||||
}
|
||||
|
||||
.vtd-live-badge--live .vtd-live-badge-dot {
|
||||
background: #26a69a;
|
||||
box-shadow: 0 0 6px 2px color-mix(in srgb, #26a69a 75%, transparent);
|
||||
background: #69f0ae;
|
||||
box-shadow: 0 0 4px 1px #69f0ae55;
|
||||
animation: vtd-live-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 수신 순간: 실시간 차트 ws-dot.receiving 과 동일 형광 연두 */
|
||||
.vtd-live-badge-dot.receiving {
|
||||
animation: none !important;
|
||||
background: #b9f6ca !important;
|
||||
transform: scale(1.35);
|
||||
box-shadow:
|
||||
0 0 6px 3px #69f0ae,
|
||||
0 0 14px 6px #69f0ae66,
|
||||
0 0 24px 10px #b9f6ca22;
|
||||
}
|
||||
|
||||
.vtd-live-badge--receiving {
|
||||
color: #b9f6ca;
|
||||
}
|
||||
|
||||
.vtd-live-badge--connecting {
|
||||
color: #787b86;
|
||||
}
|
||||
@@ -525,8 +1101,8 @@
|
||||
}
|
||||
|
||||
@keyframes vtd-live-pulse {
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 6px 2px color-mix(in srgb, #26a69a 75%, transparent); }
|
||||
50% { opacity: 0.85; box-shadow: 0 0 10px 4px color-mix(in srgb, #26a69a 90%, transparent); }
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 4px 1px #69f0ae55; }
|
||||
50% { opacity: 0.75; box-shadow: 0 0 8px 3px #69f0ae88; }
|
||||
}
|
||||
|
||||
@keyframes vtd-live-blink {
|
||||
@@ -539,7 +1115,11 @@
|
||||
}
|
||||
|
||||
.vtd-sig-panel--summary .vtd-sig-visual {
|
||||
padding: 10px 16px 12px;
|
||||
padding: 8px 10px 10px;
|
||||
}
|
||||
|
||||
.vtd-sig-panel--summary .vtd-cond-list {
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.vtd-card--summary .vtd-card-foot {
|
||||
@@ -584,23 +1164,28 @@
|
||||
}
|
||||
|
||||
.vtd-sig-visual {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 8px 12px;
|
||||
gap: 10px 12px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid color-mix(in srgb, #c9a227 30%, var(--se-border));
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, #0d111f 60%, transparent);
|
||||
}
|
||||
|
||||
.vtd-sig-visual-eq {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 세그먼트 이퀄라이저 */
|
||||
.vtd-sig-eq {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
max-width: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-sig-eq-scale {
|
||||
@@ -665,7 +1250,100 @@
|
||||
text-shadow: 0 0 8px color-mix(in srgb, #82b1ff 60%, transparent);
|
||||
}
|
||||
|
||||
/* 신호등 */
|
||||
/* 조건 목록 (이퀄라이저 ↔ 신호등 사이) */
|
||||
.vtd-cond-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 2px 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-height: 188px;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vtd-cond-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.vtd-cond-list::-webkit-scrollbar-thumb {
|
||||
background: var(--se-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.vtd-cond-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--se-panel-card-bg) 70%, #000);
|
||||
border: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent);
|
||||
}
|
||||
|
||||
.vtd-cond-list-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--se-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.vtd-cond-list-empty {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* 조건 충족 신호 (Match / Pending / No Match) */
|
||||
.vtd-cond-signal {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vtd-cond-signal-pct {
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 2.2em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vtd-cond-signal-label {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.vtd-cond-signal--match {
|
||||
color: var(--down, #ef5350);
|
||||
}
|
||||
|
||||
.vtd-cond-signal--pending {
|
||||
color: #ffb300;
|
||||
}
|
||||
|
||||
.vtd-cond-signal--nomatch {
|
||||
color: var(--up, #26a69a);
|
||||
}
|
||||
|
||||
.vtd-cond-signal--unknown {
|
||||
color: var(--se-text-muted);
|
||||
}
|
||||
|
||||
.vtd-cond-signal--compact .vtd-cond-signal-label {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
/* 신호등 — 카드 우측, 텍스트는 신호등 아래 */
|
||||
.vtd-sig-light {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -674,6 +1352,15 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.vtd-sig-light--card-right {
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
.vtd-sig-light-housing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -718,6 +1405,12 @@
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.vtd-sig-light-info--below {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.vtd-sig-light-rate {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
@@ -725,6 +1418,10 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.vtd-sig-light-info--below .vtd-sig-light-rate {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.vtd-sig-light-label {
|
||||
font-size: 10px;
|
||||
color: var(--se-text-muted);
|
||||
@@ -732,6 +1429,11 @@
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.vtd-sig-light-info--below .vtd-sig-light-label {
|
||||
max-width: 96px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
/* 지표 비교 테이블 */
|
||||
.vtd-sig-table-wrap {
|
||||
border: 1px solid color-mix(in srgb, #c9a227 35%, var(--se-border));
|
||||
@@ -962,6 +1664,14 @@
|
||||
/* 차트 팝업 */
|
||||
.vtd-chart-popup-body {
|
||||
padding: 10px 14px 14px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(88vh, 680px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtd-chart-popup-body .vtd-chart-popup-canvas-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vtd-chart-popup-meta {
|
||||
@@ -1007,6 +1717,10 @@
|
||||
|
||||
.vtd-chart-popup-canvas-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: min(58vh, 520px);
|
||||
min-height: 360px;
|
||||
border: 1px solid var(--se-border);
|
||||
@@ -1015,8 +1729,11 @@
|
||||
background: var(--se-center-bg, #131722);
|
||||
}
|
||||
|
||||
.vtd-chart-popup-canvas-wrap .chart-container {
|
||||
height: 100% !important;
|
||||
/* TradingChart tv-chart-wrap — slot-chart-wrap 과 동일하게 가용 높이 확보 */
|
||||
.vtd-chart-popup-canvas-wrap > .tv-chart-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vtd-chart-popup-loading {
|
||||
|
||||
Reference in New Issue
Block a user