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

테마 오류 수정

Browse Source
This commit is contained in:
Macbook
2026-05-26 01:32:25 +09:00
parent 173b47d485
commit ae8e96cef4
6 changed files with 195 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+45 -25
View File
@@ -26,6 +26,11 @@
--down: #4dabf7; --down: #4dabf7;
--panel-bg: #24283bee; --panel-bg: #24283bee;
--sep: rgba(122, 162, 247, 0.15); --sep: rgba(122, 162, 247, 0.15);
--panel: #24283b;
--text-muted: #6272a4;
--btn-bg: rgba(255, 255, 255, 0.07);
--accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
--popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
} }
/* ── Dark Theme: 도쿄 나이트 (THEME_SETTINGS.md §2.2) ───────────── */ /* ── Dark Theme: 도쿄 나이트 (THEME_SETTINGS.md §2.2) ───────────── */
@@ -46,6 +51,11 @@ html.theme-dark {
--down: #4dabf7; --down: #4dabf7;
--panel-bg: #24283bee; --panel-bg: #24283bee;
--sep: rgba(122, 162, 247, 0.15); --sep: rgba(122, 162, 247, 0.15);
--panel: #24283b;
--text-muted: #6272a4;
--btn-bg: rgba(255, 255, 255, 0.07);
--accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
--popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
} }
/* ── Light Theme (THEME_SETTINGS.md §2.1) ──────────────────────── */ /* ── Light Theme (THEME_SETTINGS.md §2.1) ──────────────────────── */
@@ -66,6 +76,11 @@ html.theme-light {
--down: #1565c0; --down: #1565c0;
--panel-bg: #ffffffee; --panel-bg: #ffffffee;
--sep: rgba(0, 0, 0, 0.10); --sep: rgba(0, 0, 0, 0.10);
--panel: #ffffff;
--text-muted: #757575;
--btn-bg: rgba(0, 0, 0, 0.06);
--accent-muted: color-mix(in srgb, var(--accent) 14%, transparent);
--popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
} }
/* ── Blue Theme: 딥 네이비 (THEME_SETTINGS.md §2.3) ─────────────── */ /* ── Blue Theme: 딥 네이비 (THEME_SETTINGS.md §2.3) ─────────────── */
@@ -86,6 +101,11 @@ html.theme-blue {
--down: #55aaff; --down: #55aaff;
--panel-bg: #15273dee; --panel-bg: #15273dee;
--sep: rgba(94, 181, 255, 0.15); --sep: rgba(94, 181, 255, 0.15);
--panel: #15273d;
--text-muted: #7aaed4;
--btn-bg: rgba(255, 255, 255, 0.07);
--accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
--popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
} }
/* ── App Root ───────────────────────────────────────────────────── */ /* ── App Root ───────────────────────────────────────────────────── */
@@ -978,7 +998,7 @@ html.theme-blue {
background: var(--bg2); background: var(--bg2);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.35); box-shadow: var(--popup-shadow);
z-index: 600; z-index: 600;
} }
/* 하단 바 — overflow 클리핑 회피 (body 포털) */ /* 하단 바 — overflow 클리핑 회피 (body 포털) */
@@ -1506,7 +1526,7 @@ html.theme-blue {
z-index: 1201; z-index: 1201;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 6px 0 24px rgba(0,0,0,0.4); box-shadow: 6px 0 24px var(--popup-shadow);
} }
/* 슬롯 내 심볼 버튼에서 열릴 때: 인라인 스타일로 위치 override됨. /* 슬롯 내 심볼 버튼에서 열릴 때: 인라인 스타일로 위치 override됨.
@@ -1515,13 +1535,13 @@ html.theme-blue {
border-right: none; border-right: none;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 8px 28px rgba(0,0,0,0.5); box-shadow: var(--popup-shadow);
/* top/left/width/height 는 JS 인라인 스타일로 지정됨 */ /* top/left/width/height 는 JS 인라인 스타일로 지정됨 */
} }
.msp-panel--dropdown { .msp-panel--dropdown {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.48); box-shadow: var(--popup-shadow);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -2544,7 +2564,7 @@ html.theme-blue {
background: var(--bg); background: var(--bg);
border: 1px solid var(--sep); border: 1px solid var(--sep);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); box-shadow: var(--popup-shadow);
} }
.ism-color-popover-native { .ism-color-popover-native {
margin-bottom: 10px; margin-bottom: 10px;
@@ -4003,15 +4023,15 @@ html.theme-blue {
/* 팝업 컨테이너 */ /* 팝업 컨테이너 */
.lp-popup { .lp-popup {
background: var(--panel, #1e2130); background: var(--panel);
border: 1px solid var(--border, #2a2e3a); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,.55); box-shadow: var(--popup-shadow);
padding: 12px 0 8px; padding: 12px 0 8px;
width: 420px; width: 420px;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
color: var(--text, #d1d4dc); color: var(--text);
font-size: 13px; font-size: 13px;
user-select: none; user-select: none;
} }
@@ -4024,7 +4044,7 @@ html.theme-blue {
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 0; padding: 4px 0;
border-bottom: 1px solid var(--border, #2a2e3a); border-bottom: 1px solid var(--border);
} }
.lp-row:last-child { border-bottom: none; } .lp-row:last-child { border-bottom: none; }
@@ -4032,7 +4052,7 @@ html.theme-blue {
width: 20px; width: 20px;
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
color: var(--text-muted, #787b86); color: var(--text-muted);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -4052,24 +4072,24 @@ html.theme-blue {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
background: none; background: none;
color: var(--text, #d1d4dc); color: var(--text);
cursor: pointer; cursor: pointer;
transition: background .12s, border-color .12s; transition: background .12s, border-color .12s;
} }
.lp-icon-btn:hover { .lp-icon-btn:hover {
background: var(--btn-bg, rgba(255,255,255,.07)); background: var(--btn-bg);
border-color: var(--border, #3a3e4a); border-color: var(--border);
} }
.lp-icon-btn.active { .lp-icon-btn.active {
background: var(--accent-muted, rgba(41,98,255,.22)); background: var(--accent-muted);
border-color: var(--accent, #2962ff); border-color: var(--accent);
color: var(--accent, #2962ff); color: var(--accent);
} }
/* 구분선 */ /* 구분선 */
.lp-divider { .lp-divider {
height: 1px; height: 1px;
background: var(--border, #2a2e3a); background: var(--border);
margin: 6px 0; margin: 6px 0;
} }
@@ -4080,7 +4100,7 @@ html.theme-blue {
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
letter-spacing: .08em; letter-spacing: .08em;
color: var(--text-muted, #787b86); color: var(--text-muted);
margin-bottom: 8px; margin-bottom: 8px;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -4094,7 +4114,7 @@ html.theme-blue {
.lp-sync-name { .lp-sync-name {
font-size: 13px; font-size: 13px;
color: var(--text, #d1d4dc); color: var(--text);
} }
/* 토글 스위치 */ /* 토글 스위치 */
@@ -4104,7 +4124,7 @@ html.theme-blue {
height: 20px; height: 20px;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
background: var(--btn-bg, #3a3e4a); background: var(--btn-bg);
cursor: pointer; cursor: pointer;
transition: background .2s; transition: background .2s;
flex-shrink: 0; flex-shrink: 0;
@@ -4115,11 +4135,11 @@ html.theme-blue {
top: 2px; left: 2px; top: 2px; left: 2px;
width: 16px; height: 16px; width: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background: var(--text-muted, #787b86); background: var(--text-muted);
transition: transform .2s, background .2s; transition: transform .2s, background .2s;
} }
.lp-toggle.on { .lp-toggle.on {
background: var(--accent, #2962ff); background: var(--accent);
} }
.lp-toggle.on::after { .lp-toggle.on::after {
transform: translateX(16px); transform: translateX(16px);
@@ -4131,7 +4151,7 @@ html.theme-blue {
position: relative; position: relative;
} }
.lp-trigger-btn.active { .lp-trigger-btn.active {
color: var(--accent, #2962ff); color: var(--accent);
} }
/* ══════════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════════
@@ -9787,7 +9807,7 @@ html.theme-blue {
background: var(--bg2); background: var(--bg2);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); box-shadow: var(--popup-shadow);
padding: 4px 0; padding: 4px 0;
overflow: hidden; overflow: hidden;
} }
frontend/src/components/MarketSearchPanel.tsx
+6 -7
View File
@@ -250,9 +250,9 @@ export const MarketSearchPanel: React.FC<MarketSearchPanelProps> = ({
maxWidth: Math.min(520, window.innerWidth - anchorRect.left - 8), maxWidth: Math.min(520, window.innerWidth - anchorRect.left - 8),
minHeight: 320, minHeight: 320,
zIndex: PANEL_Z, zIndex: PANEL_Z,
background: 'var(--bg2, #24283b)', background: 'var(--bg2)',
color: 'var(--text, #c0caf5)', color: 'var(--text)',
border: '1px solid var(--border, rgba(122,162,247,0.15))', border: '1px solid var(--border)',
} }
: { : {
position: 'fixed', position: 'fixed',
@@ -262,10 +262,9 @@ export const MarketSearchPanel: React.FC<MarketSearchPanelProps> = ({
height: anchorRect.height - HEADER_H, height: anchorRect.height - HEADER_H,
maxWidth: anchorRect.width, maxWidth: anchorRect.width,
zIndex: PANEL_Z, zIndex: PANEL_Z,
// document.body 포털 시 CSS var()가 상속되지 않아 배경이 투명해지는 문제 방지 background: 'var(--bg2)',
background: 'var(--bg2, #24283b)', color: 'var(--text)',
color: 'var(--text, #c0caf5)', border: '1px solid var(--border)',
border: '1px solid var(--border, rgba(122,162,247,0.15))',
} }
: undefined; // undefined → CSS 기본값(.msp-panel) 그대로 사용 : undefined; // undefined → CSS 기본값(.msp-panel) 그대로 사용
frontend/src/styles/appPopup.css
+24
View File
@@ -328,3 +328,27 @@ html.theme-light .app-popup-input,
.app.light .app-popup-input, .app.light .app-popup-input,
html.theme-light .app-popup-select, html.theme-light .app-popup-select,
.app.light .app-popup-select { background: #f0f3f8; border-color: rgba(0, 0, 0, 0.12); color: #212121; } .app.light .app-popup-select { background: #f0f3f8; border-color: rgba(0, 0, 0, 0.12); color: #212121; }
/* body 포털 팝업 — html.theme-* (syncDocumentTheme) 테마 변수 연동 */
html.theme-light .lp-popup,
.app.light .lp-popup,
html.theme-light .msp-panel,
.app.light .msp-panel,
html.theme-light .chart-ctx-menu,
.app.light .chart-ctx-menu,
html.theme-light .ism-color-popover,
.app.light .ism-color-popover,
html.theme-light .tz-picker-menu,
.app.light .tz-picker-menu {
color: var(--text);
}
html.theme-light .lp-popup,
.app.light .lp-popup,
html.theme-light .msp-panel,
.app.light .msp-panel,
html.theme-light .chart-ctx-menu,
.app.light .chart-ctx-menu {
background: var(--panel);
border-color: var(--border);
box-shadow: var(--popup-shadow);
}
frontend/src/styles/strategyEditorTheme.css
+35
View File
@@ -91,6 +91,24 @@
--se-minimap-bg: color-mix(in srgb, var(--bg) 96%, transparent); --se-minimap-bg: color-mix(in srgb, var(--bg) 96%, transparent);
--se-minimap-mask: color-mix(in srgb, var(--accent) 10%, transparent); --se-minimap-mask: color-mix(in srgb, var(--accent) 10%, transparent);
--se-minimap-mask-stroke: color-mix(in srgb, var(--accent) 55%, transparent); --se-minimap-mask-stroke: color-mix(in srgb, var(--accent) 55%, transparent);
/* 가상투자 — 신호 패널·히트맵·지표 테이블 */
--vtd-sig-gold-text: color-mix(in srgb, var(--se-gold) 90%, #fff);
--vtd-sig-panel-bg: color-mix(in srgb, #0d111f 60%, transparent);
--vtd-sig-card-gradient: color-mix(in srgb, #1a2035 92%, #000);
--vtd-sig-eq-bg: color-mix(in srgb, #000 35%, transparent);
--vtd-heat-track-bg: color-mix(in srgb, #060a14 85%, #000);
--vtd-heat-label-color: color-mix(in srgb, var(--se-text) 88%, #fff);
--vtd-heat-label-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
--vtd-sig-table-bg: color-mix(in srgb, #0d111f 50%, transparent);
--vtd-sig-table-head-bg: color-mix(in srgb, var(--se-gold) 6%, transparent);
--vtd-cond-item-bg: color-mix(in srgb, var(--bg2) 70%, #000);
--vtd-light-housing-bg: linear-gradient(180deg, #2a2a2a, #1a1a1a);
--vtd-light-housing-border: color-mix(in srgb, #555 80%, #888);
--vtd-status-warm: #ffe082;
--vtd-status-hot: #82b1ff;
--vtd-status-cold: #ff8a80;
--vtd-heat-inset: inset 0 1px 4px rgba(0, 0, 0, 0.45);
} }
.se-page--light { .se-page--light {
@@ -147,6 +165,23 @@
--se-palette-section-logic: #1565c0; --se-palette-section-logic: #1565c0;
--se-palette-section-band: #7b1fa2; --se-palette-section-band: #7b1fa2;
--se-palette-section-ind: #2e7d32; --se-palette-section-ind: #2e7d32;
--vtd-sig-gold-text: color-mix(in srgb, var(--se-gold) 88%, #212121);
--vtd-sig-panel-bg: color-mix(in srgb, var(--se-gold) 5%, #ffffff);
--vtd-sig-card-gradient: color-mix(in srgb, var(--se-gold) 7%, #ffffff);
--vtd-sig-eq-bg: color-mix(in srgb, var(--bg4) 40%, #ffffff);
--vtd-heat-track-bg: color-mix(in srgb, var(--bg4) 55%, #ffffff);
--vtd-heat-label-color: var(--se-text);
--vtd-heat-label-shadow: none;
--vtd-sig-table-bg: #ffffff;
--vtd-sig-table-head-bg: color-mix(in srgb, var(--se-gold) 12%, #f5f5f5);
--vtd-cond-item-bg: var(--bg2);
--vtd-light-housing-bg: linear-gradient(180deg, #eceff1, #cfd8dc);
--vtd-light-housing-border: rgba(0, 0, 0, 0.18);
--vtd-status-warm: #e65100;
--vtd-status-hot: #1565c0;
--vtd-status-cold: #c62828;
--vtd-heat-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1);
} }
.se-page--blue { .se-page--blue {
frontend/src/styles/trendSearchDashboard.css
+41 -30
View File
@@ -1,25 +1,36 @@
/* GoldenChart 추세검색 — #131722 / #FFD700 테마 */ /* GoldenChart 추세검색 — se-page / 앱 테마 연동 */
.bps-page--tsd { .bps-page--tsd {
--tsd-bg: #131722; --tsd-bg: var(--se-bg);
--tsd-gold: #ffd700; --tsd-gold: var(--se-gold);
--tsd-gold-dim: color-mix(in srgb, #ffd700 65%, #131722); --tsd-gold-dim: color-mix(in srgb, var(--se-gold) 68%, var(--se-text-muted));
--tsd-match: #26a69a; --tsd-match: var(--se-success);
--tsd-mismatch: #ef5350; --tsd-mismatch: var(--se-danger);
--tsd-pending: #ffd700; --tsd-pending: var(--se-gold);
--tsd-card: color-mix(in srgb, #1e222d 92%, #131722); --tsd-card: var(--se-bg-elevated);
--tsd-border: color-mix(in srgb, #ffd700 12%, #2a2e39); --tsd-border: color-mix(in srgb, var(--se-gold) 12%, var(--se-border));
--tsd-text: #d1d4dc; --tsd-text: var(--se-text);
--tsd-muted: #787b86; --tsd-muted: var(--se-text-muted);
--tsd-input-bg: var(--se-input-bg);
--tsd-toggle-off: color-mix(in srgb, var(--se-text-muted) 30%, var(--se-bg-muted));
--tsd-on-gold-text: var(--se-bg);
--tsd-track-bg: color-mix(in srgb, var(--se-text-muted) 18%, var(--se-bg-muted));
--tsd-filter-cat-bg: color-mix(in srgb, var(--se-bg-muted) 55%, var(--se-bg-elevated));
background: var(--tsd-bg); background: var(--tsd-bg);
} }
.bps-page--tsd .bps-header-title { .se-page--light.bps-page--tsd {
color: var(--tsd-gold); --tsd-on-gold-text: #ffffff;
letter-spacing: 0.02em; --tsd-border: color-mix(in srgb, var(--se-gold) 22%, var(--se-border));
--tsd-gold-dim: color-mix(in srgb, var(--se-gold) 78%, var(--se-text));
--tsd-filter-cat-bg: color-mix(in srgb, var(--se-bg-muted) 70%, #ffffff);
} }
.bps-page--tsd .bps-header-sub { .bps-page--tsd .bps-title {
color: transparent;
}
.bps-page--tsd .bps-subtitle {
color: var(--tsd-muted); color: var(--tsd-muted);
font-size: 11px; font-size: 11px;
} }
@@ -115,7 +126,7 @@
.tsd-filter-cat { .tsd-filter-cat {
border: 1px solid var(--tsd-border); border: 1px solid var(--tsd-border);
border-radius: 10px; border-radius: 10px;
background: color-mix(in srgb, var(--tsd-bg) 40%, transparent); background: var(--tsd-filter-cat-bg);
overflow: hidden; overflow: hidden;
} }
@@ -162,7 +173,7 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 10px; border-radius: 10px;
background: #3a3f4b; background: var(--tsd-toggle-off);
transition: background 0.2s; transition: background 0.2s;
} }
@@ -179,7 +190,7 @@
} }
.tsd-toggle input:checked + .tsd-toggle-track { .tsd-toggle input:checked + .tsd-toggle-track {
background: color-mix(in srgb, var(--tsd-gold) 75%, #3a3f4b); background: color-mix(in srgb, var(--tsd-gold) 75%, var(--tsd-toggle-off));
} }
.tsd-toggle input:checked + .tsd-toggle-track::before { .tsd-toggle input:checked + .tsd-toggle-track::before {
@@ -268,8 +279,8 @@
} }
.tsd-cond-badge--filter { .tsd-cond-badge--filter {
color: #6eb5ff; color: var(--se-accent);
border: 1px solid color-mix(in srgb, #6eb5ff 40%, transparent); border: 1px solid color-mix(in srgb, var(--se-accent) 40%, transparent);
} }
.tsd-cond-badge--na { .tsd-cond-badge--na {
@@ -282,7 +293,7 @@
padding: 8px 10px; padding: 8px 10px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--tsd-border); border: 1px solid var(--tsd-border);
background: var(--tsd-bg); background: var(--tsd-input-bg);
color: var(--tsd-text); color: var(--tsd-text);
font-size: 11px; font-size: 11px;
} }
@@ -299,7 +310,7 @@
padding: 4px 6px; padding: 4px 6px;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--tsd-border); border: 1px solid var(--tsd-border);
background: var(--tsd-bg); background: var(--tsd-input-bg);
color: var(--tsd-text); color: var(--tsd-text);
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
@@ -367,7 +378,7 @@
border: none; border: none;
border-radius: 10px; border-radius: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--tsd-gold) 90%, #fff), var(--tsd-gold-dim)); background: linear-gradient(135deg, color-mix(in srgb, var(--tsd-gold) 90%, #fff), var(--tsd-gold-dim));
color: #131722; color: var(--tsd-on-gold-text);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
@@ -519,7 +530,7 @@
flex: 1; flex: 1;
height: 6px; height: 6px;
border-radius: 3px; border-radius: 3px;
background: color-mix(in srgb, var(--tsd-mismatch) 15%, #2a2e39); background: color-mix(in srgb, var(--tsd-mismatch) 15%, var(--tsd-track-bg));
overflow: hidden; overflow: hidden;
min-width: 60px; min-width: 60px;
} }
@@ -544,7 +555,7 @@
font-weight: 800; font-weight: 800;
letter-spacing: 0.06em; letter-spacing: 0.06em;
background: var(--tsd-gold); background: var(--tsd-gold);
color: #131722; color: var(--tsd-on-gold-text);
} }
.tsd-badge-mid { .tsd-badge-mid {
@@ -638,7 +649,7 @@
flex: 1; flex: 1;
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
background: #2a2e39; background: var(--tsd-track-bg);
min-width: 40px; min-width: 40px;
} }
@@ -694,7 +705,7 @@
height: 26px; height: 26px;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--tsd-border); border: 1px solid var(--tsd-border);
background: color-mix(in srgb, var(--tsd-bg) 60%, transparent); background: var(--tsd-input-bg);
color: var(--tsd-muted); color: var(--tsd-muted);
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
@@ -743,7 +754,7 @@
/* Card grid (가상투자 vtd 스타일 재사용) */ /* Card grid (가상투자 vtd 스타일 재사용) */
.bps-page--tsd.bps-page--vtd .bps-center { .bps-page--tsd.bps-page--vtd .bps-center {
padding: 0; padding: 0;
background: var(--tsd-bg); background: var(--se-center-bg);
} }
.tsd-header-view { .tsd-header-view {
@@ -786,12 +797,12 @@
} }
@keyframes tsd-flash-up { @keyframes tsd-flash-up {
from { box-shadow: inset 0 0 0 1px color-mix(in srgb, #26a69a 70%, transparent); } from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tsd-match) 70%, transparent); }
to { box-shadow: none; } to { box-shadow: none; }
} }
@keyframes tsd-flash-down { @keyframes tsd-flash-down {
from { box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef5350 70%, transparent); } from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tsd-mismatch) 70%, transparent); }
to { box-shadow: none; } to { box-shadow: none; }
} }
frontend/src/styles/virtualTradingDashboard.css
+44 -44
View File
@@ -557,7 +557,7 @@
flex: 1; flex: 1;
min-height: 0; min-height: 0;
gap: 8px; gap: 8px;
border: 1px solid color-mix(in srgb, #c9a227 35%, var(--se-border)); border: 1px solid color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
border-radius: 12px; border-radius: 12px;
background: var(--se-panel-card-bg); background: var(--se-panel-card-bg);
padding: 10px 12px 12px; padding: 10px 12px 12px;
@@ -653,7 +653,7 @@
min-height: 0; min-height: 0;
border: 1px solid var(--se-border); border: 1px solid var(--se-border);
border-radius: 10px; border-radius: 10px;
background: color-mix(in srgb, var(--se-center-bg, #131722) 60%, var(--se-panel-card-bg)); background: color-mix(in srgb, var(--se-center-bg) 60%, var(--se-panel-card-bg));
overflow: hidden; overflow: hidden;
} }
@@ -983,10 +983,10 @@
} }
.vtd-card--signal { .vtd-card--signal {
border-color: color-mix(in srgb, #c9a227 35%, var(--se-border)); border-color: color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
background: linear-gradient( background: linear-gradient(
165deg, 165deg,
color-mix(in srgb, #1a2035 92%, #000) 0%, var(--vtd-sig-card-gradient) 0%,
var(--se-panel-card-bg) 55% var(--se-panel-card-bg) 55%
); );
} }
@@ -1039,7 +1039,7 @@
inset 0 0 48px color-mix(in srgb, #b9f6ca 14%, transparent); inset 0 0 48px color-mix(in srgb, #b9f6ca 14%, transparent);
background: linear-gradient( background: linear-gradient(
165deg, 165deg,
color-mix(in srgb, #b9f6ca 18%, #1a2035) 0%, color-mix(in srgb, #b9f6ca 18%, var(--vtd-sig-card-gradient)) 0%,
color-mix(in srgb, #69f0ae 6%, var(--se-panel-card-bg)) 45%, color-mix(in srgb, #69f0ae 6%, var(--se-panel-card-bg)) 45%,
var(--se-panel-card-bg) 70% var(--se-panel-card-bg) 70%
); );
@@ -1178,7 +1178,7 @@
border: 1px solid var(--se-border); border: 1px solid var(--se-border);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background: var(--se-center-bg, #131722); background: var(--se-center-bg);
} }
.vtd-card-chart-canvas .chart-hover-toolbar { .vtd-card-chart-canvas .chart-hover-toolbar {
@@ -1198,7 +1198,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: color-mix(in srgb, var(--se-center-bg, #131722) 75%, transparent); background: color-mix(in srgb, var(--se-center-bg) 75%, transparent);
font-size: 11px; font-size: 11px;
color: var(--se-text-muted); color: var(--se-text-muted);
} }
@@ -1383,14 +1383,14 @@
} }
.vtd-card-met-count { .vtd-card-met-count {
color: color-mix(in srgb, #c9a227 80%, var(--se-text)); color: color-mix(in srgb, var(--se-gold) 80%, var(--se-text));
font-weight: 600; font-weight: 600;
} }
.vtd-card--detail .vtd-card-met-count { .vtd-card--detail .vtd-card-met-count {
font-size: 13px; font-size: 13px;
font-weight: 800; font-weight: 800;
color: color-mix(in srgb, #f0c040 85%, #fff); color: var(--vtd-sig-gold-text);
} }
.vtd-card-foot { .vtd-card-foot {
@@ -1435,7 +1435,7 @@
font-size: 10px; font-size: 10px;
font-weight: 800; font-weight: 800;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: color-mix(in srgb, #c9a227 90%, #fff); color: var(--vtd-sig-gold-text);
text-align: center; text-align: center;
padding: 4px 0; padding: 4px 0;
} }
@@ -1446,9 +1446,9 @@
align-items: stretch; align-items: stretch;
gap: 10px 12px; gap: 10px 12px;
padding: 8px 10px; padding: 8px 10px;
border: 1px solid color-mix(in srgb, #c9a227 30%, var(--se-border)); border: 1px solid color-mix(in srgb, var(--se-gold) 30%, var(--se-border));
border-radius: 10px; border-radius: 10px;
background: color-mix(in srgb, #0d111f 60%, transparent); background: var(--vtd-sig-panel-bg);
} }
.vtd-sig-visual-eq { .vtd-sig-visual-eq {
@@ -1487,9 +1487,9 @@
gap: 2px; gap: 2px;
height: 180px; height: 180px;
padding: 4px; padding: 4px;
border: 1px solid color-mix(in srgb, #c9a227 40%, var(--se-border)); border: 1px solid color-mix(in srgb, var(--se-gold) 40%, var(--se-border));
border-radius: 6px; border-radius: 6px;
background: color-mix(in srgb, #000 35%, transparent); background: var(--vtd-sig-eq-bg);
} }
.vtd-sig-eq-seg { .vtd-sig-eq-seg {
@@ -1546,7 +1546,7 @@
} }
.vtd-heat-list::-webkit-scrollbar-thumb { .vtd-heat-list::-webkit-scrollbar-thumb {
background: color-mix(in srgb, #c9a227 35%, var(--se-border)); background: color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
border-radius: 2px; border-radius: 2px;
} }
@@ -1563,10 +1563,10 @@
min-width: 0; min-width: 0;
height: 26px; height: 26px;
border-radius: 8px; border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--se-border) 70%, #3a4a6b); border: 1px solid color-mix(in srgb, var(--se-border) 70%, var(--se-text-muted));
background: color-mix(in srgb, #060a14 85%, #000); background: var(--vtd-heat-track-bg);
overflow: hidden; overflow: hidden;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45); box-shadow: var(--vtd-heat-inset);
} }
.vtd-heat-label { .vtd-heat-label {
@@ -1578,12 +1578,12 @@
max-width: calc(100% - 48px); max-width: calc(100% - 48px);
font-size: 9px; font-size: 9px;
font-weight: 600; font-weight: 600;
color: color-mix(in srgb, var(--se-text) 88%, #fff); color: var(--vtd-heat-label-color);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
pointer-events: none; pointer-events: none;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8); text-shadow: var(--vtd-heat-label-shadow);
} }
.vtd-heat-fill { .vtd-heat-fill {
@@ -1606,7 +1606,7 @@
font-weight: 800; font-weight: 800;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
pointer-events: none; pointer-events: none;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.85); text-shadow: var(--vtd-heat-label-shadow);
} }
.vtd-heat-icon { .vtd-heat-icon {
@@ -1626,7 +1626,7 @@
.vtd-heat-row--nomatch .vtd-heat-track { .vtd-heat-row--nomatch .vtd-heat-track {
border-color: color-mix(in srgb, #ef5350 40%, var(--se-border)); border-color: color-mix(in srgb, #ef5350 40%, var(--se-border));
box-shadow: box-shadow:
inset 0 1px 4px rgba(0, 0, 0, 0.45), var(--vtd-heat-inset),
0 0 8px color-mix(in srgb, #ef5350 15%, transparent); 0 0 8px color-mix(in srgb, #ef5350 15%, transparent);
} }
@@ -1638,7 +1638,7 @@
} }
.vtd-heat-row--nomatch .vtd-heat-pct { .vtd-heat-row--nomatch .vtd-heat-pct {
color: #ff8a80; color: var(--vtd-status-cold);
} }
.vtd-heat-row--nomatch .vtd-heat-icon { .vtd-heat-row--nomatch .vtd-heat-icon {
@@ -1649,7 +1649,7 @@
.vtd-heat-row--pending .vtd-heat-track { .vtd-heat-row--pending .vtd-heat-track {
border-color: color-mix(in srgb, #ffb300 45%, var(--se-border)); border-color: color-mix(in srgb, #ffb300 45%, var(--se-border));
box-shadow: box-shadow:
inset 0 1px 4px rgba(0, 0, 0, 0.45), var(--vtd-heat-inset),
0 0 10px color-mix(in srgb, #ffb300 18%, transparent); 0 0 10px color-mix(in srgb, #ffb300 18%, transparent);
} }
@@ -1661,7 +1661,7 @@
} }
.vtd-heat-row--pending .vtd-heat-pct { .vtd-heat-row--pending .vtd-heat-pct {
color: #ffe082; color: var(--vtd-status-warm);
} }
.vtd-heat-row--pending .vtd-heat-icon { .vtd-heat-row--pending .vtd-heat-icon {
@@ -1672,7 +1672,7 @@
.vtd-heat-row--match .vtd-heat-track { .vtd-heat-row--match .vtd-heat-track {
border-color: color-mix(in srgb, #3f7ef5 45%, var(--se-border)); border-color: color-mix(in srgb, #3f7ef5 45%, var(--se-border));
box-shadow: box-shadow:
inset 0 1px 4px rgba(0, 0, 0, 0.45), var(--vtd-heat-inset),
0 0 12px color-mix(in srgb, #3f7ef5 22%, transparent); 0 0 12px color-mix(in srgb, #3f7ef5 22%, transparent);
} }
@@ -1684,7 +1684,7 @@
} }
.vtd-heat-row--match .vtd-heat-pct { .vtd-heat-row--match .vtd-heat-pct {
color: #82b1ff; color: var(--vtd-status-hot);
} }
.vtd-heat-row--match .vtd-heat-icon { .vtd-heat-row--match .vtd-heat-icon {
@@ -1733,7 +1733,7 @@
gap: 8px; gap: 8px;
padding: 5px 8px; padding: 5px 8px;
border-radius: 6px; border-radius: 6px;
background: color-mix(in srgb, var(--se-panel-card-bg) 70%, #000); background: var(--vtd-cond-item-bg);
border: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent); border: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent);
} }
@@ -1820,9 +1820,9 @@
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 10px 12px; padding: 10px 12px;
border: 2px solid color-mix(in srgb, #555 80%, #888); border: 2px solid var(--vtd-light-housing-border);
border-radius: 14px; border-radius: 14px;
background: linear-gradient(180deg, #2a2a2a, #1a1a1a); background: var(--vtd-light-housing-bg);
} }
.vtd-sig-light-bulb { .vtd-sig-light-bulb {
@@ -1890,11 +1890,11 @@
/* 지표 비교 테이블 */ /* 지표 비교 테이블 */
.vtd-sig-table-wrap { .vtd-sig-table-wrap {
border: 1px solid color-mix(in srgb, #c9a227 35%, var(--se-border)); border: 1px solid color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
border-radius: 8px; border-radius: 8px;
overflow-x: auto; overflow-x: auto;
overflow-y: visible; overflow-y: visible;
background: color-mix(in srgb, #0d111f 50%, transparent); background: var(--vtd-sig-table-bg);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@@ -1903,9 +1903,9 @@
font-size: 9px; font-size: 9px;
font-weight: 800; font-weight: 800;
letter-spacing: 0.06em; letter-spacing: 0.06em;
color: color-mix(in srgb, #c9a227 90%, #fff); color: var(--vtd-sig-gold-text);
border-bottom: 1px solid color-mix(in srgb, #c9a227 25%, var(--se-border)); border-bottom: 1px solid color-mix(in srgb, var(--se-gold) 25%, var(--se-border));
background: color-mix(in srgb, #c9a227 6%, transparent); background: var(--vtd-sig-table-head-bg);
} }
.vtd-sig-table { .vtd-sig-table {
@@ -1928,7 +1928,7 @@
font-size: 8px; font-size: 8px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: color-mix(in srgb, #c9a227 80%, var(--se-text-muted)); color: color-mix(in srgb, var(--se-gold) 80%, var(--se-text-muted));
border-bottom: 1px solid var(--se-border); border-bottom: 1px solid var(--se-border);
white-space: nowrap; white-space: nowrap;
} }
@@ -2060,13 +2060,13 @@
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.vtd-sig-table-status--cold { color: #ef5350; } .vtd-sig-table-status--cold { color: var(--vtd-status-cold); }
.vtd-sig-table-status--warming { color: #ffe082; } .vtd-sig-table-status--warming { color: var(--vtd-status-warm); }
.vtd-sig-table-status--hot { color: #82b1ff; } .vtd-sig-table-status--hot { color: var(--vtd-status-hot); }
.vtd-sig-table-status--nomatch { color: #ef5350; } .vtd-sig-table-status--nomatch { color: var(--vtd-status-cold); }
.vtd-sig-table-status--pending { color: #ffe082; } .vtd-sig-table-status--pending { color: var(--vtd-status-warm); }
.vtd-sig-table-status--match { color: #82b1ff; } .vtd-sig-table-status--match { color: var(--vtd-status-hot); }
.vtd-sig-row-pct { .vtd-sig-row-pct {
font-size: 9px; font-size: 9px;
@@ -2266,7 +2266,7 @@
border: 1px solid var(--se-border); border: 1px solid var(--se-border);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background: var(--se-center-bg, #131722); background: var(--se-center-bg);
} }
/* TradingChart tv-chart-wrap — slot-chart-wrap 과 동일하게 가용 높이 확보 */ /* TradingChart tv-chart-wrap — slot-chart-wrap 과 동일하게 가용 높이 확보 */
@@ -2283,7 +2283,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: color-mix(in srgb, var(--se-center-bg, #131722) 75%, transparent); background: color-mix(in srgb, var(--se-center-bg) 75%, transparent);
font-size: 12px; font-size: 12px;
color: var(--se-text-muted); color: var(--se-text-muted);
} }