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}
1611
1612/* Bluesky post embed - toggle button */
1613.bsky-embed-toggle {
1614 display: inline-flex;
1615 align-items: center;
1616 justify-content: center;
1617 width: 1.4em;
1618 height: 1.4em;
1619 margin-left: 0.25em;
1620 padding: 0;
1621 border: none;
1622 background: transparent;
1623 cursor: pointer;
1624 opacity: 0.6;
1625 color: var(--text-accent);
1626 vertical-align: middle;
1627 transition: opacity 0.15s ease;
1628}
1629
1630.bsky-embed-toggle:hover {
1631 opacity: 1;
1632}
1633
1634/* bluesky-post-embed web component wrapper */
1635bluesky-post {
1636 display: block;
1637 margin: 0.75em 0;
1638
1639 /* Map Obsidian theme vars to bluesky-embed vars */
1640 --font-size: var(--font-text-size, 16px);
1641 --font-family: var(--font-text);
1642 --background-primary: var(--background-secondary);
1643 --background-secondary: var(--background-modifier-hover);
1644 --divider: var(--background-modifier-border);
1645 --divider-hover: var(--background-modifier-border-hover);
1646 --text-primary: var(--text-normal);
1647 --text-secondary: var(--text-muted);
1648 --text-link: var(--link-color);
1649}
1650
1651/* bluesky-profile-card-embed web component wrapper */
1652bluesky-profile-card {
1653 display: block;
1654 margin: 0.75em 0;
1655
1656 /* Map Obsidian theme vars to bluesky-embed vars */
1657 --font-size: var(--font-text-size, 16px);
1658 --font-family: var(--font-text);
1659 --background-primary: var(--background-secondary);
1660 --background-secondary: var(--background-modifier-hover);
1661 --divider: var(--background-modifier-border);
1662 --divider-hover: var(--background-modifier-border-hover);
1663 --text-primary: var(--text-normal);
1664 --text-secondary: var(--text-muted);
1665 --text-link: var(--link-color);
1666 --button: var(--interactive-accent);
1667 --button-text: var(--text-on-accent);
1668 --button-hover: var(--interactive-accent-hover);
1669}
1670
1671/* bluesky-embed library styles */
1672
1673 .bluesky-embed.s-3olstj {
1674 position: relative;
1675 box-sizing: border-box;
1676 margin: 0 auto;
1677 border: 1px solid var(--divider);
1678 border-radius: 8px;
1679 background: var(--background-primary);
1680 min-width: 250px;
1681 max-width: 550px;
1682 overflow: hidden;
1683 color: var(--text-primary);
1684 font-weight: 400;
1685 font-size: calc(var(--font-size) * 0.875);
1686 line-height: calc(var(--font-size) * 1.25);
1687 font-family: var(--font-family);
1688
1689 :where(*),
1690 :where(*::before),
1691 :where(*::after) {
1692 box-sizing: border-box;
1693 margin: 0;
1694 padding: 0;
1695 }
1696 :where(a) {
1697 color: inherit;
1698 text-decoration: none;
1699 }
1700
1701 :where(.icon) {
1702 flex-shrink: 0;
1703 width: 1em;
1704 height: 1em;
1705 }
1706 }
1707
1708 .gate.s-q6x07m {
1709 display: flex;
1710 align-items: center;
1711 gap: 12px;
1712 cursor: pointer;
1713 border: 1px solid var(--divider);
1714 border-radius: 6px;
1715 padding: 0 12px;
1716 height: 44px;
1717
1718 .content-hider[open]:where(.s-q6x07m) & {
1719 margin-bottom: 12px;
1720 }
1721
1722 &:hover {
1723 border-color: var(--divider-hover);
1724 }
1725 }
1726
1727 .icon.s-q6x07m {
1728 width: 18px;
1729 height: 18px;
1730 color: var(--text-secondary);
1731 }
1732 .label.s-q6x07m {
1733 flex-grow: 1;
1734 overflow: hidden;
1735 font-weight: 500;
1736 user-select: none;
1737 text-overflow: ellipsis;
1738 }
1739
1740 .action.s-q6x07m {
1741 color: var(--text-link);
1742 font-weight: 500;
1743 font-size: calc(var(--font-size) * 0.8125);
1744 line-height: calc(var(--font-size) * 1.25);
1745
1746 &::before {
1747 content: 'Show';
1748 }
1749 .content-hider[open]:where(.s-q6x07m) &::before {
1750 content: 'Hide';
1751 }
1752 }
1753
1754 .external-embed.s-rtbqd8 {
1755 display: block;
1756 border: 1px solid var(--divider);
1757 border-radius: 6px;
1758 overflow: hidden;
1759
1760 &:hover {
1761 border-color: var(--divider-hover);
1762 }
1763 }
1764
1765 .thumbnail.s-rtbqd8 {
1766 display: block;
1767 border-bottom: 1px solid var(--divider);
1768 background: #000000;
1769 aspect-ratio: 1.91;
1770 width: 100%;
1771
1772 .external-embed:where(.s-rtbqd8):hover & {
1773 border-color: var(--divider-hover);
1774 }
1775 }
1776
1777 .meta.s-rtbqd8 {
1778 padding: 12px;
1779 }
1780
1781 .title.s-rtbqd8 {
1782 display: -webkit-box;
1783 overflow: hidden;
1784 font-weight: 700;
1785 white-space: pre-wrap;
1786 -webkit-box-orient: vertical;
1787 -webkit-line-clamp: 2;
1788 line-clamp: 2;
1789 overflow-wrap: break-word;
1790
1791 &:empty {
1792 display: none;
1793 }
1794 }
1795 .description.s-rtbqd8 {
1796 display: -webkit-box;
1797 overflow: hidden;
1798 color: var(--text-secondary);
1799 font-size: calc(var(--font-size) * 0.8125);
1800 white-space: pre-wrap;
1801 -webkit-box-orient: vertical;
1802 -webkit-line-clamp: 2;
1803 line-clamp: 2;
1804 overflow-wrap: break-word;
1805
1806 &:empty {
1807 display: none;
1808 }
1809 }
1810
1811 .domain.s-rtbqd8 {
1812 display: flex;
1813 align-items: center;
1814 gap: 6px;
1815 margin: 6px 0 0 0;
1816 color: var(--text-secondary);
1817 font-weight: 500;
1818 font-size: calc(var(--font-size) * 0.75);
1819 }
1820
1821 .feed-embed.s-156tlwp {
1822 display: flex;
1823 flex-direction: column;
1824 gap: 12px;
1825 border: 1px solid var(--divider);
1826 border-radius: 6px;
1827 padding: 12px;
1828
1829 &:hover {
1830 border-color: var(--divider-hover);
1831 }
1832 }
1833
1834 .main.s-156tlwp {
1835 display: flex;
1836 gap: 12px;
1837 }
1838
1839 .avatar-wrapper.s-156tlwp {
1840 margin: 2px 0 0 0;
1841 border-radius: 6px;
1842 background: var(--background-secondary);
1843 width: 36px;
1844 height: 36px;
1845 overflow: hidden;
1846 }
1847 .avatar.s-156tlwp {
1848 width: 100%;
1849 height: 100%;
1850 object-fit: cover;
1851 }
1852
1853 .name.s-156tlwp {
1854 font-weight: 700;
1855 }
1856
1857 .creator.s-156tlwp {
1858 color: var(--text-secondary);
1859 font-size: calc(var(--font-size) * 0.8125);
1860 }
1861
1862 .description.s-156tlwp {
1863 display: -webkit-box;
1864 overflow: hidden;
1865 font-size: calc(var(--font-size) * 0.8125);
1866 white-space: pre-wrap;
1867 -webkit-box-orient: vertical;
1868 -webkit-line-clamp: 2;
1869 line-clamp: 2;
1870 overflow-wrap: break-word;
1871
1872 &:empty {
1873 display: none;
1874 }
1875 }
1876
1877 .is-aligned.s-t3k6fc {
1878 align-self: baseline;
1879 max-width: 100%;
1880 }
1881
1882 .grid.s-t3k6fc {
1883 display: flex;
1884 gap: 2px;
1885 }
1886 .col.s-t3k6fc {
1887 display: flex;
1888 flex: 1;
1889 flex-direction: column;
1890 gap: 2px;
1891 }
1892
1893 .square.s-t3k6fc {
1894 aspect-ratio: 1;
1895 }
1896 .wide.s-t3k6fc {
1897 aspect-ratio: 1.5;
1898 }
1899
1900 .item.s-t3k6fc {
1901 position: relative;
1902 flex-grow: 1;
1903 flex-shrink: 0;
1904 overflow: hidden;
1905 }
1906
1907 .is-bordered.s-t3k6fc {
1908 .tl:where(.s-t3k6fc),
1909 .tr:where(.s-t3k6fc),
1910 .bl:where(.s-t3k6fc),
1911 .br:where(.s-t3k6fc) {
1912 border: 1px solid var(--divider);
1913 }
1914
1915 .tl:where(.s-t3k6fc) {
1916 border-top-left-radius: 6px;
1917 }
1918 .tr:where(.s-t3k6fc) {
1919 border-top-right-radius: 6px;
1920 }
1921 .bl:where(.s-t3k6fc) {
1922 border-bottom-left-radius: 6px;
1923 }
1924 .br:where(.s-t3k6fc) {
1925 border-bottom-right-radius: 6px;
1926 }
1927 }
1928
1929 .single-item.s-t3k6fc {
1930 position: relative;
1931 aspect-ratio: 16 / 9;
1932 overflow: hidden;
1933
1934 .image:where(.s-t3k6fc) {
1935 object-fit: contain;
1936 }
1937 }
1938 .is-standalone.s-t3k6fc {
1939 min-width: 64px;
1940 max-width: 100%;
1941 min-height: 64px;
1942 max-height: 320px;
1943 }
1944
1945 .image.s-t3k6fc {
1946 position: absolute;
1947 inset: 0;
1948 background: #000000;
1949 width: 100%;
1950 height: 100%;
1951 object-fit: cover;
1952 font-size: 0px;
1953 }
1954 .is-blurred.s-t3k6fc {
1955 scale: 125%;
1956 filter: blur(24px);
1957 }
1958
1959 .placeholder.s-t3k6fc {
1960 width: 100vw;
1961 height: 100vh;
1962 }
1963
1964 .list-embed.s-6uize5 {
1965 display: flex;
1966 flex-direction: column;
1967 gap: 12px;
1968 border: 1px solid var(--divider);
1969 border-radius: 6px;
1970 padding: 12px;
1971
1972 &:hover {
1973 border-color: var(--divider-hover);
1974 }
1975 }
1976
1977 .main.s-6uize5 {
1978 display: flex;
1979 gap: 12px;
1980 }
1981
1982 .avatar-wrapper.s-6uize5 {
1983 margin: 2px 0 0 0;
1984 border-radius: 6px;
1985 background: var(--background-secondary);
1986 width: 36px;
1987 height: 36px;
1988 overflow: hidden;
1989 }
1990 .avatar.s-6uize5 {
1991 width: 100%;
1992 height: 100%;
1993 object-fit: cover;
1994 }
1995
1996 .name.s-6uize5 {
1997 font-weight: 700;
1998 }
1999
2000 .creator.s-6uize5 {
2001 color: var(--text-secondary);
2002 font-size: calc(var(--font-size) * 0.8125);
2003 }
2004
2005 .description.s-6uize5 {
2006 display: -webkit-box;
2007 overflow: hidden;
2008 font-size: calc(var(--font-size) * 0.8125);
2009 white-space: pre-wrap;
2010 -webkit-box-orient: vertical;
2011 -webkit-line-clamp: 2;
2012 line-clamp: 2;
2013 overflow-wrap: break-word;
2014
2015 &:empty {
2016 display: none;
2017 }
2018 }
2019
2020 .video-embed.s-1azk58e {
2021 display: block;
2022 position: relative;
2023 background: #000000;
2024 aspect-ratio: 16 / 9;
2025 overflow: hidden;
2026 }
2027 .is-bordered.s-1azk58e {
2028 border: 1px solid var(--divider);
2029 border-radius: 6px;
2030 }
2031 .is-standalone.s-1azk58e {
2032 align-self: baseline;
2033 aspect-ratio: auto;
2034 max-width: 100%;
2035 }
2036
2037 .constrainer.s-1azk58e {
2038 min-width: 64px;
2039 max-width: 100%;
2040 min-height: 64px;
2041 max-height: 320px;
2042 }
2043
2044 .thumbnail.s-1azk58e {
2045 width: 100%;
2046 height: 100%;
2047 object-fit: contain;
2048 }
2049 .is-blurred.s-1azk58e {
2050 scale: 125%;
2051 filter: blur(24px);
2052 }
2053
2054 .placeholder.s-1azk58e {
2055 width: 100vw;
2056 height: 100vh;
2057 }
2058
2059 .play.s-1azk58e {
2060 display: grid;
2061 position: absolute;
2062 top: 50%;
2063 left: 50%;
2064 place-items: center;
2065 translate: -50% -50%;
2066 border-radius: 50%;
2067 background: rgba(64, 64, 64, 0.6);
2068 aspect-ratio: 1 / 1;
2069 height: 40%;
2070 max-height: 48px;
2071 color: #ffffff;
2072 font-size: 20px;
2073
2074 .icon:where(.s-1azk58e) {
2075 width: 40%;
2076 height: 40%;
2077 }
2078
2079 .is-standalone:where(.s-1azk58e) &:hover {
2080 background: rgba(64, 64, 64, 0.8);
2081 }
2082 }
2083
2084 .quote-embed.s-za6fip {
2085 display: block;
2086 border: 1px solid var(--divider);
2087 border-radius: 6px;
2088 overflow: hidden;
2089
2090 &:hover {
2091 border-color: var(--divider-hover);
2092 }
2093 }
2094
2095 .meta.s-za6fip {
2096 display: flex;
2097 padding: 12px 12px 0 12px;
2098 color: var(--text-secondary);
2099
2100 .avatar-wrapper:where(.s-za6fip) {
2101 flex-shrink: 0;
2102 margin: 0 8px 0 0;
2103 border-radius: 9999px;
2104 background: var(--background-secondary);
2105 width: 20px;
2106 height: 20px;
2107 overflow: hidden;
2108 }
2109 .avatar:where(.s-za6fip) {
2110 width: 100%;
2111 height: 100%;
2112 }
2113
2114 .name-wrapper:where(.s-za6fip) {
2115 display: flex;
2116 gap: 4px;
2117 max-width: 100%;
2118 overflow: hidden;
2119 text-overflow: ellipsis;
2120 white-space: nowrap;
2121 }
2122 .display-name-wrapper:where(.s-za6fip) {
2123 overflow: hidden;
2124 text-overflow: ellipsis;
2125 }
2126 .display-name:where(.s-za6fip) {
2127 color: var(--text-primary);
2128 font-weight: 700;
2129 }
2130 .handle:where(.s-za6fip) {
2131 display: block;
2132 overflow: hidden;
2133 text-overflow: ellipsis;
2134 white-space: nowrap;
2135 }
2136
2137 .dot:where(.s-za6fip) {
2138 flex-shrink: 0;
2139 margin: 0 6px;
2140 }
2141
2142 .date:where(.s-za6fip) {
2143 white-space: nowrap;
2144 }
2145 }
2146
2147 .body.s-za6fip {
2148 display: flex;
2149 align-items: flex-start;
2150 }
2151
2152 .aside.s-za6fip {
2153 flex-grow: 1;
2154 flex-basis: 0;
2155 margin: 8px 0 12px 12px;
2156 max-width: 20%;
2157 }
2158
2159 .text.s-za6fip {
2160 display: -webkit-box;
2161 margin: 8px 12px 12px 12px;
2162 overflow: hidden;
2163 -webkit-box-orient: vertical;
2164 -webkit-line-clamp: 6;
2165 line-clamp: 6;
2166 flex-grow: 4;
2167 flex-basis: 0px;
2168 min-width: 0px;
2169 white-space: pre-wrap;
2170 overflow-wrap: break-word;
2171 }
2172
2173 .divide.s-za6fip {
2174 padding: 6px 0;
2175 }
2176
2177 .starterpack-embed.s-15v965v {
2178 display: block;
2179 border: 1px solid var(--divider);
2180 border-radius: 6px;
2181 overflow: hidden;
2182
2183 &:hover {
2184 border-color: var(--divider-hover);
2185 }
2186 }
2187
2188 .banner.s-15v965v {
2189 display: block;
2190 aspect-ratio: 1.91;
2191 width: 100%;
2192 }
2193
2194 .meta.s-15v965v {
2195 display: flex;
2196 flex-direction: column;
2197 gap: 12px;
2198 padding: 12px;
2199 }
2200
2201 .main.s-15v965v {
2202 display: flex;
2203 gap: 12px;
2204 }
2205
2206 .avatar.s-15v965v {
2207 margin: 2px;
2208 width: 36px;
2209 height: 36px;
2210 }
2211
2212 .name.s-15v965v {
2213 font-weight: 700;
2214 }
2215
2216 .creator.s-15v965v {
2217 color: var(--text-secondary);
2218 font-size: calc(var(--font-size) * 0.8125);
2219 }
2220
2221 .description.s-15v965v {
2222 display: -webkit-box;
2223 overflow: hidden;
2224 font-size: calc(var(--font-size) * 0.8125);
2225 white-space: pre-wrap;
2226 -webkit-box-orient: vertical;
2227 -webkit-line-clamp: 2;
2228 line-clamp: 2;
2229 overflow-wrap: break-word;
2230
2231 &:empty {
2232 display: none;
2233 }
2234 }
2235
2236 .embeds.s-azdpbr {
2237 display: flex;
2238 flex-direction: column;
2239 gap: 12px;
2240 margin: 12px 0 0 0;
2241 }
2242
2243 .message.s-azdpbr {
2244 border: 1px solid var(--divider);
2245 border-radius: 6px;
2246 padding: 12px;
2247 color: var(--text-secondary);
2248 }
2249
2250 .rich-text.s-1lecfnd {
2251 overflow: hidden;
2252 white-space: pre-wrap;
2253 overflow-wrap: break-word;
2254
2255 &:empty {
2256 display: none;
2257 }
2258 }
2259 .is-large.s-1lecfnd {
2260 font-size: calc(var(--font-size) * 1);
2261 line-height: calc(var(--font-size) * 1.5);
2262 }
2263
2264 .link.s-1lecfnd,
2265 .mention.s-1lecfnd,
2266 .hashtag.s-1lecfnd {
2267 color: var(--text-link);
2268
2269 &:hover {
2270 text-decoration: underline;
2271 }
2272 }
2273
2274 .highlighted-post.s-hik11q {
2275 padding: 16px;
2276 }
2277
2278 .meta.s-hik11q {
2279 display: flex;
2280 align-items: center;
2281 gap: 12px;
2282 margin: 0 0 12px 0;
2283 color: var(--text-secondary);
2284 }
2285
2286 .avatar-wrapper.s-hik11q {
2287 display: block;
2288 flex-shrink: 0;
2289 border-radius: 9999px;
2290 background: var(--background-secondary);
2291 width: 40px;
2292 height: 40px;
2293 overflow: hidden;
2294
2295 &:hover {
2296 filter: brightness(0.85);
2297 }
2298 }
2299
2300 .avatar.s-hik11q {
2301 width: 100%;
2302 height: 100%;
2303 object-fit: cover;
2304 }
2305 .is-blurred.s-hik11q {
2306 scale: 125%;
2307 filter: blur(4px);
2308 }
2309
2310 .name-wrapper.s-hik11q {
2311 display: block;
2312 flex-grow: 1;
2313 max-width: 100%;
2314 overflow: hidden;
2315 color: inherit;
2316 text-overflow: ellipsis;
2317 white-space: nowrap;
2318 }
2319 .display-name-wrapper.s-hik11q {
2320 overflow: hidden;
2321 text-overflow: ellipsis;
2322
2323 .name-wrapper:where(.s-hik11q):hover & {
2324 text-decoration: underline;
2325 }
2326 }
2327 .display-name.s-hik11q {
2328 color: var(--text-primary);
2329 font-weight: 700;
2330 }
2331 .handle.s-hik11q {
2332 display: block;
2333 overflow: hidden;
2334 text-overflow: ellipsis;
2335 white-space: nowrap;
2336 }
2337
2338 .logo.s-hik11q {
2339 width: 32px;
2340 height: 32px;
2341 }
2342
2343 .context.s-hik11q {
2344 overflow: hidden;
2345 color: var(--text-secondary);
2346 font-size: calc(var(--font-size) * 0.8125);
2347 text-overflow: ellipsis;
2348 white-space: nowrap;
2349
2350 a:where(.s-hik11q) {
2351 color: inherit;
2352 font-weight: 500;
2353
2354 &:hover {
2355 text-decoration: underline;
2356 }
2357 }
2358 }
2359
2360 .date.s-hik11q {
2361 display: flex;
2362 flex-wrap: wrap;
2363 align-items: center;
2364 gap: 8px;
2365 margin: 12px 0 0;
2366 border-bottom: 1px solid var(--divider);
2367 padding: 0 0 12px 0;
2368 color: var(--text-secondary);
2369 }
2370
2371 .stats.s-hik11q {
2372 display: flex;
2373 flex-wrap: wrap;
2374 align-items: center;
2375 gap: 8px 16px;
2376 margin: 0 0 -16px 0;
2377 padding: 12px 0;
2378 color: var(--text-secondary);
2379
2380 .gap:where(.s-hik11q) {
2381 flex: 1 1 auto;
2382 }
2383
2384 .permalink:where(.s-hik11q) {
2385 display: flex;
2386 align-items: center;
2387 gap: 4px;
2388 color: var(--text-link);
2389 font-weight: 700;
2390
2391 &:hover {
2392 text-decoration: underline;
2393 }
2394 }
2395 }
2396 .stat.s-hik11q {
2397 display: flex;
2398 align-items: center;
2399 gap: 8px;
2400 font-weight: 500;
2401 }
2402
2403 .post.s-12mzi62 {
2404 display: flex;
2405 position: relative;
2406 gap: 12px;
2407 padding: 12px 16px 0 16px;
2408 }
2409
2410 .logo.s-12mzi62 {
2411 position: absolute;
2412 top: 12px;
2413 right: 12px;
2414 width: 24px;
2415 height: 24px;
2416 }
2417
2418 .aside.s-12mzi62 {
2419 flex-shrink: 0;
2420 }
2421
2422 .avatar-wrapper.s-12mzi62 {
2423 display: block;
2424 border-radius: 9999px;
2425 background: var(--background-secondary);
2426 width: 40px;
2427 height: 40px;
2428 overflow: hidden;
2429
2430 &:hover {
2431 filter: brightness(0.85);
2432 }
2433 }
2434
2435 .avatar.s-12mzi62 {
2436 width: 100%;
2437 height: 100%;
2438 object-fit: cover;
2439 }
2440 .is-blurred.s-12mzi62 {
2441 scale: 125%;
2442 filter: blur(4px);
2443 }
2444
2445 .line.s-12mzi62 {
2446 position: absolute;
2447 top: 56px;
2448 bottom: -12px;
2449 left: 35px;
2450 border-left: 2px solid var(--divider);
2451 }
2452
2453 .main.s-12mzi62 {
2454 display: flex;
2455 flex-grow: 1;
2456 flex-direction: column;
2457 min-width: 0px;
2458 }
2459
2460 .meta.s-12mzi62 {
2461 display: flex;
2462 align-items: center;
2463 margin: 0 0 2px 0;
2464 padding: 0 calc(24px + 8px) 0 0;
2465 color: var(--text-secondary);
2466
2467 .name-wrapper:where(.s-12mzi62) {
2468 display: flex;
2469 gap: 4px;
2470 max-width: 100%;
2471 overflow: hidden;
2472 color: inherit;
2473 text-decoration: none;
2474 text-overflow: ellipsis;
2475 white-space: nowrap;
2476 }
2477
2478 .display-name-wrapper:where(.s-12mzi62) {
2479 overflow: hidden;
2480 text-overflow: ellipsis;
2481
2482 .name-wrapper:where(.s-12mzi62):hover & {
2483 text-decoration: underline;
2484 }
2485 }
2486
2487 .display-name:where(.s-12mzi62) {
2488 color: var(--text-primary);
2489 font-weight: 700;
2490 }
2491
2492 .handle:where(.s-12mzi62) {
2493 display: block;
2494 overflow: hidden;
2495 text-overflow: ellipsis;
2496 white-space: nowrap;
2497 }
2498
2499 .dot:where(.s-12mzi62) {
2500 flex-shrink: 0;
2501 margin: 0 6px;
2502 }
2503
2504 .date:where(.s-12mzi62) {
2505 color: inherit;
2506 text-decoration: none;
2507 white-space: nowrap;
2508
2509 &:hover {
2510 text-decoration: underline;
2511 }
2512 }
2513 }
2514
2515 .context.s-12mzi62 {
2516 overflow: hidden;
2517 color: var(--text-secondary);
2518 font-size: calc(var(--font-size) * 0.8125);
2519 text-overflow: ellipsis;
2520 white-space: nowrap;
2521
2522 a:where(.s-12mzi62) {
2523 color: inherit;
2524 font-weight: 500;
2525
2526 &:hover {
2527 text-decoration: underline;
2528 }
2529 }
2530 }
2531
2532 .message.s-1q9cbx0 {
2533 margin: 0 auto;
2534 padding: 32px 16px;
2535 max-width: 380px;
2536 color: var(--text-secondary);
2537 text-align: center;
2538 }
2539
2540/* bluesky-profile-card-embed library styles */
2541
2542 .bluesky-embed.s-dgn7w7 {
2543 position: relative;
2544 box-sizing: border-box;
2545 margin: 0 auto;
2546 border: 1px solid var(--divider);
2547 border-radius: 8px;
2548 background: var(--background-primary);
2549 min-width: 250px;
2550 max-width: 550px;
2551 overflow: hidden;
2552 color: var(--text-primary);
2553 font-weight: 400;
2554 font-size: calc(var(--font-size) * 0.875);
2555 line-height: calc(var(--font-size) * 1.25);
2556 font-family: var(--font-family);
2557
2558 :where(*),
2559 :where(*::before),
2560 :where(*::after) {
2561 box-sizing: border-box;
2562 margin: 0;
2563 padding: 0;
2564 }
2565 :where(a) {
2566 color: inherit;
2567 text-decoration: none;
2568 }
2569
2570 :where(.icon) {
2571 flex-shrink: 0;
2572 width: 1em;
2573 height: 1em;
2574 }
2575 }
2576
2577 .rich-text.s-1ea7h2m {
2578 overflow: hidden;
2579 white-space: pre-wrap;
2580 overflow-wrap: break-word;
2581
2582 &:empty {
2583 display: none;
2584 }
2585 }
2586
2587 .link.s-1ea7h2m,
2588 .mention.s-1ea7h2m,
2589 .hashtag.s-1ea7h2m {
2590 color: var(--text-link);
2591
2592 &:hover {
2593 text-decoration: underline;
2594 }
2595 }
2596
2597 .profile-card.s-2b3fq6 {
2598 display: flex;
2599 flex-direction: column;
2600 }
2601
2602 .is-blurred.s-2b3fq6 {
2603 scale: 125%;
2604 filter: blur(4px);
2605 }
2606
2607 .banner-wrapper.s-2b3fq6 {
2608 background: var(--background-secondary);
2609 aspect-ratio: 5 / 1;
2610 overflow: hidden;
2611 }
2612 .banner.s-2b3fq6 {
2613 width: 100%;
2614 height: 100%;
2615 object-fit: cover;
2616 }
2617
2618 .contents.s-2b3fq6 {
2619 display: flex;
2620 position: relative;
2621 flex-direction: column;
2622 gap: 8px;
2623 padding: 12px 16px 16px;
2624 }
2625 .logo.s-2b3fq6 {
2626 width: 24px;
2627 height: 24px;
2628 }
2629
2630 .header.s-2b3fq6 {
2631 display: flex;
2632 justify-content: space-between;
2633 align-items: end;
2634 }
2635 .actions.s-2b3fq6 {
2636 display: flex;
2637 align-items: center;
2638 gap: 16px;
2639 }
2640
2641 .avatar-wrapper.s-2b3fq6 {
2642 display: block;
2643 flex-shrink: 0;
2644 outline: 2px solid var(--background-primary);
2645 border-radius: 9999px;
2646 background: var(--background-secondary);
2647 width: 90px;
2648 height: 90px;
2649 overflow: hidden;
2650
2651 .has-banner:where(.s-2b3fq6) & {
2652 margin-top: calc(-90px + 34px);
2653 }
2654 }
2655 .avatar.s-2b3fq6 {
2656 width: 100%;
2657 height: 100%;
2658 object-fit: cover;
2659
2660 .avatar-wrapper:where(.s-2b3fq6):hover & {
2661 filter: brightness(0.85);
2662
2663 &.is-blurred {
2664 filter: brightness(0.85) blur(4px);
2665 }
2666 }
2667 }
2668
2669 .follow-button.s-2b3fq6 {
2670 display: flex;
2671 align-items: center;
2672 gap: 6px;
2673 border-radius: 9999px;
2674 background: var(--button);
2675 padding: 9px 12px;
2676 color: var(--button-text);
2677 font-weight: 600;
2678 font-size: calc(var(--font-size) * 0.8125);
2679 line-height: calc(var(--font-size) * 1);
2680 user-select: none;
2681
2682 .icon:where(.s-2b3fq6) {
2683 font-size: 16px;
2684 }
2685
2686 &:hover {
2687 background: var(--button-hover);
2688 }
2689 }
2690
2691 .display-name.s-2b3fq6 {
2692 font-weight: 700;
2693 font-size: calc(var(--font-size) * 1.25);
2694 line-height: calc(var(--font-size) * 1.75);
2695 overflow-wrap: break-word;
2696 }
2697 .handle.s-2b3fq6 {
2698 color: var(--text-secondary);
2699 overflow-wrap: break-word;
2700 }
2701
2702 .stats.s-2b3fq6 {
2703 display: flex;
2704 flex-wrap: wrap;
2705 gap: 20px;
2706
2707 min-width: 0;
2708 }
2709 .stat-entry.s-2b3fq6 {
2710 color: var(--text-secondary);
2711 }
2712 .stat-count.s-2b3fq6 {
2713 color: var(--text-primary);
2714 font-weight: 700;
2715 }
2716
2717 .message.s-ibmh3w {
2718 margin: 0 auto;
2719 padding: 32px 16px;
2720 max-width: 380px;
2721 color: var(--text-secondary);
2722 text-align: center;
2723 }