(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.feed-container {
2 /* background: var(--bg-elevated); */
3 /* border: 1px solid var(--border-hover); */
4 /* border-radius: var(--radius-xl); */
5 overflow: visible;
6 /* padding: 8px; */
7 position: relative;
8}
9
10.feed {
11 display: flex;
12 flex-direction: column;
13 gap: 12px;
14 width: 100%;
15 overflow: visible;
16 border-radius: var(--radius-lg);
17 position: relative;
18}
19
20.feed-load-more {
21 display: inline-flex;
22 align-items: center;
23 justify-content: center;
24 padding: 10px 24px;
25 background: var(--bg-tertiary);
26 border: none;
27 border-radius: var(--radius-md);
28 color: var(--text-secondary);
29 font-weight: 500;
30 font-size: 0.9rem;
31 cursor: pointer;
32 transition: all 0.15s ease;
33}
34
35.feed-load-more:hover {
36 background: var(--bg-hover);
37 color: var(--text-primary);
38}
39
40.feed-load-more:disabled {
41 opacity: 0.6;
42 cursor: not-allowed;
43}
44
45.feed > * {
46 background: var(--bg-card);
47 border: 1px solid var(--border);
48 border-radius: var(--radius-lg);
49 position: relative;
50 overflow: hidden;
51}
52
53.feed > *:last-child {
54 border-bottom: 1px solid var(--border);
55}
56
57.feed > *:hover {
58 z-index: 10;
59}
60
61.feed-page {
62 animation: fadeIn 0.3s ease-out;
63}
64
65@keyframes fadeIn {
66 from {
67 opacity: 0;
68 }
69
70 to {
71 opacity: 1;
72 }
73}
74
75.feed-header {
76 display: flex;
77 align-items: center;
78 justify-content: space-between;
79 margin-bottom: 20px;
80}
81
82.feed-title {
83 font-family: var(--font-display);
84 font-size: 1.25rem;
85 font-weight: 600;
86 letter-spacing: -0.02em;
87}
88
89.feed-filters {
90 display: flex;
91 gap: 4px;
92 margin-bottom: 20px;
93 background: transparent;
94 padding: 0;
95 border: none;
96 flex-wrap: wrap;
97}
98
99.filter-tab {
100 padding: 8px 14px;
101 font-size: 0.875rem;
102 font-weight: 500;
103 color: var(--text-tertiary);
104 background: transparent;
105 border: none;
106 border-radius: var(--radius-md);
107 cursor: pointer;
108 transition: all 0.15s ease;
109}
110
111.filter-tab:hover {
112 color: var(--text-secondary);
113 background: var(--bg-tertiary);
114}
115
116.filter-tab.active {
117 color: var(--text-primary);
118 background: var(--bg-tertiary);
119}
120
121.filter-pill {
122 padding: 8px 14px;
123 font-size: 0.8rem;
124 font-weight: 600;
125 color: var(--text-secondary);
126 background: var(--bg-tertiary);
127 border: none;
128 border-radius: var(--radius-full);
129 cursor: pointer;
130 transition: all 0.15s;
131}
132
133.filter-pill:hover {
134 background: var(--bg-hover);
135 color: var(--text-primary);
136}
137
138.filter-pill.active {
139 background: var(--accent);
140 color: var(--bg-primary);
141}
142
143.page-header {
144 margin-bottom: 28px;
145}
146
147.page-title {
148 font-family: var(--font-display);
149 font-size: 2rem;
150 font-weight: 700;
151 margin-bottom: 8px;
152 letter-spacing: -0.02em;
153 color: var(--text-primary);
154}
155
156.page-description {
157 color: var(--text-secondary);
158 font-size: 1.1rem;
159 line-height: 1.5;
160}
161
162.url-input-wrapper {
163 margin-bottom: var(--spacing-lg);
164 position: relative;
165}
166
167.url-input-container {
168 display: flex;
169 gap: var(--spacing-sm);
170}
171
172.url-input {
173 width: 100%;
174 padding: 12px 16px;
175 background: var(--bg-secondary);
176 border: 1px solid var(--border);
177 border-radius: var(--radius-md);
178 color: var(--text-primary);
179 font-size: 0.9rem;
180 transition: all 0.15s ease;
181}
182
183.url-input:focus {
184 outline: none;
185 border-color: var(--accent);
186 box-shadow: 0 0 0 3px var(--accent-subtle);
187}
188
189.url-input::placeholder {
190 color: var(--text-tertiary);
191}
192
193.url-results-header {
194 display: flex;
195 align-items: center;
196 justify-content: space-between;
197 margin-bottom: var(--spacing-md);
198}
199
200.back-link {
201 display: inline-flex;
202 align-items: center;
203 gap: 6px;
204 color: var(--text-secondary);
205 font-size: 0.8rem;
206 font-weight: 500;
207 text-decoration: none;
208 margin-bottom: var(--spacing-lg);
209 padding: 6px 12px;
210 background: var(--bg-tertiary);
211 border-radius: var(--radius-sm);
212 transition: all 0.15s;
213}
214
215.back-link:hover {
216 background: var(--bg-hover);
217 color: var(--text-primary);
218}
219
220.url-target-info {
221 display: flex;
222 flex-direction: column;
223 gap: 4px;
224 padding: 12px 16px;
225 background: var(--bg-secondary);
226 border: 1px solid var(--border);
227 border-radius: var(--radius-md);
228 margin-bottom: var(--spacing-lg);
229}
230
231.url-target-label {
232 font-size: 0.65rem;
233 text-transform: uppercase;
234 letter-spacing: 0.05em;
235 font-weight: 600;
236 color: var(--text-tertiary);
237}
238
239.url-target-link {
240 color: var(--accent);
241 font-size: 0.85rem;
242 font-weight: 500;
243 text-decoration: none;
244 word-break: break-all;
245 line-height: 1.4;
246}
247
248.url-target-link:hover {
249 text-decoration: underline;
250}
251
252.share-notes-banner {
253 display: flex;
254 align-items: center;
255 justify-content: space-between;
256 gap: var(--spacing-md);
257 padding: 12px 16px;
258 background: var(--bg-secondary);
259 border: 1px solid var(--border);
260 border-radius: var(--radius-md);
261 margin-bottom: var(--spacing-md);
262}
263
264.share-notes-info {
265 display: flex;
266 align-items: center;
267 gap: var(--spacing-sm);
268 color: var(--text-primary);
269 font-size: 0.85rem;
270 font-weight: 500;
271}
272
273.share-notes-actions {
274 display: flex;
275 gap: var(--spacing-sm);
276}
277
278.empty-state {
279 display: flex;
280 flex-direction: column;
281 align-items: center;
282 justify-content: center;
283 padding: 48px 24px;
284 text-align: center;
285}
286
287.empty-state-icon {
288 width: 56px;
289 height: 56px;
290 display: flex;
291 align-items: center;
292 justify-content: center;
293 background: var(--bg-tertiary);
294 border-radius: var(--radius-lg);
295 color: var(--text-tertiary);
296 margin-bottom: 16px;
297}
298
299.empty-state-title {
300 font-size: 1.1rem;
301 font-weight: 600;
302 color: var(--text-primary);
303 margin-bottom: 6px;
304}
305
306.empty-state-text {
307 font-size: 0.9rem;
308 color: var(--text-secondary);
309 max-width: 300px;
310 line-height: 1.5;
311}
312
313@media (max-width: 640px) {
314 .feed-filters {
315 gap: 4px;
316 }
317
318 .filter-tab,
319 .filter-pill {
320 padding: 6px 10px;
321 font-size: 0.75rem;
322 }
323}
324
325.feed-controls {
326 display: flex;
327 flex-direction: column;
328 gap: var(--spacing-sm);
329 margin-bottom: var(--spacing-lg);
330}
331
332.active-filter-banner {
333 display: inline-flex;
334 align-items: center;
335 gap: var(--spacing-sm);
336 padding: 6px 10px 6px 12px;
337 background: var(--accent-subtle);
338 border: 1px solid var(--accent);
339 border-radius: var(--radius-full);
340 font-size: 0.8rem;
341 color: var(--accent);
342 margin-bottom: var(--spacing-md);
343 width: fit-content;
344}
345
346.active-filter-banner strong {
347 color: var(--accent-text);
348}
349
350.active-filter-clear {
351 display: flex;
352 align-items: center;
353 justify-content: center;
354 width: 20px;
355 height: 20px;
356 background: transparent;
357 border: none;
358 border-radius: var(--radius-full);
359 color: var(--accent);
360 cursor: pointer;
361 transition: all 0.15s;
362}
363
364.active-filter-clear:hover {
365 background: var(--accent);
366 color: white;
367}
368
369.keyboard-hint {
370 display: none;
371 align-items: center;
372 gap: 4px;
373 font-size: 0.7rem;
374 color: var(--text-tertiary);
375 margin-left: auto;
376}
377
378@media (min-width: 768px) {
379 .keyboard-hint {
380 display: flex;
381 }
382}
383
384.kbd {
385 display: inline-flex;
386 align-items: center;
387 justify-content: center;
388 min-width: 20px;
389 height: 20px;
390 padding: 0 6px;
391 background: var(--bg-tertiary);
392 border: 1px solid var(--border);
393 border-radius: var(--radius-xs);
394 font-size: 0.65rem;
395 font-family: var(--font-mono);
396 color: var(--text-secondary);
397}
398
399.back-to-top-btn {
400 position: fixed;
401 bottom: 24px;
402 right: 24px;
403 width: 44px;
404 height: 44px;
405 border-radius: var(--radius-full);
406 background: var(--bg-tertiary);
407 border: 1px solid var(--border);
408 color: var(--text-secondary);
409 display: flex;
410 align-items: center;
411 justify-content: center;
412 cursor: pointer;
413 box-shadow: var(--shadow-md);
414 transition: all 0.2s ease;
415 z-index: 100;
416 opacity: 0;
417 visibility: hidden;
418 transform: translateY(10px);
419}
420
421.back-to-top-btn.visible {
422 opacity: 1;
423 visibility: visible;
424 transform: translateY(0);
425}
426
427.back-to-top-btn:hover {
428 background: var(--bg-hover);
429 color: var(--text-primary);
430 border-color: var(--accent);
431 transform: translateY(-2px);
432 box-shadow: var(--shadow-lg);
433}