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;
--panel-bg: #24283bee;
--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) ───────────── */
@@ -46,6 +51,11 @@ html.theme-dark {
--down: #4dabf7;
--panel-bg: #24283bee;
--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) ──────────────────────── */
@@ -66,6 +76,11 @@ html.theme-light {
--down: #1565c0;
--panel-bg: #ffffffee;
--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) ─────────────── */
@@ -86,6 +101,11 @@ html.theme-blue {
--down: #55aaff;
--panel-bg: #15273dee;
--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 ───────────────────────────────────────────────────── */
@@ -978,7 +998,7 @@ html.theme-blue {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
box-shadow: var(--popup-shadow);
z-index: 600;
}
/* 하단 바 — overflow 클리핑 회피 (body 포털) */
@@ -1506,7 +1526,7 @@ html.theme-blue {
z-index: 1201;
display: flex;
flex-direction: column;
box-shadow: 6px 0 24px rgba(0,0,0,0.4);
box-shadow: 6px 0 24px var(--popup-shadow);
}
/* 슬롯 내 심볼 버튼에서 열릴 때: 인라인 스타일로 위치 override됨.
@@ -1515,13 +1535,13 @@ html.theme-blue {
border-right: none;
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 8px 28px rgba(0,0,0,0.5);
box-shadow: var(--popup-shadow);
/* top/left/width/height 는 JS 인라인 스타일로 지정됨 */
}
.msp-panel--dropdown {
border-radius: 8px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
box-shadow: var(--popup-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -2544,7 +2564,7 @@ html.theme-blue {
background: var(--bg);
border: 1px solid var(--sep);
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
box-shadow: var(--popup-shadow);
}
.ism-color-popover-native {
margin-bottom: 10px;
@@ -4003,15 +4023,15 @@ html.theme-blue {
/* 팝업 컨테이너 */
.lp-popup {
background: var(--panel, #1e2130);
border: 1px solid var(--border, #2a2e3a);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,.55);
box-shadow: var(--popup-shadow);
padding: 12px 0 8px;
width: 420px;
max-height: 80vh;
overflow-y: auto;
color: var(--text, #d1d4dc);
color: var(--text);
font-size: 13px;
user-select: none;
}
@@ -4024,7 +4044,7 @@ html.theme-blue {
align-items: center;
gap: 4px;
padding: 4px 0;
border-bottom: 1px solid var(--border, #2a2e3a);
border-bottom: 1px solid var(--border);
}
.lp-row:last-child { border-bottom: none; }
@@ -4032,7 +4052,7 @@ html.theme-blue {
width: 20px;
text-align: center;
font-size: 11px;
color: var(--text-muted, #787b86);
color: var(--text-muted);
flex-shrink: 0;
}
@@ -4052,24 +4072,24 @@ html.theme-blue {
border: 1px solid transparent;
border-radius: 4px;
background: none;
color: var(--text, #d1d4dc);
color: var(--text);
cursor: pointer;
transition: background .12s, border-color .12s;
}
.lp-icon-btn:hover {
background: var(--btn-bg, rgba(255,255,255,.07));
border-color: var(--border, #3a3e4a);
background: var(--btn-bg);
border-color: var(--border);
}
.lp-icon-btn.active {
background: var(--accent-muted, rgba(41,98,255,.22));
border-color: var(--accent, #2962ff);
color: var(--accent, #2962ff);
background: var(--accent-muted);
border-color: var(--accent);
color: var(--accent);
}
/* 구분선 */
.lp-divider {
height: 1px;
background: var(--border, #2a2e3a);
background: var(--border);
margin: 6px 0;
}
@@ -4080,7 +4100,7 @@ html.theme-blue {
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
color: var(--text-muted, #787b86);
color: var(--text-muted);
margin-bottom: 8px;
text-transform: uppercase;
}
@@ -4094,7 +4114,7 @@ html.theme-blue {
.lp-sync-name {
font-size: 13px;
color: var(--text, #d1d4dc);
color: var(--text);
}
/* 토글 스위치 */
@@ -4104,7 +4124,7 @@ html.theme-blue {
height: 20px;
border: none;
border-radius: 10px;
background: var(--btn-bg, #3a3e4a);
background: var(--btn-bg);
cursor: pointer;
transition: background .2s;
flex-shrink: 0;
@@ -4115,11 +4135,11 @@ html.theme-blue {
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--text-muted, #787b86);
background: var(--text-muted);
transition: transform .2s, background .2s;
}
.lp-toggle.on {
background: var(--accent, #2962ff);
background: var(--accent);
}
.lp-toggle.on::after {
transform: translateX(16px);
@@ -4131,7 +4151,7 @@ html.theme-blue {
position: relative;
}
.lp-trigger-btn.active {
color: var(--accent, #2962ff);
color: var(--accent);
}
/* ══════════════════════════════════════════════════════════════════
@@ -9787,7 +9807,7 @@ html.theme-blue {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
box-shadow: var(--popup-shadow);
padding: 4px 0;
overflow: hidden;
}