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