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@use "../../base/styles/variables" as *;
2@use "../../base/styles/mixins" as *;
3
4/* ---------- count beside the page heading ---------- */
5/* Phase 31: drop the eyebrow voice — the page-head already announces the
6 page, the count just needs to read as a quiet annotation. */
7.search-count {
8 font-size: var(--fs-sm);
9 color: var(--ink-faint);
10 font-family: var(--font-mono);
11}
12
13/* ---------- data-freshness caption above the results grid (Phase 22) ---------- */
14.results-asof {
15 margin: var(--sp-1) 0 var(--sp-3);
16 font-size: var(--fs-xs);
17 color: var(--ink-faint);
18}
19
20/* ---------- the on-page search field ---------- */
21.searchbar {
22 display: flex;
23 gap: var(--sp-2);
24 margin: var(--sp-3) 0 2px;
25}
26
27.searchbar input {
28 flex: 1 1 auto;
29 min-width: 0;
30 @include tap;
31 padding: 0 14px;
32 color: var(--ink);
33 background: var(--surface);
34 border: 1px solid var(--rule-strong);
35 border-radius: var(--radius-sm);
36 outline: none;
37 transition: border-color 0.15s, box-shadow 0.15s;
38}
39
40.searchbar input::placeholder {
41 color: var(--ink-faint);
42}
43
44.searchbar input:focus {
45 border-color: var(--ink);
46 box-shadow: 0 0 0 3px var(--well);
47}
48
49.searchbar .btn {
50 flex: none;
51}
52
53/* ---------- kind filter ---------- */
54.kind-filter {
55 display: flex;
56 flex-wrap: wrap;
57 gap: 8px;
58 margin: 14px 0 4px;
59}
60
61.kind-pill {
62 display: inline-flex;
63 align-items: center;
64 padding: 8px 14px;
65 min-height: 36px;
66 border-radius: 999px;
67 border: 1px solid var(--rule-strong);
68 background: var(--surface);
69 color: var(--ink-dim);
70 font-size: var(--fs-sm);
71 font-weight: 500;
72 transition: border-color 0.14s, color 0.14s, background 0.14s;
73}
74
75.kind-pill:hover {
76 color: var(--ink);
77 border-color: var(--ink);
78}
79
80.kind-pill.is-active {
81 background: var(--ink);
82 border-color: var(--ink);
83 color: var(--paper);
84 font-weight: 600;
85}
86
87.kind-pill.is-active:hover {
88 color: var(--paper);
89}
90
91/* ---------- add-symbol panel ---------- */
92.add-panel {
93 @include card;
94 display: flex;
95 flex-wrap: wrap;
96 align-items: center;
97 gap: 12px 16px;
98 margin: 18px 0 2px;
99 padding: 16px 18px;
100}
101
102.add-panel__text {
103 flex: 1 1 16ch;
104}
105
106.add-panel__title {
107 font-weight: 600;
108}
109
110.add-panel__title .num {
111 @include mono;
112 font-weight: 700;
113}
114
115.add-panel__sub {
116 margin-top: 3px;
117 color: var(--ink-dim);
118 font-size: 0.84rem;
119}
120
121.add-panel .btn {
122 flex: none;
123}
124
125.add-panel__error {
126 flex: 1 1 100%;
127 margin: 0;
128 color: var(--down);
129 font-size: 0.85rem;
130 font-weight: 500;
131}
132
133/* ---------- results ---------- */
134.search-grid {
135 margin-top: 18px;
136}
137
138.empty--search h1 {
139 font-size: 1.4rem;
140}