margin.at
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.collection-detail-desc {
175 color: var(--text-secondary);
176 font-size: 1rem;
177 line-height: 1.5;
178 margin-bottom: 12px;
179 max-width: 600px;
180}
181
182.collection-detail-stats {
183 display: flex;
184 align-items: center;
185 gap: 8px;
186 font-size: 0.85rem;
187 color: var(--text-tertiary);
188}
189
190.collection-detail-actions {
191 position: absolute;
192 top: 20px;
193 right: 20px;
194 display: flex;
195 align-items: center;
196 gap: 8px;
197}
198
199.collection-detail-actions .share-menu-container {
200 display: flex;
201 align-items: center;
202}
203
204.collection-detail-actions .annotation-action {
205 padding: 10px;
206 color: var(--text-tertiary);
207 background: none;
208 border: none;
209 border-radius: var(--radius-sm);
210 cursor: pointer;
211 transition: all 0.15s ease;
212}
213
214.collection-detail-actions .annotation-action:hover {
215 color: var(--accent);
216 background: var(--bg-tertiary);
217}
218
219.collection-detail-edit,
220.collection-detail-delete {
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-edit:hover {
231 color: var(--accent);
232 background: var(--bg-tertiary);
233}
234
235.collection-detail-delete:hover {
236 color: var(--error);
237 background: rgba(239, 68, 68, 0.1);
238}
239
240.collection-item-wrapper {
241 position: relative;
242}
243
244.collection-item-remove {
245 position: absolute;
246 top: 12px;
247 left: -40px;
248 z-index: 10;
249 padding: 8px;
250 background: var(--bg-card);
251 border: 1px solid var(--border);
252 border-radius: var(--radius-sm);
253 color: var(--text-tertiary);
254 cursor: pointer;
255 opacity: 0;
256 transition: all 0.15s ease;
257}
258
259.collection-item-wrapper:hover .collection-item-remove {
260 opacity: 1;
261}
262
263.collection-item-remove:hover {
264 color: var(--error);
265 border-color: var(--error);
266 background: rgba(239, 68, 68, 0.05);
267}
268
269.collection-list-item {
270 width: 100%;
271 text-align: left;
272 padding: 12px 16px;
273 border-radius: var(--radius-md);
274 background: var(--bg-primary);
275 border: 1px solid transparent;
276 color: var(--text-primary);
277 transition: all 0.15s ease;
278 display: flex;
279 align-items: center;
280 justify-content: space-between;
281 cursor: pointer;
282}
283
284.collection-list-item:hover {
285 background: var(--bg-hover);
286 border-color: var(--border);
287}
288
289.collection-list-item:hover .collection-list-item-icon {
290 opacity: 1;
291}
292
293.collection-list-item:disabled {
294 opacity: 0.6;
295 cursor: not-allowed;
296}
297
298.item-delete-overlay {
299 position: absolute;
300 top: 16px;
301 right: 16px;
302 z-index: 10;
303 opacity: 0;
304 transition: opacity 0.15s ease;
305}
306
307.card:hover .item-delete-overlay,
308div:hover > .item-delete-overlay {
309 opacity: 1;
310}