추세검색 화면 적용
This commit is contained in:
Macbook
+228
-7
@@ -4110,24 +4110,27 @@ html.theme-blue {
|
||||
.multi-chart-grid {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
/* 높이를 명시해야 fr 행이 계산된다 */
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
background: var(--border, #2a2e3a);
|
||||
gap: 12px;
|
||||
padding: 8px 10px 12px;
|
||||
background: var(--bg, #131722);
|
||||
overflow: hidden;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.multi-slot-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg, #131722);
|
||||
background: var(--panel, #1e222d);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
/* grid stretch로 높이가 정해지므로 height 상속 허용 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--se-border, var(--border, #2a2e3a));
|
||||
border-radius: 12px;
|
||||
transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
|
||||
}
|
||||
|
||||
/* 개별 차트 슬롯 */
|
||||
@@ -4135,16 +4138,234 @@ html.theme-blue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
/* 부모 multi-slot-wrap (flex col)이 flex:1을 주므로 이 쪽도 flex:1 */
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color .15s;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.chart-slot.active {
|
||||
border-color: var(--accent, #2962ff);
|
||||
}
|
||||
|
||||
/* 멀티차트 컴팩트 — 가상투자 카드 차트 스타일 */
|
||||
.chart-slot--compact {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
min-height: 360px;
|
||||
}
|
||||
.chart-slot--compact.active {
|
||||
border: none;
|
||||
box-shadow: inset 0 0 0 1px var(--accent, #2962ff);
|
||||
}
|
||||
|
||||
/* 멀티차트 추세색 — 가상투자 vtd-card--live / timing 과 동일하게 얇고 흐릿한 아웃라인 */
|
||||
.multi-slot-wrap:has(.chart-slot--trend-up:not(.chart-slot--receiving)),
|
||||
.chart-slot--compact.chart-slot--trend-up:not(.chart-slot--receiving) {
|
||||
border-color: color-mix(in srgb, var(--up, #ff6b6b) 35%, var(--se-border, var(--border, #2a2e3a)));
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--up, #ff6b6b) 12%, transparent);
|
||||
}
|
||||
|
||||
.multi-slot-wrap:has(.chart-slot--trend-down:not(.chart-slot--receiving)),
|
||||
.chart-slot--compact.chart-slot--trend-down:not(.chart-slot--receiving) {
|
||||
border-color: color-mix(in srgb, var(--down, #4dabf7) 35%, var(--se-border, var(--border, #2a2e3a)));
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--down, #4dabf7) 12%, transparent);
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--trend-up:not(.chart-slot--receiving) {
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
color-mix(in srgb, var(--up, #ff6b6b) 10%, var(--panel, #1e222d)) 0%,
|
||||
var(--panel, #1e222d) 55%
|
||||
);
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--trend-down:not(.chart-slot--receiving) {
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
color-mix(in srgb, var(--down, #4dabf7) 10%, var(--panel, #1e222d)) 0%,
|
||||
var(--panel, #1e222d) 55%
|
||||
);
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--trend-up.active:not(.chart-slot--receiving) {
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up, #ff6b6b) 45%, var(--accent, #2962ff));
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--trend-down.active:not(.chart-slot--receiving) {
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--down, #4dabf7) 45%, var(--accent, #2962ff));
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--trend-up:not(.chart-slot--receiving) .slot-header--compact {
|
||||
border-bottom-color: color-mix(in srgb, var(--up, #ff6b6b) 18%, var(--se-border, var(--border, #2a2e3a)));
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--trend-down:not(.chart-slot--receiving) .slot-header--compact {
|
||||
border-bottom-color: color-mix(in srgb, var(--down, #4dabf7) 18%, var(--se-border, var(--border, #2a2e3a)));
|
||||
}
|
||||
|
||||
/* 실시간 수신 — 가상투자 vtd-card--receiving 와 동일 형광 연두 */
|
||||
.multi-slot-wrap:has(.chart-slot--receiving),
|
||||
.chart-slot--compact.chart-slot--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);
|
||||
transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--receiving {
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
color-mix(in srgb, #b9f6ca 14%, #131722) 0%,
|
||||
color-mix(in srgb, #69f0ae 5%, var(--panel, #1e222d)) 40%,
|
||||
var(--panel, #1e222d) 65%
|
||||
);
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--receiving.active {
|
||||
box-shadow:
|
||||
0 0 0 1px #69f0ae,
|
||||
0 0 10px 4px #69f0ae66,
|
||||
0 0 22px 8px #b9f6ca33,
|
||||
inset 0 0 0 1px color-mix(in srgb, #69f0ae 55%, var(--accent, #2962ff));
|
||||
}
|
||||
|
||||
.chart-slot--compact.chart-slot--receiving .slot-chart-wrap--compact {
|
||||
box-shadow: inset 0 0 24px color-mix(in srgb, #b9f6ca 8%, transparent);
|
||||
}
|
||||
|
||||
.slot-header--compact {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 10px;
|
||||
padding: 8px 10px;
|
||||
min-height: unset;
|
||||
border-bottom: 1px solid var(--border, #2a2e3a);
|
||||
}
|
||||
|
||||
.slot-compact-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 10px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.slot-compact-name {
|
||||
flex: 0 1 auto;
|
||||
max-width: 38%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--text, #d1d4dc);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
.slot-compact-name.open {
|
||||
color: var(--accent, #2962ff);
|
||||
}
|
||||
|
||||
.slot-compact-quote {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slot-compact-price {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.slot-compact-change {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.slot-compact-tf {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.slot-compact-tf-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted, #787b86);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.slot-compact-tf-select {
|
||||
appearance: none;
|
||||
padding: 3px 22px 3px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border, #2a2e3a);
|
||||
background: var(--bg, #131722)
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23787b86' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
|
||||
no-repeat right 6px center;
|
||||
color: var(--text, #d1d4dc);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
min-width: 52px;
|
||||
}
|
||||
|
||||
.slot-compact-tf-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent, #2962ff);
|
||||
}
|
||||
|
||||
.slot-compact-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.slot-compact-row {
|
||||
row-gap: 6px;
|
||||
}
|
||||
.slot-compact-name {
|
||||
max-width: 55%;
|
||||
}
|
||||
.slot-compact-status {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-slot--compact .slot-chart-wrap--compact {
|
||||
flex: 1;
|
||||
min-height: 240px;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.chart-slot--compact .slot-chart-wrap--compact .chart-hover-toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.chart-slot--compact .ws-badge {
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* 슬롯 미니 헤더 */
|
||||
.slot-header {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user