zzstoatzz.io
search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
6.9 kB
330 lines
1:root, [data-theme="dark"] {
2 --bg: #0a0a0a;
3 --bg-subtle: #111;
4 --bg-hover: #151515;
5 --border: #222;
6 --border-subtle: #252525;
7 --border-focus: #333;
8 --text: #ccc;
9 --text-bright: #fff;
10 --text-secondary: #888;
11 --text-dim: #777;
12 --text-muted: #444;
13 --row-border: #1a1a1a;
14 --tooltip-bg: rgba(17, 17, 17, 0.9);
15}
16
17[data-theme="light"] {
18 --bg: #f5f5f0;
19 --bg-subtle: #eee;
20 --bg-hover: #e4e4e0;
21 --border: #ddd;
22 --border-subtle: #ccc;
23 --border-focus: #bbb;
24 --text: #333;
25 --text-bright: #111;
26 --text-secondary: #555;
27 --text-dim: #666;
28 --text-muted: #999;
29 --row-border: #e0e0e0;
30 --tooltip-bg: rgba(238, 238, 238, 0.9);
31}
32
33* { box-sizing: border-box; margin: 0; padding: 0; }
34
35body {
36 font-family: monospace;
37 background: var(--bg);
38 color: var(--text);
39 min-height: 100vh;
40 padding: 1rem;
41 font-size: 14px;
42 line-height: 1.6;
43}
44
45.container { max-width: 600px; margin: 0 auto; }
46
47a { color: #1B7340; text-decoration: none; }
48a:hover { color: #2a9d5c; }
49
50h1 {
51 font-size: 12px;
52 font-weight: normal;
53 margin-bottom: 1.5rem;
54 display: flex;
55 align-items: center;
56 flex-wrap: wrap;
57 gap: 0.4rem;
58}
59h1 .lf-settings-btn { margin-left: auto; }
60h1 a.title { color: var(--text-secondary); }
61h1 a.title:hover { color: var(--text-bright); }
62h1 .dim { color: var(--text-dim); }
63
64section { margin-bottom: 2rem; }
65
66.section-title {
67 font-size: 11px;
68 color: var(--text-dim);
69 margin-bottom: 0.75rem;
70}
71
72.metrics {
73 display: flex;
74 flex-wrap: wrap;
75 gap: 1.75rem 2rem;
76 margin-bottom: 1rem;
77}
78
79.metric-value {
80 font-size: 16px;
81 color: var(--text-secondary);
82 font-weight: normal;
83}
84
85.metric-label {
86 font-size: 10px;
87 color: var(--text-muted);
88 text-transform: uppercase;
89 letter-spacing: 0.5px;
90}
91
92/* small qualifier under a metric value (coverage %, freshness age) */
93.metric-sub {
94 font-size: 10px;
95 color: var(--text-dim);
96 margin-top: 2px;
97 min-height: 12px;
98}
99.metric-sub .warn { color: #f59e0b; }
100.metric-value.warn { color: #f59e0b; }
101
102.chart-box {
103 background: var(--bg-subtle);
104 border: 1px solid var(--border);
105 padding: 1rem;
106 margin-bottom: 1rem;
107}
108
109.chart-header {
110 display: flex;
111 justify-content: space-between;
112 font-size: 11px;
113 color: var(--text-dim);
114 margin-bottom: 0.75rem;
115}
116
117/* shared layout for any section that wants a title + range buttons row */
118.ranged-header {
119 display: flex;
120 justify-content: space-between;
121 align-items: center;
122 margin-bottom: 0.75rem;
123 gap: 0.5rem;
124}
125.ranged-header .section-title { margin-bottom: 0; }
126.ranged-controls { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
127
128.timeline {
129 display: flex;
130 align-items: flex-end;
131 gap: 2px;
132 height: 60px;
133}
134
135.bar-stack {
136 flex: 1;
137 display: flex;
138 flex-direction: column;
139 min-height: 2px;
140}
141.bar-stack:hover .bar-normal { background: #2a9d5c; }
142.bar-normal { background: #1B7340; flex-shrink: 0; }
143
144.doc-row {
145 display: flex;
146 justify-content: space-between;
147 font-size: 12px;
148 padding: 0.25rem 0;
149 border-bottom: 1px solid var(--row-border);
150}
151.doc-row:last-child { border-bottom: none; }
152.doc-type { color: var(--text-secondary); }
153.doc-count { color: var(--text); }
154
155.pub-row {
156 display: flex;
157 justify-content: space-between;
158 font-size: 12px;
159 padding: 0.25rem 0;
160 border-bottom: 1px solid var(--row-border);
161}
162.pub-row:last-child { border-bottom: none; }
163.pub-name { color: var(--text-secondary); }
164a.pub-name { color: #1B7340; }
165a.pub-name:hover { color: #2a9d5c; }
166.pub-count { color: var(--text-dim); }
167
168.timing-row {
169 display: flex;
170 justify-content: space-between;
171 font-size: 12px;
172 padding: 0.25rem 0;
173 border-bottom: 1px solid var(--row-border);
174}
175.timing-row:last-child { border-bottom: none; }
176.timing-name { color: var(--text-secondary); }
177.timing-value { color: var(--text); }
178.timing-value .dim { color: var(--text-dim); }
179
180/* sections with a header + range buttons + chart below */
181.ranged-section { margin-bottom: 2rem; }
182
183.traffic-sparkline {
184 position: relative;
185 height: 60px;
186}
187.traffic-tooltip {
188 position: absolute;
189 bottom: 2px;
190 right: 4px;
191 font-size: 9px;
192 color: var(--text-dim);
193 white-space: nowrap;
194 pointer-events: none;
195 opacity: 0;
196 transition: opacity 0.1s;
197 background: var(--tooltip-bg);
198 padding: 1px 4px;
199}
200
201/* shared range-button group used by traffic, latency, timeline */
202.range-btns { display: inline-flex; }
203.range-btns button {
204 font-family: monospace;
205 font-size: 10px;
206 background: none;
207 border: 1px solid var(--border);
208 color: var(--text-dim);
209 padding: 1px 6px;
210 cursor: pointer;
211 margin-left: 2px;
212}
213.range-btns button:hover {
214 border-color: var(--border-focus);
215 color: var(--text-secondary);
216}
217.range-btns button.active {
218 border-color: #1B7340;
219 color: #1B7340;
220}
221
222.latency-grid {
223 display: grid;
224 grid-template-columns: 1fr 1fr 1fr;
225 gap: 0.75rem;
226}
227.latency-cell {
228 display: flex;
229 flex-direction: column;
230}
231.latency-canvas-wrap {
232 position: relative;
233 height: 40px;
234}
235.latency-canvas-wrap canvas {
236 width: 100%;
237 height: 100%;
238}
239.latency-cell-label {
240 display: flex;
241 align-items: center;
242 gap: 4px;
243 font-size: 10px;
244 color: var(--text-dim);
245 margin-bottom: 4px;
246}
247.latency-cell-label .dot {
248 width: 6px;
249 height: 6px;
250 border-radius: 50%;
251}
252.latency-cell-max {
253 margin-left: auto;
254 color: var(--text-muted);
255 white-space: nowrap;
256}
257.latency-cell-empty {
258 height: 40px;
259 display: flex;
260 align-items: center;
261 justify-content: center;
262 color: var(--text-muted);
263 font-size: 11px;
264}
265.latency-tooltip {
266 position: absolute;
267 bottom: 2px;
268 right: 4px;
269 font-size: 9px;
270 color: var(--text-dim);
271 white-space: nowrap;
272 pointer-events: none;
273 opacity: 0;
274 transition: opacity 0.1s;
275 background: var(--tooltip-bg);
276 padding: 1px 4px;
277}
278
279.tags {
280 display: flex;
281 flex-wrap: wrap;
282 gap: 0.5rem;
283}
284
285.tag {
286 font-size: 11px;
287 padding: 3px 8px;
288 background: var(--bg-hover);
289 border: 1px solid var(--border-subtle);
290 border-radius: 3px;
291 color: var(--text-dim);
292}
293.tag:hover {
294 background: var(--bg-hover);
295 border-color: var(--border-focus);
296 color: var(--text);
297}
298.tag .n { color: var(--text-muted); margin-left: 4px; }
299
300.live { font-size: 11px; color: var(--text-dim); }
301.live span { color: #4ade80; }
302
303.theme-toggle {
304 cursor: pointer;
305 color: var(--text-dim);
306 font-size: 16px;
307 user-select: none;
308 background: none;
309 border: none;
310 font-family: inherit;
311 padding: 4px 6px;
312 line-height: 1;
313 min-width: 44px;
314 min-height: 44px;
315 display: inline-flex;
316 align-items: center;
317 justify-content: center;
318}
319.theme-toggle:hover { color: var(--text); }
320.theme-toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
321
322footer {
323 margin-top: 2rem;
324 padding-top: 1rem;
325 border-top: 1px solid var(--border);
326 font-size: 11px;
327 color: var(--text-muted);
328}
329footer a { color: var(--text-dim); }
330footer a:hover { color: var(--text-secondary); }