Single-binary self-hosted market watcher for stocks, ETFs, indexes, and futures: live charts, key stats, fundamentals, SEC filings, and SSE streaming.
axumdockerfinancerustself-hostedsqlitestocksvite
1// Paper Ledger build-time mixins. Runtime theme tokens (CSS custom
2// properties) live in base.scss :root so they emit exactly once per page.
3
4// A raised paper card: a lighter sheet over the page, hemmed by a hairline
5// rule. Flat by design; the faint shadow only lifts it off the paper.
6@mixin card {
7 background: var(--surface);
8 border: 1px solid var(--rule);
9 border-radius: var(--radius);
10 box-shadow: var(--lift);
11}
12
13// Tabular monospace figures so columns of ledger numbers line up.
14@mixin mono {
15 font-family: var(--font-mono);
16 font-variant-numeric: tabular-nums;
17 font-feature-settings: "tnum";
18}
19
20// Serif, for headings only.
21@mixin serif {
22 font-family: var(--font-serif);
23 font-weight: 600;
24 letter-spacing: -0.01em;
25}
26
27// Minimum comfortable touch target on phones.
28@mixin tap {
29 min-height: 44px;
30 min-width: 44px;
31}
32
33// Letter-spaced uppercase label, the ledger column-header voice.
34@mixin eyebrow {
35 text-transform: uppercase;
36 letter-spacing: 0.13em;
37 font-size: var(--eye-cap);
38 font-weight: 600;
39 color: var(--ink-faint);
40}
41
42// Shared ranked-row chrome (Phase 31). Used by `.mover`, `.hrow`, and
43// `.industry-row`. Each row is a grid with a magnitude-tinted ::before sized
44// by the route via the --bar custom property; hover swaps in the well. The
45// grid template is the row's job — this mixin only owns the chrome.
46@mixin ranked-row {
47 position: relative;
48 display: grid;
49 align-items: center;
50 gap: var(--sp-3);
51 padding: 10px var(--sp-2);
52 color: var(--ink);
53 text-decoration: none;
54 border-bottom: 1px solid var(--rule);
55 transition: background 0.12s;
56
57 &::before {
58 content: "";
59 position: absolute;
60 left: 0;
61 top: 0;
62 bottom: 0;
63 width: var(--bar, 0%);
64 border-radius: var(--radius-sm);
65 background: transparent;
66 pointer-events: none;
67 }
68
69 > * {
70 position: relative; // ride above the magnitude tint
71 }
72
73 &:last-child {
74 border-bottom: 0;
75 }
76
77 &:hover {
78 color: var(--ink);
79 background: var(--well);
80 }
81}
82
83// Pill: a small rounded label used for badges and chips across the app.
84// Centralises the radius / padding / type so vbadge / ratio__badge / chip
85// stay in lockstep.
86@mixin pill($size: var(--eye-chip)) {
87 display: inline-flex;
88 align-items: center;
89 padding: 3px 8px;
90 border-radius: 999px;
91 font-size: $size;
92 text-transform: uppercase;
93 letter-spacing: 0.12em;
94 font-weight: 600;
95 white-space: nowrap;
96}