This repository has no description
1/* FeedTimeline.css */
2
3.feed-timeline {
4 display: flex;
5 flex-direction: column;
6 gap: 15px;
7 }
8
9/* Compact view styles */
10.feed-timeline.compact-view {
11 gap: 0;
12}
13
14.compact-records-table {
15 width: 100%;
16 border-collapse: separate;
17 border-spacing: 0;
18 font-size: 0.85rem;
19 border: 1px solid var(--card-border);
20 border-radius: 12px;
21 overflow: hidden;
22 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
23}
24
25.compact-records-table th {
26 background-color: var(--navbar-bg);
27 color: var(--text);
28 font-weight: 600;
29 text-align: left;
30 padding: 8px 12px;
31 border-bottom: 2px solid var(--card-border);
32}
33
34.compact-records-table td {
35 padding: 6px 12px;
36 border-bottom: 1px solid var(--card-border);
37 white-space: nowrap;
38 overflow: hidden;
39 text-overflow: ellipsis;
40}
41
42.compact-records-table tbody tr:hover {
43 background-color: rgba(0, 0, 0, 0.03);
44}
45
46.dark-mode .compact-records-table tbody tr:hover {
47 background-color: rgba(255, 255, 255, 0.05);
48}
49
50.compact-records-table .collection-col {
51 width: 15%;
52 max-width: 120px;
53}
54
55.compact-records-table .time-col {
56 width: 15%;
57 max-width: 120px;
58}
59
60.compact-records-table .type-col {
61 width: 15%;
62 max-width: 120px;
63}
64
65.compact-records-table .content-col {
66 width: 45%;
67}
68
69.compact-records-table .actions-col {
70 width: 10%;
71 max-width: 80px;
72 text-align: right;
73}
74
75.compact-collection {
76 font-weight: 600;
77 font-size: 0.8rem;
78}
79
80.compact-time {
81 font-size: 0.75rem;
82 color: var(--text);
83 opacity: 0.8;
84}
85
86.compact-type {
87 font-size: 0.75rem;
88 display: flex;
89 align-items: center;
90 gap: 4px;
91}
92
93.compact-content {
94 cursor: pointer;
95 display: block;
96 white-space: nowrap;
97 overflow: hidden;
98 text-overflow: ellipsis;
99 max-width: 100%;
100 font-family: monospace;
101 font-size: 0.8rem;
102 background-color: var(--background);
103 padding: 2px 6px;
104 border-radius: 4px;
105 color: var(--text);
106 transition: background-color 0.2s, color 0.2s;
107}
108
109.compact-content:hover {
110 background-color: var(--button-bg);
111 color: white;
112}
113
114.compact-actions {
115 display: flex;
116 justify-content: flex-end;
117 gap: 8px;
118}
119
120.compact-view-json {
121 background: none;
122 border: none;
123 cursor: pointer;
124 opacity: 0.6;
125 width: 16px;
126 height: 16px;
127 display: flex;
128 align-items: center;
129 justify-content: center;
130 position: relative;
131}
132
133.compact-view-json:hover {
134 opacity: 1;
135}
136
137.compact-view-json::before {
138 content: "{…}";
139 font-family: monospace;
140 font-size: 10px;
141 color: var(--text);
142}
143
144.compact-bsky-link {
145 display: flex;
146 align-items: center;
147 justify-content: center;
148 opacity: 0.6;
149}
150
151.compact-bsky-link:hover {
152 opacity: 1;
153}
154
155.mini-badge {
156 display: inline-flex;
157 align-items: center;
158 justify-content: center;
159 width: 16px;
160 height: 16px;
161 border-radius: 50%;
162 font-size: 0.6rem;
163 font-weight: bold;
164 color: white;
165}
166
167.reply-badge {
168 background-color: #0288d1;
169}
170
171.quote-badge {
172 background-color: #7e57c2;
173}
174
175/* Row coloring */
176.bsky-row {
177 border-left: 3px solid rgba(0, 133, 255, 0.5);
178}
179
180.atproto-row {
181 border-left: 3px solid rgba(0, 51, 102, 0.5);
182}
183
184.record-link-compact {
185 color: var(--button-bg);
186 text-decoration: underline;
187 cursor: pointer;
188}
189
190 .feed-item {
191 background: var(--navbar-bg);
192 padding: 18px;
193 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
194 border: 5px solid var(--card-border);
195 border-radius: 12px;
196 transition: transform 0.3s ease, box-shadow 0.3s ease;
197 }
198
199 .feed-item:hover {
200 transform: translateY(-3px);
201 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
202 }
203
204 .feed-item-header {
205 display: flex;
206 justify-content: space-between;
207 align-items: center;
208 margin-bottom: 10px;
209 border-bottom: 1px solid var(--card-border);
210 padding-bottom: 10px;
211 }
212
213 .collection-type {
214 display: flex;
215 align-items: center;
216 }
217
218 .collection-name {
219 font-weight: 700;
220 font-size: 1.1rem;
221 color: var(--button-bg);
222 }
223
224 /* Different styling for Bluesky vs ATProto collections */
225 .bsky-collection {
226 color: #0085ff; /* Lighter blue for Bluesky */
227 }
228
229 .atproto-collection {
230 color: #003366; /* Darker blue for ATProto */
231 }
232
233 /* Different border styling for items */
234 .bsky-item {
235 border-color: rgba(0, 133, 255, 0.5); /* Lighter blue for Bluesky */
236 }
237
238 .atproto-item {
239 border-color: rgba(0, 51, 102, 0.5); /* Darker blue for ATProto */
240 }
241
242 .collection-full {
243 margin-left: 8px;
244 font-size: 0.8rem;
245 color: var(--text);
246 opacity: 0.7;
247 }
248
249 .record-rkey {
250 font-family: monospace;
251 font-size: 0.9rem;
252 color: var(--text);
253 opacity: 0.8;
254 background-color: var(--background);
255 padding: 3px 8px;
256 border-radius: 4px;
257 }
258
259 .feed-item-content {
260 padding: 10px 0;
261 margin-bottom: 10px;
262 border-bottom: 1px solid var(--card-border);
263 }
264
265 .record-type,
266 .record-subject,
267 .record-text,
268 .record-content {
269 margin: 8px 0;
270 font-size: 0.95rem;
271 color: var(--text);
272 word-break: break-word;
273 }
274
275 .type-label,
276 .subject-label,
277 .text-label,
278 .content-label {
279 font-weight: 600;
280 color: var(--text);
281 margin-right: 5px;
282 }
283
284 .feed-item-footer {
285 display: flex;
286 justify-content: flex-end;
287 }
288
289 .record-timestamp {
290 font-size: 0.85rem;
291 color: var(--text);
292 opacity: 0.7;
293 font-style: italic;
294 }
295
296 /* Modal styles */
297 .record-modal-backdrop {
298 position: fixed;
299 top: 0;
300 left: 0;
301 right: 0;
302 bottom: 0;
303 background-color: rgba(0, 0, 0, 0.7);
304 display: flex;
305 justify-content: center;
306 align-items: center;
307 z-index: 100;
308 backdrop-filter: blur(6px);
309 -webkit-backdrop-filter: blur(6px);
310 animation: backdropFadeIn 0.2s ease-out;
311 }
312
313 @keyframes backdropFadeIn {
314 from { opacity: 0; }
315 to { opacity: 1; }
316 }
317
318 .record-modal {
319 background-color: var(--navbar-bg);
320 border-radius: 16px;
321 border: 3px solid var(--card-border);
322 width: 90%;
323 max-width: 800px;
324 max-height: 85vh;
325 overflow-y: auto;
326 padding: 25px;
327 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
328 animation: modalFadeIn 0.3s ease-out;
329 }
330
331 @keyframes modalFadeIn {
332 from { opacity: 0; transform: translateY(30px); }
333 to { opacity: 1; transform: translateY(0); }
334 }
335
336 .record-modal-header {
337 display: flex;
338 justify-content: space-between;
339 align-items: center;
340 margin-bottom: 20px;
341 padding-bottom: 15px;
342 border-bottom: 1px solid var(--card-border);
343 position: sticky;
344 top: 0;
345 background-color: var(--navbar-bg);
346 z-index: 5;
347 padding-top: 5px;
348 }
349
350 .record-modal-title {
351 font-size: 1.1rem;
352 font-weight: 600;
353 color: var(--button-bg);
354 margin: 0;
355 font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
356 max-width: 80%;
357 overflow: hidden;
358 text-overflow: ellipsis;
359 white-space: nowrap;
360 }
361
362 .record-modal-close {
363 width: 36px;
364 height: 36px;
365 background-color: var(--background);
366 border: 1px solid var(--card-border);
367 border-radius: 50%;
368 font-size: 1.4rem;
369 cursor: pointer;
370 color: var(--text);
371 opacity: 0.8;
372 transition: all 0.2s;
373 display: flex;
374 align-items: center;
375 justify-content: center;
376 line-height: 0;
377 }
378
379 .record-modal-close:hover {
380 opacity: 1;
381 background-color: rgba(var(--button-bg-rgb), 0.15);
382 color: var(--button-bg);
383 transform: rotate(90deg);
384 }
385
386 .record-modal-content {
387 margin-bottom: 20px;
388 }
389
390 .record-modal-loading {
391 text-align: center;
392 padding: 40px 30px;
393 color: var(--text);
394 font-size: 0.95rem;
395 display: flex;
396 flex-direction: column;
397 align-items: center;
398 gap: 20px;
399 font-weight: 500;
400 }
401
402 .loading-spinner {
403 width: 36px;
404 height: 36px;
405 border: 3px solid rgba(var(--button-bg-rgb), 0.2);
406 border-top-color: var(--button-bg);
407 border-radius: 50%;
408 animation: spinner 1s linear infinite;
409 }
410
411 @keyframes spinner {
412 to { transform: rotate(360deg); }
413 }
414
415 .record-modal-error {
416 color: #e74c3c;
417 padding: 15px;
418 border-radius: 8px;
419 background-color: rgba(231, 76, 60, 0.1);
420 margin-bottom: 20px;
421 font-size: 0.95rem;
422 border: 1px solid rgba(231, 76, 60, 0.3);
423 }
424
425 .record-modal-footer {
426 display: flex;
427 justify-content: space-between;
428 padding-top: 15px;
429 border-top: 1px solid var(--card-border);
430 margin-top: 15px;
431 }
432
433 .record-link {
434 color: var(--button-bg);
435 text-decoration: none;
436 cursor: pointer;
437 border-bottom: 1px dashed;
438 padding-bottom: 1px;
439 transition: all 0.2s;
440 }
441
442 .record-link:hover {
443 border-bottom: 1px solid;
444 opacity: 0.85;
445 }
446
447 .record-key-link {
448 cursor: pointer;
449 color: var(--button-bg);
450 text-decoration: none;
451 border-bottom: 1px dashed;
452 padding-bottom: 1px;
453 transition: border-bottom 0.2s;
454 }
455
456 .record-key-link:hover {
457 border-bottom: 1px solid;
458 }
459
460 .bsky-link {
461 display: inline-flex;
462 align-items: center;
463 margin-top: 8px;
464 margin-right: 12px;
465 color: var(--button-bg);
466 text-decoration: none;
467 font-size: 0.85rem;
468 transition: all 0.2s;
469 padding: 4px 10px;
470 border-radius: 6px;
471 background-color: rgba(var(--button-bg-rgb), 0.08);
472 }
473
474 .bsky-link:hover {
475 background-color: rgba(var(--button-bg-rgb), 0.15);
476 transform: translateY(-1px);
477 }
478
479 .bsky-link:active {
480 transform: translateY(0);
481 }
482
483 .bsky-link svg {
484 margin-right: 6px;
485 }
486
487 .bsky-link-text {
488 font-weight: 500;
489 }
490
491 .bsky-link-container {
492 margin-top: 10px;
493 display: flex;
494 flex-wrap: wrap;
495 gap: 8px;
496 }
497
498 .post-type-badge {
499 display: inline-flex;
500 align-items: center;
501 justify-content: center;
502 font-size: 0.7rem;
503 padding: 3px 8px;
504 border-radius: 12px;
505 margin-left: 8px;
506 font-weight: 600;
507 text-transform: uppercase;
508 letter-spacing: 0.5px;
509 }
510
511 .post-type-reply {
512 background-color: rgba(79, 195, 247, 0.15);
513 color: #0288d1;
514 }
515
516 .post-type-quote {
517 background-color: rgba(126, 87, 194, 0.15);
518 color: #7e57c2;
519 }
520
521 .dark-mode .post-type-reply {
522 background-color: rgba(79, 195, 247, 0.3);
523 color: #81d4fa;
524 }
525
526 .dark-mode .post-type-quote {
527 background-color: rgba(126, 87, 194, 0.3);
528 color: #b39ddb;
529 }
530
531 .record-json-container {
532 background-color: var(--background);
533 border-radius: 10px;
534 overflow: hidden;
535 margin: 0 5px;
536 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
537 }
538
539 .dark-mode .record-json-container {
540 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
541 }
542
543 .record-json-header {
544 display: flex;
545 justify-content: space-between;
546 align-items: center;
547 padding: 12px 18px;
548 background-color: rgba(0, 0, 0, 0.05);
549 border-bottom: 1px solid var(--card-border);
550 font-weight: 600;
551 color: var(--button-bg);
552 }
553
554 .dark-mode .record-json-header {
555 background-color: rgba(255, 255, 255, 0.05);
556 }
557
558 .copy-json-button {
559 display: flex;
560 align-items: center;
561 gap: 6px;
562 background: none;
563 border: 1px solid var(--card-border);
564 border-radius: 6px;
565 padding: 6px 12px;
566 font-size: 0.85rem;
567 cursor: pointer;
568 color: var(--text);
569 transition: all 0.2s ease;
570 font-weight: 500;
571 }
572
573 .copy-json-button:hover {
574 background-color: var(--button-bg);
575 color: white;
576 transform: translateY(-1px);
577 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
578 }
579
580 .copy-json-button:active {
581 transform: translateY(0);
582 }
583
584 .copy-json-button.copied {
585 background-color: #4CAF50;
586 color: white;
587 border-color: #4CAF50;
588 }
589
590 .copy-json-button.copied::after {
591 content: "✓";
592 margin-left: 5px;
593 animation: fadeIn 0.3s ease;
594 }
595
596 @keyframes fadeIn {
597 from { opacity: 0; }
598 to { opacity: 1; }
599 }
600
601 .record-json {
602 padding: 18px;
603 font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
604 white-space: pre-wrap;
605 overflow-x: auto;
606 max-height: 350px;
607 overflow-y: auto;
608 font-size: 0.9rem;
609 line-height: 1.5;
610 color: var(--text);
611 scrollbar-width: thin;
612 }
613
614 .record-json::-webkit-scrollbar {
615 width: 8px;
616 height: 8px;
617 }
618
619 .record-json::-webkit-scrollbar-track {
620 background: rgba(0, 0, 0, 0.05);
621 border-radius: 4px;
622 }
623
624 .record-json::-webkit-scrollbar-thumb {
625 background-color: rgba(0, 0, 0, 0.2);
626 border-radius: 4px;
627 }
628
629 .dark-mode .record-json::-webkit-scrollbar-track {
630 background: rgba(255, 255, 255, 0.05);
631 }
632
633 .dark-mode .record-json::-webkit-scrollbar-thumb {
634 background-color: rgba(255, 255, 255, 0.2);
635 }
636
637 .record-uri {
638 display: flex;
639 align-items: center;
640 gap: 8px;
641 font-family: monospace;
642 font-size: 0.9rem;
643 background-color: var(--background);
644 padding: 8px 12px;
645 border-radius: 6px;
646 word-break: break-all;
647 }
648
649 /* Dark mode overrides */
650 .dark-mode .feed-item {
651 background: #2c2c2c;
652 border: 5px solid #444;
653 box-shadow: 0 2px 4px rgba(0,0,0,0.6);
654 }
655
656 .dark-mode .bsky-collection {
657 color: #4da8ff; /* Lighter blue for Bluesky in dark mode */
658 }
659
660 .dark-mode .atproto-collection {
661 color: #6699cc; /* Slightly lighter blue for ATProto in dark mode */
662 }
663
664 .dark-mode .bsky-item {
665 border-color: rgba(77, 168, 255, 0.5); /* Lighter blue for Bluesky in dark mode */
666 }
667
668 .dark-mode .atproto-item {
669 border-color: rgba(102, 153, 204, 0.5); /* Darker blue for ATProto in dark mode */
670 }
671
672 .dark-mode .feed-item-header,
673 .dark-mode .feed-item-content {
674 border-color: #555;
675 }
676
677 /* Dark mode compact view styles */
678 .dark-mode .compact-records-table {
679 border-color: #444;
680 }
681
682 .dark-mode .compact-records-table th {
683 background-color: #333;
684 border-color: #444;
685 }
686
687 .dark-mode .compact-records-table td {
688 border-color: #444;
689 }
690
691 .dark-mode .bsky-row {
692 border-left-color: rgba(77, 168, 255, 0.5);
693 }
694
695 .dark-mode .atproto-row {
696 border-left-color: rgba(102, 153, 204, 0.5);
697 }
698
699 .dark-mode .compact-view-json::before {
700 color: #ddd;
701 }
702
703 /* Responsive styles */
704 @media (max-width: 600px) {
705 .feed-item-header {
706 flex-direction: column;
707 align-items: flex-start;
708 gap: 8px;
709 }
710
711 .record-rkey {
712 align-self: flex-start;
713 }
714
715 .feed-item-content {
716 font-size: 0.9rem;
717 }
718
719 /* Compact view responsive adjustments */
720 .compact-records-table {
721 display: block;
722 width: 100%;
723 }
724
725 .compact-records-table thead {
726 display: none; /* Hide table headers on mobile */
727 }
728
729 .compact-records-table tbody {
730 display: block;
731 width: 100%;
732 }
733
734 .compact-records-table tr {
735 display: flex;
736 flex-direction: column;
737 padding: 10px;
738 border-bottom: 1px solid var(--card-border);
739 position: relative;
740 }
741
742 .compact-records-table td {
743 display: block;
744 width: 100%;
745 max-width: none;
746 border: none;
747 padding: 3px 0;
748 position: relative;
749 }
750
751 /* Add labels on mobile */
752 .compact-records-table td.collection-col::before {
753 content: "Collection: ";
754 font-weight: 600;
755 opacity: 0.6;
756 }
757
758 .compact-records-table td.time-col::before {
759 content: "Time: ";
760 font-weight: 600;
761 opacity: 0.6;
762 }
763
764 .compact-records-table td.type-col::before {
765 content: "Type: ";
766 font-weight: 600;
767 opacity: 0.6;
768 }
769
770 .compact-records-table td.content-col::before {
771 content: "Content: ";
772 font-weight: 600;
773 opacity: 0.6;
774 }
775
776 .compact-records-table td.actions-col {
777 position: absolute;
778 right: 10px;
779 top: 10px;
780 width: auto;
781 padding: 0;
782 }
783
784 .compact-content {
785 white-space: normal;
786 word-break: break-all;
787 display: inline-block;
788 margin-top: 2px;
789 }
790
791 .compact-records-table td.content-col::before {
792 content: "TID: ";
793 font-weight: 600;
794 opacity: 0.6;
795 }
796 }