phase-7: code restructure
This commit is contained in:
@@ -0,0 +1,155 @@
|
||||
// ── AnalysisSidebar — slide-over panel ────────────────────────────────────
|
||||
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #00000055;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0; right: 0; bottom: 0;
|
||||
width: 380px;
|
||||
background: var(--bg-surface);
|
||||
border-left: 1px solid var(--blue-surface);
|
||||
z-index: 101;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px var(--space-xl);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--blue-badge);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sidebar-type {
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
background: var(--blue-surface);
|
||||
color: var(--blue-muted);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dimmer);
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-xs);
|
||||
|
||||
&:hover { color: var(--text-muted); background: var(--bg-card); }
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.sidebar-error {
|
||||
color: var(--red);
|
||||
background: var(--red-bg);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px var(--space-lg);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
// ── Sidebar content blocks ────────────────────────────────────────────────
|
||||
|
||||
.sb-sentiment-row { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
.sb-summary {
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
border-left: 3px solid var(--blue-surface);
|
||||
padding-left: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sb-sub {
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-dimmer);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sb-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
.sb-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sb-ticker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sb-chips { display: flex; gap: 4px; flex-shrink: 0; }
|
||||
|
||||
.sb-chip {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.sb-bias[data-bias="BULL"] { background: var(--green-bg, #0d2a1a); color: var(--green, #4ade80); }
|
||||
.sb-bias[data-bias="BEAR"] { background: var(--red-bg, #2a0d0d); color: var(--red, #f87171); }
|
||||
|
||||
.sb-horizon { background: var(--blue-badge); color: var(--blue-muted); }
|
||||
.sb-sensitivity { background: var(--bg-card); color: var(--text-dimmer); border: 1px solid var(--border); }
|
||||
|
||||
.sb-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sb-reason {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-dim);
|
||||
line-height: 1.4;
|
||||
}
|
||||
Reference in New Issue
Block a user