style(screener): canvas mode styles (toggle, nodes, toolbar, layout)
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
@import './components/canvas/Canvas.css';
|
||||
.screener-page {
|
||||
padding: 24px;
|
||||
color: var(--text, #e5e7eb);
|
||||
|
||||
196
src/pages/stock/screener/components/canvas/Canvas.css
Normal file
196
src/pages/stock/screener/components/canvas/Canvas.css
Normal file
@@ -0,0 +1,196 @@
|
||||
/* ─────────── 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; }
|
||||
}
|
||||
Reference in New Issue
Block a user