margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1export const overlayStyles = /* css */ `
2:host {
3 all: initial;
4 --bg-primary: #18181b;
5 --bg-secondary: #1e1e22;
6 --bg-tertiary: #27272a;
7 --bg-card: #1e1e22;
8 --bg-elevated: #27272a;
9 --bg-hover: #2e2e33;
10
11 --text-primary: #fafafa;
12 --text-secondary: #a1a1aa;
13 --text-tertiary: #71717a;
14 --border: rgba(255, 255, 255, 0.08);
15 --border-strong: rgba(255, 255, 255, 0.14);
16
17 --accent: #3b82f6;
18 --accent-hover: #2563eb;
19 --accent-subtle: rgba(59, 130, 246, 0.12);
20
21 --highlight-yellow: #fbbf24;
22 --highlight-green: #34d399;
23 --highlight-blue: #60a5fa;
24 --highlight-pink: #f472b6;
25 --highlight-purple: #a78bfa;
26}
27
28:host(.light) {
29 --bg-primary: #fafafa;
30 --bg-secondary: #ffffff;
31 --bg-tertiary: #f4f4f5;
32 --bg-card: #ffffff;
33 --bg-elevated: #ffffff;
34 --bg-hover: #f4f4f5;
35
36 --text-primary: #18181b;
37 --text-secondary: #71717a;
38 --text-tertiary: #a1a1aa;
39 --border: rgba(0, 0, 0, 0.08);
40 --border-strong: rgba(0, 0, 0, 0.14);
41
42 --accent: #2563eb;
43 --accent-hover: #1d4ed8;
44 --accent-subtle: rgba(37, 99, 235, 0.08);
45}
46
47.margin-overlay {
48 position: absolute;
49 top: 0;
50 left: 0;
51 width: 100%;
52 height: 100%;
53 pointer-events: none;
54}
55
56.color-picker {
57 position: absolute;
58 top: 100%;
59 left: 50%;
60 transform: translateX(-50%);
61 margin-top: 6px;
62 display: flex;
63 gap: 6px;
64 padding: 8px;
65 background: var(--bg-card);
66 border: 1px solid var(--border);
67 border-radius: 10px;
68 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
69 animation: toolbar-in 0.15s ease forwards;
70}
71
72.color-dot {
73 width: 24px;
74 height: 24px;
75 border-radius: 50%;
76 border: 2px solid transparent;
77 cursor: pointer;
78 transition: all 0.15s ease;
79}
80
81.color-dot:hover {
82 transform: scale(1.15);
83 border-color: var(--text-primary);
84}
85
86.margin-popover {
87 position: absolute;
88 width: 320px;
89 background: var(--bg-card);
90 border: 1px solid var(--border-strong);
91 border-radius: 16px;
92 padding: 0;
93 box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 80px rgba(59, 130, 246, 0.04);
94 display: flex;
95 flex-direction: column;
96 pointer-events: auto;
97 z-index: 2147483647;
98 font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
99 color: var(--text-primary);
100 opacity: 0;
101 transform: translateY(-8px) scale(0.96);
102 animation: popover-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
103 max-height: 450px;
104 overflow: hidden;
105}
106
107@keyframes popover-in {
108 to { opacity: 1; transform: translateY(0) scale(1); }
109}
110
111.popover-header {
112 padding: 14px 16px;
113 border-bottom: 1px solid var(--border);
114 display: flex;
115 justify-content: space-between;
116 align-items: center;
117 background: var(--bg-primary);
118 border-radius: 16px 16px 0 0;
119}
120
121.popover-title {
122 font-weight: 600;
123 font-size: 13px;
124 color: var(--text-primary);
125 display: flex;
126 align-items: center;
127 gap: 6px;
128}
129
130.popover-count {
131 font-size: 11px;
132 color: var(--text-tertiary);
133 background: var(--bg-tertiary);
134 padding: 2px 8px;
135 border-radius: 10px;
136}
137
138.popover-close {
139 background: none;
140 border: none;
141 color: var(--text-tertiary);
142 cursor: pointer;
143 padding: 4px;
144 border-radius: 6px;
145 display: flex;
146 align-items: center;
147 justify-content: center;
148 transition: all 0.15s;
149}
150
151.popover-close:hover {
152 background: var(--bg-hover);
153 color: var(--text-primary);
154}
155
156.popover-close svg {
157 width: 16px;
158 height: 16px;
159}
160
161.popover-scroll-area {
162 overflow-y: auto;
163 max-height: 350px;
164 overscroll-behavior: contain;
165 scrollbar-width: thin;
166 scrollbar-color: var(--bg-tertiary) transparent;
167}
168
169.popover-scroll-area::-webkit-scrollbar {
170 width: 6px;
171}
172
173.popover-scroll-area::-webkit-scrollbar-track {
174 background: transparent;
175 margin: 4px 0;
176}
177
178.popover-scroll-area::-webkit-scrollbar-thumb {
179 background: var(--bg-tertiary);
180 border-radius: 3px;
181}
182
183.popover-scroll-area::-webkit-scrollbar-thumb:hover {
184 background: var(--text-tertiary);
185}
186
187.comment-item {
188 padding: 14px 16px;
189 border-bottom: 1px solid var(--border);
190 transition: background 0.15s;
191}
192
193.comment-item:hover {
194 background: var(--bg-hover);
195}
196
197.comment-item:last-child {
198 border-bottom: none;
199}
200
201.comment-header {
202 display: flex;
203 align-items: center;
204 gap: 10px;
205 margin-bottom: 8px;
206}
207
208.comment-avatar {
209 width: 30px;
210 height: 30px;
211 border-radius: 50%;
212 background: linear-gradient(135deg, var(--accent), var(--accent-hover));
213 display: flex;
214 align-items: center;
215 justify-content: center;
216 font-size: 11px;
217 font-weight: 600;
218 color: white;
219 flex-shrink: 0;
220 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
221}
222
223.comment-meta {
224 flex: 1;
225 min-width: 0;
226}
227
228.comment-handle {
229 font-size: 13px;
230 font-weight: 600;
231 color: var(--text-primary);
232}
233
234.comment-time {
235 font-size: 11px;
236 color: var(--text-tertiary);
237}
238
239.comment-text {
240 font-size: 13px;
241 line-height: 1.55;
242 color: var(--text-primary);
243}
244
245.highlight-badge {
246 display: inline-flex;
247 align-items: center;
248 gap: 5px;
249 font-size: 11px;
250 color: var(--text-tertiary);
251 background: var(--bg-tertiary);
252 padding: 4px 10px;
253 border-radius: 12px;
254 font-weight: 500;
255}
256
257.highlight-badge svg {
258 width: 12px;
259 height: 12px;
260}
261
262.comment-actions {
263 display: flex;
264 gap: 4px;
265 margin-top: 10px;
266 padding-top: 10px;
267 border-top: 1px solid var(--border);
268}
269
270.comment-action-btn {
271 background: none;
272 border: none;
273 padding: 6px 10px;
274 color: var(--text-tertiary);
275 font-size: 12px;
276 font-weight: 500;
277 cursor: pointer;
278 border-radius: 6px;
279 transition: all 0.15s;
280 display: flex;
281 align-items: center;
282 gap: 5px;
283}
284
285.comment-action-btn svg {
286 width: 14px;
287 height: 14px;
288}
289
290.comment-action-btn:hover {
291 background: var(--bg-tertiary);
292 color: var(--text-primary);
293}
294
295.btn-add-note {
296 color: var(--text-tertiary);
297}
298.btn-add-note:hover {
299 background: var(--bg-tertiary);
300 color: var(--text-primary);
301}
302
303.add-note-form {
304 margin-top: 10px;
305 padding-top: 10px;
306 border-top: 1px solid var(--border);
307 display: flex;
308 flex-direction: column;
309 gap: 8px;
310}
311
312.add-note-textarea {
313 width: 100%;
314 min-height: 60px;
315 padding: 10px 12px;
316 background: var(--bg-tertiary);
317 border: 1px solid var(--border);
318 border-radius: 10px;
319 color: var(--text-primary);
320 font-family: "Inter", system-ui, -apple-system, sans-serif;
321 font-size: 13px;
322 line-height: 1.5;
323 resize: vertical;
324 outline: none;
325 transition: border-color 0.15s;
326 box-sizing: border-box;
327}
328
329.add-note-textarea:focus {
330 border-color: var(--accent);
331 box-shadow: 0 0 0 2px var(--accent-subtle);
332}
333
334.add-note-textarea::placeholder {
335 color: var(--text-tertiary);
336}
337
338.add-note-actions {
339 display: flex;
340 justify-content: flex-end;
341 gap: 6px;
342}
343
344.add-note-actions button {
345 background: none;
346 border: none;
347 padding: 6px 8px;
348 border-radius: 8px;
349 cursor: pointer;
350 display: flex;
351 align-items: center;
352 transition: all 0.15s;
353}
354
355.add-note-actions button svg {
356 width: 16px;
357 height: 16px;
358}
359
360.add-note-cancel {
361 color: var(--text-tertiary);
362}
363.add-note-cancel:hover {
364 background: var(--bg-hover);
365 color: var(--text-primary);
366}
367
368.add-note-submit {
369 color: var(--text-tertiary);
370}
371.add-note-submit:hover {
372 background: var(--bg-tertiary);
373 color: var(--text-primary);
374}
375.add-note-submit:disabled {
376 opacity: 0.4;
377 cursor: not-allowed;
378}
379
380.inline-compose-modal {
381 position: fixed;
382 width: 380px;
383 max-width: calc(100vw - 32px);
384 background: var(--bg-card);
385 border: 1px solid var(--border-strong);
386 border-radius: 16px;
387 padding: 0;
388 box-sizing: border-box;
389 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(59, 130, 246, 0.04);
390 z-index: 2147483647;
391 pointer-events: auto;
392 font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
393 color: var(--text-primary);
394 animation: modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
395 overflow: hidden;
396}
397
398@keyframes modal-in {
399 from { opacity: 0; transform: scale(0.95) translateY(10px); }
400 to { opacity: 1; transform: scale(1) translateY(0); }
401}
402
403.inline-compose-modal * {
404 box-sizing: border-box;
405}
406
407.compose-header {
408 padding: 14px 16px;
409 border-bottom: 1px solid var(--border);
410 display: flex;
411 justify-content: space-between;
412 align-items: center;
413 background: var(--bg-primary);
414}
415
416.compose-title {
417 font-weight: 600;
418 font-size: 14px;
419 color: var(--text-primary);
420}
421
422.compose-close {
423 background: none;
424 border: none;
425 color: var(--text-tertiary);
426 cursor: pointer;
427 padding: 4px;
428 border-radius: 6px;
429 display: flex;
430 transition: all 0.15s;
431}
432
433.compose-close:hover {
434 background: var(--bg-hover);
435 color: var(--text-primary);
436}
437
438.compose-body {
439 padding: 16px;
440}
441
442.inline-compose-quote {
443 padding: 12px 14px;
444 background: var(--accent-subtle);
445 border-left: 3px solid var(--accent);
446 border-radius: 0 8px 8px 0;
447 font-size: 13px;
448 color: var(--text-secondary);
449 font-style: italic;
450 margin-bottom: 14px;
451 max-height: 80px;
452 overflow: hidden;
453 word-break: break-word;
454 line-height: 1.5;
455}
456
457.inline-compose-textarea {
458 width: 100%;
459 min-height: 100px;
460 padding: 12px 14px;
461 background: var(--bg-elevated);
462 border: 1px solid var(--border);
463 border-radius: 10px;
464 color: var(--text-primary);
465 font-family: inherit;
466 font-size: 14px;
467 line-height: 1.5;
468 resize: none;
469 box-sizing: border-box;
470 transition: border-color 0.15s;
471}
472
473.inline-compose-textarea::placeholder {
474 color: var(--text-tertiary);
475}
476
477.inline-compose-textarea:focus {
478 outline: none;
479 border-color: var(--accent);
480 box-shadow: 0 0 0 2px var(--accent-subtle);
481}
482
483.compose-footer {
484 padding: 12px 16px;
485 border-top: 1px solid var(--border);
486 display: flex;
487 justify-content: flex-end;
488 gap: 8px;
489 background: var(--bg-primary);
490}
491
492.btn-cancel {
493 padding: 9px 18px;
494 background: transparent;
495 border: 1px solid var(--border);
496 border-radius: 8px;
497 color: var(--text-secondary);
498 font-size: 13px;
499 font-weight: 500;
500 cursor: pointer;
501 transition: all 0.15s;
502}
503
504.btn-cancel:hover {
505 background: var(--bg-hover);
506 color: var(--text-primary);
507 border-color: var(--border);
508}
509
510.btn-submit {
511 padding: 9px 20px;
512 background: var(--accent);
513 border: none;
514 border-radius: 8px;
515 color: white;
516 font-size: 13px;
517 font-weight: 600;
518 cursor: pointer;
519 transition: all 0.15s;
520}
521
522.btn-submit:hover {
523 background: var(--accent-hover);
524 transform: translateY(-1px);
525}
526
527.btn-submit:active {
528 transform: translateY(0);
529}
530
531.btn-submit:disabled {
532 opacity: 0.5;
533 cursor: not-allowed;
534 transform: none;
535}
536
537.compose-tags-section {
538 margin-top: 12px;
539 position: relative;
540}
541
542.compose-tags-container {
543 display: flex;
544 flex-wrap: wrap;
545 align-items: center;
546 gap: 6px;
547 padding: 8px 10px;
548 background: var(--bg-elevated);
549 border: 1px solid var(--border);
550 border-radius: 8px;
551 min-height: 34px;
552 cursor: text;
553 transition: border-color 0.15s;
554}
555
556.compose-tags-container:focus-within {
557 border-color: var(--accent);
558 box-shadow: 0 0 0 2px var(--accent-subtle);
559}
560
561.compose-tag-pill {
562 display: inline-flex;
563 align-items: center;
564 gap: 4px;
565 padding: 2px 8px;
566 background: var(--accent-subtle);
567 color: var(--accent);
568 border-radius: 6px;
569 font-size: 12px;
570 font-weight: 500;
571 white-space: nowrap;
572}
573
574.compose-tag-remove {
575 background: none;
576 border: none;
577 color: inherit;
578 cursor: pointer;
579 padding: 0;
580 display: flex;
581 align-items: center;
582 opacity: 0.7;
583 transition: opacity 0.15s;
584}
585
586.compose-tag-remove:hover {
587 opacity: 1;
588}
589
590.compose-tag-remove svg {
591 width: 10px;
592 height: 10px;
593}
594
595.compose-tag-input {
596 flex: 1;
597 min-width: 60px;
598 background: transparent;
599 border: none;
600 outline: none;
601 color: var(--text-primary);
602 font-family: inherit;
603 font-size: 12px;
604 padding: 0;
605}
606
607.compose-tag-input::placeholder {
608 color: var(--text-tertiary);
609}
610
611.compose-tag-suggestions {
612 position: absolute;
613 top: 100%;
614 left: 0;
615 right: 0;
616 margin-top: 4px;
617 background: var(--bg-card);
618 border: 1px solid var(--border);
619 border-radius: 8px;
620 box-shadow: 0 8px 24px rgba(0,0,0,0.3);
621 overflow: hidden;
622 z-index: 10;
623 max-height: 140px;
624 overflow-y: auto;
625}
626
627.compose-tag-suggestion-item {
628 display: block;
629 width: 100%;
630 text-align: left;
631 padding: 8px 12px;
632 background: none;
633 border: none;
634 color: var(--text-secondary);
635 font-size: 12px;
636 font-family: inherit;
637 cursor: pointer;
638 transition: background 0.1s;
639}
640
641.compose-tag-suggestion-item:hover {
642 background: var(--accent-subtle);
643 color: var(--accent);
644}
645
646.margin-hover-indicator {
647 position: fixed;
648 display: flex;
649 align-items: center;
650 pointer-events: none;
651 z-index: 2147483647;
652 opacity: 0;
653 transition: opacity 0.2s ease, transform 0.2s ease;
654 transform: scale(0.8) translateX(4px);
655}
656
657.margin-hover-indicator.visible {
658 opacity: 1;
659 transform: scale(1) translateX(0);
660}
661
662.margin-toast {
663 position: fixed;
664 bottom: 24px;
665 left: 50%;
666 transform: translateX(-50%) translateY(20px);
667 padding: 12px 20px;
668 background: var(--bg-card);
669 border: 1px solid var(--border-strong);
670 border-radius: 12px;
671 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
672 font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
673 font-size: 13px;
674 font-weight: 500;
675 color: var(--text-primary);
676 z-index: 2147483647;
677 pointer-events: auto;
678 display: flex;
679 align-items: center;
680 gap: 10px;
681 opacity: 0;
682 animation: toast-in 0.3s ease forwards;
683}
684
685@keyframes toast-in {
686 to { opacity: 1; transform: translateX(-50%) translateY(0); }
687}
688
689.margin-toast.toast-out {
690 animation: toast-out 0.2s ease forwards;
691}
692
693@keyframes toast-out {
694 to { opacity: 0; transform: translateX(-50%) translateY(10px); }
695}
696
697.toast-icon {
698 width: 18px;
699 height: 18px;
700 color: var(--accent);
701}
702
703.toast-success .toast-icon {
704 color: #34d399;
705}
706`;