Kazuma
73 lines
2.2 KiB
SCSS
73 lines
2.2 KiB
SCSS
@use 'sass:map';
|
|
|
|
// ── Shared pill base ─────────────────────────────────────────────────────
|
|
%pill-base {
|
|
display: inline-block;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
// ── Verdict pill ─────────────────────────────────────────────────────────
|
|
// Unified: replaces both .verdict-pill (screener) and .vpill (safe-buys)
|
|
|
|
$verdict-variants: (
|
|
'green': (color: var(--green), bg: var(--green-bg)),
|
|
'yellow': (color: var(--yellow), bg: var(--yellow-bg)),
|
|
'red': (color: var(--red), bg: var(--red-bg)),
|
|
'blue': (color: #60a5fa, bg: #1e3a5f33),
|
|
'gray': (color: var(--text-muted), bg: #1e293b),
|
|
);
|
|
|
|
.verdict-pill {
|
|
@extend %pill-base;
|
|
font-size: var(--fs-sm);
|
|
letter-spacing: 0.02em;
|
|
// Ensure all pills have a consistent look — fallback to gray
|
|
background: #1e293b;
|
|
color: var(--text-muted);
|
|
|
|
@each $name, $vals in $verdict-variants {
|
|
&.#{$name} {
|
|
background: map.get($vals, 'bg');
|
|
color: map.get($vals, 'color');
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Sentiment pill (LLM sidebar — BULLISH / BEARISH / NEUTRAL) ───────────
|
|
|
|
$sentiment-variants: (
|
|
BULLISH: (color: var(--green), bg: var(--green-bg)),
|
|
BEARISH: (color: var(--red), bg: var(--red-bg)),
|
|
NEUTRAL: (color: var(--text-muted), bg: var(--bg-card)),
|
|
);
|
|
|
|
.sentiment-pill {
|
|
@extend %pill-base;
|
|
font-size: var(--fs-xs);
|
|
|
|
@each $sentiment, $vals in $sentiment-variants {
|
|
&[data-sentiment='#{$sentiment}'] {
|
|
background: map.get($vals, 'bg');
|
|
color: map.get($vals, 'color');
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Text colour helpers ───────────────────────────────────────────────────
|
|
|
|
$text-colors: (
|
|
'green': var(--green),
|
|
'yellow': var(--yellow),
|
|
'red': var(--red),
|
|
'orange': var(--orange),
|
|
);
|
|
|
|
@each $name, $color in $text-colors {
|
|
.text-#{$name} { color: $color; font-weight: 600; }
|
|
}
|
|
|
|
.text-gray { color: var(--text-dim); }
|