197 lines
4.6 KiB
CSS
197 lines
4.6 KiB
CSS
/* ─────────── ModeToggle 헤더 컨트롤 ─────────── */
|
|
.screener-mode-toggle {
|
|
display: inline-flex;
|
|
background: #111827;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.screener-mode-toggle button {
|
|
padding: 6px 14px;
|
|
background: transparent;
|
|
color: #9ca3af;
|
|
border: 0;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.screener-mode-toggle button.active {
|
|
background: #fbbf24;
|
|
color: #111827;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.screener-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* ─────────── CanvasLayout 그리드 ─────────── */
|
|
.screener-canvas-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.screener-canvas-area {
|
|
height: 65vh;
|
|
min-height: 480px;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #0b1220;
|
|
}
|
|
.screener-canvas-results {
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
gap: 16px;
|
|
}
|
|
.screener-canvas-results-main { display: flex; flex-direction: column; gap: 12px; }
|
|
.screener-canvas-results-side { min-width: 0; }
|
|
|
|
/* ─────────── React Flow 내부 ─────────── */
|
|
.screener-canvas-wrap { width: 100%; height: 100%; }
|
|
|
|
/* ─────────── 노드 카드 공통 ─────────── */
|
|
.canvas-node {
|
|
background: #111827;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 10px;
|
|
color: #e5e7eb;
|
|
font-size: 12px;
|
|
padding: 10px 12px;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.canvas-node-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
.canvas-node-icon { font-size: 14px; }
|
|
.canvas-node-info {
|
|
margin-left: auto;
|
|
color: #9ca3af;
|
|
cursor: help;
|
|
}
|
|
.canvas-node-subtitle,
|
|
.canvas-node-summary {
|
|
color: #9ca3af;
|
|
font-size: 11px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ─────────── 고정 노드 (회색) ─────────── */
|
|
.canvas-node--fixed { width: 200px; }
|
|
.canvas-node--data { border-left: 3px solid #4b5563; }
|
|
.canvas-node--combine { border-left: 3px solid #6b7280; }
|
|
.canvas-node--result { border-left: 3px solid #6b7280; }
|
|
|
|
/* ─────────── 게이트 노드 (노랑) ─────────── */
|
|
.canvas-node--gate {
|
|
width: 220px;
|
|
border-left: 4px solid #facc15;
|
|
}
|
|
|
|
/* ─────────── 점수 노드 (accent) ─────────── */
|
|
.canvas-node--score {
|
|
width: 240px;
|
|
border-left: 4px solid var(--canvas-accent, #3b82f6);
|
|
}
|
|
.canvas-node--score.is-inactive {
|
|
opacity: 0.45;
|
|
filter: grayscale(0.6);
|
|
}
|
|
.canvas-node-weight {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
.canvas-node-weight input[type=range] { flex: 1; }
|
|
.canvas-node-weight-value {
|
|
min-width: 32px;
|
|
text-align: right;
|
|
color: var(--canvas-accent, #3b82f6);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.canvas-node-active {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
color: #d1d5db;
|
|
}
|
|
.canvas-node-expand {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
padding: 4px 0;
|
|
background: transparent;
|
|
color: #9ca3af;
|
|
border: 1px dashed #374151;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
}
|
|
.canvas-node-params {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.canvas-param-field {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #d1d5db;
|
|
font-size: 11px;
|
|
}
|
|
.canvas-param-field input[type=number] {
|
|
width: 70px;
|
|
background: #0b1220;
|
|
color: #e5e7eb;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
/* ─────────── floating toolbar ─────────── */
|
|
.canvas-toolbar {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
background: rgba(17, 24, 39, 0.75);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid #1f2937;
|
|
border-radius: 10px;
|
|
}
|
|
.canvas-toolbar-btn {
|
|
padding: 6px 12px;
|
|
background: #1f2937;
|
|
color: #e5e7eb;
|
|
border: 1px solid #374151;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
.canvas-toolbar-btn:hover:not(:disabled) {
|
|
background: #374151;
|
|
}
|
|
.canvas-toolbar-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
.canvas-toolbar-btn--primary {
|
|
background: #fbbf24;
|
|
color: #111827;
|
|
border-color: #fbbf24;
|
|
font-weight: 600;
|
|
}
|
|
.canvas-toolbar-btn--primary:hover:not(:disabled) { background: #f59e0b; }
|
|
|
|
/* ─────────── 모바일 (캔버스는 숨겨지므로 ModeToggle만 영향) ─────────── */
|
|
@media (max-width: 768px) {
|
|
.screener-canvas-results { grid-template-columns: 1fr; }
|
|
}
|