매매 시그널 화면 추가 수정
This commit is contained in:
Macbook
@@ -121,6 +121,8 @@
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--se-bg-elevated, var(--bg2)) 88%, transparent);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--se-text, var(--text)) 4%, transparent);
|
||||
container-type: size;
|
||||
container-name: split-trade-card;
|
||||
}
|
||||
.ptd-split-card-head {
|
||||
flex-shrink: 0;
|
||||
@@ -270,6 +272,12 @@
|
||||
padding: 4px 8px 6px;
|
||||
}
|
||||
|
||||
.ptd-split-panel--right .ptd-split-card-body:has(.ptd-order-card) {
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
padding: 3px 6px 4px;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -298,9 +306,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: clamp(4px, 1.2cqh, 10px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
gap: clamp(3px, 1cqh, 10px);
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.ptd-split-panel--right .ptd-order-card .top-paper-hint {
|
||||
@@ -683,33 +691,131 @@
|
||||
}
|
||||
}
|
||||
|
||||
@container trade-card (max-height: 360px) {
|
||||
.ptd-split-panel--right .ptd-order-card > .top-panel {
|
||||
gap: 3px;
|
||||
/* ── 우측 매수·매도 카드: 낮은 높이에서 카드 내 스크롤 없이 압축 레이아웃 ── */
|
||||
@container trade-card (max-height: 520px) {
|
||||
.ptd-split-panel--right .ptd-order-card .top-order-kind {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 3px;
|
||||
}
|
||||
.ptd-order-card .top-price-qty-block {
|
||||
.ptd-split-panel--right .ptd-order-card .top-kind-btn {
|
||||
flex: 1 1 calc(33% - 4px);
|
||||
min-width: 0;
|
||||
padding: 3px 2px;
|
||||
font-size: clamp(8px, 1.5cqh, 10px);
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-kind-btn--wide {
|
||||
flex: 1 1 calc(50% - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
@container trade-card (max-height: 440px) {
|
||||
.ptd-split-panel--right .ptd-order-card > .top-panel {
|
||||
gap: 2px;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-panel-fields {
|
||||
gap: 2px;
|
||||
}
|
||||
.ptd-order-card .top-price-qty-block,
|
||||
.ptd-split-panel--right .ptd-order-card .top-price-qty-block {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
row-gap: 6px;
|
||||
column-gap: 6px;
|
||||
row-gap: 4px;
|
||||
align-content: start;
|
||||
}
|
||||
.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; }
|
||||
.ptd-order-card .top-price-qty-block .top-pct-row--block { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
|
||||
.ptd-order-card .top-price-qty-block .top-field--price,
|
||||
.ptd-split-panel--right .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,
|
||||
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--qty {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
.ptd-order-card .top-price-qty-block .top-pct-row--block,
|
||||
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
margin-top: 0;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn {
|
||||
flex: 1 1 calc(25% - 3px);
|
||||
min-width: 0;
|
||||
padding: 2px 1px;
|
||||
font-size: clamp(8px, 1.4cqh, 9px);
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn--direct {
|
||||
flex: 1 1 calc(33% - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
@container trade-card (max-height: 340px) {
|
||||
.ptd-split-panel--right .ptd-order-card .top-paper-hint,
|
||||
.ptd-split-panel--right .ptd-order-card .top-meta {
|
||||
display: none;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-label-help {
|
||||
display: none;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-panel--buy .top-field:has(.top-symbol-field) {
|
||||
display: none;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-reset {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-submit {
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@container split-trade-card (max-height: 200px) {
|
||||
.ptd-split-panel--right .ptd-split-card-head {
|
||||
padding: 3px 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 820px) {
|
||||
.ptd-split-panel--right .ptd-split-card-head {
|
||||
padding: 4px 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-split-card-body:has(.ptd-order-card) {
|
||||
padding: 2px 5px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 780px) {
|
||||
@supports not (container-type: size) {
|
||||
.ptd-order-card .top-price-qty-block {
|
||||
.ptd-order-card .top-price-qty-block,
|
||||
.ptd-split-panel--right .ptd-order-card .top-price-qty-block {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
column-gap: 6px;
|
||||
row-gap: 4px;
|
||||
}
|
||||
.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; }
|
||||
.ptd-order-card .top-price-qty-block .top-pct-row--block { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
|
||||
.ptd-order-card .top-price-qty-block .top-field--price,
|
||||
.ptd-split-panel--right .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,
|
||||
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--qty {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
.ptd-order-card .top-price-qty-block .top-pct-row--block,
|
||||
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
margin-top: 0;
|
||||
}
|
||||
.ptd-split-panel--right .ptd-order-card .top-panel-fields {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -54,8 +54,11 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 목록 한 줄 = 알림상세 · 신호일치율 · 캔들 · 보조지표(1칸) — 가로 100% 꽉 참 */
|
||||
.tnl-row-gallery {
|
||||
--tnl-summary-card-width: 320px;
|
||||
--tnl-signal-slot-width: 300px;
|
||||
--tnl-chart-card-width: 280px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
@@ -67,28 +70,66 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 좌측 알림 요약 카드 — 고정 너비(모든 행 동일) · 우측은 차트 영역이 나머지 공간 사용 */
|
||||
.tnl-row-gallery-detail {
|
||||
flex: 0 0 var(--tnl-summary-card-width);
|
||||
width: var(--tnl-summary-card-width);
|
||||
min-width: var(--tnl-summary-card-width);
|
||||
max-width: var(--tnl-summary-card-width);
|
||||
flex: 1.15 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts {
|
||||
.tnl-row-gallery-signal {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-candle {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
background: color-mix(in srgb, var(--bg) 40%, var(--bg2));
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-candle > .tnl-chart-card {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tnl-row-gallery > .tnl-hscroll-pane,
|
||||
.tnl-row-gallery > .tnl-row-gallery-candle {
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.tnl-row-gallery .tnl-chart-card {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-detail {
|
||||
flex: 0 0 var(--tnl-summary-card-width);
|
||||
width: var(--tnl-summary-card-width);
|
||||
min-width: var(--tnl-summary-card-width);
|
||||
flex: 0 0 min(28%, var(--tnl-summary-card-width));
|
||||
width: min(28%, var(--tnl-summary-card-width));
|
||||
min-width: min(240px, var(--tnl-summary-card-width));
|
||||
max-width: var(--tnl-summary-card-width);
|
||||
}
|
||||
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-charts {
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-indicators {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -139,12 +180,39 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts .tnl-hscroll-pane__content {
|
||||
.tnl-row-gallery-signal .tnl-hscroll-pane__viewport {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-signal .tnl-hscroll-pane__content {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--scroll .tnl-hscroll-pane__viewport {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--scroll .tnl-hscroll-pane__content {
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-hscroll-pane__viewport {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-hscroll-pane__content {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--expanded .tnl-hscroll-pane__content {
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts .tnl-hscroll-pane__viewport {
|
||||
.tnl-row-gallery-indicators--expanded .tnl-hscroll-pane__viewport {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -217,12 +285,12 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 신호상세 — 가상매매 vtd-card 슬롯 (차트보다 좁게 · 나머지는 캔들·지표) */
|
||||
/* 신호상세 — 갤러리 행에서는 슬롯 너비 100% */
|
||||
.tnl-signal-slot {
|
||||
flex: 1.05 1 272px;
|
||||
width: auto;
|
||||
min-width: min(100%, 272px);
|
||||
max-width: 34%;
|
||||
flex: 0 0 var(--tnl-signal-slot-width);
|
||||
width: var(--tnl-signal-slot-width);
|
||||
min-width: var(--tnl-signal-slot-width);
|
||||
max-width: var(--tnl-signal-slot-width);
|
||||
height: 280px;
|
||||
max-height: 280px;
|
||||
display: flex;
|
||||
@@ -231,6 +299,15 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-signal .tnl-signal-slot {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.tnl-signal-slot .tnl-signal-summary--embedded-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -323,12 +400,6 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-charts-track > .tnl-signal-slot {
|
||||
flex: 1.05 1 272px;
|
||||
min-width: min(100%, 272px);
|
||||
max-width: 34%;
|
||||
}
|
||||
|
||||
/* 가상매매 투자대상 카드(vtd)와 동일한 3단 구성 */
|
||||
.tnl-summary-card {
|
||||
flex: 1 1 auto;
|
||||
@@ -605,11 +676,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts--expanded .tnl-hscroll-pane__content {
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tnl-charts-expanded-inner .tnl-chart-card--expanded {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
@@ -629,22 +695,56 @@
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-charts-track > .tnl-chart-card {
|
||||
flex: 1.12 1 0;
|
||||
width: 0;
|
||||
flex: 0 0 var(--tnl-chart-card-width);
|
||||
width: var(--tnl-chart-card-width);
|
||||
min-width: var(--tnl-chart-card-width);
|
||||
max-width: var(--tnl-chart-card-width);
|
||||
}
|
||||
|
||||
/* 보조지표 1개 — 슬롯 너비 100% 채움 */
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-charts-track--indicators-only {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-charts-track--indicators-only > .tnl-chart-card,
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-charts-track--indicators-only > .tnl-chart-card--placeholder {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* 보조지표 2개↑ — 우측 슬롯 안에서만 스크롤, 페이지당 1장 = 슬롯 너비 */
|
||||
.tnl-row-gallery-indicators--scroll .tnl-charts-track--indicators-only {
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--scroll .tnl-charts-track--indicators-only > .tnl-chart-card {
|
||||
flex: 0 0 var(--tnl-hscroll-page-width, 240px);
|
||||
width: var(--tnl-hscroll-page-width, 240px);
|
||||
min-width: var(--tnl-hscroll-page-width, 240px);
|
||||
max-width: var(--tnl-hscroll-page-width, 240px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-charts-track--indicators-only:not(:has(.tnl-chart-card)) {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-chart-card {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
flex: 0 0 var(--tnl-chart-card-width);
|
||||
width: var(--tnl-chart-card-width);
|
||||
min-width: var(--tnl-chart-card-width);
|
||||
height: 280px;
|
||||
max-height: 280px;
|
||||
display: flex;
|
||||
@@ -1076,12 +1176,14 @@ ul.tnl-list.tnl-list--grid {
|
||||
max-width: var(--tnl-summary-card-width);
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts,
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-charts {
|
||||
.tnl-row-gallery-detail,
|
||||
.tnl-row-gallery-signal,
|
||||
.tnl-row-gallery-candle,
|
||||
.tnl-row-gallery-indicators {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-hscroll-pane {
|
||||
@@ -1089,10 +1191,6 @@ ul.tnl-list.tnl-list--grid {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts .tnl-hscroll-pane__viewport {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tnl-summary-card {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@@ -1100,16 +1198,16 @@ ul.tnl-list.tnl-list--grid {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.tnl-charts-track {
|
||||
min-width: max-content;
|
||||
width: max-content;
|
||||
.tnl-row-gallery-signal .tnl-signal-slot,
|
||||
.tnl-charts-track > .tnl-chart-card {
|
||||
flex: 0 0 min(var(--tnl-chart-card-width), 88vw);
|
||||
width: min(var(--tnl-chart-card-width), 88vw);
|
||||
min-width: min(var(--tnl-chart-card-width), 88vw);
|
||||
}
|
||||
|
||||
.tnl-charts-track > .tnl-chart-card,
|
||||
.tnl-charts-track > .tnl-signal-slot {
|
||||
flex: 0 0 min(300px, 88vw);
|
||||
width: min(300px, 88vw);
|
||||
min-width: min(300px, 88vw);
|
||||
max-width: none;
|
||||
.tnl-row-gallery-signal .tnl-signal-slot {
|
||||
flex: 0 0 min(var(--tnl-signal-slot-width), 88vw);
|
||||
width: min(var(--tnl-signal-slot-width), 88vw);
|
||||
min-width: min(var(--tnl-signal-slot-width), 88vw);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user