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