전략평가 화면 기능 수정

This commit is contained in:
Macbook
2026-06-12 14:48:07 +09:00
parent d80a854d5b
commit c562a4eab2
4 changed files with 273 additions and 21 deletions
+144
View File
@@ -1,5 +1,81 @@
/* ── 전략 평가 — btd-page 레이아웃 위 보조 스타일 ─────────────────────────── */
/* ── 좌측 패널 접기 ───────────────────────────────────────────────────────── */
.seval-left-wrap {
display: flex;
flex-direction: row;
align-items: stretch;
flex-shrink: 0;
min-height: 0;
height: 100%;
position: relative;
z-index: 8;
}
.seval-left-sidebar {
width: 0;
flex: 0 0 0;
min-width: 0;
max-width: 0;
padding: 0;
border-right: none;
overflow: hidden;
transition:
width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
flex-basis 0.22s cubic-bezier(0.4, 0, 0.2, 1),
max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.seval-left-sidebar--open {
width: var(--seval-left-width, 380px);
flex: 0 0 var(--seval-left-width, 380px);
max-width: var(--seval-left-width, 380px);
padding: 10px 8px;
border-right: 1px solid var(--btd-divider, var(--se-border));
}
.seval-left-wrap .se-panel-handle {
align-self: center;
flex-shrink: 0;
position: relative;
z-index: 20;
width: 16px;
height: 56px;
border: 1px solid var(--se-border);
color: var(--se-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
padding: 0;
background: transparent;
}
.seval-left-wrap .se-panel-handle--left {
margin-left: -1px;
background: var(--se-bg-elevated, var(--bg2));
border-left: none;
border-radius: 0 8px 8px 0;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35);
}
.seval-left-wrap .se-panel-handle--left:hover {
color: var(--se-text);
background: var(--se-bg-muted, var(--bg3));
box-shadow: 3px 0 14px rgba(0, 0, 0, 0.45);
}
.seval-left-wrap--open .se-panel-handle--left,
.seval-left-wrap .se-panel-handle--left.se-panel-handle--open {
border-color: color-mix(in srgb, var(--se-accent, #3d9be9) 30%, var(--se-border));
}
.seval-main--left-collapsed {
flex: 1;
min-width: 0;
}
.seval-left-panel {
height: 100%;
}
@@ -55,6 +131,9 @@
}
.seval-chart-bar-time {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.68rem;
color: var(--btd-gold, var(--se-gold));
padding: 4px 8px;
@@ -64,6 +143,15 @@
white-space: nowrap;
}
.seval-chart-bar-time--loading {
border-color: color-mix(in srgb, var(--se-accent, #3d9be9) 45%, var(--se-border));
color: var(--se-text-muted);
}
.seval-chart-bar-spinner {
flex-shrink: 0;
}
.seval-chart-hint {
font-size: 0.66rem;
color: var(--se-text-muted);
@@ -230,6 +318,12 @@
box-shadow: 0 0 8px #3fb950;
}
.seval-live-dot--loading {
background: var(--se-accent, #3d9be9);
box-shadow: 0 0 8px color-mix(in srgb, var(--se-accent, #3d9be9) 55%, transparent);
animation: seval-live-pulse 0.9s ease-in-out infinite;
}
.seval-live-label {
margin-left: auto;
font-size: 0.68rem;
@@ -237,6 +331,50 @@
color: #3fb950;
}
.seval-live-label--loading {
color: var(--se-accent, #3d9be9);
}
@keyframes seval-live-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.88); }
}
.seval-signal-body {
position: relative;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.seval-eval-loading {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: color-mix(in srgb, var(--se-bg, #0d1117) 78%, transparent);
backdrop-filter: blur(2px);
pointer-events: none;
}
.seval-eval-loading-spinner {
width: 18px;
height: 18px;
border-width: 2px;
color: var(--se-accent, #3d9be9);
}
.seval-eval-loading-text {
font-size: 0.72rem;
font-weight: 600;
color: var(--se-text-muted);
}
.seval-signal-panel {
flex: 1;
min-height: 0;
@@ -244,6 +382,12 @@
padding: 0 2px;
}
.seval-signal-panel--loading {
opacity: 0.42;
pointer-events: none;
user-select: none;
}
.seval-eval-error {
margin: 0 4px 8px;
font-size: 0.72rem;