(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.legal-content {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 20px;
5}
6
7.legal-content h1 {
8 font-size: 2rem;
9 margin-bottom: 8px;
10 color: var(--text-primary);
11}
12
13.legal-content h2 {
14 font-size: 1.4rem;
15 margin-top: 32px;
16 margin-bottom: 12px;
17 color: var(--text-primary);
18}
19
20.legal-content h3 {
21 font-size: 1.1rem;
22 margin-top: 20px;
23 margin-bottom: 8px;
24 color: var(--text-primary);
25}
26
27.legal-content p {
28 color: var(--text-secondary);
29 line-height: 1.7;
30 margin-bottom: 12px;
31}
32
33.legal-content ul {
34 color: var(--text-secondary);
35 line-height: 1.7;
36 margin-left: 24px;
37 margin-bottom: 12px;
38}
39
40.legal-content li {
41 margin-bottom: 6px;
42}
43
44.legal-content a {
45 color: var(--accent);
46 text-decoration: none;
47}
48
49.legal-content a:hover {
50 text-decoration: underline;
51}
52
53.legal-content section {
54 margin-bottom: 24px;
55}
56
57.text-secondary {
58 color: var(--text-secondary);
59}
60
61.text-error {
62 color: var(--error);
63}
64
65.text-center {
66 text-align: center;
67}
68
69.flex {
70 display: flex;
71}
72
73.items-center {
74 align-items: center;
75}
76
77.justify-center {
78 justify-content: center;
79}
80
81.justify-end {
82 justify-content: flex-end;
83}
84
85.gap-2 {
86 gap: 8px;
87}
88
89.gap-3 {
90 gap: 12px;
91}
92
93.mt-3 {
94 margin-top: 12px;
95}
96
97.mb-6 {
98 margin-bottom: 24px;
99}
100
101.composer {
102 margin-bottom: 24px;
103}
104
105.composer-header {
106 display: flex;
107 justify-content: space-between;
108 align-items: center;
109 margin-bottom: 12px;
110}
111
112.composer-title {
113 font-size: 1.1rem;
114 font-weight: 600;
115 color: var(--text-primary);
116 margin: 0;
117}
118
119.composer-input {
120 width: 100%;
121 min-height: 120px;
122 padding: 16px;
123 background: var(--bg-secondary);
124 border: 1px solid var(--border);
125 border-radius: var(--radius-md);
126 color: var(--text-primary);
127 font-size: 1rem;
128 resize: vertical;
129 transition: all 0.15s ease;
130}
131
132.composer-input:focus {
133 outline: none;
134 border-color: var(--accent);
135 box-shadow: 0 0 0 3px var(--accent-subtle);
136}
137
138.composer-footer {
139 display: flex;
140 justify-content: space-between;
141 align-items: center;
142 margin-top: 12px;
143}
144
145.composer-actions {
146 display: flex;
147 justify-content: flex-end;
148 gap: 8px;
149}
150
151.composer-count {
152 font-size: 0.85rem;
153 color: var(--text-tertiary);
154}
155
156.composer-count.warning {
157 color: var(--warning);
158}
159
160.composer-count.error {
161 color: var(--error);
162}
163
164.composer-char-count.warning {
165 color: var(--warning);
166}
167
168.composer-char-count.error {
169 color: var(--error);
170}
171
172.composer-add-quote {
173 width: 100%;
174 padding: 12px 16px;
175 margin-bottom: 12px;
176 background: var(--bg-tertiary);
177 border: 1px dashed var(--border);
178 border-radius: var(--radius-md);
179 color: var(--text-secondary);
180 font-size: 0.9rem;
181 cursor: pointer;
182 transition: all 0.15s ease;
183}
184
185.composer-add-quote:hover {
186 border-color: var(--accent);
187 color: var(--accent);
188 background: var(--accent-subtle);
189}
190
191.composer-quote-input-wrapper {
192 margin-bottom: 12px;
193}
194
195.composer-quote-input {
196 width: 100%;
197 padding: 12px 16px;
198 background: linear-gradient(
199 135deg,
200 rgba(79, 70, 229, 0.05),
201 rgba(168, 85, 247, 0.05)
202 );
203 border: 1px solid var(--border);
204 border-left: 3px solid var(--accent);
205 border-radius: 0 var(--radius-md) var(--radius-md) 0;
206 color: var(--text-primary);
207 font-size: 0.95rem;
208 font-style: italic;
209 resize: vertical;
210 font-family: inherit;
211 transition: all 0.15s ease;
212}
213
214.composer-quote-input:focus {
215 outline: none;
216 border-color: var(--accent);
217}
218
219.composer-quote-input::placeholder {
220 color: var(--text-tertiary);
221 font-style: italic;
222}
223
224.composer-quote-remove-btn {
225 margin-top: 8px;
226 padding: 6px 12px;
227 background: none;
228 border: none;
229 color: var(--text-tertiary);
230 font-size: 0.85rem;
231 cursor: pointer;
232}
233
234.composer-quote-remove-btn:hover {
235 color: var(--error);
236}
237
238.composer-error {
239 margin-top: 12px;
240 padding: 12px;
241 background: rgba(239, 68, 68, 0.1);
242 border: 1px solid rgba(239, 68, 68, 0.3);
243 border-radius: var(--radius-md);
244 color: var(--error);
245 font-size: 0.9rem;
246}
247
248.composer-url {
249 font-size: 0.85rem;
250 color: var(--text-secondary);
251 word-break: break-all;
252}
253
254.composer-quote {
255 position: relative;
256 padding: 12px 16px;
257 padding-right: 36px;
258 background: var(--bg-secondary);
259 border-left: 3px solid var(--accent);
260 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
261 margin-bottom: 16px;
262 font-style: italic;
263 color: var(--text-secondary);
264 overflow-wrap: break-word;
265 word-break: break-word;
266 max-width: 100%;
267}
268
269.composer-quote-remove {
270 position: absolute;
271 top: 8px;
272 right: 8px;
273 width: 24px;
274 height: 24px;
275 border-radius: var(--radius-full);
276 background: var(--bg-tertiary);
277 color: var(--text-secondary);
278 font-size: 1rem;
279 display: flex;
280 align-items: center;
281 justify-content: center;
282}
283
284.composer-quote-remove:hover {
285 background: var(--bg-hover);
286 color: var(--text-primary);
287}
288
289.composer-tags {
290 flex: 1;
291}
292
293.composer-meta-row {
294 display: flex;
295 gap: 12px;
296 margin-top: 12px;
297 align-items: flex-start;
298}
299
300.composer-labels-wrapper {
301 position: relative;
302}
303
304.composer-labels-btn {
305 display: flex;
306 align-items: center;
307 justify-content: center;
308 width: 42px;
309 height: 42px;
310 background: var(--bg-secondary);
311 border: 1px solid var(--border);
312 border-radius: var(--radius-md);
313 cursor: pointer;
314 color: var(--text-tertiary);
315 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
316 position: relative;
317}
318
319.composer-labels-btn:hover {
320 color: var(--text-primary);
321 background: var(--bg-hover);
322 border-color: var(--text-tertiary);
323}
324
325.composer-labels-btn.active {
326 color: var(--accent);
327 background: var(--accent-subtle);
328 border-color: var(--accent);
329}
330
331.composer-labels-badge {
332 position: absolute;
333 top: -4px;
334 right: -4px;
335 background: var(--error);
336 color: white;
337 font-size: 0.7rem;
338 width: 18px;
339 height: 18px;
340 border-radius: 50%;
341 display: flex;
342 align-items: center;
343 justify-content: center;
344 font-weight: bold;
345 border: 2px solid var(--bg-primary);
346 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
347}
348
349.composer-labels-picker {
350 position: absolute;
351 bottom: 100%;
352 right: 0;
353 margin-bottom: 12px;
354 background: var(--bg-elevated);
355 border: 1px solid var(--border);
356 border-radius: var(--radius-md);
357 padding: 8px 0;
358 min-width: 200px;
359 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
360 z-index: 50;
361 animation: scaleIn 0.2s ease-out forwards;
362 transform-origin: bottom right;
363}
364
365@keyframes scaleIn {
366 from {
367 opacity: 0;
368 transform: scale(0.95) translateY(5px);
369 }
370
371 to {
372 opacity: 1;
373 transform: scale(1) translateY(0);
374 }
375}
376
377.picker-header {
378 font-size: 0.75rem;
379 font-weight: 600;
380 color: var(--text-tertiary);
381 text-transform: uppercase;
382 letter-spacing: 0.05em;
383 margin-bottom: 4px;
384 padding: 4px 12px 8px;
385 border-bottom: 1px solid var(--border);
386}
387
388.picker-item {
389 display: flex;
390 align-items: center;
391 gap: 10px;
392 padding: 10px 14px;
393 cursor: pointer;
394 color: var(--text-secondary);
395 font-size: 0.9rem;
396 transition: all 0.15s ease;
397 user-select: none;
398}
399
400.picker-item:hover {
401 background: var(--bg-hover);
402 color: var(--text-primary);
403}
404
405.picker-checkbox-wrapper {
406 position: relative;
407 width: 18px;
408 height: 18px;
409 display: flex;
410 align-items: center;
411 justify-content: center;
412}
413
414.picker-checkbox-wrapper input {
415 position: absolute;
416 opacity: 0;
417 width: 100%;
418 height: 100%;
419 cursor: pointer;
420 z-index: 10;
421}
422
423.picker-checkbox-custom {
424 width: 18px;
425 height: 18px;
426 border: 2px solid var(--text-tertiary);
427 border-radius: 4px;
428 display: flex;
429 align-items: center;
430 justify-content: center;
431 background: transparent;
432 transition: all 0.2s ease;
433 color: white;
434}
435
436.picker-item:hover .picker-checkbox-custom {
437 border-color: var(--text-secondary);
438}
439
440.picker-checkbox-wrapper input:checked + .picker-checkbox-custom {
441 background: var(--accent);
442 border-color: var(--accent);
443 color: white;
444}
445
446.composer-tags-input {
447 width: 100%;
448 padding: 12px 16px;
449 background: var(--bg-secondary);
450 border: 1px solid var(--border);
451 border-radius: var(--radius-md);
452 color: var(--text-primary);
453 font-size: 0.95rem;
454 transition: all 0.15s ease;
455}
456
457.composer-tags-input:focus {
458 outline: none;
459 border-color: var(--accent);
460 box-shadow: 0 0 0 3px var(--accent-subtle);
461}
462
463.composer-tags-input::placeholder {
464 color: var(--text-tertiary);
465}
466
467.history-panel {
468 background: var(--bg-tertiary);
469 border: 1px solid var(--border);
470 border-radius: var(--radius-md);
471 padding: 1rem;
472 margin-bottom: 1rem;
473 font-size: 0.9rem;
474 animation: fadeIn 0.2s ease-out;
475}
476
477.history-header {
478 display: flex;
479 justify-content: space-between;
480 align-items: center;
481 margin-bottom: 1rem;
482 padding-bottom: 0.5rem;
483 border-bottom: 1px solid var(--border);
484}
485
486.history-title {
487 font-weight: 600;
488 text-transform: uppercase;
489 letter-spacing: 0.05em;
490 font-size: 0.75rem;
491 color: var(--text-secondary);
492}
493
494.history-list {
495 list-style: none;
496 display: flex;
497 flex-direction: column;
498 gap: 1rem;
499}
500
501.history-item {
502 position: relative;
503 padding-left: 1rem;
504 border-left: 2px solid var(--border);
505}
506
507.history-date {
508 font-size: 0.75rem;
509 color: var(--text-tertiary);
510 margin-bottom: 0.25rem;
511}
512
513.history-content {
514 color: var(--text-secondary);
515 white-space: pre-wrap;
516}
517
518.history-close-btn {
519 color: var(--text-tertiary);
520 padding: 4px;
521 border-radius: var(--radius-sm);
522 transition: all 0.2s;
523 display: flex;
524 align-items: center;
525 justify-content: center;
526}
527
528.history-close-btn:hover {
529 background: var(--bg-hover);
530 color: var(--text-primary);
531}
532
533.history-status {
534 text-align: center;
535 color: var(--text-tertiary);
536 font-style: italic;
537 padding: 1rem;
538}
539
540.share-menu-container {
541 position: relative;
542 z-index: 10;
543}
544
545.share-menu {
546 position: absolute;
547 top: 100%;
548 right: 0;
549 margin-top: 8px;
550 background: var(--bg-elevated);
551 border: 1px solid var(--border);
552 border-radius: var(--radius-lg);
553 box-shadow: var(--shadow-lg);
554 min-width: 200px;
555 padding: 8px;
556 z-index: 1000;
557 animation: fadeInUp 0.15s ease;
558}
559
560@keyframes fadeInUp {
561 from {
562 opacity: 0;
563 transform: translateY(-8px);
564 }
565
566 to {
567 opacity: 1;
568 transform: translateY(0);
569 }
570}
571
572.share-menu-section {
573 display: flex;
574 flex-direction: column;
575}
576
577.share-menu-label {
578 padding: 4px 12px 8px;
579 font-size: 0.7rem;
580 font-weight: 600;
581 text-transform: uppercase;
582 letter-spacing: 0.05em;
583 color: var(--text-tertiary);
584}
585
586.share-menu-item {
587 display: flex;
588 align-items: center;
589 gap: 10px;
590 padding: 10px 14px;
591 background: none;
592 border: none;
593 border-radius: var(--radius-md);
594 width: 100%;
595 text-align: left;
596 font-size: 0.875rem;
597 color: var(--text-primary);
598 cursor: pointer;
599 transition: all 0.1s ease;
600}
601
602.share-menu-item:hover {
603 background: var(--bg-hover);
604}
605
606.share-menu-icon {
607 font-size: 1.1rem;
608 width: 24px;
609 text-align: center;
610}
611
612.share-menu-divider {
613 height: 1px;
614 background: var(--border);
615 margin: 6px 0;
616}
617
618.bookmark-card {
619 display: flex;
620 flex-direction: column;
621 gap: 16px;
622}
623
624.bookmark-preview {
625 display: flex;
626 flex-direction: column;
627 background: var(--bg-secondary);
628 border: 1px solid var(--border);
629 border-radius: var(--radius-md);
630 overflow: hidden;
631 text-decoration: none;
632 transition: all 0.2s ease;
633 position: relative;
634}
635
636.bookmark-preview:hover {
637 border-color: var(--accent);
638 box-shadow: var(--shadow-sm);
639 transform: translateY(-1px);
640}
641
642.bookmark-preview::before {
643 content: "";
644 position: absolute;
645 left: 0;
646 top: 0;
647 bottom: 0;
648 width: 4px;
649 background: var(--accent);
650 opacity: 0.7;
651}
652
653.bookmark-preview-content {
654 padding: 16px 20px;
655 display: flex;
656 flex-direction: column;
657 gap: 8px;
658}
659
660.bookmark-preview-header {
661 display: flex;
662 align-items: center;
663 gap: 8px;
664 margin-bottom: 4px;
665}
666
667.bookmark-preview-site {
668 display: flex;
669 align-items: center;
670 gap: 6px;
671 font-size: 0.75rem;
672 font-weight: 600;
673 color: var(--accent);
674 text-transform: uppercase;
675 letter-spacing: 0.03em;
676}
677
678.bookmark-preview-title {
679 font-size: 1rem;
680 font-weight: 600;
681 line-height: 1.4;
682 color: var(--text-primary);
683 margin: 0;
684 display: -webkit-box;
685 -webkit-line-clamp: 2;
686 line-clamp: 2;
687 -webkit-box-orient: vertical;
688 overflow: hidden;
689}
690
691.bookmark-preview-desc {
692 font-size: 0.875rem;
693 color: var(--text-secondary);
694 line-height: 1.5;
695 margin: 0;
696 display: -webkit-box;
697 -webkit-line-clamp: 2;
698 line-clamp: 2;
699 -webkit-box-orient: vertical;
700 overflow: hidden;
701}
702
703.bookmark-preview-arrow {
704 display: flex;
705 align-items: center;
706 justify-content: center;
707 color: var(--text-tertiary);
708 padding: 0 4px;
709 transition: all 0.2s ease;
710}
711
712.bookmark-preview:hover .bookmark-preview-arrow {
713 color: var(--accent);
714 transform: translateX(2px);
715}
716
717.bookmark-description {
718 font-size: 0.9rem;
719 color: var(--text-secondary);
720 margin: 0;
721 line-height: 1.5;
722}
723
724.bookmark-meta {
725 display: flex;
726 align-items: center;
727 gap: 12px;
728 margin-top: 12px;
729 font-size: 0.85rem;
730 color: var(--text-tertiary);
731}
732
733.bookmark-time {
734 color: var(--text-tertiary);
735}
736
737.bookmark-preview {
738 max-width: 100%;
739 width: 100%;
740 box-sizing: border-box;
741}
742
743@media (max-width: 600px) {
744 .bookmark-preview-content {
745 padding: 12px 14px;
746 }
747
748 .legal-content {
749 padding: 16px;
750 }
751}