(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.app {
2 min-height: 100vh;
3 background: var(--bg-primary);
4}
5
6.top-nav {
7 position: sticky;
8 top: 0;
9 z-index: 100;
10 background: var(--nav-bg);
11 backdrop-filter: blur(12px);
12 -webkit-backdrop-filter: blur(12px);
13 border-bottom: 1px solid var(--border);
14}
15
16.top-nav-inner {
17 max-width: 1200px;
18 margin: 0 auto;
19 padding: 0 32px;
20 height: 56px;
21 display: flex;
22 align-items: center;
23 gap: 32px;
24}
25
26.top-nav-logo {
27 display: flex;
28 align-items: center;
29 gap: 10px;
30 text-decoration: none;
31 color: var(--text-primary);
32 font-weight: 700;
33 font-size: 1.1rem;
34 flex-shrink: 0;
35}
36
37.top-nav-logo img {
38 width: 26px;
39 height: 26px;
40}
41
42.top-nav-links {
43 display: flex;
44 align-items: center;
45 gap: 4px;
46 flex: 1;
47}
48
49.top-nav-link {
50 padding: 8px 14px;
51 color: var(--text-secondary);
52 text-decoration: none;
53 font-size: 0.9rem;
54 font-weight: 500;
55 border-radius: var(--radius-md);
56 transition: all 0.15s;
57}
58
59.top-nav-link:hover {
60 color: var(--text-primary);
61 background: var(--bg-hover);
62}
63
64.top-nav-link.active {
65 color: var(--text-primary);
66 background: var(--bg-tertiary);
67}
68
69.top-nav-link.extension-link {
70 display: flex;
71 align-items: center;
72 gap: 6px;
73}
74
75.top-nav-actions {
76 display: flex;
77 align-items: center;
78 gap: 8px;
79}
80
81.top-nav-icon-btn {
82 display: flex;
83 align-items: center;
84 justify-content: center;
85 width: 36px;
86 height: 36px;
87 border-radius: var(--radius-md);
88 background: transparent;
89 border: none;
90 color: var(--text-secondary);
91 cursor: pointer;
92 transition: all 0.15s;
93 position: relative;
94 text-decoration: none;
95}
96
97.top-nav-icon-btn:hover {
98 background: var(--bg-hover);
99 color: var(--text-primary);
100}
101
102.notif-dot {
103 position: absolute;
104 top: 6px;
105 right: 6px;
106 width: 8px;
107 height: 8px;
108 background: var(--accent);
109 border-radius: 50%;
110 border: 2px solid var(--bg-primary);
111}
112
113.top-nav-new-btn {
114 display: flex;
115 align-items: center;
116 gap: 6px;
117 padding: 8px 16px;
118 background: var(--accent);
119 color: var(--bg-primary);
120 border-radius: var(--radius-md);
121 font-size: 0.875rem;
122 font-weight: 600;
123 text-decoration: none;
124 transition: all 0.15s;
125}
126
127.top-nav-new-btn:hover {
128 background: var(--accent-hover);
129}
130
131.top-nav-avatar {
132 width: 34px;
133 height: 34px;
134 border-radius: var(--radius-md);
135 background: var(--bg-tertiary);
136 border: none;
137 cursor: pointer;
138 overflow: hidden;
139 display: flex;
140 align-items: center;
141 justify-content: center;
142 color: var(--text-secondary);
143 font-size: 0.8rem;
144 font-weight: 600;
145 transition: opacity 0.15s;
146}
147
148.top-nav-avatar:hover {
149 opacity: 0.85;
150}
151
152.top-nav-avatar img {
153 width: 100%;
154 height: 100%;
155 object-fit: cover;
156}
157
158.top-nav-mobile-toggle {
159 display: none;
160 align-items: center;
161 justify-content: center;
162 width: 40px;
163 height: 40px;
164 border: none;
165 background: transparent;
166 color: var(--text-primary);
167 cursor: pointer;
168}
169
170.top-nav-dropdown {
171 position: relative;
172}
173
174.dropdown-menu {
175 position: absolute;
176 top: calc(100% + 8px);
177 min-width: 200px;
178 background: var(--bg-elevated);
179 border: 1px solid var(--border);
180 border-radius: var(--radius-lg);
181 padding: 6px;
182 box-shadow: var(--shadow-lg);
183 z-index: 200;
184}
185
186.dropdown-right {
187 right: 0;
188}
189
190.dropdown-item {
191 display: flex;
192 align-items: center;
193 gap: 10px;
194 width: 100%;
195 padding: 10px 12px;
196 border-radius: var(--radius-md);
197 color: var(--text-secondary);
198 font-size: 0.875rem;
199 font-weight: 500;
200 text-decoration: none;
201 transition: all 0.15s;
202 background: none;
203 border: none;
204 cursor: pointer;
205 text-align: left;
206}
207
208.dropdown-item:hover {
209 background: var(--bg-hover);
210 color: var(--text-primary);
211}
212
213.dropdown-item.danger:hover {
214 background: rgba(217, 119, 102, 0.12);
215 color: var(--error);
216}
217
218.dropdown-external {
219 margin-left: auto;
220 opacity: 0.4;
221}
222
223.tangled-icon-wrapper {
224 width: 16px;
225 height: 16px;
226 display: flex;
227 align-items: center;
228 justify-content: center;
229}
230
231.tangled-icon-wrapper img {
232 width: 16px;
233 height: 16px;
234 filter: grayscale(100%) brightness(1.5);
235 opacity: 0.6;
236 transition: all 0.15s;
237}
238
239.dropdown-item:hover .tangled-icon-wrapper img {
240 opacity: 0.9;
241}
242
243[data-theme="light"] .tangled-icon-wrapper img {
244 filter: grayscale(100%) brightness(0) invert(0.35);
245 opacity: 1;
246}
247
248[data-theme="light"] .dropdown-item:hover .tangled-icon-wrapper img {
249 filter: grayscale(100%) brightness(0) invert(0.1);
250 opacity: 1;
251}
252
253.dropdown-divider {
254 height: 1px;
255 background: var(--border);
256 margin: 6px 0;
257}
258
259.dropdown-user-info {
260 padding: 8px 12px;
261 display: flex;
262 flex-direction: column;
263 gap: 2px;
264}
265
266.dropdown-user-name {
267 font-weight: 600;
268 color: var(--text-primary);
269 font-size: 0.9rem;
270}
271
272.dropdown-user-handle {
273 color: var(--text-tertiary);
274 font-size: 0.8rem;
275}
276
277.main-content {
278 max-width: 1300px;
279 margin: 0 auto;
280 padding: 32px 56px 80px;
281}
282
283.mobile-menu {
284 display: none;
285 position: absolute;
286 top: 100%;
287 left: 0;
288 right: 0;
289 background: var(--bg-secondary);
290 border-bottom: 1px solid var(--border);
291 padding: 12px 16px;
292}
293
294.mobile-menu-link {
295 display: flex;
296 align-items: center;
297 gap: 12px;
298 padding: 12px 16px;
299 color: var(--text-secondary);
300 text-decoration: none;
301 font-size: 0.95rem;
302 font-weight: 500;
303 border-radius: var(--radius-md);
304 transition: all 0.15s;
305}
306
307.mobile-menu-link:hover,
308.mobile-menu-link.active {
309 background: var(--bg-hover);
310 color: var(--text-primary);
311}
312
313.mobile-menu-link.active {
314 color: var(--accent);
315}
316
317.mobile-menu-divider {
318 height: 1px;
319 background: var(--border);
320 margin: 8px 0;
321}
322
323.notification-badge {
324 background: var(--accent);
325 color: var(--bg-primary);
326 font-size: 0.7rem;
327 font-weight: 700;
328 padding: 2px 6px;
329 border-radius: var(--radius-full);
330 margin-left: auto;
331}
332
333.mobile-bottom-nav {
334 display: none;
335 position: fixed;
336 bottom: 0;
337 left: 0;
338 right: 0;
339 background: var(--nav-bg);
340 backdrop-filter: blur(12px);
341 -webkit-backdrop-filter: blur(12px);
342 border-top: 1px solid var(--border);
343 padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
344 z-index: 100;
345}
346
347.mobile-bottom-nav {
348 display: none;
349 justify-content: space-around;
350 align-items: center;
351}
352
353.mobile-bottom-nav-item {
354 display: flex;
355 flex-direction: column;
356 align-items: center;
357 gap: 4px;
358 padding: 6px 12px;
359 color: var(--text-tertiary);
360 text-decoration: none;
361 font-size: 0.65rem;
362 font-weight: 500;
363 transition: color 0.15s;
364 min-width: 56px;
365}
366
367.mobile-bottom-nav-item.active {
368 color: var(--accent);
369}
370
371.mobile-bottom-nav-item:active {
372 transform: scale(0.95);
373}
374
375.mobile-bottom-nav-new {
376 padding: 6px 16px;
377}
378
379.mobile-nav-new-btn {
380 display: flex;
381 align-items: center;
382 justify-content: center;
383 width: 44px;
384 height: 44px;
385 background: var(--accent);
386 color: var(--bg-primary);
387 border-radius: var(--radius-full);
388 box-shadow: var(--shadow-md);
389}
390
391.mobile-nav-avatar {
392 width: 24px;
393 height: 24px;
394 border-radius: var(--radius-full);
395 object-fit: cover;
396}
397
398.ios-shortcut-banner {
399 display: none;
400 position: relative;
401 padding: 20px;
402 margin-bottom: 12px;
403 text-align: center;
404}
405
406.ios-shortcut-banner-close {
407 position: absolute;
408 top: 8px;
409 right: 8px;
410 background: none;
411 border: none;
412 color: var(--text-tertiary);
413 cursor: pointer;
414 padding: 6px;
415 display: flex;
416 align-items: center;
417 justify-content: center;
418 opacity: 0.5;
419 transition: opacity 0.15s;
420}
421
422.ios-shortcut-banner-close:hover {
423 opacity: 1;
424}
425
426.ios-shortcut-banner-content {
427 display: flex;
428 flex-direction: column;
429 align-items: center;
430 gap: 12px;
431}
432
433.ios-shortcut-banner-icon {
434 display: none;
435}
436
437.ios-shortcut-banner-text {
438 text-align: center;
439}
440
441.ios-shortcut-banner-text strong {
442 display: none;
443}
444
445.ios-shortcut-banner-text p {
446 font-size: 0.8rem;
447 color: var(--text-tertiary);
448 margin: 0;
449 line-height: 1.4;
450}
451
452.ios-shortcut-banner-btn {
453 display: inline-flex;
454 align-items: center;
455 gap: 6px;
456 padding: 10px 20px;
457 background: transparent;
458 color: var(--text-secondary);
459 font-size: 0.85rem;
460 font-weight: 500;
461 border: 1px solid var(--border);
462 border-radius: 100px;
463 text-decoration: none;
464 transition: all 0.15s;
465}
466
467.ios-shortcut-banner-btn:hover {
468 background: var(--bg-hover);
469 color: var(--text-primary);
470}
471
472@media (max-width: 768px) {
473 .ios-shortcut-banner {
474 display: block;
475 }
476}
477
478@media (max-width: 768px) {
479 .top-nav {
480 display: none;
481 }
482
483 .mobile-bottom-nav {
484 display: flex;
485 }
486
487 .main-content {
488 padding: 16px 12px 100px;
489 }
490
491 .feed-container {
492 border-radius: var(--radius-md);
493 padding: 4px;
494 }
495}
496
497@media (max-width: 480px) {
498 .main-content {
499 padding: 16px 12px 100px;
500 }
501
502 .page-title {
503 font-size: 1.25rem;
504 }
505
506 .page-description {
507 font-size: 0.85rem;
508 }
509}