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