Single-binary self-hosted website analytics on Rust axum: collector API, dashboards, world map, and PDF reports.
analyticsaxumdockerrustself-hostedsqliteviteweb-analytics
1@use "variables" as *;
2
3@use "bootstrap/scss/bootstrap" with (
4 $font-family-sans-serif: $font-family-sans-serif,
5 $font-family-monospace: $font-family-monospace,
6 $headings-font-family: $headings-font-family,
7 $headings-font-weight: $headings-font-weight,
8 $font-size-base: $font-size-base,
9 $line-height-base: $line-height-base,
10 $headings-line-height: $headings-line-height,
11
12 $white: $white,
13 $gray-100: $gray-100,
14 $gray-200: $gray-200,
15 $gray-300: $gray-300,
16 $gray-400: $gray-400,
17 $gray-500: $gray-500,
18 $gray-600: $gray-600,
19 $gray-700: $gray-700,
20 $gray-800: $gray-800,
21 $gray-900: $gray-900,
22 $black: $black,
23
24 $body-bg: $body-bg,
25 $body-color: $body-color,
26
27 $primary: $primary,
28 $secondary: $secondary,
29 $success: $success,
30 $info: $info,
31 $warning: $warning,
32 $danger: $danger,
33 $light: $light,
34 $dark: $dark,
35
36 $link-color: $link-color,
37 $link-hover-color: $link-hover-color,
38 $link-decoration: $link-decoration,
39 $link-hover-decoration: $link-hover-decoration,
40
41 $border-color: $border-color,
42 $border-radius: $border-radius,
43 $border-radius-sm: $border-radius-sm,
44 $border-radius-lg: $border-radius-lg,
45
46 $card-bg: $card-bg,
47 $card-border-color: $card-border-color,
48 $card-color: $card-color,
49 $card-cap-bg: $card-cap-bg,
50
51 $input-bg: $input-bg,
52 $input-color: $input-color,
53 $input-border-color: $input-border-color,
54 $input-focus-bg: $input-focus-bg,
55 $input-focus-color: $input-focus-color,
56 $input-focus-border-color: $input-focus-border-color,
57 $input-focus-box-shadow: $input-focus-box-shadow,
58 $input-placeholder-color: $input-placeholder-color,
59
60 $navbar-dark-color: $navbar-dark-color,
61 $navbar-dark-hover-color: $navbar-dark-hover-color,
62 $navbar-dark-active-color: $navbar-dark-active-color,
63
64 $list-group-bg: $list-group-bg,
65 $list-group-border-color: $list-group-border-color,
66 $list-group-hover-bg: $list-group-hover-bg,
67 $list-group-action-color: $list-group-action-color,
68 $list-group-action-hover-color: $list-group-action-hover-color,
69 $list-group-action-active-bg: $list-group-action-active-bg,
70 $list-group-action-active-color: $list-group-action-active-color,
71 $list-group-active-bg: $list-group-active-bg,
72 $list-group-active-border-color: $list-group-active-border-color,
73 $list-group-active-color: $list-group-active-color,
74
75 $breadcrumb-active-color: $breadcrumb-active-color,
76 $breadcrumb-divider-color: $breadcrumb-divider-color,
77
78 $dropdown-bg: $dropdown-bg,
79 $dropdown-border-color: $dropdown-border-color,
80 $dropdown-color: $dropdown-color,
81 $dropdown-link-color: $dropdown-link-color,
82 $dropdown-link-hover-color: $dropdown-link-hover-color,
83 $dropdown-link-hover-bg: $dropdown-link-hover-bg,
84
85 $btn-close-color: $btn-close-color,
86
87 $modal-content-bg: $modal-content-bg,
88 $modal-content-border-color: $modal-content-border-color,
89 $modal-header-border-color: $modal-header-border-color,
90 $modal-footer-border-color: $modal-footer-border-color,
91 $modal-backdrop-bg: $modal-backdrop-bg,
92 $modal-backdrop-opacity: $modal-backdrop-opacity,
93
94 $progress-bg: $progress-bg,
95 $progress-bar-bg: $progress-bar-bg,
96
97 $table-bg: $table-bg,
98 $table-color: $table-color,
99 $table-border-color: $table-border-color,
100
101 $accordion-bg: $accordion-bg,
102 $accordion-border-color: $accordion-border-color,
103 $accordion-button-bg: $accordion-button-bg,
104 $accordion-button-active-bg: $accordion-button-active-bg,
105 $accordion-button-active-color: $accordion-button-active-color,
106 $accordion-button-focus-border-color: $accordion-button-focus-border-color,
107 $accordion-button-focus-box-shadow: $accordion-button-focus-box-shadow,
108);
109
110
111// ── Surface utilities ──
112
113.bg-surface {
114 background: #13120e !important;
115}
116
117.bg-surface-2 {
118 background: #18160f !important;
119}
120
121.bg-deep {
122 background: #09080626 !important;
123}
124
125.bg-deep,
126.bg-black {
127 background-color: #090806 !important;
128}
129
130.border-subtle {
131 border-color: rgba(107, 158, 120, 0.1) !important;
132}
133
134.text-muted {
135 color: #9e968a !important;
136}
137
138.text-green {
139 color: $green-bright !important;
140}
141
142.text-amber {
143 color: $amber !important;
144}
145
146// Legacy utility aliases used by existing templates
147.bg-purple-900 { background-color: #090806 !important; }
148.bg-purple-800 { background-color: #0e0d0a !important; }
149
150.link-footer {
151 color: $gray-400;
152 text-decoration: none;
153 transition: color 200ms ease;
154
155 &:hover {
156 color: $white;
157 }
158}
159
160.breadcrumb {
161 display: block;
162 flex-wrap: nowrap;
163 white-space: nowrap;
164 margin-bottom: 0;
165
166 .breadcrumb-item {
167 font-size: 0.82em;
168 white-space: nowrap;
169 display: inline-block;
170
171 a {
172 color: $gray-400;
173 text-decoration: none;
174 transition: color 150ms ease;
175
176 &:hover {
177 color: $green-bright;
178 }
179 }
180
181 &.active {
182 color: $gray-200;
183 }
184 }
185}
186
187// Buttons — flat, no glow
188.btn {
189 letter-spacing: 0.02em;
190 font-weight: 500;
191 transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
192}
193
194.btn-primary {
195 color: #0b0a08;
196 background: $green;
197 border-color: $green;
198
199 &:hover,
200 &:focus {
201 color: #0b0a08;
202 background: $green-bright;
203 border-color: $green-bright;
204 }
205}
206
207.btn-success {
208 color: #0b0a08;
209 background: $green;
210 border-color: $green;
211
212 &:hover,
213 &:focus {
214 color: #0b0a08;
215 background: $green-bright;
216 border-color: $green-bright;
217 }
218}
219
220.btn-secondary {
221 color: $gray-200;
222 background: #1a1812;
223 border-color: rgba(107, 158, 120, 0.15);
224
225 &:hover,
226 &:focus {
227 color: $white;
228 background: #211e1a;
229 border-color: rgba(107, 158, 120, 0.25);
230 }
231}
232
233.btn-outline-light {
234 border-color: rgba(221, 215, 205, 0.18);
235 color: $gray-200;
236
237 &:hover,
238 &:focus {
239 background: rgba(221, 215, 205, 0.05);
240 border-color: rgba(221, 215, 205, 0.35);
241 color: $white;
242 }
243}
244
245.btn-outline-danger {
246 color: $terracotta;
247 border-color: $terracotta-border;
248
249 &:hover,
250 &:focus {
251 background: $terracotta-dim;
252 color: #d88870;
253 border-color: rgba(196, 112, 85, 0.4);
254 }
255}
256
257.btn-link {
258 color: $green-bright;
259}
260
261// Alerts for dark
262.alert { border-radius: $border-radius; }
263
264.alert-info {
265 background: rgba(126, 170, 184, 0.08);
266 border-color: rgba(126, 170, 184, 0.2);
267 color: #9ec5d2;
268}
269
270.alert-warning {
271 background: $amber-dim;
272 border-color: $amber-border;
273 color: #ddc06a;
274}
275
276.alert-danger {
277 background: $terracotta-dim;
278 border-color: $terracotta-border;
279 color: #e38871;
280}
281
282.alert-success {
283 background: $green-dim;
284 border-color: $green-border;
285 color: $green-bright;
286}
287
288// Forms
289.form-control,
290.form-select {
291 background-color: $input-bg;
292 border-color: $input-border-color;
293 color: $input-color;
294
295 &:focus {
296 background-color: $input-focus-bg;
297 }
298}
299
300.form-floating > label {
301 color: #665f56;
302}
303
304// Badges
305.badge {
306 font-weight: 500;
307 letter-spacing: 0.04em;
308 padding: 0.35em 0.55em;
309}
310
311// Pagination
312.page-link {
313 background: $card-bg;
314 border-color: $card-border-color;
315 color: $gray-300;
316
317 &:hover {
318 background: #1a1812;
319 border-color: $green-border;
320 color: $green-bright;
321 }
322}
323
324.page-item.active .page-link {
325 background: $green-dim;
326 border-color: $green-border;
327 color: $green-bright;
328}
329
330.page-item.disabled .page-link {
331 background: $card-bg;
332 border-color: $card-border-color;
333 color: #4a443c;
334}
335
336// Accordion tweaks
337.accordion-button {
338 font-family: $font-family-monospace;
339 font-size: 0.85rem;
340 letter-spacing: 0.02em;
341 color: $gray-200;
342
343 &:not(.collapsed) {
344 box-shadow: inset 0 -1px 0 rgba(107, 158, 120, 0.12);
345 }
346}
347
348.accordion-body {
349 font-size: 0.88rem;
350 color: $gray-300;
351 line-height: 1.7;
352
353 textarea.form-control {
354 font-family: $font-family-monospace;
355 font-size: 0.78rem;
356 background: #090806;
357 color: $green-bright;
358 border-color: rgba(107, 158, 120, 0.15);
359 }
360}