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 11:08:58 +09:00
parent 981f09cf29
commit 9208418c33
9 changed files with 538 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/strategyEditor.css
+96 -68
View File
@@ -1751,15 +1751,30 @@
color: var(--se-palette-section-range, #f59e0b);
}
.se-palette-card--range {
border-color: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 35%, var(--se-border));
.se-palette-mode-input {
width: auto;
min-width: 34px;
flex: 1;
max-width: 52px;
}
.se-palette-card--range:hover {
border-color: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 55%, var(--se-border));
.se-palette-mode-mark {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
font-size: 0.62rem;
line-height: 1;
flex-shrink: 0;
}
.se-palette-card-icon--range {
background: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 18%, transparent);
color: var(--se-palette-section-range, #f59e0b);
.se-palette-mode-mark--include {
background: color-mix(in srgb, #38bdf8 18%, transparent);
color: #38bdf8;
}
.se-palette-mode-mark--exclude {
background: color-mix(in srgb, var(--se-palette-range-exclude-accent) 18%, transparent);
color: var(--se-palette-range-exclude-accent);
}
.se-range-count {
@@ -1778,12 +1793,14 @@
flex: 1;
padding: 6px 4px;
border-radius: 6px;
border: 1px solid var(--se-border);
background: var(--se-btn-bg);
border: 1px solid color-mix(in srgb, var(--se-palette-range-accent) 28%, var(--se-border));
background: color-mix(in srgb, var(--se-palette-range-accent) 6%, var(--se-btn-bg));
color: var(--se-text-muted);
font-size: 0.68rem;
font-weight: 600;
cursor: pointer;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.se-range-mode-tab--on {
border-color: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 50%, transparent);
@@ -1858,60 +1875,6 @@
color: #f87171;
}
.se-range-chip {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 8px 9px;
min-height: 56px;
}
.se-range-chip-icons {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.se-range-chip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
font-size: 0.72rem;
line-height: 1;
flex-shrink: 0;
}
.se-range-chip-icon--left {
background: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 18%, transparent);
color: var(--se-palette-section-range, #f59e0b);
}
.se-range-chip-icon--right.se-range-chip-icon--include {
background: color-mix(in srgb, #38bdf8 18%, transparent);
color: #38bdf8;
}
.se-range-chip-icon--right.se-range-chip-icon--exclude {
background: color-mix(in srgb, #f87171 18%, transparent);
color: #f87171;
}
.se-range-chip-name {
font-size: 0.68rem;
font-weight: 700;
line-height: 1.25;
color: var(--se-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: keep-all;
}
.se-range-hint-tooltip {
position: fixed;
z-index: 10050;
@@ -2158,7 +2121,9 @@
.se-palette-card--ind {
border-color: color-mix(in srgb, var(--se-palette-ind-accent) 42%, transparent);
background: var(--se-palette-ind-bg);
box-shadow: inset 3px 0 0 var(--se-palette-ind-accent);
box-shadow:
inset 3px 0 0 var(--se-palette-ind-accent),
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card--ind .se-palette-card-icon {
background: color-mix(in srgb, var(--se-palette-ind-accent) 22%, transparent);
@@ -2166,14 +2131,19 @@
}
.se-palette-card--ind:hover {
border-color: color-mix(in srgb, var(--se-palette-ind-accent) 65%, transparent);
box-shadow: inset 3px 0 0 var(--se-palette-ind-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-ind-accent) 22%, transparent);
box-shadow:
inset 3px 0 0 var(--se-palette-ind-accent),
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
0 4px 14px color-mix(in srgb, var(--se-palette-ind-accent) 22%, transparent);
}
/* ── 복합지표 ── */
.se-palette-card--composite {
border-color: color-mix(in srgb, #c084fc 42%, transparent);
background: color-mix(in srgb, #c084fc 8%, var(--se-palette-card-bg));
box-shadow: inset 3px 0 0 #c084fc;
background: linear-gradient(145deg, color-mix(in srgb, #c084fc 22%, var(--bg2)), color-mix(in srgb, #c084fc 10%, var(--bg2)));
box-shadow:
inset 3px 0 0 #c084fc,
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card--composite .se-palette-card-icon {
background: color-mix(in srgb, #c084fc 22%, transparent);
@@ -2181,12 +2151,70 @@
}
.se-palette-card--composite:hover {
border-color: color-mix(in srgb, #c084fc 65%, transparent);
box-shadow: inset 3px 0 0 #c084fc, 0 4px 14px color-mix(in srgb, #c084fc 22%, transparent);
box-shadow:
inset 3px 0 0 #c084fc,
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
0 4px 14px color-mix(in srgb, #c084fc 22%, transparent);
}
.se-palette-card--selected.se-palette-card--composite {
outline-color: #c084fc;
}
/* ── 횡보 필터 (base .se-palette-card 뒤에 배치 — 배경 덮어쓰기 방지) ── */
.se-palette-card.se-palette-card--range,
.se-palette-card.se-palette-card--range-include {
border-color: color-mix(in srgb, var(--se-palette-range-accent) 42%, transparent);
background: var(--se-palette-range-bg);
box-shadow:
inset 3px 0 0 var(--se-palette-range-accent),
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card.se-palette-card--range .se-palette-card-icon,
.se-palette-card.se-palette-card--range-include .se-palette-card-icon {
background: color-mix(in srgb, var(--se-palette-range-accent) 22%, transparent);
color: var(--se-palette-range-accent);
}
.se-palette-card.se-palette-card--range:hover,
.se-palette-card.se-palette-card--range-include:hover {
border-color: color-mix(in srgb, var(--se-palette-range-accent) 65%, transparent);
box-shadow:
inset 3px 0 0 var(--se-palette-range-accent),
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
0 4px 14px color-mix(in srgb, var(--se-palette-range-accent) 22%, transparent);
}
.se-palette-card--selected.se-palette-card.se-palette-card--range,
.se-palette-card--selected.se-palette-card.se-palette-card--range-include {
outline-color: var(--se-palette-range-accent);
}
.se-palette-card.se-palette-card--range-exclude {
border-color: color-mix(in srgb, var(--se-palette-range-exclude-accent) 42%, transparent);
background: var(--se-palette-range-exclude-bg);
box-shadow:
inset 3px 0 0 var(--se-palette-range-exclude-accent),
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
}
.se-palette-card.se-palette-card--range-exclude .se-palette-card-icon {
background: color-mix(in srgb, var(--se-palette-range-exclude-accent) 22%, transparent);
color: var(--se-palette-range-exclude-accent);
}
.se-palette-card.se-palette-card--range-exclude:hover {
border-color: color-mix(in srgb, var(--se-palette-range-exclude-accent) 65%, transparent);
box-shadow:
inset 3px 0 0 var(--se-palette-range-exclude-accent),
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
0 4px 14px color-mix(in srgb, var(--se-palette-range-exclude-accent) 22%, transparent);
}
.se-palette-card--selected.se-palette-card.se-palette-card--range-exclude {
outline-color: var(--se-palette-range-exclude-accent);
}
.se-palette-card.se-palette-card--range .se-palette-card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.25;
}
.se-palette-card-head { display: flex; align-items: flex-start; gap: 6px; }
.se-palette-card-icon {
width: 24px; height: 24px; border-radius: 6px;
frontend/src/styles/strategyEditorTheme.css
+18 -3
View File
@@ -68,10 +68,15 @@
--se-palette-band-accent: #a78bfa;
--se-palette-band-bg: color-mix(in srgb, #a78bfa 14%, var(--bg2));
--se-palette-ind-accent: #34d399;
--se-palette-ind-bg: color-mix(in srgb, #34d399 14%, var(--bg2));
--se-palette-ind-bg: linear-gradient(145deg, color-mix(in srgb, #34d399 22%, var(--bg2)), color-mix(in srgb, #34d399 10%, var(--bg2)));
--se-palette-range-accent: #f59e0b;
--se-palette-range-bg: linear-gradient(145deg, color-mix(in srgb, #f59e0b 22%, var(--bg2)), color-mix(in srgb, #f59e0b 10%, var(--bg2)));
--se-palette-range-exclude-accent: #f87171;
--se-palette-range-exclude-bg: linear-gradient(145deg, color-mix(in srgb, #f87171 20%, var(--bg2)), color-mix(in srgb, #f87171 9%, var(--bg2)));
--se-palette-section-logic: #4dabf7;
--se-palette-section-band: #a78bfa;
--se-palette-section-ind: #34d399;
--se-palette-section-range: #f59e0b;
--se-tab-active: var(--se-gold);
--se-handle: var(--accent);
--se-edge: color-mix(in srgb, var(--accent) 72%, transparent);
@@ -202,10 +207,15 @@
--se-palette-band-accent: #7b1fa2;
--se-palette-band-bg: rgba(123, 31, 162, 0.07);
--se-palette-ind-accent: #2e7d32;
--se-palette-ind-bg: rgba(46, 125, 50, 0.08);
--se-palette-ind-bg: linear-gradient(145deg, rgba(46, 125, 50, 0.16), rgba(46, 125, 50, 0.06));
--se-palette-range-accent: #e65100;
--se-palette-range-bg: linear-gradient(145deg, rgba(230, 81, 0, 0.16), rgba(230, 81, 0, 0.06));
--se-palette-range-exclude-accent: #c62828;
--se-palette-range-exclude-bg: linear-gradient(145deg, rgba(198, 40, 40, 0.14), rgba(198, 40, 40, 0.05));
--se-palette-section-logic: #1565c0;
--se-palette-section-band: #7b1fa2;
--se-palette-section-ind: #2e7d32;
--se-palette-section-range: #e65100;
--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);
@@ -261,10 +271,15 @@
--se-palette-band-accent: #ce93d8;
--se-palette-band-bg: rgba(206, 147, 216, 0.12);
--se-palette-ind-accent: #69f0ae;
--se-palette-ind-bg: rgba(105, 240, 174, 0.1);
--se-palette-ind-bg: linear-gradient(145deg, rgba(105, 240, 174, 0.18), rgba(105, 240, 174, 0.07));
--se-palette-range-accent: #ffb74d;
--se-palette-range-bg: linear-gradient(145deg, rgba(255, 183, 77, 0.22), rgba(255, 183, 77, 0.08));
--se-palette-range-exclude-accent: #ef5350;
--se-palette-range-exclude-bg: linear-gradient(145deg, rgba(239, 83, 80, 0.18), rgba(239, 83, 80, 0.07));
--se-palette-section-logic: #5eb5ff;
--se-palette-section-band: #ce93d8;
--se-palette-section-ind: #69f0ae;
--se-palette-section-range: #ffb74d;
}
/* Light theme — flow node & handle tweaks */