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