margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
Implement API keys for iOS shortcut, refactor Firehose ingestion to use WebSockets and CBOR, and fix mobile styles.
1.annotation-detail-page {
2 max-width: 680px;
3 margin: 0 auto;
4 padding: 24px 16px;
5 min-height: 100vh;
6}
7
8.annotation-detail-header {
9 margin-bottom: 24px;
10}
11
12.back-link {
13 display: inline-flex;
14 align-items: center;
15 color: var(--text-tertiary);
16 text-decoration: none;
17 font-size: 0.9rem;
18 font-weight: 500;
19 transition: color 0.15s;
20}
21
22.back-link:hover {
23 color: var(--text-primary);
24}
25
26.replies-section {
27 margin-top: 32px;
28 border-top: 1px solid var(--border);
29 padding-top: 24px;
30}
31
32.replies-title {
33 display: flex;
34 align-items: center;
35 gap: 8px;
36 font-size: 1.1rem;
37 font-weight: 600;
38 color: var(--text-primary);
39 margin-bottom: 20px;
40}
41
42.annotation-card {
43 display: flex;
44 flex-direction: column;
45 gap: 12px;
46 padding: 20px 0;
47 border-bottom: 1px solid var(--border);
48 transition: background 0.15s ease;
49}
50
51.annotation-card:last-child {
52 border-bottom: none;
53}
54
55.annotation-header {
56 display: flex;
57 justify-content: space-between;
58 align-items: flex-start;
59 gap: 12px;
60}
61
62.annotation-header-left {
63 display: flex;
64 align-items: center;
65 gap: 10px;
66 flex: 1;
67 min-width: 0;
68}
69
70.annotation-avatar {
71 width: 36px;
72 height: 36px;
73 min-width: 36px;
74 border-radius: 50%;
75 background: var(--bg-tertiary);
76 display: flex;
77 align-items: center;
78 justify-content: center;
79 font-weight: 600;
80 font-size: 0.85rem;
81 color: var(--text-secondary);
82 overflow: hidden;
83}
84
85.annotation-avatar img {
86 width: 100%;
87 height: 100%;
88 object-fit: cover;
89}
90
91.annotation-meta {
92 display: flex;
93 flex-direction: column;
94 justify-content: center;
95 line-height: 1.3;
96}
97
98.annotation-avatar-link {
99 text-decoration: none;
100 border-radius: 50%;
101}
102
103.annotation-author-row {
104 display: flex;
105 align-items: baseline;
106 gap: 6px;
107 flex-wrap: wrap;
108}
109
110.annotation-author {
111 font-weight: 600;
112 color: var(--text-primary);
113 font-size: 0.9rem;
114}
115
116.annotation-handle {
117 font-size: 0.85rem;
118 color: var(--text-tertiary);
119 text-decoration: none;
120}
121
122.annotation-handle:hover {
123 color: var(--text-secondary);
124}
125
126.annotation-time {
127 font-size: 0.75rem;
128 color: var(--text-tertiary);
129}
130
131.annotation-content {
132 display: flex;
133 flex-direction: column;
134 gap: 10px;
135 padding-left: 46px;
136}
137
138.annotation-source {
139 display: inline-flex;
140 align-items: center;
141 gap: 6px;
142 font-size: 0.75rem;
143 color: var(--text-tertiary);
144 text-decoration: none;
145 transition: color 0.15s ease;
146 max-width: 100%;
147 overflow: hidden;
148 text-overflow: ellipsis;
149 white-space: nowrap;
150}
151
152.annotation-source:hover {
153 color: var(--text-secondary);
154 text-decoration: underline;
155}
156
157.annotation-source-title {
158 color: var(--text-tertiary);
159 opacity: 0.7;
160}
161
162.annotation-highlight {
163 display: block;
164 position: relative;
165 padding-left: 12px;
166 margin: 4px 0;
167 text-decoration: none;
168 border-left: 2px solid var(--border);
169 transition: all 0.15s ease;
170}
171
172.annotation-highlight:hover {
173 border-left-color: var(--text-secondary);
174}
175
176.annotation-highlight mark {
177 background: transparent;
178 color: var(--text-primary);
179 font-style: italic;
180 font-size: 1rem;
181 line-height: 1.6;
182 font-weight: 400;
183 font-family: var(--font-serif, var(--font-sans));
184 display: inline;
185 overflow-wrap: anywhere;
186 word-break: break-all;
187 padding-right: 4px;
188}
189
190.annotation-text {
191 font-size: 0.95rem;
192 line-height: 1.6;
193 color: var(--text-primary);
194 white-space: pre-wrap;
195}
196
197.annotation-tags {
198 display: flex;
199 flex-wrap: wrap;
200 gap: 6px;
201 margin-top: 4px;
202}
203
204.annotation-tag {
205 font-size: 0.8rem;
206 color: var(--accent);
207 text-decoration: none;
208 font-weight: 500;
209 opacity: 0.9;
210 transition: opacity 0.15s;
211}
212
213.annotation-tag:hover {
214 opacity: 1;
215 text-decoration: underline;
216}
217
218.annotation-actions {
219 display: flex;
220 align-items: center;
221 justify-content: space-between;
222 margin-top: 4px;
223 padding-left: 46px;
224}
225
226.annotation-actions-left {
227 display: flex;
228 align-items: center;
229 gap: 16px;
230}
231
232.annotation-action {
233 display: flex;
234 align-items: center;
235 gap: 6px;
236 color: var(--text-tertiary);
237 font-size: 0.8rem;
238 font-weight: 500;
239 padding: 6px;
240 margin-left: -6px;
241 border-radius: var(--radius-sm);
242 transition: all 0.15s ease;
243 background: transparent;
244 cursor: pointer;
245 border: none;
246}
247
248.annotation-action:hover {
249 color: var(--text-secondary);
250 background: var(--bg-tertiary);
251}
252
253.annotation-action.liked {
254 color: #ef4444;
255}
256
257.annotation-action.liked svg {
258 fill: #ef4444;
259}
260
261.annotation-action.active {
262 color: var(--accent);
263}
264
265.action-icon-only {
266 padding: 6px;
267}
268
269.annotation-header-right {
270 opacity: 0;
271 transition: opacity 0.15s;
272}
273
274.annotation-card:hover .annotation-header-right {
275 opacity: 1;
276}
277
278.inline-replies {
279 margin-top: 12px;
280 padding-left: 46px;
281}
282
283.annotation-text,
284.reply-text,
285.history-content {
286 overflow-wrap: break-word;
287 word-break: break-word;
288 max-width: 100%;
289}
290
291.annotation-highlight mark {
292 overflow-wrap: break-word;
293 word-break: break-word;
294 display: inline;
295}
296
297.annotation-header-left,
298.annotation-meta,
299.reply-meta {
300 min-width: 0;
301 max-width: 100%;
302}
303
304.annotation-author-row,
305.reply-author {
306 max-width: 100%;
307}
308
309.annotation-source {
310 max-width: 100%;
311}
312
313@media (max-width: 768px) {
314 .annotation-content,
315 .annotation-actions,
316 .inline-replies {
317 padding-left: 0;
318 }
319
320 .annotation-header-right {
321 opacity: 1;
322 }
323}
324
325.replies-list-threaded {
326 margin-top: 16px;
327 display: flex;
328 flex-direction: column;
329}
330
331.reply-card-threaded {
332 position: relative;
333 padding-left: 0;
334 transition: background 0.15s;
335}
336
337.reply-header {
338 display: flex;
339 align-items: center;
340 gap: 10px;
341 margin-bottom: 6px;
342}
343
344.reply-avatar {
345 width: 28px;
346 height: 28px;
347 border-radius: 50%;
348 background: var(--bg-tertiary);
349 overflow: hidden;
350 flex-shrink: 0;
351 display: flex;
352 align-items: center;
353 justify-content: center;
354}
355
356.reply-avatar img {
357 width: 100%;
358 height: 100%;
359 object-fit: cover;
360}
361
362.reply-avatar span {
363 font-size: 0.7rem;
364 font-weight: 600;
365 color: var(--text-secondary);
366}
367
368.reply-meta {
369 display: flex;
370 align-items: baseline;
371 gap: 6px;
372 flex: 1;
373 min-width: 0;
374}
375
376.reply-author {
377 font-weight: 600;
378 font-size: 0.85rem;
379 color: var(--text-primary);
380 white-space: nowrap;
381 overflow: hidden;
382 text-overflow: ellipsis;
383}
384
385.reply-handle {
386 font-size: 0.8rem;
387 color: var(--text-tertiary);
388 text-decoration: none;
389 white-space: nowrap;
390 overflow: hidden;
391 text-overflow: ellipsis;
392}
393
394.reply-time {
395 font-size: 0.75rem;
396 color: var(--text-tertiary);
397 white-space: nowrap;
398}
399
400.reply-dot {
401 color: var(--text-tertiary);
402 font-size: 0.7rem;
403}
404
405.reply-text {
406 font-size: 0.9rem;
407 line-height: 1.5;
408 color: var(--text-primary);
409 margin: 0;
410 padding-left: 38px;
411}
412
413.reply-actions {
414 display: flex;
415 align-items: center;
416 gap: 4px;
417 opacity: 0;
418 transition: opacity 0.15s;
419}
420
421.reply-card-threaded:hover .reply-actions {
422 opacity: 1;
423}
424
425.reply-action-btn {
426 background: none;
427 border: none;
428 padding: 4px;
429 color: var(--text-tertiary);
430 cursor: pointer;
431 border-radius: 4px;
432 display: flex;
433 align-items: center;
434 justify-content: center;
435}
436
437.reply-action-btn:hover {
438 background: var(--bg-tertiary);
439 color: var(--text-secondary);
440}
441
442.reply-action-delete:hover {
443 color: #ef4444;
444 background: rgba(239, 68, 68, 0.1);
445}
446
447.reply-form {
448 border: 1px solid var(--border);
449 border-radius: var(--radius-md);
450 padding: 16px;
451 background: var(--bg-secondary);
452 margin-bottom: 24px;
453}
454
455.replying-to-banner {
456 display: flex;
457 justify-content: space-between;
458 align-items: center;
459 background: var(--bg-tertiary);
460 padding: 8px 12px;
461 border-radius: var(--radius-sm);
462 margin-bottom: 12px;
463 font-size: 0.85rem;
464 color: var(--text-secondary);
465}
466
467.cancel-reply {
468 background: none;
469 border: none;
470 color: var(--text-tertiary);
471 cursor: pointer;
472 font-size: 1.2rem;
473 padding: 0 4px;
474 line-height: 1;
475}
476
477.cancel-reply:hover {
478 color: var(--text-primary);
479}
480
481.reply-input {
482 width: 100%;
483 background: var(--bg-primary);
484 border: 1px solid var(--border);
485 border-radius: var(--radius-sm);
486 padding: 12px;
487 color: var(--text-primary);
488 font-family: inherit;
489 font-size: 0.95rem;
490 resize: vertical;
491 min-height: 80px;
492 transition: border-color 0.15s;
493 display: block;
494 box-sizing: border-box;
495}
496
497.reply-input:focus {
498 outline: none;
499 border-color: var(--accent);
500}
501
502.reply-form-actions {
503 display: flex;
504 justify-content: flex-end;
505 margin-top: 12px;
506}