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