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