treethought.xyz
AT protocol bookmarking platforms in obsidian
1/* ATmark View */
2.atmark-view {
3 padding: 20px;
4}
5
6.atmark-header {
7 margin-bottom: 24px;
8 padding-bottom: 16px;
9 border-bottom: 1px solid var(--background-modifier-border);
10}
11
12.atmark-nav {
13 display: flex;
14 align-items: center;
15 justify-content: space-between;
16 margin-bottom: 12px;
17 gap: 10px;
18}
19
20.atmark-title {
21 margin: 0;
22 font-size: var(--h1-size);
23 font-weight: var(--font-bold);
24 color: var(--text-accent);
25 flex-shrink: 1;
26 min-width: 0;
27}
28
29.atmark-source-selector {
30 display: flex;
31 align-items: center;
32 justify-content: center;
33 gap: 0;
34 margin-bottom: 12px;
35 border-bottom: 1px solid var(--background-modifier-border);
36}
37
38.atmark-source-option {
39 display: flex;
40 align-items: center;
41 justify-content: center;
42 gap: 4px;
43 padding: 10px 20px;
44 cursor: pointer;
45 user-select: none;
46 border: none;
47 background: transparent;
48 transition: all 0.15s ease;
49 position: relative;
50 margin-bottom: -1px;
51}
52
53.atmark-source-option::after {
54 content: "";
55 position: absolute;
56 bottom: 0;
57 left: 0;
58 right: 0;
59 height: 2px;
60 background: transparent;
61 transition: background 0.15s ease;
62}
63
64.atmark-source-option:hover {
65 background: var(--background-modifier-hover);
66}
67
68.atmark-source-option:has(input:checked)::after {
69 background: var(--interactive-accent);
70}
71
72.atmark-source-option:has(input:checked) .atmark-source-text {
73 color: var(--interactive-accent);
74 font-weight: var(--font-semibold);
75}
76
77.atmark-source-radio {
78 display: none;
79}
80
81.atmark-source-text {
82 font-size: var(--font-ui-small);
83 font-weight: var(--font-medium);
84 color: var(--text-muted);
85}
86
87.atmark-filters {
88 display: flex;
89 flex-direction: column;
90 gap: 16px;
91 margin-bottom: 16px;
92}
93
94.atmark-filter-section {
95 display: flex;
96 flex-direction: column;
97 gap: 6px;
98}
99
100.atmark-filter-title-row {
101 display: flex;
102 align-items: center;
103 gap: 6px;
104 margin-bottom: 2px;
105}
106
107.atmark-filter-title {
108 margin: 0;
109 font-size: var(--font-smallest);
110 font-weight: var(--font-semibold);
111 color: var(--text-faint);
112 text-transform: uppercase;
113 letter-spacing: 0.05em;
114}
115
116.atmark-filter-create-btn {
117 display: flex;
118 align-items: center;
119 justify-content: center;
120 width: 18px;
121 height: 18px;
122 padding: 0;
123 background: transparent;
124 border: none;
125 border-radius: var(--radius-s);
126 cursor: pointer;
127 color: var(--text-faint);
128 transition: all 0.15s ease;
129 opacity: 0.7;
130}
131
132.atmark-filter-create-btn:hover {
133 background: var(--background-modifier-hover);
134 color: var(--interactive-accent);
135 opacity: 1;
136}
137
138.atmark-filter-create-btn svg {
139 width: 12px;
140 height: 12px;
141}
142
143.atmark-filter-chips {
144 display: flex;
145 flex-wrap: wrap;
146 gap: 6px;
147 align-items: center;
148}
149
150.atmark-chip {
151 padding: 3px 10px;
152 border-radius: var(--radius-m);
153 border: none;
154 background: var(--background-modifier-border);
155 color: var(--text-muted);
156 font-size: var(--font-smallest);
157 font-weight: var(--font-medium);
158 cursor: pointer;
159 transition: all 0.12s ease;
160 white-space: nowrap;
161}
162
163.atmark-chip:hover {
164 background: var(--background-modifier-border-hover);
165 color: var(--text-normal);
166 transform: translateY(-1px);
167}
168
169.atmark-chip-active {
170 background: var(--interactive-accent);
171 color: var(--text-on-accent);
172 font-weight: var(--font-semibold);
173}
174
175.atmark-chip-active:hover {
176 background: var(--interactive-accent-hover);
177 transform: translateY(-1px);
178}
179
180.atmark-grid {
181 display: grid;
182 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
183 gap: 16px;
184 padding: 8px 0;
185}
186
187.atmark-item {
188 background: var(--background-secondary);
189 border: 1px solid var(--background-modifier-border);
190 border-radius: var(--radius-m);
191 padding: 16px;
192 display: flex;
193 flex-direction: column;
194 transition: box-shadow 0.15s ease, border-color 0.15s ease;
195 cursor: pointer;
196}
197
198.atmark-item:hover {
199 box-shadow: var(--shadow-s);
200 border-color: var(--background-modifier-border-hover);
201}
202
203.atmark-item-header {
204 display: flex;
205 justify-content: space-between;
206 align-items: flex-start;
207 gap: 8px;
208}
209
210.atmark-item-edit-btn {
211 display: flex;
212 align-items: center;
213 justify-content: center;
214 width: 24px;
215 height: 24px;
216 padding: 0;
217 margin-left: auto;
218 background: transparent;
219 border: none;
220 border-radius: var(--radius-s);
221 cursor: pointer;
222 color: var(--text-faint);
223 opacity: 0.6;
224 transition: all 0.15s ease;
225}
226
227.atmark-item:hover .atmark-item-edit-btn {
228 opacity: 1;
229}
230
231.atmark-item-edit-btn:hover {
232 background: var(--background-modifier-hover);
233 color: var(--text-normal);
234 opacity: 1;
235}
236
237.atmark-item-edit-btn svg {
238 width: 14px;
239 height: 14px;
240}
241
242.atmark-badge {
243 font-size: 10px;
244 padding: 3px 8px;
245 border-radius: 12px;
246 text-transform: capitalize;
247 font-weight: var(--font-normal);
248 flex-shrink: 0;
249 letter-spacing: 0.3px;
250}
251
252.atmark-badge-semble {
253 background: rgba(255, 87, 34, 0.15);
254 color: rgb(255, 120, 70);
255 border: 1px solid rgba(255, 87, 34, 0.3);
256}
257
258.atmark-badge-bookmark {
259 background: rgba(3, 169, 244, 0.15);
260 color: rgb(3, 169, 244);
261 border: 1px solid rgba(3, 169, 244, 0.3);
262}
263
264.atmark-badge-margin {
265 background: rgba(156, 39, 176, 0.15);
266 color: rgb(186, 104, 200);
267 border: 1px solid rgba(156, 39, 176, 0.3);
268}
269
270.atmark-item-footer {
271 display: flex;
272 justify-content: space-between;
273 font-size: var(--font-smallest);
274 color: var(--text-faint);
275 margin-top: auto;
276 padding-top: 8px;
277 border-top: 1px solid var(--background-modifier-border);
278}
279
280.atmark-date {
281 font-size: var(--font-smallest);
282 color: var(--text-faint);
283}
284
285.atmark-error {
286 color: var(--text-error);
287}
288
289
290/* Item Content (shared between sources) */
291.atmark-item-content {
292 display: flex;
293 flex-direction: column;
294 gap: 12px;
295}
296
297.atmark-item-title {
298 font-weight: var(--font-semibold);
299 font-size: 1em;
300 color: var(--text-normal);
301 display: -webkit-box;
302 -webkit-line-clamp: 2;
303 -webkit-box-orient: vertical;
304 overflow: hidden;
305 line-height: 1.4;
306 margin-bottom: 4px;
307}
308
309.atmark-item-image {
310 width: 100%;
311 max-height: 120px;
312 object-fit: cover;
313 border-radius: var(--radius-s);
314}
315
316.atmark-item-desc {
317 color: var(--text-muted);
318 font-size: var(--font-small);
319 margin: 0;
320 display: -webkit-box;
321 -webkit-line-clamp: 2;
322 -webkit-box-orient: vertical;
323 overflow: hidden;
324 line-height: 1.5;
325}
326
327.atmark-item-site {
328 font-size: var(--font-smallest);
329 color: var(--text-faint);
330 margin-bottom: 2px;
331}
332
333.atmark-item-url {
334 font-size: var(--font-smallest);
335 color: var(--text-accent);
336 text-decoration: none;
337 word-break: break-all;
338 display: -webkit-box;
339 -webkit-line-clamp: 1;
340 -webkit-box-orient: vertical;
341 overflow: hidden;
342}
343
344.atmark-item-url:hover {
345 text-decoration: underline;
346}
347
348.atmark-item-tags {
349 display: flex;
350 flex-wrap: wrap;
351 gap: 6px;
352 margin-bottom: 8px;
353}
354
355.atmark-tag {
356 font-size: var(--font-smallest);
357 padding: 2px 8px;
358 border-radius: var(--radius-s);
359 background: var(--background-modifier-border);
360 color: var(--text-muted);
361 border: 1px solid var(--background-modifier-border-hover);
362}
363
364.atmark-item-collections {
365 display: flex;
366 flex-wrap: wrap;
367 gap: 6px;
368 margin-bottom: 8px;
369}
370
371.atmark-collection {
372 font-size: var(--font-smallest);
373 padding: 2px 8px;
374 border-radius: var(--radius-s);
375 background: rgba(156, 39, 176, 0.1);
376 color: rgb(186, 104, 200);
377 border: 1px solid rgba(156, 39, 176, 0.3);
378}
379
380.atmark-item-collections-section {
381 margin-top: 20px;
382 padding-top: 20px;
383 border-top: 1px solid var(--background-modifier-border);
384}
385
386.atmark-item-tags-section {
387 margin-top: 20px;
388 padding-top: 20px;
389 border-top: 1px solid var(--background-modifier-border);
390}
391
392/* Note indicator for cards with attached notes */
393.atmark-note-indicator {
394 display: flex;
395 align-items: center;
396 gap: 4px;
397 font-size: var(--font-smallest);
398 color: var(--text-muted);
399}
400
401.atmark-note-icon {
402 display: flex;
403 align-items: center;
404 color: var(--text-muted);
405}
406
407.atmark-note-icon svg {
408 width: 12px;
409 height: 12px;
410}
411
412.atmark-note-count {
413 font-size: var(--font-smallest);
414}
415
416/* Detail Modal (shared between sources) */
417.atmark-detail-body {
418 display: flex;
419 flex-direction: column;
420 gap: 16px;
421}
422
423.atmark-detail-title {
424 margin: 0;
425 font-size: var(--h2-size);
426 font-weight: var(--font-semibold);
427 color: var(--text-normal);
428 line-height: 1.3;
429}
430
431.atmark-detail-image {
432 max-width: 100%;
433 max-height: 200px;
434 object-fit: contain;
435 border-radius: var(--radius-m);
436}
437
438.atmark-detail-description {
439 margin: 0;
440 color: var(--text-normal);
441 line-height: var(--line-height-normal);
442}
443
444.atmark-detail-meta {
445 display: grid;
446 grid-template-columns: repeat(2, 1fr);
447 gap: 12px;
448 padding: 16px;
449 background: var(--background-secondary);
450 border-radius: var(--radius-m);
451}
452
453.atmark-detail-meta-item {
454 display: flex;
455 flex-direction: column;
456 gap: 2px;
457}
458
459.atmark-detail-meta-label {
460 font-size: var(--font-smallest);
461 color: var(--text-faint);
462 text-transform: uppercase;
463 letter-spacing: 0.5px;
464}
465
466.atmark-detail-meta-value {
467 font-size: var(--font-small);
468 color: var(--text-normal);
469}
470
471.atmark-detail-link-wrapper {
472 padding-top: 8px;
473}
474
475.atmark-detail-link {
476 font-size: var(--font-small);
477 color: var(--text-accent);
478 text-decoration: none;
479 word-break: break-all;
480}
481
482.atmark-detail-link:hover {
483 text-decoration: underline;
484}
485
486.atmark-detail-section-title {
487 margin: 0 0 12px 0;
488 font-size: var(--font-small);
489 font-weight: var(--font-semibold);
490 color: var(--text-muted);
491 text-transform: uppercase;
492 letter-spacing: 0.5px;
493}
494
495/* Modals and Forms (shared) */
496.atmark-modal {
497 padding: 16px;
498}
499
500.atmark-modal h2 {
501 margin: 0 0 16px 0;
502 font-size: var(--h2-size);
503 font-weight: var(--font-semibold);
504 color: var(--text-normal);
505}
506
507.atmark-form {
508 display: flex;
509 flex-direction: column;
510 gap: 16px;
511}
512
513.atmark-form-group {
514 display: flex;
515 flex-direction: column;
516 gap: 6px;
517}
518
519.atmark-form-group label {
520 font-size: var(--font-small);
521 font-weight: var(--font-medium);
522 color: var(--text-normal);
523}
524
525.atmark-input,
526.atmark-textarea {
527 padding: 8px 12px;
528 background: var(--background-primary);
529 border: 1px solid var(--background-modifier-border);
530 border-radius: var(--radius-s);
531 color: var(--text-normal);
532 font-size: var(--font-ui-medium);
533 font-family: inherit;
534 transition: border-color 0.15s ease;
535}
536
537.atmark-input:focus,
538.atmark-textarea:focus {
539 outline: none;
540 border-color: var(--interactive-accent);
541 box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
542}
543
544.atmark-input::placeholder,
545.atmark-textarea::placeholder {
546 color: var(--text-faint);
547}
548
549.atmark-textarea {
550 resize: vertical;
551 min-height: 60px;
552}
553
554.atmark-modal-actions {
555 display: flex;
556 align-items: center;
557 gap: 8px;
558 padding-top: 16px;
559 border-top: 1px solid var(--background-modifier-border);
560}
561
562.atmark-spacer {
563 flex: 1;
564}
565
566.atmark-btn {
567 padding: 8px 16px;
568 border-radius: var(--radius-s);
569 font-size: var(--font-small);
570 font-weight: var(--font-medium);
571 cursor: pointer;
572 transition: all 0.15s ease;
573}
574
575.atmark-btn:disabled {
576 opacity: 0.5;
577 cursor: not-allowed;
578}
579
580.atmark-btn-secondary {
581 background: var(--background-secondary);
582 border: 1px solid var(--background-modifier-border);
583 color: var(--text-normal);
584}
585
586.atmark-btn-secondary:hover:not(:disabled) {
587 background: var(--background-modifier-hover);
588}
589
590.atmark-btn-primary {
591 background: var(--interactive-accent);
592 border: 1px solid var(--interactive-accent);
593 color: var(--text-on-accent);
594}
595
596.atmark-btn-primary:hover:not(:disabled) {
597 background: var(--interactive-accent-hover);
598}
599
600.atmark-btn-danger {
601 background: color-mix(in srgb, var(--color-red) 15%, transparent);
602 border: none;
603 color: var(--color-red);
604}
605
606.atmark-btn-danger:hover:not(:disabled) {
607 background: color-mix(in srgb, var(--color-red) 25%, transparent);
608}
609
610.atmark-warning-text {
611 color: var(--text-muted);
612 margin-bottom: 16px;
613}
614
615.atmark-tags-container {
616 display: flex;
617 flex-direction: column;
618 gap: 8px;
619 margin-bottom: 8px;
620}
621
622.atmark-tag-row {
623 display: flex;
624 align-items: center;
625 gap: 8px;
626}
627
628.atmark-tag-row .atmark-input {
629 flex: 1;
630}
631
632.atmark-tag-remove-btn {
633 width: 32px;
634 height: 32px;
635 padding: 0;
636 font-size: 20px;
637 line-height: 1;
638 flex-shrink: 0;
639}
640
641
642.atmark-collection-list {
643 display: flex;
644 flex-direction: column;
645 gap: 8px;
646 max-height: 200px;
647 overflow-y: auto;
648}
649
650.atmark-collection-item {
651 display: flex;
652 align-items: center;
653 gap: 12px;
654 padding: 10px 12px;
655 background: var(--background-secondary);
656 border: 1px solid var(--background-modifier-border);
657 border-radius: var(--radius-m);
658 cursor: pointer;
659 transition: all 0.15s ease;
660}
661
662.atmark-collection-item:hover {
663 background: var(--background-modifier-hover);
664 border-color: var(--background-modifier-border-hover);
665}
666
667.atmark-collection-checkbox {
668 width: 18px;
669 height: 18px;
670 margin: 0;
671 cursor: pointer;
672 accent-color: var(--interactive-accent);
673}
674
675.atmark-collection-item-info {
676 display: flex;
677 flex-direction: column;
678 gap: 2px;
679 flex: 1;
680}
681
682.atmark-collection-item-name {
683 font-weight: var(--font-medium);
684 color: var(--text-normal);
685}
686
687.atmark-collection-item-desc {
688 font-size: var(--font-small);
689 color: var(--text-muted);
690}
691
692.atmark-tag-list {
693 display: flex;
694 flex-wrap: wrap;
695 gap: 6px;
696 margin-bottom: 8px;
697}
698
699.atmark-tag-item {
700 display: flex;
701 align-items: center;
702 padding: 4px 12px;
703 background: var(--background-modifier-border);
704 border-radius: var(--radius-m);
705 cursor: pointer;
706 transition: all 0.15s ease;
707 font-size: var(--font-small);
708 color: var(--text-muted);
709}
710
711.atmark-tag-item:hover {
712 background: var(--background-modifier-border-hover);
713 color: var(--text-normal);
714}
715
716.atmark-tag-item:has(input:checked) {
717 background: var(--interactive-accent);
718 color: var(--text-on-accent);
719}
720
721.atmark-tag-item input {
722 display: none;
723}
724
725/* Semble-specific styles (for NOTE cards and attached notes) */
726.semble-card-note {
727 margin: 0;
728 padding: 8px 12px;
729 background: var(--background-primary);
730 border-left: 3px solid var(--color-blue);
731 border-radius: var(--radius-s);
732 font-size: var(--font-small);
733 font-style: italic;
734 color: var(--text-muted);
735 white-space: pre-wrap;
736 line-height: var(--line-height-normal);
737}
738
739.semble-card-text {
740 margin: 0;
741 line-height: 1.5;
742 color: var(--text-normal);
743 display: -webkit-box;
744 -webkit-line-clamp: 5;
745 -webkit-box-orient: vertical;
746 overflow: hidden;
747}
748
749.semble-detail-text {
750 margin: 0;
751 white-space: pre-wrap;
752 line-height: var(--line-height-normal);
753 color: var(--text-normal);
754 font-size: 1.1em;
755}
756
757.semble-detail-notes-section {
758 margin-top: 20px;
759 padding-top: 20px;
760 border-top: 1px solid var(--background-modifier-border);
761}
762
763.semble-detail-note {
764 display: flex;
765 align-items: flex-start;
766 justify-content: space-between;
767 gap: 12px;
768 padding: 12px 16px;
769 background: var(--background-secondary);
770 border-left: 3px solid var(--color-blue);
771 border-radius: var(--radius-s);
772 margin-bottom: 8px;
773}
774
775.semble-detail-note-content {
776 display: flex;
777 gap: 12px;
778 flex: 1;
779 min-width: 0;
780}
781
782.semble-detail-note-icon {
783 flex-shrink: 0;
784 color: var(--color-blue);
785}
786
787.semble-detail-note-icon svg {
788 width: 16px;
789 height: 16px;
790}
791
792.semble-detail-note-text {
793 margin: 0;
794 color: var(--text-normal);
795 line-height: var(--line-height-normal);
796 white-space: pre-wrap;
797}
798
799/* Legacy Semble classes (backwards compatibility - will be removed in future) */
800.semble-card-grid {
801 display: grid;
802 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
803 gap: 16px;
804 padding: 8px 0;
805}
806
807.semble-card {
808 background: var(--background-secondary);
809 border: 1px solid var(--background-modifier-border);
810 border-radius: var(--radius-m);
811 padding: 16px;
812 display: flex;
813 flex-direction: column;
814 gap: 8px;
815 transition: box-shadow 0.15s ease, border-color 0.15s ease;
816 cursor: pointer;
817}
818
819.semble-card:hover {
820 box-shadow: var(--shadow-s);
821 border-color: var(--background-modifier-border-hover);
822}
823
824.semble-card-header {
825 display: flex;
826 justify-content: space-between;
827 align-items: flex-start;
828 gap: 8px;
829}
830
831.semble-badge {
832 font-size: var(--font-smallest);
833 padding: 2px 8px;
834 border-radius: var(--radius-s);
835 text-transform: uppercase;
836 font-weight: var(--font-medium);
837 flex-shrink: 0;
838}
839
840.semble-badge-open {
841 background: var(--color-green);
842 color: var(--text-on-accent);
843}
844
845.semble-badge-closed {
846 background: var(--color-orange);
847 color: var(--text-on-accent);
848}
849
850/* Card type badges */
851.semble-badge-note {
852 background: var(--color-blue);
853 color: var(--text-on-accent);
854}
855
856.semble-badge-url {
857 background: var(--color-purple);
858 color: var(--text-on-accent);
859}
860
861.semble-badge-source {
862 font-size: var(--font-smallest);
863 opacity: 0.8;
864}
865
866.semble-badge-semble {
867 background: var(--color-green);
868 color: var(--text-on-accent);
869}
870
871/* Semble-specific page components */
872.semble-page-header {
873 margin-bottom: 16px;
874 padding-bottom: 16px;
875 border-top: 1px solid var(--background-modifier-border);
876}
877
878.semble-nav-row {
879 display: flex;
880 align-items: center;
881 gap: 12px;
882 margin-bottom: 8px;
883}
884
885.semble-brand {
886 font-size: var(--font-small);
887 font-weight: var(--font-semibold);
888 color: var(--text-accent);
889 text-transform: uppercase;
890 letter-spacing: 0.5px;
891}
892
893.semble-page-title {
894 margin: 0;
895 font-size: var(--h1-size);
896 font-weight: var(--font-bold);
897 color: var(--text-normal);
898}
899
900.semble-back-btn {
901 display: flex;
902 align-items: center;
903 justify-content: center;
904 width: 32px;
905 height: 32px;
906 padding: 0;
907 background: transparent;
908 border: 1px solid var(--background-modifier-border);
909 border-radius: var(--radius-s);
910 cursor: pointer;
911 color: var(--text-muted);
912}
913
914.semble-back-btn:hover {
915 background: var(--background-modifier-hover);
916 color: var(--text-normal);
917}
918
919/* Semble-specific Profile Icon */
920.semble-profile-icon {
921 display: flex;
922 align-items: center;
923 gap: 10px;
924 margin-left: auto;
925}
926
927.semble-avatar-btn {
928 display: flex;
929 align-items: center;
930 justify-content: center;
931 width: 36px;
932 height: 36px;
933 padding: 0;
934 background: var(--background-secondary);
935 border: 2px solid var(--background-modifier-border);
936 border-radius: var(--radius-full);
937 cursor: pointer;
938 overflow: hidden;
939 transition: opacity 0.15s ease;
940}
941
942.semble-avatar-btn:hover {
943 opacity: 0.8;
944}
945
946.semble-avatar-img {
947 width: 100%;
948 height: 100%;
949 object-fit: cover;
950 border-radius: var(--radius-full);
951}
952
953.semble-avatar-initials {
954 font-size: var(--font-small);
955 font-weight: var(--font-semibold);
956 color: var(--text-muted);
957}
958
959.semble-avatar-placeholder {
960 display: flex;
961 align-items: center;
962 justify-content: center;
963 width: 36px;
964 height: 36px;
965 background: var(--background-secondary);
966 border: 2px solid var(--background-modifier-border);
967 border-radius: var(--radius-full);
968 color: var(--text-faint);
969 font-size: var(--font-small);
970}
971
972.semble-profile-info {
973 display: flex;
974 flex-direction: column;
975 align-items: flex-end;
976 gap: 2px;
977}
978
979.semble-profile-name {
980 font-size: var(--font-small);
981 font-weight: var(--font-semibold);
982 color: var(--text-normal);
983 line-height: 1.2;
984}
985
986.semble-profile-handle {
987 font-size: var(--font-smallest);
988 color: var(--text-muted);
989 line-height: 1.2;
990}
991
992/* Semble Toolbar */
993.semble-toolbar {
994 display: flex;
995 align-items: center;
996 gap: 8px;
997 margin-bottom: 16px;
998}
999
1000.semble-create-btn {
1001 display: inline-flex;
1002 align-items: center;
1003 gap: 6px;
1004 padding: 6px 12px;
1005 background: var(--interactive-accent);
1006 border: none;
1007 border-radius: var(--radius-s);
1008 color: var(--text-on-accent);
1009 font-size: var(--font-small);
1010 font-weight: var(--font-medium);
1011 cursor: pointer;
1012 transition: all 0.15s ease;
1013}
1014
1015.semble-create-btn:hover {
1016 background: var(--interactive-accent-hover);
1017}
1018
1019.semble-create-btn svg {
1020 width: 14px;
1021 height: 14px;
1022}
1023
1024.semble-toolbar-btn {
1025 display: inline-flex;
1026 align-items: center;
1027 gap: 6px;
1028 padding: 6px 12px;
1029 background: var(--background-secondary);
1030 border: 1px solid var(--background-modifier-border);
1031 border-radius: var(--radius-s);
1032 color: var(--text-normal);
1033 font-size: var(--font-small);
1034 font-weight: var(--font-medium);
1035 cursor: pointer;
1036 transition: all 0.15s ease;
1037}
1038
1039.semble-toolbar-btn:hover {
1040 background: var(--background-modifier-hover);
1041 border-color: var(--background-modifier-border-hover);
1042}
1043
1044.semble-toolbar-btn svg {
1045 width: 14px;
1046 height: 14px;
1047}
1048
1049/* Semble-specific Card Detail Modal */
1050.semble-detail-modal {
1051 padding: 20px;
1052 max-width: 600px;
1053}
1054
1055.semble-detail-header {
1056 margin-bottom: 16px;
1057}
1058
1059.semble-detail-footer {
1060 margin-top: 20px;
1061 padding-top: 16px;
1062 border-top: 1px solid var(--background-modifier-border);
1063}
1064
1065.semble-detail-date {
1066 font-size: var(--font-small);
1067 color: var(--text-faint);
1068}
1069
1070.semble-detail-section-title {
1071 margin: 0 0 12px 0;
1072 font-size: var(--font-small);
1073 font-weight: var(--font-semibold);
1074 color: var(--text-muted);
1075 text-transform: uppercase;
1076 letter-spacing: 0.5px;
1077}
1078
1079/* Semble-specific Add Note Form */
1080.semble-detail-add-note {
1081 margin-top: 20px;
1082 padding-top: 20px;
1083 border-top: 1px solid var(--background-modifier-border);
1084}
1085
1086.semble-add-note-form {
1087 display: flex;
1088 flex-direction: column;
1089 gap: 12px;
1090}
1091
1092.semble-note-input {
1093 min-height: 80px;
1094 resize: vertical;
1095}
1096
1097.semble-note-delete-btn {
1098 display: flex;
1099 align-items: center;
1100 justify-content: center;
1101 width: 28px;
1102 height: 28px;
1103 padding: 0;
1104 flex-shrink: 0;
1105 background: transparent;
1106 border: none;
1107 border-radius: var(--radius-s);
1108 cursor: pointer;
1109 color: var(--text-faint);
1110 opacity: 0.6;
1111 transition: all 0.15s ease;
1112}
1113
1114.semble-note-delete-btn:hover {
1115 background: color-mix(in srgb, var(--color-red) 15%, transparent);
1116 color: var(--color-red);
1117 opacity: 1;
1118}
1119
1120.semble-note-delete-btn svg {
1121 width: 14px;
1122 height: 14px;
1123}
1124
1125/* Responsive styles */
1126@media (max-width: 600px) {
1127 .atmark-view {
1128 padding: 12px;
1129 }
1130
1131 .atmark-header {
1132 margin-bottom: 16px;
1133 padding-bottom: 12px;
1134 }
1135
1136 .atmark-title,
1137 .semble-profile-icon {
1138 display: none;
1139 }
1140
1141 .atmark-source-option {
1142 padding: 8px 16px;
1143 font-size: var(--font-ui-small);
1144 }
1145
1146 .atmark-source-text {
1147 font-size: var(--font-ui-small);
1148 }
1149
1150 .atmark-source-selector {
1151 justify-content: center;
1152 }
1153
1154 .atmark-grid {
1155 grid-template-columns: 1fr;
1156 gap: 12px;
1157 }
1158
1159 .atmark-filter-section {
1160 margin-bottom: 12px;
1161 }
1162}
1163
1164.is-mobile .atmark-title,
1165.is-mobile .semble-profile-icon {
1166 display: none;
1167}
1168
1169.is-mobile .atmark-source-option {
1170 padding: 8px 16px;
1171 font-size: var(--font-ui-small);
1172}
1173
1174.is-mobile .atmark-source-text {
1175 font-size: var(--font-ui-small);
1176}
1177
1178.is-mobile .atmark-source-selector {
1179 justify-content: center;
1180}