매매 시그널 화면 추가 수정
This commit is contained in:
Macbook
@@ -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