margin.at
1.legal-content {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 20px;
5}
6
7.legal-content h1 {
8 font-size: 2rem;
9 margin-bottom: 8px;
10 color: var(--text-primary);
11}
12
13.legal-content h2 {
14 font-size: 1.4rem;
15 margin-top: 32px;
16 margin-bottom: 12px;
17 color: var(--text-primary);
18}
19
20.legal-content h3 {
21 font-size: 1.1rem;
22 margin-top: 20px;
23 margin-bottom: 8px;
24 color: var(--text-primary);
25}
26
27.legal-content p {
28 color: var(--text-secondary);
29 line-height: 1.7;
30 margin-bottom: 12px;
31}
32
33.legal-content ul {
34 color: var(--text-secondary);
35 line-height: 1.7;
36 margin-left: 24px;
37 margin-bottom: 12px;
38}
39
40.legal-content li {
41 margin-bottom: 6px;
42}
43
44.legal-content a {
45 color: var(--accent);
46 text-decoration: none;
47}
48
49.legal-content a:hover {
50 text-decoration: underline;
51}
52
53.legal-content section {
54 margin-bottom: 24px;
55}
56
57.text-secondary {
58 color: var(--text-secondary);
59}
60
61.text-error {
62 color: var(--error);
63}
64
65.text-center {
66 text-align: center;
67}
68
69.flex {
70 display: flex;
71}
72
73.items-center {
74 align-items: center;
75}
76
77.justify-center {
78 justify-content: center;
79}
80
81.justify-end {
82 justify-content: flex-end;
83}
84
85.gap-2 {
86 gap: 8px;
87}
88
89.gap-3 {
90 gap: 12px;
91}
92
93.mt-3 {
94 margin-top: 12px;
95}
96
97.mb-6 {
98 margin-bottom: 24px;
99}
100
101.composer {
102 margin-bottom: 24px;
103}
104
105.composer-header {
106 display: flex;
107 justify-content: space-between;
108 align-items: center;
109 margin-bottom: 12px;
110}
111
112.composer-title {
113 font-size: 1.1rem;
114 font-weight: 600;
115 color: var(--text-primary);
116 margin: 0;
117}
118
119.composer-input {
120 width: 100%;
121 min-height: 120px;
122 padding: 16px;
123 background: var(--bg-secondary);
124 border: 1px solid var(--border);
125 border-radius: var(--radius-md);
126 color: var(--text-primary);
127 font-size: 1rem;
128 resize: vertical;
129 transition: all 0.15s ease;
130}
131
132.composer-input:focus {
133 outline: none;
134 border-color: var(--accent);
135 box-shadow: 0 0 0 3px var(--accent-subtle);
136}
137
138.composer-footer {
139 display: flex;
140 justify-content: space-between;
141 align-items: center;
142 margin-top: 12px;
143}
144
145.composer-actions {
146 display: flex;
147 justify-content: flex-end;
148 gap: 8px;
149}
150
151.composer-count {
152 font-size: 0.85rem;
153 color: var(--text-tertiary);
154}
155
156.composer-count.warning {
157 color: var(--warning);
158}
159
160.composer-count.error {
161 color: var(--error);
162}
163
164.composer-char-count.warning {
165 color: var(--warning);
166}
167
168.composer-char-count.error {
169 color: var(--error);
170}
171
172.composer-add-quote {
173 width: 100%;
174 padding: 12px 16px;
175 margin-bottom: 12px;
176 background: var(--bg-tertiary);
177 border: 1px dashed var(--border);
178 border-radius: var(--radius-md);
179 color: var(--text-secondary);
180 font-size: 0.9rem;
181 cursor: pointer;
182 transition: all 0.15s ease;
183}
184
185.composer-add-quote:hover {
186 border-color: var(--accent);
187 color: var(--accent);
188 background: var(--accent-subtle);
189}
190
191.composer-quote-input-wrapper {
192 margin-bottom: 12px;
193}
194
195.composer-quote-input {
196 width: 100%;
197 padding: 12px 16px;
198 background: linear-gradient(
199 135deg,
200 rgba(79, 70, 229, 0.05),
201 rgba(168, 85, 247, 0.05)
202 );
203 border: 1px solid var(--border);
204 border-left: 3px solid var(--accent);
205 border-radius: 0 var(--radius-md) var(--radius-md) 0;
206 color: var(--text-primary);
207 font-size: 0.95rem;
208 font-style: italic;
209 resize: vertical;
210 font-family: inherit;
211 transition: all 0.15s ease;
212}
213
214.composer-quote-input:focus {
215 outline: none;
216 border-color: var(--accent);
217}
218
219.composer-quote-input::placeholder {
220 color: var(--text-tertiary);
221 font-style: italic;
222}
223
224.composer-quote-remove-btn {
225 margin-top: 8px;
226 padding: 6px 12px;
227 background: none;
228 border: none;
229 color: var(--text-tertiary);
230 font-size: 0.85rem;
231 cursor: pointer;
232}
233
234.composer-quote-remove-btn:hover {
235 color: var(--error);
236}
237
238.composer-error {
239 margin-top: 12px;
240 padding: 12px;
241 background: rgba(239, 68, 68, 0.1);
242 border: 1px solid rgba(239, 68, 68, 0.3);
243 border-radius: var(--radius-md);
244 color: var(--error);
245 font-size: 0.9rem;
246}
247
248.composer-url {
249 font-size: 0.85rem;
250 color: var(--text-secondary);
251 word-break: break-all;
252}
253
254.composer-quote {
255 position: relative;
256 padding: 12px 16px;
257 padding-right: 36px;
258 background: var(--bg-secondary);
259 border-left: 3px solid var(--accent);
260 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
261 margin-bottom: 16px;
262 font-style: italic;
263 color: var(--text-secondary);
264}
265
266.composer-quote-remove {
267 position: absolute;
268 top: 8px;
269 right: 8px;
270 width: 24px;
271 height: 24px;
272 border-radius: var(--radius-full);
273 background: var(--bg-tertiary);
274 color: var(--text-secondary);
275 font-size: 1rem;
276 display: flex;
277 align-items: center;
278 justify-content: center;
279}
280
281.composer-quote-remove:hover {
282 background: var(--bg-hover);
283 color: var(--text-primary);
284}
285
286.composer-tags {
287 flex: 1;
288}
289
290.composer-meta-row {
291 display: flex;
292 gap: 12px;
293 margin-top: 12px;
294 align-items: flex-start;
295}
296
297.composer-labels-wrapper {
298 position: relative;
299}
300
301.composer-labels-btn {
302 display: flex;
303 align-items: center;
304 justify-content: center;
305 width: 42px;
306 height: 42px;
307 background: var(--bg-secondary);
308 border: 1px solid var(--border);
309 border-radius: var(--radius-md);
310 cursor: pointer;
311 color: var(--text-tertiary);
312 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
313 position: relative;
314}
315
316.composer-labels-btn:hover {
317 color: var(--text-primary);
318 background: var(--bg-hover);
319 border-color: var(--text-tertiary);
320}
321
322.composer-labels-btn.active {
323 color: var(--accent);
324 background: var(--accent-subtle);
325 border-color: var(--accent);
326}
327
328.composer-labels-badge {
329 position: absolute;
330 top: -4px;
331 right: -4px;
332 background: var(--error);
333 color: white;
334 font-size: 0.7rem;
335 width: 18px;
336 height: 18px;
337 border-radius: 50%;
338 display: flex;
339 align-items: center;
340 justify-content: center;
341 font-weight: bold;
342 border: 2px solid var(--bg-primary);
343 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
344}
345
346.composer-labels-picker {
347 position: absolute;
348 bottom: 100%;
349 right: 0;
350 margin-bottom: 12px;
351 background: var(--bg-elevated);
352 border: 1px solid var(--border);
353 border-radius: var(--radius-md);
354 padding: 8px 0;
355 min-width: 200px;
356 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
357 z-index: 50;
358 animation: scaleIn 0.2s ease-out forwards;
359 transform-origin: bottom right;
360}
361
362@keyframes scaleIn {
363 from {
364 opacity: 0;
365 transform: scale(0.95) translateY(5px);
366 }
367
368 to {
369 opacity: 1;
370 transform: scale(1) translateY(0);
371 }
372}
373
374.picker-header {
375 font-size: 0.75rem;
376 font-weight: 600;
377 color: var(--text-tertiary);
378 text-transform: uppercase;
379 letter-spacing: 0.05em;
380 margin-bottom: 4px;
381 padding: 4px 12px 8px;
382 border-bottom: 1px solid var(--border);
383}
384
385.picker-item {
386 display: flex;
387 align-items: center;
388 gap: 10px;
389 padding: 10px 14px;
390 cursor: pointer;
391 color: var(--text-secondary);
392 font-size: 0.9rem;
393 transition: all 0.15s ease;
394 user-select: none;
395}
396
397.picker-item:hover {
398 background: var(--bg-hover);
399 color: var(--text-primary);
400}
401
402.picker-checkbox-wrapper {
403 position: relative;
404 width: 18px;
405 height: 18px;
406 display: flex;
407 align-items: center;
408 justify-content: center;
409}
410
411.picker-checkbox-wrapper input {
412 position: absolute;
413 opacity: 0;
414 width: 100%;
415 height: 100%;
416 cursor: pointer;
417 z-index: 10;
418}
419
420.picker-checkbox-custom {
421 width: 18px;
422 height: 18px;
423 border: 2px solid var(--text-tertiary);
424 border-radius: 4px;
425 display: flex;
426 align-items: center;
427 justify-content: center;
428 background: transparent;
429 transition: all 0.2s ease;
430 color: white;
431}
432
433.picker-item:hover .picker-checkbox-custom {
434 border-color: var(--text-secondary);
435}
436
437.picker-checkbox-wrapper input:checked + .picker-checkbox-custom {
438 background: var(--accent);
439 border-color: var(--accent);
440 color: white;
441}
442
443.composer-tags-input {
444 width: 100%;
445 padding: 12px 16px;
446 background: var(--bg-secondary);
447 border: 1px solid var(--border);
448 border-radius: var(--radius-md);
449 color: var(--text-primary);
450 font-size: 0.95rem;
451 transition: all 0.15s ease;
452}
453
454.composer-tags-input:focus {
455 outline: none;
456 border-color: var(--accent);
457 box-shadow: 0 0 0 3px var(--accent-subtle);
458}
459
460.composer-tags-input::placeholder {
461 color: var(--text-tertiary);
462}
463
464.history-panel {
465 background: var(--bg-tertiary);
466 border: 1px solid var(--border);
467 border-radius: var(--radius-md);
468 padding: 1rem;
469 margin-bottom: 1rem;
470 font-size: 0.9rem;
471 animation: fadeIn 0.2s ease-out;
472}
473
474.history-header {
475 display: flex;
476 justify-content: space-between;
477 align-items: center;
478 margin-bottom: 1rem;
479 padding-bottom: 0.5rem;
480 border-bottom: 1px solid var(--border);
481}
482
483.history-title {
484 font-weight: 600;
485 text-transform: uppercase;
486 letter-spacing: 0.05em;
487 font-size: 0.75rem;
488 color: var(--text-secondary);
489}
490
491.history-list {
492 list-style: none;
493 display: flex;
494 flex-direction: column;
495 gap: 1rem;
496}
497
498.history-item {
499 position: relative;
500 padding-left: 1rem;
501 border-left: 2px solid var(--border);
502}
503
504.history-date {
505 font-size: 0.75rem;
506 color: var(--text-tertiary);
507 margin-bottom: 0.25rem;
508}
509
510.history-content {
511 color: var(--text-secondary);
512 white-space: pre-wrap;
513}
514
515.history-close-btn {
516 color: var(--text-tertiary);
517 padding: 4px;
518 border-radius: var(--radius-sm);
519 transition: all 0.2s;
520 display: flex;
521 align-items: center;
522 justify-content: center;
523}
524
525.history-close-btn:hover {
526 background: var(--bg-hover);
527 color: var(--text-primary);
528}
529
530.history-status {
531 text-align: center;
532 color: var(--text-tertiary);
533 font-style: italic;
534 padding: 1rem;
535}
536
537.share-menu-container {
538 position: relative;
539}
540
541.share-menu {
542 position: absolute;
543 top: 100%;
544 right: 0;
545 margin-top: 8px;
546 background: var(--bg-primary);
547 border: 1px solid var(--border);
548 border-radius: var(--radius-lg);
549 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
550 min-width: 180px;
551 padding: 8px 0;
552 z-index: 100;
553 animation: fadeInUp 0.15s ease;
554}
555
556@keyframes fadeInUp {
557 from {
558 opacity: 0;
559 transform: translateY(-8px);
560 }
561
562 to {
563 opacity: 1;
564 transform: translateY(0);
565 }
566}
567
568.share-menu-section {
569 display: flex;
570 flex-direction: column;
571}
572
573.share-menu-label {
574 padding: 4px 12px 8px;
575 font-size: 0.7rem;
576 font-weight: 600;
577 text-transform: uppercase;
578 letter-spacing: 0.05em;
579 color: var(--text-tertiary);
580}
581
582.share-menu-item {
583 display: flex;
584 align-items: center;
585 gap: 10px;
586 padding: 10px 14px;
587 background: none;
588 border: none;
589 width: 100%;
590 text-align: left;
591 font-size: 0.9rem;
592 color: var(--text-primary);
593 cursor: pointer;
594 transition: all 0.1s ease;
595}
596
597.share-menu-item:hover {
598 background: var(--bg-tertiary);
599}
600
601.share-menu-icon {
602 font-size: 1.1rem;
603 width: 24px;
604 text-align: center;
605}
606
607.share-menu-divider {
608 height: 1px;
609 background: var(--border);
610 margin: 6px 0;
611}
612
613.bookmark-card {
614 display: flex;
615 flex-direction: column;
616 gap: 16px;
617}
618
619.bookmark-preview {
620 display: flex;
621 flex-direction: column;
622 background: var(--bg-secondary);
623 border: 1px solid var(--border);
624 border-radius: var(--radius-md);
625 overflow: hidden;
626 text-decoration: none;
627 transition: all 0.2s ease;
628 position: relative;
629}
630
631.bookmark-preview:hover {
632 border-color: var(--accent);
633 box-shadow: var(--shadow-sm);
634 transform: translateY(-1px);
635}
636
637.bookmark-preview::before {
638 content: "";
639 position: absolute;
640 left: 0;
641 top: 0;
642 bottom: 0;
643 width: 4px;
644 background: var(--accent);
645 opacity: 0.7;
646}
647
648.bookmark-preview-content {
649 padding: 16px 20px;
650 display: flex;
651 flex-direction: column;
652 gap: 8px;
653}
654
655.bookmark-preview-header {
656 display: flex;
657 align-items: center;
658 gap: 8px;
659 margin-bottom: 4px;
660}
661
662.bookmark-preview-site {
663 display: flex;
664 align-items: center;
665 gap: 6px;
666 font-size: 0.75rem;
667 font-weight: 600;
668 color: var(--accent);
669 text-transform: uppercase;
670 letter-spacing: 0.03em;
671}
672
673.bookmark-preview-title {
674 font-size: 1rem;
675 font-weight: 600;
676 line-height: 1.4;
677 color: var(--text-primary);
678 margin: 0;
679 display: -webkit-box;
680 -webkit-line-clamp: 2;
681 line-clamp: 2;
682 -webkit-box-orient: vertical;
683 overflow: hidden;
684}
685
686.bookmark-preview-desc {
687 font-size: 0.875rem;
688 color: var(--text-secondary);
689 line-height: 1.5;
690 margin: 0;
691 display: -webkit-box;
692 -webkit-line-clamp: 2;
693 line-clamp: 2;
694 -webkit-box-orient: vertical;
695 overflow: hidden;
696}
697
698.bookmark-preview-arrow {
699 display: flex;
700 align-items: center;
701 justify-content: center;
702 color: var(--text-tertiary);
703 padding: 0 4px;
704 transition: all 0.2s ease;
705}
706
707.bookmark-preview:hover .bookmark-preview-arrow {
708 color: var(--accent);
709 transform: translateX(2px);
710}
711
712.bookmark-description {
713 font-size: 0.9rem;
714 color: var(--text-secondary);
715 margin: 0;
716 line-height: 1.5;
717}
718
719.bookmark-meta {
720 display: flex;
721 align-items: center;
722 gap: 12px;
723 margin-top: 12px;
724 font-size: 0.85rem;
725 color: var(--text-tertiary);
726}
727
728.bookmark-time {
729 color: var(--text-tertiary);
730}