margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
Implement API keys for iOS shortcut, refactor Firehose ingestion to use WebSockets and CBOR, and fix mobile styles.
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}
543
544.share-menu {
545 position: absolute;
546 top: 100%;
547 right: 0;
548 margin-top: 8px;
549 background: var(--bg-primary);
550 border: 1px solid var(--border);
551 border-radius: var(--radius-lg);
552 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
553 min-width: 180px;
554 padding: 8px 0;
555 z-index: 100;
556 animation: fadeInUp 0.15s ease;
557}
558
559@keyframes fadeInUp {
560 from {
561 opacity: 0;
562 transform: translateY(-8px);
563 }
564
565 to {
566 opacity: 1;
567 transform: translateY(0);
568 }
569}
570
571.share-menu-section {
572 display: flex;
573 flex-direction: column;
574}
575
576.share-menu-label {
577 padding: 4px 12px 8px;
578 font-size: 0.7rem;
579 font-weight: 600;
580 text-transform: uppercase;
581 letter-spacing: 0.05em;
582 color: var(--text-tertiary);
583}
584
585.share-menu-item {
586 display: flex;
587 align-items: center;
588 gap: 10px;
589 padding: 10px 14px;
590 background: none;
591 border: none;
592 width: 100%;
593 text-align: left;
594 font-size: 0.9rem;
595 color: var(--text-primary);
596 cursor: pointer;
597 transition: all 0.1s ease;
598}
599
600.share-menu-item:hover {
601 background: var(--bg-tertiary);
602}
603
604.share-menu-icon {
605 font-size: 1.1rem;
606 width: 24px;
607 text-align: center;
608}
609
610.share-menu-divider {
611 height: 1px;
612 background: var(--border);
613 margin: 6px 0;
614}
615
616.bookmark-card {
617 display: flex;
618 flex-direction: column;
619 gap: 16px;
620}
621
622.bookmark-preview {
623 display: flex;
624 flex-direction: column;
625 background: var(--bg-secondary);
626 border: 1px solid var(--border);
627 border-radius: var(--radius-md);
628 overflow: hidden;
629 text-decoration: none;
630 transition: all 0.2s ease;
631 position: relative;
632}
633
634.bookmark-preview:hover {
635 border-color: var(--accent);
636 box-shadow: var(--shadow-sm);
637 transform: translateY(-1px);
638}
639
640.bookmark-preview::before {
641 content: "";
642 position: absolute;
643 left: 0;
644 top: 0;
645 bottom: 0;
646 width: 4px;
647 background: var(--accent);
648 opacity: 0.7;
649}
650
651.bookmark-preview-content {
652 padding: 16px 20px;
653 display: flex;
654 flex-direction: column;
655 gap: 8px;
656}
657
658.bookmark-preview-header {
659 display: flex;
660 align-items: center;
661 gap: 8px;
662 margin-bottom: 4px;
663}
664
665.bookmark-preview-site {
666 display: flex;
667 align-items: center;
668 gap: 6px;
669 font-size: 0.75rem;
670 font-weight: 600;
671 color: var(--accent);
672 text-transform: uppercase;
673 letter-spacing: 0.03em;
674}
675
676.bookmark-preview-title {
677 font-size: 1rem;
678 font-weight: 600;
679 line-height: 1.4;
680 color: var(--text-primary);
681 margin: 0;
682 display: -webkit-box;
683 -webkit-line-clamp: 2;
684 line-clamp: 2;
685 -webkit-box-orient: vertical;
686 overflow: hidden;
687}
688
689.bookmark-preview-desc {
690 font-size: 0.875rem;
691 color: var(--text-secondary);
692 line-height: 1.5;
693 margin: 0;
694 display: -webkit-box;
695 -webkit-line-clamp: 2;
696 line-clamp: 2;
697 -webkit-box-orient: vertical;
698 overflow: hidden;
699}
700
701.bookmark-preview-arrow {
702 display: flex;
703 align-items: center;
704 justify-content: center;
705 color: var(--text-tertiary);
706 padding: 0 4px;
707 transition: all 0.2s ease;
708}
709
710.bookmark-preview:hover .bookmark-preview-arrow {
711 color: var(--accent);
712 transform: translateX(2px);
713}
714
715.bookmark-description {
716 font-size: 0.9rem;
717 color: var(--text-secondary);
718 margin: 0;
719 line-height: 1.5;
720}
721
722.bookmark-meta {
723 display: flex;
724 align-items: center;
725 gap: 12px;
726 margin-top: 12px;
727 font-size: 0.85rem;
728 color: var(--text-tertiary);
729}
730
731.bookmark-time {
732 color: var(--text-tertiary);
733}
734
735.bookmark-preview {
736 max-width: 100%;
737 width: 100%;
738 box-sizing: border-box;
739}
740
741@media (max-width: 600px) {
742 .bookmark-preview-content {
743 padding: 12px 14px;
744 }
745
746 .legal-content {
747 padding: 16px;
748 }
749}