aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

전략평가 화면 수정

Browse Source
This commit is contained in:
Macbook
2026-06-12 18:13:25 +09:00
parent b560b9de5c
commit a3f0584e72
13 changed files with 742 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/strategyEvaluation.css
+402 -28
View File
@@ -441,11 +441,15 @@
}
.seval-side-card--buy {
border-top-color: color-mix(in srgb, #3fb950 55%, var(--se-border));
border-color: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 42%, var(--se-border, var(--btd-divider)));
border-top: 2px solid var(--gc-trade-buy, #ef5350);
background: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 7%, var(--vtd-sig-panel-bg, #0d111f));
}
.seval-side-card--sell {
border-top-color: color-mix(in srgb, #f85149 55%, var(--se-border));
border-color: color-mix(in srgb, var(--gc-trade-sell, #4dabf7) 42%, var(--se-border, var(--btd-divider)));
border-top: 2px solid var(--gc-trade-sell, #4dabf7);
background: color-mix(in srgb, var(--gc-trade-sell, #4dabf7) 7%, var(--vtd-sig-panel-bg, #0d111f));
}
.seval-side-card-head {
@@ -458,6 +462,14 @@
border-bottom: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent);
}
.seval-side-card--buy .seval-side-card-head {
border-bottom-color: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 28%, var(--se-border));
}
.seval-side-card--sell .seval-side-card-head {
border-bottom-color: color-mix(in srgb, var(--gc-trade-sell, #4dabf7) 28%, var(--se-border));
}
.seval-side-card-head-main {
display: flex;
flex-direction: column;
@@ -472,11 +484,11 @@
}
.seval-side-card-badge--buy {
color: #3fb950;
color: var(--gc-trade-buy, #ef5350);
}
.seval-side-card-badge--sell {
color: #f85149;
color: var(--gc-trade-sell, #4dabf7);
}
.seval-side-overall {
@@ -489,10 +501,16 @@
line-height: 1.3;
}
.seval-side-overall--met {
color: #3fb950;
background: color-mix(in srgb, #3fb950 14%, transparent);
border: 1px solid color-mix(in srgb, #3fb950 35%, transparent);
.seval-side-card--buy .seval-side-overall--met {
color: var(--gc-trade-buy, #ef5350);
background: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--gc-trade-buy, #ef5350) 35%, transparent);
}
.seval-side-card--sell .seval-side-overall--met {
color: var(--gc-trade-sell, #4dabf7);
background: color-mix(in srgb, var(--gc-trade-sell, #4dabf7) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--gc-trade-sell, #4dabf7) 35%, transparent);
}
.seval-side-overall--unmet {
@@ -510,50 +528,406 @@
flex-direction: column;
}
.seval-side-card-body .seval-side-sig-panel {
/* ── 전략평가 전용 매치 비주얼 (vtd-heat-* 미사용) ─────────────────────────── */
.seval-match-visual {
flex: 1;
min-height: 0;
gap: 4px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: flex-start;
}
.seval-side-card-body .seval-side-sig-panel .vtd-sig-panel-title {
.seval-match-visual-title {
flex-shrink: 0;
font-size: 8px;
padding: 2px 0 0;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--vtd-sig-gold-text, var(--se-gold, #e6c200));
text-align: center;
padding: 2px 0 0;
}
.seval-side-card-body .vtd-sig-visual {
--vtd-sig-rail-height: 120px;
flex: 1;
min-height: 0;
padding: 6px 8px 8px;
gap: 8px 10px;
/* 이퀄라이저 | 지표 목록 | 신호등 — 3열 (가상매매 vtd-sig-visual 동일) */
.seval-match-visual-row {
--seval-gauge-rail-height: 108px;
flex-shrink: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: stretch;
gap: 8px;
padding: 6px 8px;
border: 1px solid color-mix(in srgb, var(--se-gold, #e6c200) 32%, var(--se-border));
border-radius: 8px;
background: color-mix(in srgb, var(--vtd-sig-panel-bg, #0d111f) 72%, transparent);
overflow: hidden;
box-sizing: border-box;
}
.seval-side-card-body .vtd-sig-visual-heat {
.seval-match-pane {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
padding: 4px 5px;
border: 1px solid color-mix(in srgb, var(--se-gold, #e6c200) 28%, var(--se-border));
border-radius: 6px;
background: color-mix(in srgb, var(--vtd-sig-panel-bg, #0d111f) 55%, transparent);
box-sizing: border-box;
}
.seval-match-pane-eq {
flex-shrink: 0;
justify-content: stretch;
height: var(--seval-gauge-rail-height);
min-height: var(--seval-gauge-rail-height);
max-height: var(--seval-gauge-rail-height);
overflow: hidden;
}
.seval-side-card-body .vtd-sig-visual-heat .vtd-heat-list {
max-height: min(140px, 100%);
overflow-y: auto;
.seval-match-pane-list {
justify-content: flex-start;
height: var(--seval-gauge-rail-height);
min-height: var(--seval-gauge-rail-height);
max-height: var(--seval-gauge-rail-height);
overflow: hidden;
}
.seval-side-card-body .vtd-sig-visual-eq {
height: var(--vtd-sig-rail-height);
min-height: var(--vtd-sig-rail-height);
max-height: var(--vtd-sig-rail-height);
.seval-match-pane-light {
flex-shrink: 0;
align-items: center;
justify-content: flex-start;
height: var(--seval-gauge-rail-height);
min-height: var(--seval-gauge-rail-height);
overflow: hidden;
}
.seval-side-card-body .vtd-sig-visual-light .vtd-sig-light-rate {
.seval-match-pane-eq .vtd-sig-eq,
.seval-match-visual-eq .vtd-sig-eq {
display: flex;
gap: 8px;
align-items: stretch;
flex: 1;
min-height: 0;
height: 100%;
width: auto;
}
.seval-match-pane-eq .vtd-sig-eq-scale,
.seval-match-visual-eq .vtd-sig-eq-scale {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 0 auto;
height: 100%;
font-size: 8px;
color: var(--se-text-muted);
padding: 2px 0;
line-height: 1;
}
.seval-match-pane-eq .vtd-sig-eq-tick,
.seval-match-visual-eq .vtd-sig-eq-tick {
flex: 0 0 auto;
white-space: nowrap;
}
.seval-match-pane-eq .vtd-sig-eq-bar-wrap,
.seval-match-visual-eq .vtd-sig-eq-bar-wrap {
position: relative;
flex: 0 0 auto;
width: 44px;
min-width: 44px;
max-width: 44px;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.seval-match-pane-eq .vtd-sig-eq-bar,
.seval-match-visual-eq .vtd-sig-eq-bar {
display: flex;
flex-direction: column-reverse;
gap: 2px;
flex: 1;
min-height: 0;
height: 100%;
padding: 4px;
border: 1px solid color-mix(in srgb, var(--se-gold) 40%, var(--se-border));
border-radius: 6px;
background: var(--vtd-sig-eq-bg);
box-sizing: border-box;
}
.seval-match-pane-eq .vtd-sig-eq-seg,
.seval-match-visual-eq .vtd-sig-eq-seg {
flex: 1;
min-height: 2px;
border-radius: 2px;
background: color-mix(in srgb, var(--se-text-muted) 15%, transparent);
transition: background 0.25s ease, box-shadow 0.25s ease;
}
.seval-match-pane-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--red,
.seval-match-visual-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--red {
background: linear-gradient(90deg, #c62828, #ff8a80);
box-shadow: 0 0 6px color-mix(in srgb, #ef5350 50%, transparent);
}
.seval-match-pane-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--blue,
.seval-match-visual-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--blue {
background: linear-gradient(90deg, #1e6fd9, #4fc3f7);
box-shadow: 0 0 6px color-mix(in srgb, #4fc3f7 50%, transparent);
}
.seval-match-pane-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--gold,
.seval-match-visual-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--gold {
background: linear-gradient(90deg, #b8860b, #ffd54f);
box-shadow: 0 0 6px color-mix(in srgb, #ffd54f 45%, transparent);
}
.seval-match-pane-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--peak,
.seval-match-visual-eq .vtd-sig-eq-seg--lit.vtd-sig-eq-seg--peak {
background: linear-gradient(90deg, #1565c0, #82b1ff);
box-shadow: 0 0 10px color-mix(in srgb, #82b1ff 70%, transparent);
}
.seval-match-pane-eq .vtd-sig-eq-badge,
.seval-match-visual-eq .vtd-sig-eq-badge {
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
font-size: 8px;
font-weight: 800;
letter-spacing: 0.04em;
color: #82b1ff;
white-space: nowrap;
text-align: center;
line-height: 1.2;
text-shadow: 0 0 8px color-mix(in srgb, #82b1ff 60%, transparent);
pointer-events: none;
}
.seval-match-pane-light,
.seval-match-visual-light {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
min-width: 0;
}
.seval-match-light-rail {
display: flex;
flex-direction: column;
align-items: center;
}
.seval-match-pane-light .vtd-sig-light--card-right,
.seval-match-visual-light .vtd-sig-light--card-right {
flex: 0 0 auto;
width: auto;
height: auto;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 0;
}
.seval-match-pane-light .vtd-sig-light-rate,
.seval-match-visual-light .vtd-sig-light-rate {
font-size: 1.15rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.seval-side-card-body .vtd-sig-visual-light .vtd-sig-light-label {
.seval-match-pane-light .vtd-sig-light-label,
.seval-match-visual-light .vtd-sig-light-label {
font-size: 0.58rem;
max-width: 76px;
line-height: 1.2;
text-align: center;
}
/* 지표 목록 — 행당 22px, 세로 나열 · 3열 pane 안에서는 스크롤 */
.seval-cond-list-wrap {
flex: 1 1 auto;
align-self: stretch;
width: 100%;
min-height: 0;
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 2px 3px;
border: 1px solid color-mix(in srgb, var(--se-gold, #e6c200) 32%, var(--se-border));
border-radius: 6px;
background: color-mix(in srgb, var(--vtd-sig-panel-bg, #0d111f) 72%, transparent);
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.seval-cond-list-wrap--embedded {
flex: 1;
border: none;
border-radius: 0;
background: transparent;
padding: 0 1px;
}
.seval-cond-list-wrap::-webkit-scrollbar {
width: 4px;
}
.seval-cond-list-wrap::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--se-gold, #e6c200) 35%, var(--se-border));
border-radius: 2px;
}
.seval-cond-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.seval-cond-row {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 22px;
height: 22px;
min-height: 22px;
max-height: 22px;
}
.seval-cond-row:last-child {
margin-bottom: 0;
}
.seval-cond-track {
position: relative;
flex: 1;
min-width: 0;
height: 22px;
border-radius: 5px;
border: 1px solid color-mix(in srgb, var(--se-border) 70%, var(--se-text-muted));
background: var(--vtd-heat-track-bg, color-mix(in srgb, #060a14 85%, #000));
overflow: hidden;
}
.seval-cond-label {
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
max-width: calc(100% - 38px);
font-size: 8px;
font-weight: 600;
line-height: 1;
color: var(--vtd-heat-label-color, #e6edf3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.seval-cond-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-width: 0;
border-radius: 4px 0 0 4px;
z-index: 0;
}
.seval-cond-pct {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
z-index: 3;
font-size: 8px;
font-weight: 800;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
.seval-cond-icon {
flex: 0 0 14px;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.seval-cond-icon-svg {
width: 10px;
height: 10px;
display: block;
}
.seval-cond-row--nomatch .seval-cond-track {
border-color: color-mix(in srgb, #ef5350 40%, var(--se-border));
}
.seval-cond-row--nomatch .seval-cond-fill {
background: linear-gradient(90deg, #b71c1c 0%, #ef5350 55%, #ff8a80 100%);
}
.seval-cond-row--nomatch .seval-cond-pct {
color: #ef5350;
}
.seval-cond-row--nomatch .seval-cond-icon {
color: #ef5350;
}
.seval-cond-row--pending .seval-cond-track {
border-color: color-mix(in srgb, #ffb300 45%, var(--se-border));
}
.seval-cond-row--pending .seval-cond-fill {
background: linear-gradient(90deg, #e65100 0%, #ffb300 45%, #ffe082 100%);
}
.seval-cond-row--pending .seval-cond-pct {
color: #ffb300;
}
.seval-cond-row--pending .seval-cond-icon {
color: #ffb300;
}
.seval-cond-row--match .seval-cond-track {
border-color: color-mix(in srgb, #3f7ef5 45%, var(--se-border));
}
.seval-cond-row--match .seval-cond-fill {
background: linear-gradient(90deg, #1565c0 0%, #3f7ef5 45%, #82b1ff 100%);
}
.seval-cond-row--match .seval-cond-pct {
color: #82b1ff;
}
.seval-cond-row--match .seval-cond-icon {
color: #3f7ef5;
}
.seval-cond-empty {
margin: 0;
padding: 10px 4px;
font-size: 0.68rem;
text-align: center;
color: var(--se-text-muted);
}
.seval-side-card-body .vtd-heat-list-empty {