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