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-17 08:36:37 +09:00
parent 7377507894
commit 58cf1e1ec7
1 changed files with 41 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+41 -7
View File
@@ -62,6 +62,9 @@
0 0 4px 2px #69f0ae,
0 0 10px 4px #69f0ae55,
0 0 16px 6px #b9f6ca1a;
/* 차트 우측 툴바 — 오버레이 visible 강조 (화면 타이틀 골드/오렌지 톤) */
--chart-overlay-visible-color: #e6c200;
}
/* ── Dark Theme: 도쿄 나이트 (THEME_SETTINGS.md §2.2) ───────────── */
@@ -91,6 +94,7 @@ html.theme-dark {
--accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
--popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
--overlay-scrim: rgba(0, 0, 0, 0.55);
--chart-overlay-visible-color: #e6c200;
}
/* ── Light Theme (THEME_SETTINGS.md §2.1) ──────────────────────── */
@@ -120,6 +124,7 @@ html.theme-light {
--accent-muted: color-mix(in srgb, var(--accent) 14%, transparent);
--popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
--overlay-scrim: rgba(0, 0, 0, 0.35);
--chart-overlay-visible-color: #f57f17;
}
/* ── Blue Theme: 딥 네이비 (THEME_SETTINGS.md §2.3) ─────────────── */
@@ -149,6 +154,7 @@ html.theme-blue {
--accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
--popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
--overlay-scrim: rgba(0, 0, 0, 0.55);
--chart-overlay-visible-color: #ffd54f;
}
/* ── App Root ───────────────────────────────────────────────────── */
@@ -1177,6 +1183,9 @@ html.desktop-client .tmb-logo-version {
/* 우측 세로 툴바 — 가격축 라벨 오른쪽 전용 영역 */
.chart-right-toolbar {
--chart-overlay-visible-color: var(--se-toolbar-title, var(--se-gold, var(--chart-overlay-visible-color, #e6c200)));
--chart-overlay-visible-bg: color-mix(in srgb, var(--chart-overlay-visible-color) 20%, transparent);
--chart-overlay-visible-border: color-mix(in srgb, var(--chart-overlay-visible-color) 58%, transparent);
width: var(--sidebar-w, 44px);
flex-shrink: 0;
background: var(--bg2);
@@ -2806,14 +2815,32 @@ html.desktop-client .tmb-logo-version {
align-items: center;
}
.chart-right-toolbar-btn--overlay {
opacity: 0.92;
opacity: 1;
border: 1px solid transparent;
transition: color 0.12s, background 0.12s, border-color 0.12s, opacity 0.12s;
}
.chart-right-toolbar-btn--overlay:not(.chart-right-toolbar-btn--overlay-off) {
color: var(--chart-overlay-visible-color);
background: var(--chart-overlay-visible-bg);
border-color: var(--chart-overlay-visible-border);
opacity: 1;
}
.chart-right-toolbar-btn--overlay:not(.chart-right-toolbar-btn--overlay-off):hover {
color: var(--chart-overlay-visible-color);
background: color-mix(in srgb, var(--chart-overlay-visible-color) 30%, transparent);
border-color: color-mix(in srgb, var(--chart-overlay-visible-color) 72%, transparent);
opacity: 1;
}
.chart-right-toolbar-btn--overlay-off {
opacity: 0.38;
opacity: 0.32;
color: var(--text-muted, #787b86);
background: transparent;
border-color: transparent;
}
.chart-right-toolbar-btn--overlay-off:hover {
opacity: 0.65;
opacity: 0.5;
color: var(--text2, var(--text-muted, #787b86));
background: color-mix(in srgb, var(--text-muted, #787b86) 10%, transparent);
}
.chart-right-toolbar-btn--restore.active {
color: var(--accent);
@@ -2834,13 +2861,20 @@ html.desktop-client .tmb-logo-version {
pointer-events: none;
}
.chart-right-toolbar-btn--custom1.active .chart-right-toolbar-custom1-badge {
color: var(--accent, #2962ff);
color: var(--chart-overlay-visible-color);
}
.chart-right-toolbar-btn--custom.active,
.chart-right-toolbar-btn--custom1.active {
color: var(--accent);
border-color: rgba(122, 162, 247, 0.65);
background: rgba(122, 162, 247, 0.22);
color: var(--chart-overlay-visible-color) !important;
border: 1px solid var(--chart-overlay-visible-border) !important;
background: var(--chart-overlay-visible-bg) !important;
opacity: 1;
}
.chart-right-toolbar-btn--custom.active:hover,
.chart-right-toolbar-btn--custom1.active:hover {
color: var(--chart-overlay-visible-color) !important;
background: color-mix(in srgb, var(--chart-overlay-visible-color) 30%, transparent) !important;
border-color: color-mix(in srgb, var(--chart-overlay-visible-color) 72%, transparent) !important;
}
/* Custom 오버레이 설정 모달 (보조지표 설정 ibsm 스타일) */