(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap");
2
3:root {
4 --bg-primary: #0a0a0d;
5 --bg-secondary: #121216;
6 --bg-tertiary: #1a1a1f;
7 --bg-card: #0f0f13;
8 --bg-elevated: #18181d;
9 --bg-hover: #1e1e24;
10
11 --text-primary: #eaeaee;
12 --text-secondary: #b7b6c5;
13 --text-tertiary: #6e6d7a;
14
15 --border: rgba(183, 182, 197, 0.12);
16 --border-hover: rgba(183, 182, 197, 0.2);
17
18 --accent: #957a86;
19 --accent-hover: #a98d98;
20 --accent-subtle: rgba(149, 122, 134, 0.15);
21 --accent-text: #c4a8b2;
22
23 --success: #7fb069;
24 --error: #d97766;
25 --warning: #e8a54b;
26
27 --radius-sm: 6px;
28 --radius-md: 8px;
29 --radius-lg: 12px;
30 --radius-full: 9999px;
31
32 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
33 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
34}
35
36@media (prefers-color-scheme: light) {
37 :root {
38 --bg-primary: #f8f8fa;
39 --bg-secondary: #ffffff;
40 --bg-tertiary: #f0f0f4;
41 --bg-card: #ffffff;
42 --bg-elevated: #ffffff;
43 --bg-hover: #eeeef2;
44
45 --text-primary: #18171c;
46 --text-secondary: #5c495a;
47 --text-tertiary: #8a8494;
48
49 --border: rgba(92, 73, 90, 0.12);
50 --border-hover: rgba(92, 73, 90, 0.22);
51
52 --accent: #7a5f6d;
53 --accent-hover: #664e5b;
54 --accent-subtle: rgba(149, 122, 134, 0.12);
55 --accent-text: #5c495a;
56
57 --shadow-sm: 0 1px 3px rgba(92, 73, 90, 0.06);
58 --shadow-md: 0 4px 12px rgba(92, 73, 90, 0.08);
59 }
60}
61
62body.light {
63 --bg-primary: #f8f8fa;
64 --bg-secondary: #ffffff;
65 --bg-tertiary: #f0f0f4;
66 --bg-card: #ffffff;
67 --bg-elevated: #ffffff;
68 --bg-hover: #eeeef2;
69
70 --text-primary: #18171c;
71 --text-secondary: #5c495a;
72 --text-tertiary: #8a8494;
73
74 --border: rgba(92, 73, 90, 0.12);
75 --border-hover: rgba(92, 73, 90, 0.22);
76
77 --accent: #7a5f6d;
78 --accent-hover: #664e5b;
79 --accent-subtle: rgba(149, 122, 134, 0.12);
80 --accent-text: #5c495a;
81
82 --shadow-sm: 0 1px 3px rgba(92, 73, 90, 0.06);
83 --shadow-md: 0 4px 12px rgba(92, 73, 90, 0.08);
84}
85
86body.dark {
87 --bg-primary: #0a0a0d;
88 --bg-secondary: #121216;
89 --bg-tertiary: #1a1a1f;
90 --bg-card: #0f0f13;
91 --bg-elevated: #18181d;
92 --bg-hover: #1e1e24;
93
94 --text-primary: #eaeaee;
95 --text-secondary: #b7b6c5;
96 --text-tertiary: #6e6d7a;
97
98 --border: rgba(183, 182, 197, 0.12);
99 --border-hover: rgba(183, 182, 197, 0.2);
100
101 --accent: #957a86;
102 --accent-hover: #a98d98;
103 --accent-subtle: rgba(149, 122, 134, 0.15);
104 --accent-text: #c4a8b2;
105
106 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
107 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
108}
109
110* {
111 margin: 0;
112 padding: 0;
113 box-sizing: border-box;
114}
115
116body {
117 font-family:
118 "IBM Plex Sans",
119 -apple-system,
120 BlinkMacSystemFont,
121 sans-serif;
122 background: var(--bg-primary);
123 color: var(--text-primary);
124 min-height: 100vh;
125 -webkit-font-smoothing: antialiased;
126}
127
128.sidebar {
129 display: flex;
130 flex-direction: column;
131 height: 100vh;
132 background: var(--bg-primary);
133}
134
135.sidebar-header {
136 display: flex;
137 align-items: center;
138 justify-content: space-between;
139 padding: 14px 16px;
140 border-bottom: 1px solid var(--border);
141 background: var(--bg-primary);
142}
143
144.sidebar-brand {
145 display: flex;
146 align-items: center;
147 gap: 10px;
148}
149
150.sidebar-logo {
151 color: var(--accent);
152}
153
154.sidebar-title {
155 font-weight: 600;
156 font-size: 15px;
157 color: var(--text-primary);
158 letter-spacing: -0.02em;
159}
160
161.user-info {
162 display: flex;
163 align-items: center;
164 gap: 8px;
165}
166
167.user-handle {
168 font-size: 12px;
169 color: var(--text-secondary);
170 background: var(--bg-tertiary);
171 padding: 4px 10px;
172 border-radius: var(--radius-full);
173}
174
175.current-page-info {
176 display: flex;
177 align-items: center;
178 gap: 8px;
179 padding: 10px 16px;
180 background: var(--bg-primary);
181 border-bottom: 1px solid var(--border);
182}
183
184.page-url {
185 font-size: 12px;
186 color: var(--text-tertiary);
187 white-space: nowrap;
188 overflow: hidden;
189 text-overflow: ellipsis;
190}
191
192.sidebar-content {
193 flex: 1;
194 overflow-y: auto;
195 display: flex;
196 flex-direction: column;
197}
198
199.loading {
200 display: flex;
201 flex-direction: column;
202 align-items: center;
203 justify-content: center;
204 height: 100%;
205 color: var(--text-tertiary);
206 gap: 12px;
207}
208
209.spinner {
210 width: 20px;
211 height: 20px;
212 border: 2px solid var(--border);
213 border-top-color: var(--accent);
214 border-radius: 50%;
215 animation: spin 1s linear infinite;
216}
217
218@keyframes spin {
219 to {
220 transform: rotate(360deg);
221 }
222}
223
224.login-prompt {
225 display: flex;
226 flex-direction: column;
227 align-items: center;
228 justify-content: center;
229 height: 100%;
230 padding: 32px;
231 text-align: center;
232 gap: 20px;
233}
234
235.login-at-logo {
236 font-size: 3.5rem;
237 font-weight: 700;
238 color: var(--accent);
239 line-height: 1;
240}
241
242.login-title {
243 font-size: 1rem;
244 font-weight: 600;
245 color: var(--text-primary);
246}
247
248.login-text {
249 font-size: 13px;
250 color: var(--text-secondary);
251 line-height: 1.5;
252}
253
254.tabs {
255 display: flex;
256 border-bottom: 1px solid var(--border);
257 background: var(--bg-primary);
258 padding: 4px 8px;
259 gap: 4px;
260 margin: 0;
261}
262
263.tab-btn {
264 flex: 1;
265 padding: 10px 8px;
266 background: transparent;
267 border: none;
268 font-size: 12px;
269 font-weight: 500;
270 color: var(--text-tertiary);
271 cursor: pointer;
272 border-radius: var(--radius-sm);
273 transition: all 0.15s;
274}
275
276.tab-btn:hover {
277 color: var(--text-secondary);
278 background: var(--bg-hover);
279}
280
281.tab-btn.active {
282 color: var(--text-primary);
283 background: var(--bg-tertiary);
284}
285
286.tab-content {
287 display: none;
288 flex: 1;
289 flex-direction: column;
290 overflow-y: auto;
291}
292
293.tab-content.active {
294 display: flex;
295}
296
297.quick-actions {
298 display: flex;
299 gap: 8px;
300 padding: 12px 16px;
301 border-bottom: 1px solid var(--border);
302 background: var(--bg-primary);
303}
304
305.btn {
306 padding: 10px 18px;
307 border-radius: var(--radius-md);
308 border: none;
309 font-weight: 600;
310 cursor: pointer;
311 font-size: 13px;
312 transition: all 0.15s;
313 display: inline-flex;
314 align-items: center;
315 justify-content: center;
316 gap: 8px;
317}
318
319.btn-small {
320 padding: 8px 14px;
321 font-size: 12px;
322}
323
324.btn-primary {
325 background: var(--accent);
326 color: white;
327}
328
329.btn-primary:hover {
330 background: var(--accent-hover);
331}
332
333.btn-primary:disabled {
334 opacity: 0.5;
335 cursor: not-allowed;
336}
337
338.btn-secondary {
339 background: var(--bg-tertiary);
340 border: 1px solid var(--border);
341 color: var(--text-primary);
342 flex: 1;
343}
344
345.btn-secondary:hover {
346 background: var(--bg-hover);
347 border-color: var(--border-hover);
348}
349
350.btn-icon-text {
351 flex: 1;
352}
353
354.btn-icon {
355 background: none;
356 border: none;
357 color: var(--text-tertiary);
358 cursor: pointer;
359 padding: 6px;
360 border-radius: var(--radius-sm);
361}
362
363.btn-icon:hover {
364 color: var(--text-primary);
365 background: var(--bg-hover);
366}
367
368.create-form {
369 padding: 16px;
370 border-bottom: 1px solid var(--border);
371 background: var(--bg-primary);
372}
373
374.form-header {
375 display: flex;
376 justify-content: space-between;
377 align-items: center;
378 margin-bottom: 10px;
379}
380
381.form-title {
382 font-size: 12px;
383 font-weight: 600;
384 color: var(--text-primary);
385 letter-spacing: -0.01em;
386}
387
388.annotation-input {
389 width: 100%;
390 padding: 12px;
391 border: 1px solid var(--border);
392 border-radius: var(--radius-md);
393 font-family: inherit;
394 font-size: 13px;
395 resize: none;
396 margin-bottom: 10px;
397 background: var(--bg-elevated);
398 color: var(--text-primary);
399 transition: border-color 0.15s;
400}
401
402.annotation-input::placeholder {
403 color: var(--text-tertiary);
404}
405
406.annotation-input:focus {
407 outline: none;
408 border-color: var(--accent);
409}
410
411.form-actions {
412 display: flex;
413 justify-content: flex-end;
414}
415
416.quote-preview {
417 margin-bottom: 12px;
418 padding: 12px;
419 background: var(--accent-subtle);
420 border-left: 2px solid var(--accent);
421 border-radius: var(--radius-sm);
422}
423
424.quote-preview-header {
425 display: flex;
426 justify-content: space-between;
427 align-items: center;
428 margin-bottom: 8px;
429 font-size: 10px;
430 font-weight: 600;
431 text-transform: uppercase;
432 letter-spacing: 0.5px;
433 color: var(--accent-text);
434}
435
436.quote-preview-clear {
437 background: none;
438 border: none;
439 color: var(--text-tertiary);
440 font-size: 16px;
441 cursor: pointer;
442 padding: 0 4px;
443 line-height: 1;
444}
445
446.quote-preview-clear:hover {
447 color: var(--text-primary);
448}
449
450.quote-preview-text {
451 font-size: 12px;
452 font-style: italic;
453 color: var(--text-secondary);
454 line-height: 1.5;
455}
456
457.annotations-section {
458 flex: 1;
459}
460
461.section-header {
462 display: flex;
463 justify-content: space-between;
464 align-items: center;
465 padding: 14px 16px;
466 background: var(--bg-primary);
467 border-bottom: 1px solid var(--border);
468}
469
470.section-title {
471 font-size: 11px;
472 font-weight: 600;
473 text-transform: uppercase;
474 color: var(--text-tertiary);
475 letter-spacing: 0.5px;
476}
477
478.annotation-count {
479 font-size: 11px;
480 background: var(--bg-tertiary);
481 padding: 3px 8px;
482 border-radius: var(--radius-full);
483 color: var(--text-secondary);
484}
485
486.annotations-list {
487 display: flex;
488 flex-direction: column;
489 gap: 1px;
490 background: var(--border);
491}
492
493.annotation-item {
494 padding: 14px 16px;
495 background: var(--bg-primary);
496 transition: background 0.15s;
497}
498
499.annotation-item:hover {
500 background: var(--bg-hover);
501}
502
503.annotation-item-header {
504 display: flex;
505 align-items: center;
506 margin-bottom: 8px;
507 gap: 10px;
508}
509
510.annotation-item-avatar {
511 width: 26px;
512 height: 26px;
513 border-radius: 50%;
514 background: var(--accent);
515 color: var(--bg-primary);
516 display: flex;
517 align-items: center;
518 justify-content: center;
519 font-size: 10px;
520 font-weight: 600;
521}
522
523.annotation-item-meta {
524 flex: 1;
525}
526
527.annotation-item-author {
528 font-size: 12px;
529 font-weight: 600;
530 color: var(--text-primary);
531}
532
533.annotation-item-time {
534 font-size: 11px;
535 color: var(--text-tertiary);
536}
537
538.annotation-type-badge {
539 font-size: 10px;
540 padding: 3px 8px;
541 border-radius: var(--radius-full);
542 font-weight: 500;
543}
544
545.annotation-type-badge.highlight {
546 background: var(--accent-subtle);
547 color: var(--accent-text);
548}
549
550.annotation-item-quote {
551 padding: 8px 12px;
552 border-left: 2px solid var(--accent);
553 margin-bottom: 8px;
554 font-size: 12px;
555 color: var(--text-secondary);
556 font-style: italic;
557 background: var(--accent-subtle);
558 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
559}
560
561.annotation-item-text {
562 font-size: 13px;
563 line-height: 1.5;
564 color: var(--text-primary);
565}
566
567.bookmarks-list {
568 display: flex;
569 flex-direction: column;
570 gap: 1px;
571 background: var(--border);
572}
573
574.bookmark-item {
575 padding: 14px 16px;
576 background: var(--bg-primary);
577 text-decoration: none;
578 color: inherit;
579 display: block;
580 transition: background 0.15s;
581}
582
583.bookmark-item:hover {
584 background: var(--bg-hover);
585}
586
587.bookmark-title {
588 font-size: 13px;
589 font-weight: 500;
590 margin-bottom: 4px;
591 white-space: nowrap;
592 overflow: hidden;
593 text-overflow: ellipsis;
594 color: var(--text-primary);
595}
596
597.bookmark-url {
598 font-size: 11px;
599 color: var(--text-tertiary);
600 white-space: nowrap;
601 overflow: hidden;
602 text-overflow: ellipsis;
603}
604
605.empty-state {
606 display: flex;
607 flex-direction: column;
608 align-items: center;
609 justify-content: center;
610 padding: 40px 16px;
611 text-align: center;
612 color: var(--text-tertiary);
613}
614
615.empty-icon {
616 margin-bottom: 12px;
617 color: var(--text-tertiary);
618 opacity: 0.4;
619}
620
621.empty-text {
622 font-size: 13px;
623 color: var(--text-secondary);
624 margin-bottom: 4px;
625}
626
627.empty-hint {
628 font-size: 12px;
629 color: var(--text-tertiary);
630}
631
632.sidebar-footer {
633 display: flex;
634 align-items: center;
635 justify-content: space-between;
636 padding: 12px 16px;
637 border-top: 1px solid var(--border);
638 background: var(--bg-primary);
639}
640
641.sidebar-link {
642 font-size: 12px;
643 color: var(--text-tertiary);
644 text-decoration: none;
645}
646
647.sidebar-link:hover {
648 color: var(--accent-text);
649}
650
651.settings-view {
652 position: absolute;
653 top: 0;
654 left: 0;
655 width: 100%;
656 height: 100%;
657 background: var(--bg-primary);
658 z-index: 20;
659 display: flex;
660 flex-direction: column;
661 padding: 16px;
662}
663
664.settings-header {
665 display: flex;
666 justify-content: space-between;
667 align-items: center;
668 margin-bottom: 24px;
669 color: var(--text-primary);
670}
671
672.settings-title {
673 font-size: 18px;
674 font-weight: 600;
675}
676
677.setting-item {
678 margin-bottom: 20px;
679}
680
681.setting-item label {
682 font-size: 13px;
683 font-weight: 500;
684 color: var(--text-primary);
685 margin-bottom: 6px;
686 display: block;
687}
688
689.settings-input {
690 width: 100%;
691 padding: 12px;
692 border: 1px solid var(--border);
693 border-radius: var(--radius-md);
694 font-family: inherit;
695 font-size: 13px;
696 background: var(--bg-elevated);
697 color: var(--text-primary);
698 transition: border-color 0.15s;
699}
700
701.settings-input:focus {
702 outline: none;
703 border-color: var(--accent);
704}
705
706.setting-help {
707 font-size: 11px;
708 color: var(--text-tertiary);
709 margin-top: 4px;
710}
711
712.scroll-to-btn {
713 display: inline-flex;
714 align-items: center;
715 gap: 4px;
716 padding: 6px 10px;
717 font-size: 11px;
718 color: var(--accent-text);
719 background: var(--accent-subtle);
720 border: none;
721 border-radius: var(--radius-sm);
722 cursor: pointer;
723 margin-top: 8px;
724 transition: all 0.15s;
725}
726
727.scroll-to-btn:hover {
728 background: rgba(149, 122, 134, 0.25);
729}
730
731::-webkit-scrollbar {
732 width: 8px;
733}
734
735::-webkit-scrollbar-track {
736 background: transparent;
737}
738
739::-webkit-scrollbar-thumb {
740 background: var(--bg-hover);
741 border-radius: var(--radius-full);
742}
743
744::-webkit-scrollbar-thumb:hover {
745 background: var(--text-tertiary);
746}
747
748.collection-selector {
749 position: absolute;
750 top: 0;
751 left: 0;
752 width: 100%;
753 height: 100%;
754 background: var(--bg-primary);
755 z-index: 30;
756 display: flex;
757 flex-direction: column;
758 padding: 16px;
759}
760
761.collection-list {
762 display: flex;
763 flex-direction: column;
764 gap: 8px;
765 overflow-y: auto;
766 flex: 1;
767}
768
769.collection-select-btn {
770 display: flex;
771 align-items: center;
772 gap: 12px;
773 padding: 12px;
774 background: var(--bg-primary);
775 border: 1px solid var(--border);
776 border-radius: var(--radius-md);
777 color: var(--text-primary);
778 font-size: 14px;
779 cursor: pointer;
780 text-align: left;
781 transition: all 0.15s;
782}
783
784.collection-select-btn:hover {
785 border-color: var(--accent);
786 background: var(--bg-hover);
787}
788
789.collection-select-btn:disabled {
790 opacity: 0.6;
791 cursor: not-allowed;
792}
793
794.annotation-item-actions {
795 display: flex;
796 align-items: center;
797 gap: 8px;
798 margin-left: auto;
799}
800
801.toggle-switch {
802 position: relative;
803 display: inline-block;
804 width: 40px;
805 height: 22px;
806 flex-shrink: 0;
807}
808
809.toggle-switch input {
810 opacity: 0;
811 width: 0;
812 height: 0;
813}
814
815.toggle-slider {
816 position: absolute;
817 cursor: pointer;
818 top: 0;
819 left: 0;
820 right: 0;
821 bottom: 0;
822 background-color: var(--bg-tertiary);
823 transition: 0.2s;
824 border-radius: 22px;
825}
826
827.toggle-slider:before {
828 position: absolute;
829 content: "";
830 height: 16px;
831 width: 16px;
832 left: 3px;
833 bottom: 3px;
834 background-color: var(--text-tertiary);
835 transition: 0.2s;
836 border-radius: 50%;
837}
838
839.toggle-switch input:checked + .toggle-slider {
840 background-color: var(--accent);
841}
842
843.toggle-switch input:checked + .toggle-slider:before {
844 transform: translateX(18px);
845 background-color: white;
846}
847
848.theme-toggle-group {
849 display: flex;
850 background: var(--bg-tertiary);
851 padding: 3px;
852 border-radius: var(--radius-md);
853 gap: 2px;
854 margin-top: 8px;
855}
856
857.theme-btn {
858 flex: 1;
859 padding: 6px;
860 border: none;
861 background: transparent;
862 color: var(--text-tertiary);
863 font-size: 12px;
864 font-weight: 500;
865 border-radius: var(--radius-sm);
866 cursor: pointer;
867 transition: all 0.15s ease;
868}
869
870.theme-btn:hover {
871 color: var(--text-secondary);
872}
873
874.theme-btn.active {
875 background: var(--bg-primary);
876 color: var(--text-primary);
877}