margin.at
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}
186
187.annotation-text {
188 font-size: 0.95rem;
189 line-height: 1.6;
190 color: var(--text-primary);
191 white-space: pre-wrap;
192}
193
194.annotation-tags {
195 display: flex;
196 flex-wrap: wrap;
197 gap: 6px;
198 margin-top: 4px;
199}
200
201.annotation-tag {
202 font-size: 0.8rem;
203 color: var(--accent);
204 text-decoration: none;
205 font-weight: 500;
206 opacity: 0.9;
207 transition: opacity 0.15s;
208}
209
210.annotation-tag:hover {
211 opacity: 1;
212 text-decoration: underline;
213}
214
215.annotation-actions {
216 display: flex;
217 align-items: center;
218 justify-content: space-between;
219 margin-top: 4px;
220 padding-left: 46px;
221}
222
223.annotation-actions-left {
224 display: flex;
225 align-items: center;
226 gap: 16px;
227}
228
229.annotation-action {
230 display: flex;
231 align-items: center;
232 gap: 6px;
233 color: var(--text-tertiary);
234 font-size: 0.8rem;
235 font-weight: 500;
236 padding: 6px;
237 margin-left: -6px;
238 border-radius: var(--radius-sm);
239 transition: all 0.15s ease;
240 background: transparent;
241 cursor: pointer;
242 border: none;
243}
244
245.annotation-action:hover {
246 color: var(--text-secondary);
247 background: var(--bg-tertiary);
248}
249
250.annotation-action.liked {
251 color: #ef4444;
252}
253
254.annotation-action.liked svg {
255 fill: #ef4444;
256}
257
258.annotation-action.active {
259 color: var(--accent);
260}
261
262.action-icon-only {
263 padding: 6px;
264}
265
266.annotation-header-right {
267 opacity: 0;
268 transition: opacity 0.15s;
269}
270
271.annotation-card:hover .annotation-header-right {
272 opacity: 1;
273}
274
275.inline-replies {
276 margin-top: 12px;
277 padding-left: 46px;
278}
279
280@media (max-width: 600px) {
281 .annotation-content,
282 .annotation-actions,
283 .inline-replies {
284 padding-left: 0;
285 }
286
287 .annotation-header-right {
288 opacity: 1;
289 }
290}
291
292.replies-list-threaded {
293 margin-top: 16px;
294 display: flex;
295 flex-direction: column;
296}
297
298.reply-card-threaded {
299 position: relative;
300 padding-left: 0;
301 transition: background 0.15s;
302}
303
304.reply-header {
305 display: flex;
306 align-items: center;
307 gap: 10px;
308 margin-bottom: 6px;
309}
310
311.reply-avatar {
312 width: 28px;
313 height: 28px;
314 border-radius: 50%;
315 background: var(--bg-tertiary);
316 overflow: hidden;
317 flex-shrink: 0;
318 display: flex;
319 align-items: center;
320 justify-content: center;
321}
322
323.reply-avatar img {
324 width: 100%;
325 height: 100%;
326 object-fit: cover;
327}
328
329.reply-avatar span {
330 font-size: 0.7rem;
331 font-weight: 600;
332 color: var(--text-secondary);
333}
334
335.reply-meta {
336 display: flex;
337 align-items: baseline;
338 gap: 6px;
339 flex: 1;
340 min-width: 0;
341}
342
343.reply-author {
344 font-weight: 600;
345 font-size: 0.85rem;
346 color: var(--text-primary);
347 white-space: nowrap;
348 overflow: hidden;
349 text-overflow: ellipsis;
350}
351
352.reply-handle {
353 font-size: 0.8rem;
354 color: var(--text-tertiary);
355 text-decoration: none;
356 white-space: nowrap;
357 overflow: hidden;
358 text-overflow: ellipsis;
359}
360
361.reply-time {
362 font-size: 0.75rem;
363 color: var(--text-tertiary);
364 white-space: nowrap;
365}
366
367.reply-dot {
368 color: var(--text-tertiary);
369 font-size: 0.7rem;
370}
371
372.reply-text {
373 font-size: 0.9rem;
374 line-height: 1.5;
375 color: var(--text-primary);
376 margin: 0;
377 padding-left: 38px;
378}
379
380.reply-actions {
381 display: flex;
382 align-items: center;
383 gap: 4px;
384 opacity: 0;
385 transition: opacity 0.15s;
386}
387
388.reply-card-threaded:hover .reply-actions {
389 opacity: 1;
390}
391
392.reply-action-btn {
393 background: none;
394 border: none;
395 padding: 4px;
396 color: var(--text-tertiary);
397 cursor: pointer;
398 border-radius: 4px;
399 display: flex;
400 align-items: center;
401 justify-content: center;
402}
403
404.reply-action-btn:hover {
405 background: var(--bg-tertiary);
406 color: var(--text-secondary);
407}
408
409.reply-action-delete:hover {
410 color: #ef4444;
411 background: rgba(239, 68, 68, 0.1);
412}
413
414.reply-form {
415 border: 1px solid var(--border);
416 border-radius: var(--radius-md);
417 padding: 16px;
418 background: var(--bg-secondary);
419 margin-bottom: 24px;
420}
421
422.replying-to-banner {
423 display: flex;
424 justify-content: space-between;
425 align-items: center;
426 background: var(--bg-tertiary);
427 padding: 8px 12px;
428 border-radius: var(--radius-sm);
429 margin-bottom: 12px;
430 font-size: 0.85rem;
431 color: var(--text-secondary);
432}
433
434.cancel-reply {
435 background: none;
436 border: none;
437 color: var(--text-tertiary);
438 cursor: pointer;
439 font-size: 1.2rem;
440 padding: 0 4px;
441 line-height: 1;
442}
443
444.cancel-reply:hover {
445 color: var(--text-primary);
446}
447
448.reply-input {
449 width: 100%;
450 background: var(--bg-primary);
451 border: 1px solid var(--border);
452 border-radius: var(--radius-sm);
453 padding: 12px;
454 color: var(--text-primary);
455 font-family: inherit;
456 font-size: 0.95rem;
457 resize: vertical;
458 min-height: 80px;
459 transition: border-color 0.15s;
460 display: block;
461 box-sizing: border-box;
462}
463
464.reply-input:focus {
465 outline: none;
466 border-color: var(--accent);
467}
468
469.reply-form-actions {
470 display: flex;
471 justify-content: flex-end;
472 margin-top: 12px;
473}