treethought.xyz
Various AT Protocol integrations with obsidian
1/* Atmosphere View */
2.atmosphere-view {
3 padding: 20px;
4}
5
6.atmosphere-header {
7 margin-bottom: 24px;
8 padding-bottom: 16px;
9 border-bottom: 1px solid var(--background-modifier-border);
10}
11
12.atmosphere-header-top-row {
13 display: flex;
14 align-items: center;
15 gap: 12px;
16 margin-bottom: 12px;
17}
18
19.atmosphere-source-selector {
20 display: flex;
21 align-items: center;
22 justify-content: center;
23 gap: 0;
24 flex: 1;
25 border-bottom: 1px solid var(--background-modifier-border);
26 position: relative;
27}
28
29.atmosphere-source-option {
30 display: flex;
31 align-items: center;
32 justify-content: center;
33 gap: 4px;
34 padding: 10px 20px;
35 cursor: pointer;
36 user-select: none;
37 border: none;
38 background: transparent;
39 transition: all 0.15s ease;
40 position: relative;
41 margin-bottom: -1px;
42}
43
44.atmosphere-source-option::after {
45 content: "";
46 position: absolute;
47 bottom: 0;
48 left: 0;
49 right: 0;
50 height: 2px;
51 background: transparent;
52 transition: background 0.15s ease;
53}
54
55.atmosphere-source-option:hover {
56 background: var(--background-modifier-hover);
57}
58
59.atmosphere-source-option:has(input:checked)::after {
60 background: var(--interactive-accent);
61}
62
63.atmosphere-source-option:has(input:checked) .atmosphere-source-text {
64 color: var(--interactive-accent);
65 font-weight: var(--font-semibold);
66}
67
68.atmosphere-source-toggle {
69 display: none;
70}
71
72.atmosphere-source-text {
73 font-size: var(--font-ui-small);
74 font-weight: var(--font-medium);
75 color: var(--text-muted);
76}
77
78.atmosphere-refresh-btn {
79 background: transparent;
80 border: none;
81 color: var(--text-muted);
82 cursor: pointer;
83 padding: 4px;
84 display: flex;
85 align-items: center;
86 opacity: 0.6;
87 transition: opacity 0.15s ease;
88}
89
90.atmosphere-refresh-btn:hover {
91 opacity: 1;
92}
93
94.atmosphere-refresh-btn-spinning {
95 animation: atmosphere-spin 0.6s linear infinite;
96}
97
98@keyframes atmosphere-spin {
99 from { transform: rotate(0deg); }
100 to { transform: rotate(360deg); }
101}
102
103.atmosphere-filters {
104 display: flex;
105 flex-direction: column;
106 gap: 8px;
107 margin-bottom: 16px;
108 container-type: inline-size;
109}
110
111.atmosphere-filter-toolbar {
112 display: flex;
113 align-items: center;
114 gap: 8px;
115 flex-wrap: wrap;
116}
117
118.atmosphere-filter-btn-group {
119 display: inline-flex;
120 align-items: center;
121 gap: 2px;
122}
123
124.atmosphere-active-chips-row {
125 display: flex;
126 flex-wrap: wrap;
127 gap: 6px;
128}
129
130
131
132.atmosphere-filter-title {
133 margin: 0;
134 font-size: var(--font-smallest);
135 font-weight: var(--font-semibold);
136 color: var(--text-faint);
137 text-transform: uppercase;
138 letter-spacing: 0.05em;
139}
140
141.atmosphere-filter-create-btn {
142 display: flex;
143 align-items: center;
144 justify-content: center;
145 width: 22px;
146 height: 22px;
147 padding: 0;
148 background: transparent;
149 border: none;
150 border-radius: var(--radius-s);
151 cursor: pointer;
152 color: var(--text-muted);
153 transition: all 0.15s ease;
154}
155
156.atmosphere-filter-create-btn:hover {
157 background: var(--background-modifier-hover);
158 color: var(--interactive-accent);
159}
160
161.atmosphere-filter-create-btn svg {
162 width: 16px;
163 height: 16px;
164}
165
166.atmosphere-filter-picker-btn {
167 display: inline-flex;
168 align-items: center;
169 gap: 5px;
170 height: 26px;
171 padding: 0 6px 0 4px;
172 background: transparent;
173 border: none;
174 border-radius: var(--radius-s);
175 cursor: pointer;
176 color: var(--text-faint);
177 opacity: 0.7;
178 transition: all 0.15s ease;
179}
180
181.atmosphere-filter-picker-btn:hover {
182 background: var(--background-modifier-hover);
183 color: var(--interactive-accent);
184 opacity: 1;
185}
186
187.atmosphere-filter-picker-btn svg {
188 width: 15px;
189 height: 15px;
190}
191
192.atmosphere-filter-active-chips {
193 display: flex;
194 flex-wrap: wrap;
195 gap: 6px;
196 margin-top: 4px;
197}
198
199.atmosphere-chip-removable {
200 display: inline-flex;
201 align-items: center;
202 gap: 4px;
203 padding: 2px 4px 2px 8px;
204 font-size: var(--font-smallest);
205}
206
207.atmosphere-chip-remove-btn {
208 display: flex;
209 align-items: center;
210 justify-content: center;
211 width: 14px;
212 height: 14px;
213 flex-shrink: 0;
214 padding: 0;
215 border: none;
216 background: transparent;
217 cursor: pointer;
218 color: currentColor;
219 opacity: 0.6;
220 border-radius: 2px;
221 line-height: 1;
222}
223
224.atmosphere-chip-remove-btn:hover {
225 opacity: 1;
226}
227
228.atmosphere-chip-remove-btn svg {
229 width: 10px;
230 height: 10px;
231 display: block;
232}
233
234.atmosphere-filter-chips {
235 display: flex;
236 flex-wrap: wrap;
237 gap: 6px;
238 align-items: center;
239}
240
241.atmosphere-chip {
242 padding: 3px 10px;
243 border-radius: var(--radius-m);
244 border: 1px solid var(--background-modifier-border);
245 background: transparent;
246 color: var(--text-muted);
247 font-size: var(--font-smallest);
248 font-weight: var(--font-medium);
249 cursor: pointer;
250 transition: all 0.12s ease;
251 white-space: nowrap;
252}
253
254.atmosphere-chip:hover {
255 border-color: var(--background-modifier-border-hover);
256 color: var(--text-normal);
257}
258
259.atmosphere-chip-active {
260 background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
261 border-color: color-mix(in srgb, var(--interactive-accent) 50%, transparent);
262 color: var(--interactive-accent);
263 font-weight: var(--font-semibold);
264}
265
266.atmosphere-chip-active:hover {
267 background: color-mix(in srgb, var(--interactive-accent) 20%, transparent);
268 border-color: var(--interactive-accent);
269}
270
271.atmosphere-grid {
272 display: grid;
273 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
274 gap: 16px;
275 padding: 8px 0;
276}
277
278.atmosphere-item {
279 background: var(--background-secondary);
280 border: 1px solid var(--background-modifier-border);
281 border-radius: var(--radius-m);
282 padding: 16px;
283 display: flex;
284 flex-direction: column;
285 transition: box-shadow 0.15s ease, border-color 0.15s ease;
286 cursor: pointer;
287}
288
289.atmosphere-item:hover {
290 box-shadow: var(--shadow-s);
291 border-color: var(--background-modifier-border-hover);
292}
293
294.atmosphere-item-header {
295 display: flex;
296 justify-content: space-between;
297 align-items: flex-start;
298 gap: 8px;
299}
300
301
302.atmosphere-item-source-icon svg,
303.atmosphere-badge svg {
304 width: 14px;
305 height: 14px;
306}
307
308.atmosphere-item-edit-btn {
309 display: flex;
310 align-items: center;
311 justify-content: center;
312 width: 24px;
313 height: 24px;
314 padding: 0;
315 margin-left: auto;
316 background: transparent;
317 border: none;
318 border-radius: var(--radius-s);
319 cursor: pointer;
320 color: var(--text-faint);
321 opacity: 0.6;
322 transition: all 0.15s ease;
323}
324
325.atmosphere-item:hover .atmosphere-item-edit-btn {
326 opacity: 1;
327}
328
329.atmosphere-item-edit-btn:hover {
330 background: var(--background-modifier-hover);
331 color: var(--text-normal);
332 opacity: 1;
333}
334
335.atmosphere-item-edit-btn svg {
336 width: 14px;
337 height: 14px;
338}
339
340.atmosphere-badge {
341 display: flex;
342 align-items: center;
343 flex-shrink: 0;
344}
345
346
347.atmosphere-badge-semble {
348 color: var(--color-orange);
349}
350
351.atmosphere-badge-bookmark {
352 color: var(--color-cyan);
353}
354
355.atmosphere-badge-margin {
356 color: #2563eb;
357}
358
359.atmosphere-item-footer {
360 display: grid;
361 grid-template-columns: 1fr auto 1fr;
362 align-items: center;
363 font-size: var(--font-smallest);
364 color: var(--text-faint);
365 margin-top: auto;
366 padding-top: 8px;
367 border-top: 1px solid var(--background-modifier-border);
368}
369
370.atmosphere-item-footer-left {
371 display: flex;
372 align-items: center;
373 gap: 5px;
374}
375
376.atmosphere-item-footer-center {
377 display: flex;
378 justify-content: center;
379}
380
381.atmosphere-item-footer-right {
382 display: flex;
383 justify-content: flex-end;
384}
385
386.atmosphere-date {
387 font-size: var(--font-smallest);
388 color: var(--text-faint);
389}
390
391.atmosphere-error {
392 color: var(--text-error);
393}
394
395
396/* Item Content (shared between sources) */
397.atmosphere-item-content {
398 display: flex;
399 flex-direction: column;
400 gap: 12px;
401}
402
403.atmosphere-item-title {
404 font-weight: var(--font-semibold);
405 font-size: 1em;
406 color: var(--text-normal);
407 display: -webkit-box;
408 -webkit-line-clamp: 2;
409 -webkit-box-orient: vertical;
410 overflow: hidden;
411 line-height: 1.4;
412 margin-bottom: 4px;
413}
414
415.atmosphere-item-image {
416 width: 100%;
417 max-height: 120px;
418 object-fit: cover;
419 border-radius: var(--radius-s);
420}
421
422.atmosphere-item-desc {
423 color: var(--text-muted);
424 font-size: var(--font-small);
425 margin: 0;
426 display: -webkit-box;
427 -webkit-line-clamp: 2;
428 -webkit-box-orient: vertical;
429 overflow: hidden;
430 line-height: 1.5;
431}
432
433.atmosphere-item-site {
434 font-size: var(--font-smallest);
435 color: var(--text-faint);
436 margin-bottom: 2px;
437}
438
439.atmosphere-item-url {
440 font-size: var(--font-smallest);
441 color: var(--text-accent);
442 text-decoration: none;
443 word-break: break-all;
444 display: -webkit-box;
445 -webkit-line-clamp: 1;
446 -webkit-box-orient: vertical;
447 overflow: hidden;
448}
449
450.atmosphere-item-url:hover {
451 text-decoration: underline;
452}
453
454.atmosphere-item-tags {
455 display: flex;
456 flex-wrap: wrap;
457 gap: 6px;
458 margin-bottom: 8px;
459}
460
461.atmosphere-tag {
462 font-size: var(--font-smallest);
463 padding: 2px 8px;
464 border-radius: var(--radius-s);
465 background: var(--background-modifier-border);
466 color: var(--text-muted);
467 border: 1px solid var(--background-modifier-border-hover);
468}
469
470.atmosphere-item-collections {
471 display: flex;
472 flex-wrap: wrap;
473 gap: 6px;
474 margin-bottom: 8px;
475}
476
477.atmosphere-collection {
478 display: inline-flex;
479 align-items: center;
480 gap: 4px;
481 font-size: var(--font-smallest);
482 padding: 2px 8px;
483 border-radius: var(--radius-s);
484 background: color-mix(in srgb, var(--interactive-accent) 10%, transparent);
485 color: var(--interactive-accent);
486 border: 1px solid color-mix(in srgb, var(--interactive-accent) 30%, transparent);
487}
488
489.atmosphere-collection-source-icon {
490 display: flex;
491 align-items: center;
492 flex-shrink: 0;
493}
494
495.atmosphere-collection-source-icon svg {
496 width: 10px;
497 height: 10px;
498}
499
500.atmosphere-item-collections-section {
501 margin-top: 20px;
502 padding-top: 20px;
503 border-top: 1px solid var(--background-modifier-border);
504}
505
506.atmosphere-item-tags-section {
507 margin-top: 20px;
508 padding-top: 20px;
509 border-top: 1px solid var(--background-modifier-border);
510}
511
512/* Note indicator for cards with attached notes */
513.atmosphere-note-indicator {
514 display: flex;
515 align-items: center;
516 gap: 4px;
517 font-size: var(--font-smallest);
518 color: var(--text-muted);
519}
520
521.atmosphere-note-icon {
522 display: flex;
523 align-items: center;
524 color: var(--text-muted);
525}
526
527.atmosphere-note-icon svg {
528 width: 12px;
529 height: 12px;
530}
531
532.atmosphere-note-count {
533 font-size: var(--font-smallest);
534}
535
536.atmosphere-collection-indicator {
537 display: flex;
538 align-items: center;
539 gap: 4px;
540 font-size: var(--font-smallest);
541 color: var(--text-muted);
542}
543
544.atmosphere-collection-indicator-icon {
545 display: flex;
546 align-items: center;
547 color: var(--text-muted);
548}
549
550.atmosphere-collection-indicator-icon svg {
551 width: 12px;
552 height: 12px;
553}
554
555.atmosphere-collection-indicator-name {
556 font-size: var(--font-smallest);
557}
558
559/* Detail Modal (shared between sources) */
560.atmosphere-detail-body {
561 display: flex;
562 flex-direction: column;
563 gap: 16px;
564}
565
566.atmosphere-detail-title {
567 margin: 0;
568 font-size: var(--h2-size);
569 font-weight: var(--font-semibold);
570 color: var(--text-normal);
571 line-height: 1.3;
572}
573
574.atmosphere-detail-image {
575 max-width: 100%;
576 max-height: 200px;
577 object-fit: contain;
578 border-radius: var(--radius-m);
579}
580
581.atmosphere-detail-description {
582 margin: 0;
583 color: var(--text-normal);
584 line-height: var(--line-height-normal);
585}
586
587.atmosphere-detail-meta {
588 display: grid;
589 grid-template-columns: repeat(2, 1fr);
590 gap: 12px;
591 padding: 16px;
592 background: var(--background-secondary);
593 border-radius: var(--radius-m);
594}
595
596.atmosphere-detail-meta-item {
597 display: flex;
598 flex-direction: column;
599 gap: 2px;
600}
601
602.atmosphere-detail-meta-label {
603 font-size: var(--font-smallest);
604 color: var(--text-faint);
605 text-transform: uppercase;
606 letter-spacing: 0.5px;
607}
608
609.atmosphere-detail-meta-value {
610 font-size: var(--font-small);
611 color: var(--text-normal);
612}
613
614.atmosphere-detail-link-wrapper {
615 padding-top: 8px;
616}
617
618.atmosphere-detail-link {
619 font-size: var(--font-small);
620 color: var(--text-accent);
621 text-decoration: none;
622 word-break: break-all;
623}
624
625.atmosphere-detail-link:hover {
626 text-decoration: underline;
627}
628
629.atmosphere-detail-section-title {
630 margin: 0 0 12px 0;
631 font-size: var(--font-small);
632 font-weight: var(--font-semibold);
633 color: var(--text-muted);
634 text-transform: uppercase;
635 letter-spacing: 0.5px;
636}
637
638/* Modals and Forms (shared) */
639.atmosphere-modal {
640 padding: 16px;
641}
642
643.atmosphere-modal h2 {
644 margin: 0 0 16px 0;
645 font-size: var(--h2-size);
646 font-weight: var(--font-semibold);
647 color: var(--text-normal);
648}
649
650.atmosphere-source-toggle-row {
651 display: flex;
652 gap: 6px;
653 margin-bottom: 16px;
654}
655
656.atmosphere-source-toggle-btn {
657 flex: 1;
658 padding: 6px 12px;
659 background: var(--background-modifier-hover);
660 border: 1px solid var(--background-modifier-border);
661 border-radius: var(--radius-s);
662 color: var(--text-muted);
663 font-size: var(--font-ui-small);
664 font-weight: var(--font-medium);
665 cursor: pointer;
666 transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
667}
668
669.atmosphere-source-toggle-btn:hover {
670 background: var(--background-modifier-border);
671 color: var(--text-normal);
672}
673
674.atmosphere-source-toggle-btn.is-active {
675 background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
676 border-color: color-mix(in srgb, var(--interactive-accent) 50%, transparent);
677 color: var(--interactive-accent);
678 font-weight: var(--font-semibold);
679}
680
681.atmosphere-form {
682 display: flex;
683 flex-direction: column;
684 gap: 16px;
685}
686
687.atmosphere-form-group {
688 display: flex;
689 flex-direction: column;
690 gap: 6px;
691}
692
693.atmosphere-form-group label {
694 font-size: var(--font-small);
695 font-weight: var(--font-medium);
696 color: var(--text-normal);
697}
698
699.atmosphere-input,
700.atmosphere-textarea {
701 padding: 8px 12px;
702 background: var(--background-primary);
703 border: 1px solid var(--background-modifier-border);
704 border-radius: var(--radius-s);
705 color: var(--text-normal);
706 font-size: var(--font-ui-medium);
707 font-family: inherit;
708 transition: border-color 0.15s ease;
709}
710
711.atmosphere-input:focus,
712.atmosphere-textarea:focus {
713 outline: none;
714 border-color: var(--interactive-accent);
715 box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
716}
717
718.atmosphere-input::placeholder,
719.atmosphere-textarea::placeholder {
720 color: var(--text-faint);
721}
722
723.atmosphere-textarea {
724 resize: vertical;
725 min-height: 60px;
726}
727
728.atmosphere-modal-actions {
729 display: flex;
730 align-items: center;
731 gap: 8px;
732 padding-top: 16px;
733 border-top: 1px solid var(--background-modifier-border);
734}
735
736.atmosphere-spacer {
737 flex: 1;
738}
739
740.atmosphere-btn {
741 padding: 8px 16px;
742 border-radius: var(--radius-s);
743 font-size: var(--font-small);
744 font-weight: var(--font-medium);
745 cursor: pointer;
746 transition: all 0.15s ease;
747}
748
749.atmosphere-btn:disabled {
750 opacity: 0.5;
751 cursor: not-allowed;
752}
753
754.atmosphere-btn-secondary {
755 background: var(--background-secondary);
756 border: 1px solid var(--background-modifier-border);
757 color: var(--text-normal);
758}
759
760.atmosphere-btn-secondary:hover:not(:disabled) {
761 background: var(--background-modifier-hover);
762}
763
764.atmosphere-btn-primary {
765 background: var(--interactive-accent);
766 border: 1px solid var(--interactive-accent);
767 color: var(--text-on-accent);
768}
769
770.atmosphere-btn-primary:hover:not(:disabled) {
771 background: var(--interactive-accent-hover);
772}
773
774.atmosphere-btn-danger {
775 background: color-mix(in srgb, var(--color-red) 15%, transparent);
776 border: none;
777 color: var(--color-red);
778}
779
780.atmosphere-btn-danger:hover:not(:disabled) {
781 background: color-mix(in srgb, var(--color-red) 25%, transparent);
782}
783
784.atmosphere-warning-text {
785 color: var(--text-muted);
786 margin-bottom: 16px;
787}
788
789.atmosphere-tags-container {
790 display: flex;
791 flex-direction: column;
792 gap: 8px;
793 margin-bottom: 8px;
794}
795
796.atmosphere-tag-row {
797 display: flex;
798 align-items: center;
799 gap: 8px;
800}
801
802.atmosphere-tag-row .atmosphere-input {
803 flex: 1;
804}
805
806.atmosphere-tag-remove-btn {
807 width: 32px;
808 height: 32px;
809 padding: 0;
810 font-size: 20px;
811 line-height: 1;
812 flex-shrink: 0;
813}
814
815
816.atmosphere-collection-list {
817 display: flex;
818 flex-direction: column;
819 gap: 8px;
820 max-height: 200px;
821 overflow-y: auto;
822}
823
824.atmosphere-collection-item {
825 display: flex;
826 align-items: center;
827 gap: 12px;
828 padding: 10px 12px;
829 background: var(--background-secondary);
830 border: 1px solid var(--background-modifier-border);
831 border-radius: var(--radius-m);
832 cursor: pointer;
833 transition: all 0.15s ease;
834}
835
836.atmosphere-collection-item:hover {
837 background: var(--background-modifier-hover);
838 border-color: var(--background-modifier-border-hover);
839}
840
841.atmosphere-collection-checkbox {
842 width: 18px;
843 height: 18px;
844 margin: 0;
845 cursor: pointer;
846 accent-color: var(--interactive-accent);
847}
848
849.atmosphere-collection-item-info {
850 display: flex;
851 flex-direction: column;
852 gap: 2px;
853 flex: 1;
854}
855
856.atmosphere-collection-item-name {
857 font-weight: var(--font-medium);
858 color: var(--text-normal);
859}
860
861.atmosphere-collection-item-desc {
862 font-size: var(--font-small);
863 color: var(--text-muted);
864}
865
866.atmosphere-tag-list {
867 display: flex;
868 flex-wrap: wrap;
869 gap: 6px;
870 margin-bottom: 8px;
871}
872
873.atmosphere-tag-item {
874 display: flex;
875 align-items: center;
876 padding: 4px 12px;
877 background: var(--background-modifier-border);
878 border-radius: var(--radius-m);
879 cursor: pointer;
880 transition: all 0.15s ease;
881 font-size: var(--font-small);
882 color: var(--text-muted);
883}
884
885.atmosphere-tag-item:hover {
886 background: var(--background-modifier-border-hover);
887 color: var(--text-normal);
888}
889
890.atmosphere-tag-item:has(input:checked) {
891 background: var(--interactive-accent);
892 color: var(--text-on-accent);
893}
894
895.atmosphere-tag-item input {
896 display: none;
897}
898
899/* Semble-specific styles (for NOTE cards and attached notes) */
900.atmosphere-semble-card-note {
901 margin: 0;
902 padding: 8px 12px;
903 background: var(--background-primary);
904 border-left: 3px solid var(--color-accent);
905 border-radius: var(--radius-s);
906 font-size: var(--font-small);
907 font-style: italic;
908 color: var(--text-muted);
909 white-space: pre-wrap;
910 line-height: var(--line-height-normal);
911}
912
913.atmosphere-semble-card-text {
914 margin: 0;
915 line-height: 1.5;
916 color: var(--text-normal);
917 display: -webkit-box;
918 -webkit-line-clamp: 5;
919 -webkit-box-orient: vertical;
920 overflow: hidden;
921}
922
923.atmosphere-semble-detail-text {
924 margin: 0;
925 white-space: pre-wrap;
926 line-height: var(--line-height-normal);
927 color: var(--text-normal);
928 font-size: 1.1em;
929}
930
931.atmosphere-detail-collections {
932 display: flex;
933 flex-direction: column;
934 gap: 8px;
935 margin: 16px 0;
936 padding: 12px 16px;
937 background: var(--background-secondary);
938 border: 1px solid var(--background-modifier-border);
939 border-radius: var(--radius-m);
940}
941
942.atmosphere-detail-collections-label {
943 font-size: var(--font-smallest);
944 font-weight: var(--font-semibold);
945 color: var(--text-muted);
946 text-transform: uppercase;
947 letter-spacing: 0.06em;
948}
949
950.atmosphere-detail-collections-badges {
951 display: flex;
952 flex-wrap: wrap;
953 gap: 6px;
954}
955
956.atmosphere-semble-detail-notes-section {
957 margin-top: 20px;
958 padding-top: 20px;
959 border-top: 1px solid var(--background-modifier-border);
960}
961
962.atmosphere-semble-detail-note {
963 display: flex;
964 align-items: flex-start;
965 justify-content: space-between;
966 gap: 12px;
967 padding: 12px 16px;
968 background: var(--background-secondary);
969 border-left: 3px solid var(--color-accent);
970 border-radius: var(--radius-s);
971 margin-bottom: 8px;
972}
973
974.atmosphere-semble-detail-note-content {
975 display: flex;
976 gap: 12px;
977 flex: 1;
978 min-width: 0;
979}
980
981.atmosphere-semble-detail-note-icon {
982 flex-shrink: 0;
983 color: var(--color-accent);
984}
985
986.atmosphere-semble-detail-note-icon svg {
987 width: 16px;
988 height: 16px;
989}
990
991.atmosphere-semble-detail-note-text {
992 margin: 0;
993 color: var(--text-normal);
994 line-height: var(--line-height-normal);
995 white-space: pre-wrap;
996}
997
998/* Card type badges */
999.atmosphere-semble-badge-note {
1000 background: var(--color-accent);
1001 color: var(--text-on-accent);
1002}
1003
1004.atmosphere-semble-badge-url {
1005 background: color-mix(in srgb, var(--color-purple) 80%, var(--background-primary));
1006 color: var(--text-on-accent);
1007}
1008
1009
1010.atmosphere-semble-badge-semble {
1011 background: color-mix(in srgb, var(--color-green) 80%, var(--background-primary));
1012 color: var(--text-on-accent);
1013}
1014
1015/* Profile Icon */
1016.atmosphere-profile-icon {
1017 display: flex;
1018 align-items: center;
1019 gap: 6px;
1020 padding: 10px 12px;
1021 margin-bottom: -1px;
1022 margin-left: auto;
1023 position: absolute;
1024 right: 0;
1025 background: transparent;
1026 transition: background 0.15s ease;
1027}
1028
1029.atmosphere-profile-icon:hover {
1030 background: var(--background-modifier-hover);
1031}
1032
1033.atmosphere-avatar-btn {
1034 display: flex;
1035 align-items: center;
1036 justify-content: center;
1037 width: 24px;
1038 height: 24px;
1039 padding: 0;
1040 background: var(--background-secondary);
1041 border: 1px solid var(--background-modifier-border);
1042 border-radius: 50%;
1043 cursor: pointer;
1044 overflow: hidden;
1045 transition: opacity 0.15s ease;
1046}
1047
1048.atmosphere-avatar-btn:hover {
1049 opacity: 0.8;
1050}
1051
1052.atmosphere-avatar-img {
1053 width: 100%;
1054 height: 100%;
1055 object-fit: cover;
1056 border-radius: 50%;
1057}
1058
1059.atmosphere-avatar-initials {
1060 font-size: var(--font-smallest);
1061 font-weight: var(--font-semibold);
1062 color: var(--text-muted);
1063}
1064
1065.atmosphere-avatar-placeholder {
1066 display: flex;
1067 align-items: center;
1068 justify-content: center;
1069 width: 24px;
1070 height: 24px;
1071 background: var(--background-secondary);
1072 border: 1px solid var(--background-modifier-border);
1073 border-radius: 50%;
1074 color: var(--text-faint);
1075 font-size: var(--font-smallest);
1076}
1077
1078.atmosphere-profile-info {
1079 display: flex;
1080 flex-direction: column;
1081 align-items: flex-end;
1082 gap: 1px;
1083}
1084
1085.atmosphere-profile-name {
1086 font-size: var(--font-ui-small);
1087 font-weight: var(--font-medium);
1088 color: var(--text-muted);
1089 line-height: 1.2;
1090}
1091
1092.atmosphere-profile-handle {
1093 font-size: var(--font-smallest);
1094 color: var(--text-faint);
1095 line-height: 1.2;
1096}
1097
1098/* Generic Card Detail Modal (used for all sources) */
1099.atmosphere-detail-modal {
1100 padding: 20px;
1101 max-width: 600px;
1102}
1103
1104
1105.atmosphere-detail-footer {
1106 display: flex;
1107 align-items: center;
1108 justify-content: space-between;
1109 margin-top: 20px;
1110 padding-top: 16px;
1111 border-top: 1px solid var(--background-modifier-border);
1112}
1113
1114.atmosphere-detail-footer-left {
1115 display: flex;
1116 align-items: center;
1117 gap: 6px;
1118}
1119
1120.atmosphere-detail-edit-btn {
1121 display: flex;
1122 align-items: center;
1123 justify-content: center;
1124 width: 28px;
1125 height: 28px;
1126 padding: 0;
1127 background: transparent;
1128 border: none;
1129 border-radius: 4px;
1130 color: var(--text-accent);
1131 cursor: pointer;
1132 opacity: 0.6;
1133 transition: opacity 0.15s ease;
1134}
1135
1136.atmosphere-detail-edit-btn:hover {
1137 opacity: 1;
1138}
1139
1140.atmosphere-detail-edit-btn svg {
1141 width: 16px;
1142 height: 16px;
1143}
1144
1145.atmosphere-detail-date {
1146 font-size: var(--font-small);
1147 color: var(--text-faint);
1148}
1149
1150/* Semble-specific Add Note Form */
1151.atmosphere-semble-detail-add-note {
1152 margin-top: 20px;
1153 padding-top: 20px;
1154 border-top: 1px solid var(--background-modifier-border);
1155}
1156
1157.atmosphere-semble-add-note-form {
1158 display: flex;
1159 flex-direction: column;
1160 gap: 12px;
1161}
1162
1163.atmosphere-semble-note-input {
1164 min-height: 80px;
1165 resize: vertical;
1166}
1167
1168.atmosphere-semble-note-delete-btn {
1169 display: flex;
1170 align-items: center;
1171 justify-content: center;
1172 width: 28px;
1173 height: 28px;
1174 padding: 0;
1175 flex-shrink: 0;
1176 background: transparent;
1177 border: none;
1178 border-radius: var(--radius-s);
1179 cursor: pointer;
1180 color: var(--text-faint);
1181 opacity: 0.6;
1182 transition: all 0.15s ease;
1183}
1184
1185.atmosphere-semble-note-delete-btn:hover {
1186 background: color-mix(in srgb, var(--color-red) 15%, transparent);
1187 color: var(--color-red);
1188 opacity: 1;
1189}
1190
1191.atmosphere-semble-note-delete-btn svg {
1192 width: 14px;
1193 height: 14px;
1194}
1195
1196/* Responsive styles */
1197@media (max-width: 600px) {
1198 .atmosphere-view {
1199 padding: 12px;
1200 }
1201
1202 .atmosphere-header {
1203 margin-bottom: 16px;
1204 padding-bottom: 12px;
1205 }
1206
1207 .atmosphere-profile-icon {
1208 display: none;
1209 }
1210
1211 .atmosphere-source-option {
1212 padding: 8px 16px;
1213 font-size: var(--font-ui-small);
1214 }
1215
1216 .atmosphere-source-text {
1217 font-size: var(--font-ui-small);
1218 }
1219
1220 .atmosphere-source-selector {
1221 justify-content: center;
1222 }
1223
1224 .atmosphere-grid {
1225 grid-template-columns: 1fr;
1226 gap: 12px;
1227 }
1228
1229 .standard-site-list {
1230 grid-template-columns: 1fr;
1231 gap: 12px;
1232 }
1233
1234 .atmosphere-filter-toolbar {
1235 flex-wrap: wrap;
1236 gap: 6px;
1237 }
1238}
1239
1240/* Hide profile in narrow sidebar widths (but not mobile) */
1241@media (max-width: 400px) {
1242 .atmosphere-profile-icon {
1243 display: none;
1244 }
1245}
1246
1247.is-mobile .atmosphere-profile-icon {
1248 display: none;
1249}
1250
1251.is-mobile .atmosphere-source-option {
1252 padding: 8px 16px;
1253 font-size: var(--font-ui-small);
1254}
1255
1256.is-mobile .atmosphere-source-text {
1257 font-size: var(--font-ui-small);
1258}
1259
1260.is-mobile .atmosphere-source-selector {
1261 justify-content: center;
1262}
1263
1264/* Standard Site View */
1265.standard-site-view {
1266 padding: 20px;
1267}
1268
1269.standard-site-header {
1270 display: flex;
1271 align-items: center;
1272 justify-content: space-between;
1273 margin-bottom: 24px;
1274 padding-bottom: 16px;
1275 border-bottom: 1px solid var(--background-modifier-border);
1276}
1277
1278.standard-site-header h2 {
1279 margin: 0;
1280 font-size: var(--h2-size);
1281 font-weight: var(--font-semibold);
1282 color: var(--text-normal);
1283}
1284
1285.standard-site-create-btn {
1286 display: flex;
1287 align-items: center;
1288 justify-content: center;
1289 padding: 8px 16px;
1290 gap: 6px;
1291 background: var(--interactive-accent);
1292 border: none;
1293 border-radius: var(--radius-s);
1294 cursor: pointer;
1295 color: var(--text-on-accent);
1296 font-weight: var(--font-medium);
1297 transition: all 0.15s ease;
1298}
1299
1300.standard-site-create-btn:hover {
1301 background: var(--interactive-accent-hover);
1302}
1303
1304.standard-site-create-btn svg {
1305 width: 16px;
1306 height: 16px;
1307}
1308
1309.standard-site-list {
1310 display: grid;
1311 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
1312 gap: 16px;
1313 padding: 8px 0;
1314}
1315
1316.standard-site-publication {
1317 background: var(--background-secondary);
1318 border: 1px solid var(--background-modifier-border);
1319 border-radius: var(--radius-m);
1320 padding: 16px;
1321 display: flex;
1322 flex-direction: column;
1323 transition: box-shadow 0.15s ease, border-color 0.15s ease;
1324}
1325
1326.standard-site-publication.clickable {
1327 cursor: pointer;
1328}
1329
1330.standard-site-publication:hover {
1331 box-shadow: var(--shadow-s);
1332 border-color: var(--background-modifier-border-hover);
1333}
1334
1335.standard-site-publication-header {
1336 display: flex;
1337 align-items: center;
1338 justify-content: space-between;
1339 gap: 12px;
1340 margin-bottom: 12px;
1341}
1342
1343.standard-site-publication-name {
1344 margin: 0;
1345 font-size: var(--h3-size);
1346 font-weight: var(--font-semibold);
1347 color: var(--text-normal);
1348 flex: 1;
1349}
1350
1351.standard-site-publication-actions {
1352 display: flex;
1353 gap: 6px;
1354}
1355
1356.standard-site-action-btn {
1357 display: flex;
1358 align-items: center;
1359 justify-content: center;
1360 width: 32px;
1361 height: 32px;
1362 padding: 0;
1363 background: transparent;
1364 border: none;
1365 border-radius: var(--radius-s);
1366 cursor: pointer;
1367 color: var(--text-faint);
1368 transition: all 0.15s ease;
1369}
1370
1371.standard-site-action-btn:hover {
1372 background: var(--background-modifier-hover);
1373 color: var(--text-normal);
1374}
1375
1376.standard-site-action-btn svg {
1377 width: 16px;
1378 height: 16px;
1379}
1380
1381.standard-site-publication-body {
1382 display: flex;
1383 flex-direction: column;
1384 gap: 12px;
1385}
1386
1387.standard-site-publication-url {
1388 display: flex;
1389 align-items: center;
1390 gap: 6px;
1391}
1392
1393.standard-site-publication-url a {
1394 color: var(--text-accent);
1395 text-decoration: none;
1396 font-size: var(--font-small);
1397}
1398
1399.standard-site-publication-url a:hover {
1400 text-decoration: underline;
1401}
1402
1403.standard-site-publication-description {
1404 margin: 0;
1405 color: var(--text-muted);
1406 line-height: var(--line-height-normal);
1407 font-size: var(--font-small);
1408}
1409
1410.standard-site-publication-footer {
1411 display: flex;
1412 flex-wrap: wrap;
1413 gap: 12px;
1414 align-items: center;
1415 margin-top: 12px;
1416 padding-top: 12px;
1417 border-top: 1px solid var(--background-modifier-border);
1418}
1419
1420.standard-site-publication-uri {
1421 display: flex;
1422 align-items: center;
1423 gap: 4px;
1424 font-size: var(--font-smallest);
1425 color: var(--text-faint);
1426}
1427
1428.standard-site-label {
1429 font-weight: var(--font-medium);
1430}
1431
1432.standard-site-publication-uri code {
1433 font-size: var(--font-smallest);
1434 background: var(--background-primary);
1435 padding: 2px 6px;
1436 border-radius: var(--radius-s);
1437 color: var(--text-muted);
1438}
1439
1440.standard-site-badge {
1441 font-size: var(--font-smallest);
1442 padding: 3px 8px;
1443 border-radius: var(--radius-s);
1444 background: color-mix(in srgb, var(--color-orange) 15%, transparent);
1445 color: var(--color-orange);
1446 border: 1px solid color-mix(in srgb, var(--color-orange) 30%, transparent);
1447 font-weight: var(--font-medium);
1448}
1449
1450.standard-site-error {
1451 color: var(--text-error);
1452}
1453
1454/* Standard Site Documents */
1455.standard-site-document {
1456 background: var(--background-secondary);
1457 border: 1px solid var(--background-modifier-border);
1458 border-radius: var(--radius-m);
1459 padding: 16px;
1460 display: flex;
1461 flex-direction: column;
1462 transition: box-shadow 0.15s ease, border-color 0.15s ease;
1463}
1464
1465.standard-site-document:hover {
1466 box-shadow: var(--shadow-s);
1467 border-color: var(--background-modifier-border-hover);
1468}
1469
1470.standard-site-document-header {
1471 display: flex;
1472 align-items: flex-start;
1473 justify-content: space-between;
1474 gap: 8px;
1475 margin-bottom: 8px;
1476}
1477
1478.standard-site-document-title {
1479 margin: 0;
1480 font-size: var(--h3-size);
1481 font-weight: var(--font-semibold);
1482 color: var(--text-normal);
1483 flex: 1;
1484 line-height: 1.3;
1485}
1486
1487.standard-site-document-external {
1488 display: flex;
1489 align-items: center;
1490 justify-content: center;
1491 flex-shrink: 0;
1492 width: 24px;
1493 height: 24px;
1494 border-radius: var(--radius-s);
1495 color: var(--text-faint);
1496 transition: all 0.15s ease;
1497}
1498
1499.standard-site-document-external:hover {
1500 background: var(--background-modifier-hover);
1501 color: var(--text-normal);
1502}
1503
1504.standard-site-document-external svg {
1505 width: 14px;
1506 height: 14px;
1507}
1508
1509.standard-site-document-body {
1510 display: flex;
1511 flex-direction: column;
1512 gap: 8px;
1513}
1514
1515.standard-site-document-description {
1516 margin: 0;
1517 color: var(--text-muted);
1518 font-size: var(--font-small);
1519 line-height: var(--line-height-normal);
1520 display: -webkit-box;
1521 -webkit-line-clamp: 3;
1522 -webkit-box-orient: vertical;
1523 overflow: hidden;
1524}
1525
1526.standard-site-document-tags {
1527 display: flex;
1528 flex-wrap: wrap;
1529 gap: 6px;
1530}
1531
1532.standard-site-document-tag {
1533 font-size: var(--font-smallest);
1534 padding: 2px 8px;
1535 border-radius: var(--radius-s);
1536 background: var(--background-modifier-border);
1537 color: var(--text-muted);
1538 border: 1px solid var(--background-modifier-border-hover);
1539}
1540
1541.standard-site-document-footer {
1542 display: flex;
1543 align-items: center;
1544 margin-top: 12px;
1545 padding-top: 8px;
1546 border-top: 1px solid var(--background-modifier-border);
1547}
1548
1549.standard-site-document-date {
1550 font-size: var(--font-smallest);
1551 color: var(--text-faint);
1552}
1553
1554.standard-site-title-group {
1555 display: flex;
1556 flex-direction: column;
1557 flex: 1;
1558 min-width: 0;
1559}
1560
1561.standard-site-author-handle {
1562 font-size: var(--font-small);
1563 color: var(--text-muted);
1564}
1565
1566.standard-site-back {
1567 font-size: var(--font-small);
1568 color: var(--text-muted);
1569 padding: 4px 8px;
1570 border-radius: var(--radius-s);
1571 transition: all 0.15s ease;
1572}
1573
1574.standard-site-back:hover {
1575 background: var(--background-modifier-hover);
1576 color: var(--text-normal);
1577}
1578
1579.standard-site-publication-external {
1580 display: flex;
1581 align-items: center;
1582 justify-content: center;
1583 flex-shrink: 0;
1584 width: 24px;
1585 height: 24px;
1586 border-radius: var(--radius-s);
1587 color: var(--text-faint);
1588 transition: all 0.15s ease;
1589}
1590
1591.standard-site-publication-external:hover {
1592 background: var(--background-modifier-hover);
1593 color: var(--text-normal);
1594}
1595
1596.standard-site-publication-external svg {
1597 width: 14px;
1598 height: 14px;
1599}
1600
1601.atmosphere-filter-toolbar .search-input-container {
1602 width: 160px;
1603 margin-left: auto;
1604}
1605
1606@container (max-width: 380px) {
1607 .atmosphere-filter-toolbar .search-input-container {
1608 margin: 0 auto;
1609 }
1610}