(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.collection-feed-item {
2 display: flex;
3 flex-direction: column;
4 background: var(--bg-primary);
5 overflow: visible;
6}
7
8.collection-context-badge {
9 display: flex;
10 align-items: center;
11 justify-content: space-between;
12 gap: var(--spacing-sm);
13 padding: 10px 20px;
14 background: var(--bg-secondary);
15 border-bottom: 1px solid var(--border);
16 border-top-left-radius: var(--radius-lg);
17 border-top-right-radius: var(--radius-lg);
18}
19
20.collection-context-inner {
21 display: flex;
22 align-items: center;
23 gap: 8px;
24 font-size: 0.8rem;
25 color: var(--text-secondary);
26}
27
28.collection-context-avatar {
29 width: 20px;
30 height: 20px;
31 border-radius: var(--radius-full);
32 object-fit: cover;
33}
34
35.collection-context-text {
36 display: flex;
37 align-items: center;
38 gap: 4px;
39 flex-wrap: wrap;
40}
41
42.collection-context-author {
43 font-weight: 600;
44 color: var(--text-primary);
45 text-decoration: none;
46}
47
48.collection-context-author:hover {
49 text-decoration: underline;
50}
51
52.collection-context-link {
53 display: inline-flex;
54 align-items: center;
55 gap: 5px;
56 font-weight: 600;
57 color: var(--accent);
58 text-decoration: none;
59 background: var(--accent-subtle);
60 padding: 2px 8px;
61 border-radius: var(--radius-sm);
62}
63
64.collection-context-link:hover {
65 background: var(--accent);
66 color: var(--bg-primary);
67}
68
69.collections-list {
70 display: flex;
71 flex-direction: column;
72 gap: 12px;
73}
74
75.collections-list > * {
76 background: var(--bg-card);
77 border: 1px solid var(--border);
78 border-radius: var(--radius-lg);
79}
80
81.collection-row {
82 display: flex;
83 align-items: center;
84 transition: background 0.15s ease;
85}
86
87.collection-row:hover {
88 background: var(--bg-secondary);
89}
90
91.collection-row-content {
92 flex: 1;
93 display: flex;
94 align-items: center;
95 gap: var(--spacing-md);
96 padding: var(--spacing-md);
97 text-decoration: none;
98 min-width: 0;
99}
100
101.collection-row-icon {
102 width: 40px;
103 height: 40px;
104 min-width: 40px;
105 display: flex;
106 align-items: center;
107 justify-content: center;
108 background: var(--bg-tertiary);
109 color: var(--accent);
110 border-radius: var(--radius-md);
111 transition: all 0.15s ease;
112 font-size: 1.1rem;
113}
114
115.collection-row:hover .collection-row-icon {
116 background: var(--accent-subtle);
117}
118
119.collection-row-info {
120 flex: 1;
121 min-width: 0;
122 display: flex;
123 flex-direction: column;
124 gap: 2px;
125}
126
127.collection-row-name {
128 font-size: 0.9rem;
129 font-weight: 600;
130 color: var(--text-primary);
131 white-space: nowrap;
132 overflow: hidden;
133 text-overflow: ellipsis;
134}
135
136.collection-row-desc {
137 font-size: 0.8rem;
138 color: var(--text-secondary);
139 white-space: nowrap;
140 overflow: hidden;
141 text-overflow: ellipsis;
142}
143
144.collection-row-arrow {
145 color: var(--text-tertiary);
146 opacity: 0;
147 transition: opacity 0.15s;
148}
149
150.collection-row:hover .collection-row-arrow {
151 opacity: 1;
152}
153
154.collection-row-edit {
155 padding: 8px;
156 margin-right: var(--spacing-sm);
157 color: var(--text-tertiary);
158 background: transparent;
159 border-radius: var(--radius-sm);
160 transition: all 0.15s;
161 opacity: 0;
162 border: none;
163 cursor: pointer;
164}
165
166.collection-row:hover .collection-row-edit {
167 opacity: 1;
168}
169
170.collection-row-edit:hover {
171 background: var(--bg-tertiary);
172 color: var(--text-primary);
173}
174
175.collection-detail-header {
176 display: flex;
177 flex-direction: column;
178 gap: var(--spacing-md);
179 padding: var(--spacing-lg);
180 background: var(--bg-secondary);
181 border: 1px solid var(--border);
182 border-radius: var(--radius-lg);
183 margin-bottom: var(--spacing-lg);
184 position: relative;
185}
186
187.collection-detail-icon {
188 width: 56px;
189 height: 56px;
190 min-width: 56px;
191 display: flex;
192 align-items: center;
193 justify-content: center;
194 background: var(--bg-tertiary);
195 color: var(--accent);
196 border-radius: var(--radius-lg);
197 font-size: 1.5rem;
198}
199
200.collection-detail-info {
201 display: flex;
202 flex-direction: column;
203 gap: 6px;
204}
205
206.collection-detail-visibility {
207 display: inline-flex;
208 align-items: center;
209 gap: 4px;
210 font-size: 0.65rem;
211 font-weight: 600;
212 letter-spacing: 0.05em;
213 text-transform: uppercase;
214 color: var(--accent);
215 padding: 2px 8px;
216 background: var(--accent-subtle);
217 border-radius: var(--radius-full);
218 width: fit-content;
219}
220
221.collection-detail-title {
222 font-family: var(--font-display);
223 font-size: 1.5rem;
224 font-weight: 700;
225 color: var(--text-primary);
226 line-height: 1.2;
227 letter-spacing: -0.02em;
228}
229
230.collection-detail-desc {
231 color: var(--text-secondary);
232 font-size: 0.9rem;
233 line-height: 1.5;
234}
235
236.collection-detail-stats {
237 display: flex;
238 align-items: center;
239 gap: var(--spacing-md);
240 font-size: 0.8rem;
241 color: var(--text-tertiary);
242 margin-top: var(--spacing-xs);
243}
244
245.collection-detail-actions {
246 position: absolute;
247 top: var(--spacing-md);
248 right: var(--spacing-md);
249 display: flex;
250 gap: var(--spacing-xs);
251}
252
253.collection-detail-actions .annotation-action,
254.collection-detail-edit,
255.collection-detail-delete {
256 padding: 6px;
257 color: var(--text-tertiary);
258 background: var(--bg-tertiary);
259 border-radius: var(--radius-sm);
260 transition: all 0.15s;
261 border: none;
262 cursor: pointer;
263}
264
265.collection-detail-actions .annotation-action:hover,
266.collection-detail-edit:hover {
267 background: var(--bg-hover);
268 color: var(--text-primary);
269}
270
271.collection-detail-delete:hover {
272 background: rgba(255, 69, 58, 0.1);
273 color: var(--error);
274}
275
276.collection-list-item {
277 width: 100%;
278 text-align: left;
279 padding: 12px 14px;
280 border-radius: var(--radius-md);
281 background: var(--bg-secondary);
282 border: 1px solid var(--border);
283 color: var(--text-primary);
284 transition: all 0.15s;
285 display: flex;
286 align-items: center;
287 justify-content: space-between;
288 cursor: pointer;
289 margin-bottom: var(--spacing-sm);
290}
291
292.collection-list-item:hover {
293 background: var(--bg-hover);
294 border-color: var(--accent);
295}
296
297.collection-list-item:disabled {
298 opacity: 0.5;
299 cursor: not-allowed;
300}
301
302.collection-item-wrapper {
303 position: relative;
304}
305
306.collection-item-remove {
307 position: absolute;
308 left: -40px;
309 top: 20px;
310 width: 28px;
311 height: 28px;
312 display: flex;
313 align-items: center;
314 justify-content: center;
315 background: var(--bg-secondary);
316 border: 1px solid var(--border);
317 border-radius: var(--radius-sm);
318 color: var(--text-tertiary);
319 cursor: pointer;
320 transition: all 0.15s ease;
321 opacity: 0;
322}
323
324.collection-item-wrapper:hover .collection-item-remove {
325 opacity: 1;
326}
327
328.collection-item-remove:hover {
329 background: rgba(255, 69, 58, 0.1);
330 border-color: rgba(255, 69, 58, 0.3);
331 color: var(--error);
332}
333
334.collection-item-wrapper .card,
335.collection-feed-item .card {
336 background: transparent !important;
337 border: none !important;
338 box-shadow: none;
339 border-radius: 0;
340}