(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.modal-overlay {
2 position: fixed;
3 inset: 0;
4 background: rgba(0, 0, 0, 0.6);
5 display: flex;
6 align-items: center;
7 justify-content: center;
8 padding: var(--spacing-md);
9 z-index: 100;
10 animation: fadeIn 0.15s ease-out;
11}
12
13.spinner {
14 animation: spin 1s linear infinite;
15}
16
17@keyframes spin {
18 from {
19 transform: rotate(0deg);
20 }
21
22 to {
23 transform: rotate(360deg);
24 }
25}
26
27.modal-container {
28 background: var(--bg-secondary);
29 border-radius: var(--radius-lg);
30 width: 100%;
31 max-width: 420px;
32 border: 1px solid var(--border);
33 box-shadow: var(--shadow-lg);
34 animation: modalIn 0.2s ease-out;
35}
36
37.modal-header {
38 display: flex;
39 align-items: center;
40 justify-content: space-between;
41 padding: var(--spacing-md);
42 border-bottom: 1px solid var(--border);
43}
44
45.modal-title {
46 font-size: 1rem;
47 font-weight: 600;
48 color: var(--text-primary);
49}
50
51.modal-close-btn {
52 padding: 6px;
53 color: var(--text-tertiary);
54 border-radius: var(--radius-sm);
55 transition: all 0.15s;
56 background: none;
57 border: none;
58 cursor: pointer;
59}
60
61.modal-close-btn:hover {
62 color: var(--text-primary);
63 background: var(--bg-tertiary);
64}
65
66.modal-form {
67 padding: var(--spacing-md);
68 display: flex;
69 flex-direction: column;
70 gap: var(--spacing-md);
71}
72
73.modal-body {
74 padding: var(--spacing-md);
75 display: flex;
76 flex-direction: column;
77 gap: var(--spacing-md);
78}
79
80.modal-actions {
81 display: flex;
82 justify-content: flex-end;
83 gap: var(--spacing-sm);
84 padding-top: var(--spacing-sm);
85}
86
87@keyframes fadeIn {
88 from {
89 opacity: 0;
90 }
91
92 to {
93 opacity: 1;
94 }
95}
96
97@keyframes modalIn {
98 from {
99 opacity: 0;
100 transform: scale(0.96) translateY(-8px);
101 }
102
103 to {
104 opacity: 1;
105 transform: scale(1) translateY(0);
106 }
107}
108
109.form-group {
110 margin-bottom: 0;
111}
112
113.form-label {
114 display: block;
115 font-size: 0.8rem;
116 font-weight: 500;
117 color: var(--text-secondary);
118 margin-bottom: 6px;
119}
120
121.form-input,
122.form-textarea,
123.form-select {
124 width: 100%;
125 padding: 10px 12px;
126 background: var(--bg-primary);
127 border: 1px solid var(--border);
128 border-radius: var(--radius-md);
129 color: var(--text-primary);
130 font-size: 0.875rem;
131 transition: all 0.15s;
132}
133
134.form-input:focus,
135.form-textarea:focus,
136.form-select:focus {
137 outline: none;
138 border-color: var(--accent);
139 box-shadow: 0 0 0 2px var(--accent-subtle);
140}
141
142.form-textarea {
143 resize: none;
144 min-height: 80px;
145}
146
147.input {
148 width: 100%;
149 padding: 10px 12px;
150 font-size: 0.875rem;
151 color: var(--text-primary);
152 background: var(--bg-primary);
153 border: 1px solid var(--border);
154 border-radius: var(--radius-md);
155 outline: none;
156 transition: all 0.15s ease;
157}
158
159.input:focus {
160 border-color: var(--accent);
161 box-shadow: 0 0 0 2px var(--accent-subtle);
162}
163
164.input::placeholder {
165 color: var(--text-tertiary);
166}
167
168.icon-picker-tabs {
169 display: flex;
170 gap: 4px;
171 margin-bottom: var(--spacing-sm);
172}
173
174.icon-picker-tab {
175 flex: 1;
176 padding: 8px 12px;
177 background: var(--bg-tertiary);
178 border: none;
179 border-radius: var(--radius-sm);
180 color: var(--text-secondary);
181 font-size: 0.8rem;
182 font-weight: 500;
183 cursor: pointer;
184 transition: all 0.15s ease;
185}
186
187.icon-picker-tab:hover {
188 background: var(--bg-hover);
189}
190
191.icon-picker-tab.active {
192 background: var(--accent);
193 color: white;
194}
195
196.emoji-picker-wrapper {
197 display: flex;
198 flex-direction: column;
199 gap: var(--spacing-sm);
200}
201
202.emoji-picker,
203.icon-picker {
204 display: flex;
205 flex-wrap: wrap;
206 gap: 4px;
207 max-height: 120px;
208 overflow-y: auto;
209 padding: var(--spacing-sm);
210 background: var(--bg-primary);
211 border: 1px solid var(--border);
212 border-radius: var(--radius-md);
213}
214
215.emoji-option,
216.icon-option {
217 width: 32px;
218 height: 32px;
219 display: flex;
220 align-items: center;
221 justify-content: center;
222 font-size: 1rem;
223 background: transparent;
224 border: 2px solid transparent;
225 border-radius: var(--radius-sm);
226 cursor: pointer;
227 transition: all 0.15s ease;
228 color: var(--text-secondary);
229}
230
231.emoji-option:hover,
232.icon-option:hover {
233 background: var(--bg-tertiary);
234 color: var(--text-primary);
235}
236
237.emoji-option.selected,
238.icon-option.selected {
239 border-color: var(--accent);
240 background: var(--accent-subtle);
241 color: var(--accent);
242}
243
244.color-input-container {
245 display: flex;
246 align-items: center;
247 gap: var(--spacing-sm);
248 background: var(--bg-tertiary);
249 padding: 8px 12px;
250 border-radius: var(--radius-md);
251 border: 1px solid var(--border);
252 width: fit-content;
253}
254
255.color-input-wrapper {
256 position: relative;
257 width: 28px;
258 height: 28px;
259 border-radius: var(--radius-full);
260 overflow: hidden;
261 border: 2px solid var(--border);
262 cursor: pointer;
263 transition: transform 0.1s;
264}
265
266.color-input-wrapper:hover {
267 transform: scale(1.1);
268 border-color: var(--accent);
269}
270
271.color-input-wrapper input[type="color"] {
272 position: absolute;
273 top: -50%;
274 left: -50%;
275 width: 200%;
276 height: 200%;
277 padding: 0;
278 margin: 0;
279 border: none;
280 cursor: pointer;
281 opacity: 0;
282}
283
284.signup-modal {
285 background: var(--bg-secondary);
286 width: 100%;
287 max-width: 440px;
288 border-radius: var(--radius-lg);
289 padding: var(--spacing-lg);
290 border: 1px solid var(--border);
291 position: relative;
292 max-height: 85vh;
293 overflow-y: auto;
294 box-shadow: var(--shadow-lg);
295}
296
297.modal-close {
298 position: absolute;
299 top: var(--spacing-md);
300 right: var(--spacing-md);
301 background: none;
302 border: none;
303 color: var(--text-secondary);
304 cursor: pointer;
305 padding: 4px;
306 border-radius: var(--radius-sm);
307}
308
309.modal-close:hover {
310 background: var(--bg-tertiary);
311 color: var(--text-primary);
312}
313
314.signup-step h2 {
315 font-size: 1.25rem;
316 margin-bottom: 8px;
317 font-weight: 600;
318}
319
320.signup-subtitle {
321 color: var(--text-secondary);
322 font-size: 0.875rem;
323 margin-bottom: var(--spacing-lg);
324}
325
326.provider-grid {
327 display: grid;
328 grid-template-columns: 1fr;
329 gap: var(--spacing-sm);
330}
331
332.provider-card {
333 display: flex;
334 align-items: center;
335 gap: var(--spacing-md);
336 padding: var(--spacing-md);
337 border: 1px solid var(--border);
338 border-radius: var(--radius-md);
339 background: var(--bg-primary);
340 cursor: pointer;
341 text-align: left;
342 transition: all 0.15s ease;
343}
344
345.provider-card:hover {
346 border-color: var(--accent);
347 background: var(--bg-tertiary);
348}
349
350.provider-icon {
351 width: 40px;
352 height: 40px;
353 border-radius: var(--radius-md);
354 background: var(--bg-tertiary);
355 display: flex;
356 align-items: center;
357 justify-content: center;
358 border: 1px solid var(--border);
359 color: var(--text-primary);
360 flex-shrink: 0;
361}
362
363.provider-icon.wide {
364 width: auto;
365 padding: 0 10px;
366 border: none;
367 background: transparent;
368}
369
370.provider-icon.wide img {
371 max-height: 36px !important;
372 height: 36px !important;
373 width: auto !important;
374}
375
376.provider-initial {
377 font-size: 1rem;
378 font-weight: 600;
379}
380
381.provider-info {
382 flex: 1;
383}
384
385.provider-info h3 {
386 font-weight: 600;
387 font-size: 0.9rem;
388 margin-bottom: 2px;
389}
390
391.provider-info span {
392 color: var(--text-secondary);
393 font-size: 0.8rem;
394}
395
396.provider-arrow {
397 color: var(--text-tertiary);
398}
399
400.signup-recommended {
401 position: relative;
402 margin-bottom: var(--spacing-md);
403}
404
405.signup-recommended-badge {
406 position: absolute;
407 top: -8px;
408 left: 12px;
409 background: var(--accent);
410 color: white;
411 font-size: 0.7rem;
412 font-weight: 600;
413 padding: 2px 8px;
414 border-radius: var(--radius-sm);
415 text-transform: uppercase;
416 letter-spacing: 0.5px;
417 z-index: 1;
418}
419
420.provider-card-featured {
421 border-color: var(--accent);
422 background: var(--accent-subtle);
423}
424
425.provider-card-featured:hover {
426 border-color: var(--accent);
427 background: var(--bg-tertiary);
428}
429
430.signup-toggle-others {
431 display: flex;
432 align-items: center;
433 justify-content: center;
434 gap: 6px;
435 width: 100%;
436 padding: 10px;
437 background: transparent;
438 border: none;
439 color: var(--text-secondary);
440 font-size: 0.85rem;
441 cursor: pointer;
442 transition: color 0.15s;
443}
444
445.signup-toggle-others:hover {
446 color: var(--text-primary);
447}
448
449.toggle-chevron {
450 transition: transform 0.2s ease;
451 transform: rotate(90deg);
452}
453
454.toggle-chevron.open {
455 transform: rotate(-90deg);
456}
457
458.signup-form {
459 display: flex;
460 flex-direction: column;
461 gap: var(--spacing-md);
462}
463
464.handle-input-group {
465 display: flex;
466 align-items: center;
467 gap: var(--spacing-sm);
468}
469
470.handle-suffix {
471 color: var(--text-tertiary);
472 font-size: 0.85rem;
473 white-space: nowrap;
474}
475
476.error-message {
477 color: var(--error);
478 background: rgba(255, 69, 58, 0.1);
479 padding: 10px 12px;
480 border-radius: var(--radius-md);
481 font-size: 0.8rem;
482 display: flex;
483 align-items: center;
484 gap: var(--spacing-sm);
485}
486
487.step-header {
488 display: flex;
489 align-items: center;
490 gap: var(--spacing-sm);
491 margin-bottom: var(--spacing-lg);
492}
493
494.step-header h2 {
495 margin: 0;
496 font-size: 1.1rem;
497}
498
499.btn-back {
500 background: none;
501 border: none;
502 color: var(--text-secondary);
503 cursor: pointer;
504 font-size: 0.85rem;
505 padding: 0;
506}
507
508.btn-back:hover {
509 color: var(--text-primary);
510}
511
512.legal-text {
513 font-size: 0.75rem;
514 color: var(--text-tertiary);
515 text-align: center;
516 margin-top: var(--spacing-sm);
517}
518
519.links-input-group {
520 display: flex;
521 gap: var(--spacing-sm);
522 margin-bottom: var(--spacing-sm);
523}
524
525.links-input-group input {
526 flex: 1;
527}
528
529.links-list {
530 list-style: none;
531 padding: 0;
532 margin: 0;
533 display: flex;
534 flex-direction: column;
535 gap: var(--spacing-sm);
536}
537
538.link-item {
539 display: flex;
540 align-items: center;
541 justify-content: space-between;
542 gap: var(--spacing-sm);
543 padding: 8px 12px;
544 background: var(--bg-tertiary);
545 border: 1px solid var(--border);
546 border-radius: var(--radius-md);
547 font-size: 0.85rem;
548 color: var(--text-primary);
549 word-break: break-all;
550}
551
552.link-item span {
553 flex: 1;
554}
555
556.btn-icon-sm {
557 background: none;
558 border: none;
559 color: var(--text-tertiary);
560 cursor: pointer;
561 padding: 4px;
562 border-radius: var(--radius-sm);
563 display: flex;
564 align-items: center;
565 justify-content: center;
566 font-size: 1rem;
567 line-height: 1;
568}
569
570.btn-icon-sm:hover {
571 background: var(--bg-hover);
572 color: var(--error);
573}
574
575.char-count {
576 text-align: right;
577 font-size: 0.7rem;
578 color: var(--text-tertiary);
579 margin-top: 4px;
580}