This repository has no description
1/* Omnifeed.css (renamed from CollectionsFeed.css) */
2
3/* Activity Chart Styles */
4.activity-chart-container {
5 background-color: var(--navbar-bg);
6 border: 1px solid var(--card-border);
7 border-radius: 12px;
8 padding: 20px;
9 margin-bottom: 20px;
10 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
11 overflow: hidden;
12}
13
14.dark-mode .activity-chart-container {
15 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
16}
17
18.activity-chart-header {
19 display: flex;
20 justify-content: space-between;
21 align-items: center;
22 margin-bottom: 15px;
23}
24
25.activity-chart-title {
26 font-size: 1.1rem;
27 font-weight: 600;
28 color: var(--button-bg);
29 margin: 0;
30}
31
32.activity-chart-loading {
33 min-height: 200px;
34 display: flex;
35 justify-content: center;
36 align-items: center;
37 color: var(--text);
38 font-size: 0.9rem;
39 opacity: 0.7;
40}
41
42/* Page Title Styles */
43.page-title {
44 text-align: center;
45 margin-bottom: 10px;
46 padding-bottom: 10px;
47 border-bottom: 1px solid var(--card-border);
48}
49
50.page-title h1 {
51 font-size: 2.2rem;
52 margin: 0;
53 color: var(--button-bg);
54 font-weight: 700;
55}
56
57.collections-feed-container {
58 max-width: 800px;
59 margin: 20px auto;
60 padding: 0 20px;
61 font-family: 'articulat-cf', sans-serif;
62 position: relative;
63 min-height: 80vh;
64}
65
66.search-container.fade-in {
67 display: inline;
68}
69
70.search-container {
71 display: inline;
72}
73
74/* Alt Card Style (matching Alt Text Rating Tool) */
75.alt-card {
76 background-color: var(--post-background-color);
77 max-width: 95%;
78 margin: 30px auto;
79 text-align: center;
80 border: 5px solid var(--card-border);
81 border-radius: 12px;
82 box-shadow: none;
83 padding: 20px 30px 30px;
84 background-color: var(--navbar-bg);
85}
86
87body.dark-mode .alt-card {
88 border-color: #444;
89}
90
91/* Omnifeed Card Styles */
92.omni-card {
93 max-width: 450px;
94 margin: 30px auto 20px;
95}
96
97.omni-card h1 {
98 font-size: 1.6em;
99 margin-top: 0px;
100 text-align: center;
101 margin-bottom: 10px;
102 color: var(--button-bg);
103}
104
105.omni-card p {
106 margin-top: 0px;
107 font-size: 0.9em;
108 margin-bottom: 25px;
109}
110
111.omni-info-card {
112 margin-top: 30px;
113 background-color: rgba(0, 0, 0, 0.02);
114 border-radius: 8px;
115 padding: 15px;
116 text-align: left;
117}
118
119.omni-info-card h3 {
120 font-size: 1rem;
121 margin-top: 0;
122 margin-bottom: 10px;
123 color: var(--text);
124}
125
126.omni-info-card p {
127 font-size: 0.85rem;
128 margin-bottom: 0;
129 line-height: 1.4;
130}
131
132body.dark-mode .omni-info-card {
133 background-color: rgba(255, 255, 255, 0.05);
134}
135
136/* Search Bar Styles */
137.collections-feed-container .search-bar {
138 display: flex;
139 flex-direction: column;
140 gap: 15px;
141}
142
143.collections-feed-container .search-bar input {
144 width: 100%;
145 padding: 12px 15px;
146 border: 2px solid var(--button-bg);
147 border-radius: 6px;
148 font-size: 1rem;
149 transition: border-color 0.3s;
150}
151
152.collections-feed-container .search-bar input:focus {
153 outline: none;
154 border-color: #004a99;
155}
156
157/* Action Row and Button Styles */
158.action-row {
159 display: flex;
160 align-items: center;
161 justify-content: center;
162 gap: 15px;
163}
164
165.analyze-button {
166 background: var(--button-bg);
167 color: var(--button-text);
168 border: none;
169 border-radius: 6px;
170 padding: 10px 20px;
171 font-size: 1rem;
172 font-weight: 600;
173 cursor: pointer;
174 transition: background-color 0.3s;
175 min-width: 120px;
176 margin: 0;
177}
178
179.analyze-button:hover {
180 background-color: #004F84;
181}
182
183@media (max-width: 500px) {
184 .omni-card {
185 padding: 20px 15px;
186 }
187
188 .analyze-button {
189 width: 100%;
190 padding: 12px 20px;
191 }
192}
193
194.omni-chart-container {
195 position: relative;
196}
197
198 /* User Header Styles */
199 .user-header {
200 text-align: center;
201 margin-bottom: 20px;
202 padding-bottom: 15px;
203 border-bottom: 1px solid var(--card-border);
204 }
205
206 .user-header h1 {
207 font-size: 1.8rem;
208 margin: 0;
209 color: var(--button-bg);
210 }
211
212 .user-header h2 {
213 font-size: 1.2rem;
214 font-weight: 500;
215 margin: 5px 0 0;
216 color: var(--text);
217 opacity: 0.8;
218 }
219
220 .user-did,
221 .user-endpoint {
222 font-size: 0.8rem;
223 margin: 3px 0 0;
224 color: var(--text);
225 opacity: 0.6;
226 word-break: break-all;
227 font-family: monospace;
228 display: flex;
229 align-items: center;
230 justify-content: center;
231 gap: 8px;
232 }
233
234 .copy-button {
235 background: none;
236 border: none;
237 cursor: pointer;
238 display: flex;
239 align-items: center;
240 justify-content: center;
241 padding: 6px;
242 border-radius: 6px;
243 color: var(--text);
244 opacity: 0.6;
245 transition: all 0.2s ease;
246 }
247
248 .copy-button:hover {
249 opacity: 1;
250 background-color: rgba(0, 0, 0, 0.08);
251 transform: scale(1.1);
252 }
253
254 .dark-mode .copy-button:hover {
255 background-color: rgba(255, 255, 255, 0.15);
256 }
257
258 .copy-button:active {
259 transform: scale(0.95);
260 }
261
262 .copy-button.copied {
263 color: #4CAF50;
264 opacity: 1;
265 position: relative;
266 }
267
268 .copy-button.copied svg {
269 stroke: #4CAF50;
270 }
271
272 .copy-button.copied::after {
273 content: "Copied!";
274 position: absolute;
275 bottom: -24px;
276 left: 50%;
277 transform: translateX(-50%);
278 background-color: var(--button-bg);
279 color: white;
280 padding: 3px 8px;
281 border-radius: 6px;
282 font-size: 0.75rem;
283 white-space: nowrap;
284 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
285 animation: fadeInUp 0.3s ease;
286 }
287
288 @keyframes fadeInUp {
289 from { opacity: 0; transform: translate(-50%, 5px); }
290 to { opacity: 1; transform: translate(-50%, 0); }
291 }
292
293 /* Feed Controls Styles */
294 .feed-controls {
295 display: flex;
296 justify-content: space-between;
297 align-items: flex-start;
298 margin-bottom: 20px;
299 background-color: var(--navbar-bg);
300 border: 1px solid var(--card-border);
301 border-radius: 8px;
302 padding: 15px;
303 }
304
305 .filter-container {
306 flex: 1;
307 position: relative;
308 }
309
310 .filter-dropdown-toggle {
311 display: flex;
312 justify-content: space-between;
313 align-items: center;
314 padding: 8px 12px;
315 background-color: var(--navbar-bg);
316 border: 1px solid var(--card-border);
317 border-radius: 6px;
318 cursor: pointer;
319 transition: border-color 0.2s;
320 }
321
322 .filter-dropdown-toggle:hover {
323 border-color: var(--button-bg);
324 }
325
326 .filter-dropdown-toggle span {
327 font-size: 1rem;
328 color: var(--text);
329 }
330
331 .filter-dropdown-toggle .arrow {
332 transition: transform 0.2s;
333 }
334
335 .filter-dropdown-toggle .arrow.open {
336 transform: rotate(180deg);
337 }
338
339 .filter-dropdown-menu {
340 position: absolute;
341 top: calc(100% + 5px);
342 left: 0;
343 right: 0;
344 z-index: 10;
345 background-color: var(--navbar-bg);
346 border: 1px solid var(--card-border);
347 border-radius: 6px;
348 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
349 overflow: hidden;
350 max-height: 0;
351 transition: max-height 0.3s ease-out;
352 opacity: 0;
353 visibility: hidden;
354 }
355
356 .filter-dropdown-menu.open {
357 max-height: 300px;
358 opacity: 1;
359 visibility: visible;
360 }
361
362 .filter-header {
363 display: flex;
364 flex-direction: column;
365 gap: 10px;
366 padding: 12px 15px;
367 border-bottom: 1px solid var(--card-border);
368 }
369
370 .filter-header-top {
371 display: flex;
372 justify-content: space-between;
373 align-items: center;
374 width: 100%;
375 }
376
377 .filter-close-mobile {
378 display: none;
379 background: none;
380 border: none;
381 font-size: 1.2rem;
382 color: var(--text);
383 opacity: 0.7;
384 cursor: pointer;
385 width: 36px;
386 height: 36px;
387 border-radius: 50%;
388 align-items: center;
389 justify-content: center;
390 }
391
392 .filter-close-mobile:hover {
393 background-color: rgba(0, 0, 0, 0.05);
394 opacity: 1;
395 }
396
397 @media (max-width: 768px) {
398 .filter-close-mobile {
399 display: flex;
400 }
401 }
402
403 .filter-header h3 {
404 font-size: 1rem;
405 margin: 0;
406 color: var(--text);
407 }
408
409 .filter-actions {
410 display: flex;
411 gap: 10px;
412 width: 100%;
413 justify-content: flex-end;
414 }
415
416 @media (max-width: 480px) {
417 .filter-actions {
418 justify-content: space-between;
419 }
420 }
421
422 .select-all-button,
423 .deselect-all-button {
424 background: none;
425 border: none;
426 font-size: 0.9rem;
427 color: var(--button-bg);
428 cursor: pointer;
429 padding: 5px;
430 transition: opacity 0.2s;
431 }
432
433 .select-all-button:hover,
434 .deselect-all-button:hover {
435 text-decoration: underline;
436 }
437
438 .select-all-button:disabled,
439 .deselect-all-button:disabled {
440 opacity: 0.5;
441 cursor: not-allowed;
442 text-decoration: none;
443 }
444
445 .collections-filter {
446 max-height: 240px;
447 overflow-y: auto;
448 padding: 0;
449 }
450
451 .collection-item {
452 padding: 10px 15px;
453 border-bottom: 1px solid var(--card-border);
454 cursor: pointer;
455 display: flex;
456 align-items: center;
457 transition: background-color 0.2s;
458 }
459
460 .collection-item:last-child {
461 border-bottom: none;
462 }
463
464 .collection-item:hover {
465 background-color: rgba(0, 0, 0, 0.05);
466 }
467
468 .collection-item.selected {
469 background-color: rgba(var(--button-bg-rgb), 0.1);
470 }
471
472 .collection-item-name {
473 font-size: 0.95rem;
474 color: var(--text);
475 flex-grow: 1;
476 }
477
478 .collection-item-checkbox {
479 margin-right: 12px;
480 width: 16px;
481 height: 16px;
482 accent-color: var(--button-bg);
483 }
484
485 .filter-dropdown-backdrop {
486 position: fixed;
487 top: 0;
488 left: 0;
489 right: 0;
490 bottom: 0;
491 z-index: 5;
492 background-color: transparent;
493 display: none;
494 }
495
496 .filter-dropdown-backdrop.open {
497 display: block;
498 }
499
500 .dark-mode .filter-dropdown-toggle {
501 background-color: var(--navbar-bg);
502 }
503
504 .dark-mode .filter-dropdown-menu {
505 background-color: var(--navbar-bg);
506 }
507
508 .dark-mode .collection-item:hover {
509 background-color: rgba(255, 255, 255, 0.05);
510 }
511
512 .dark-mode .collection-item.selected {
513 background-color: rgba(var(--button-bg-rgb), 0.2);
514 }
515
516 .selected-collections-count {
517 background-color: var(--button-bg);
518 color: white;
519 font-size: 0.8rem;
520 padding: 2px 6px;
521 border-radius: 10px;
522 margin-left: 8px;
523 }
524
525 .feed-filters {
526 display: flex;
527 justify-content: space-between;
528 align-items: center;
529 margin-bottom: 15px;
530 background-color: var(--navbar-bg);
531 border: 1px solid var(--card-border);
532 border-radius: 8px;
533 padding: 12px 15px;
534 }
535
536 .toggle-container {
537 display: flex;
538 justify-content: space-between;
539 align-items: center;
540 width: 100%;
541 flex-wrap: wrap;
542 gap: 15px;
543 }
544
545 .timestamp-toggle {
546 display: flex;
547 align-items: center;
548 gap: 10px;
549 background-color: var(--background);
550 padding: 6px 12px;
551 border-radius: 6px;
552 border: 1px solid var(--card-border);
553 }
554
555 .timestamp-toggle label {
556 font-size: 0.85rem;
557 color: var(--text);
558 cursor: pointer;
559 display: flex;
560 align-items: center;
561 font-weight: 500;
562 }
563
564 .timestamp-toggle input[type="checkbox"] {
565 margin-right: 8px;
566 cursor: pointer;
567 width: 16px;
568 height: 16px;
569 accent-color: var(--button-bg);
570 }
571
572 .timestamp-toggle span {
573 cursor: help;
574 font-size: 0.85rem;
575 margin-left: 5px;
576 opacity: 0.7;
577 transition: opacity 0.2s;
578 }
579
580 .timestamp-toggle span:hover {
581 opacity: 1;
582 }
583
584 /* View Toggle Switch Styles */
585 .view-toggle {
586 display: flex;
587 align-items: center;
588 }
589
590 .toggle-switch-container {
591 display: flex;
592 align-items: center;
593 gap: 10px;
594 background-color: var(--background);
595 padding: 6px 12px;
596 border-radius: 6px;
597 border: 1px solid var(--card-border);
598 }
599
600 .switch {
601 position: relative;
602 display: inline-block;
603 width: 46px;
604 height: 24px;
605 margin-right: 10px;
606 }
607
608 /* Hide default HTML checkbox */
609 .switch input {
610 opacity: 0;
611 width: 0;
612 height: 0;
613 }
614
615 /* The slider */
616 .slider {
617 position: absolute;
618 cursor: pointer;
619 top: 0;
620 left: 0;
621 right: 0;
622 bottom: 0;
623 background-color: #ccc;
624 transition: .4s;
625 }
626
627 .slider:before {
628 position: absolute;
629 content: "";
630 height: 18px;
631 width: 18px;
632 left: 3px;
633 bottom: 3px;
634 background-color: white;
635 transition: .4s;
636 }
637
638 input:checked + .slider {
639 background-color: var(--button-bg);
640 }
641
642 input:focus + .slider {
643 box-shadow: 0 0 1px var(--button-bg);
644 }
645
646 input:checked + .slider:before {
647 transform: translateX(22px);
648 }
649
650 /* Rounded sliders */
651 .slider.round {
652 border-radius: 34px;
653 }
654
655 .slider.round:before {
656 border-radius: 50%;
657 }
658
659 .toggle-label {
660 font-size: 0.85rem;
661 color: var(--text);
662 margin-left: 5px;
663 font-weight: 500;
664 }
665
666 .refresh-button {
667 background: var(--button-bg);
668 color: var(--button-text);
669 border: none;
670 border-radius: 6px;
671 padding: 8px 15px;
672 font-size: 0.95rem;
673 font-weight: 600;
674 cursor: pointer;
675 transition: background-color 0.3s;
676 margin-left: 15px;
677 }
678
679 .refresh-button:hover {
680 background-color: #004F84;
681 }
682
683 .refresh-button:disabled {
684 opacity: 0.6;
685 cursor: not-allowed;
686 }
687
688 /* Message Styles */
689 .no-collections-message,
690 .no-records-message {
691 text-align: center;
692 padding: 20px;
693 background-color: var(--navbar-bg);
694 border: 1px solid var(--card-border);
695 border-radius: 8px;
696 margin: 20px 0;
697 color: var(--text);
698 }
699
700 /* Load More Button Styles */
701 .load-more-container {
702 text-align: center;
703 margin: 30px 0;
704 display: flex;
705 flex-direction: column;
706 align-items: center;
707 gap: 15px;
708 }
709
710 .records-count {
711 font-size: 0.9rem;
712 color: var(--text);
713 opacity: 0.8;
714 }
715
716 .load-more-button {
717 background-color: var(--navbar-bg);
718 color: var(--button-bg);
719 border: 1px solid var(--button-bg);
720 border-radius: 6px;
721 padding: 10px 20px;
722 font-size: 1rem;
723 font-weight: 600;
724 cursor: pointer;
725 transition: background-color 0.3s, color 0.3s;
726 }
727
728 .load-more-button:hover {
729 background-color: var(--button-bg);
730 color: var(--button-text);
731 }
732
733 .load-more-button:disabled {
734 opacity: 0.6;
735 cursor: not-allowed;
736 }
737
738 /* Loading Container Styles */
739 .loading-container {
740 display: flex;
741 justify-content: center;
742 align-items: center;
743 min-height: 300px;
744 }
745
746 /* Error Container Styles */
747 .error-container {
748 margin: 20px 0;
749 padding: 15px;
750 background-color: rgba(255, 0, 0, 0.05);
751 border-radius: 8px;
752 border-left: 4px solid #ff3b30;
753 }
754
755 .error-message {
756 display: flex;
757 flex-direction: column;
758 align-items: center;
759 gap: 10px;
760 }
761
762 .error-message p {
763 color: #ff3b30;
764 font-weight: 500;
765 margin: 0;
766 text-align: center;
767 }
768
769 .error-action-button {
770 background-color: #006de0;
771 color: white;
772 border: none;
773 border-radius: 4px;
774 padding: 8px 16px;
775 font-size: 14px;
776 cursor: pointer;
777 transition: background-color 0.2s;
778 }
779
780 .error-action-button:hover {
781 background-color: #0062c7;
782 }
783
784 .error-action-button:active {
785 background-color: #0058b4;
786 }
787
788 /* Responsive styles */
789 @media (max-width: 768px) {
790 .feed-controls {
791 flex-direction: column;
792 }
793
794 .refresh-button {
795 margin-left: 0;
796 margin-top: 15px;
797 width: 100%;
798 min-height: 44px; /* Minimum touch target height */
799 font-size: 1rem;
800 }
801
802 .filter-dropdown-toggle {
803 min-height: 44px; /* Larger touch target */
804 padding: 10px 15px;
805 }
806
807 .filter-dropdown-menu.open {
808 max-height: 80vh; /* Larger dropdown on mobile */
809 position: fixed;
810 top: 50%;
811 left: 5%;
812 right: 5%;
813 transform: translateY(-50%);
814 border-radius: 10px;
815 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
816 }
817
818 .collections-filter {
819 max-height: calc(80vh - 60px); /* Account for header height */
820 }
821
822 .collection-item {
823 padding: 12px 15px;
824 min-height: 48px; /* Larger touch targets for mobile */
825 }
826
827 .collection-item-checkbox {
828 width: 24px; /* Larger checkbox for touch */
829 height: 24px;
830 margin-right: 15px;
831 }
832
833 .filter-header {
834 padding: 15px;
835 position: sticky;
836 top: 0;
837 background-color: var(--navbar-bg);
838 z-index: 2;
839 }
840
841 .select-all-button,
842 .deselect-all-button {
843 padding: 8px 12px;
844 min-height: 40px;
845 min-width: 80px;
846 }
847 }
848
849 @media (max-width: 480px) {
850 .collection-checkbox {
851 margin-right: 10px;
852 }
853
854 .user-header h1 {
855 font-size: 1.5rem;
856 }
857
858 .user-header h2 {
859 font-size: 1rem;
860 }
861
862 .user-did,
863 .user-endpoint {
864 font-size: 0.7rem;
865 }
866
867 /* Extra mobile optimizations for very small screens */
868 .filter-dropdown-menu.open {
869 left: 0;
870 right: 0;
871 top: 10%;
872 transform: none;
873 height: 80%;
874 max-height: none;
875 display: flex;
876 flex-direction: column;
877 }
878
879 .collections-filter {
880 flex: 1;
881 max-height: none;
882 -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
883 }
884
885 /* These styles are already handled by the main styles now */
886
887 .collection-item-name {
888 font-size: 0.9rem;
889 line-height: 1.3;
890 }
891 }
892
893/* Add these new styles for the improved UI */
894
895.search-container {
896 max-width: 1200px;
897 margin: 0 auto;
898 padding: 20px;
899}
900
901.feed-description {
902 margin-bottom: 20px;
903 color: #666;
904 font-size: 1rem;
905}
906
907.auth-warning {
908 background-color: #fff4e5;
909 border-left: 4px solid #ff9800;
910 padding: 12px 16px;
911 margin-bottom: 20px;
912 border-radius: 4px;
913}
914
915.auth-warning p {
916 margin: 0;
917 color: #884400;
918}
919
920.search-form {
921 margin-bottom: 20px;
922}
923
924.search-box {
925 display: flex;
926 gap: 10px;
927}
928
929.search-box input {
930 flex: 1;
931 padding: 10px 15px;
932 border: 1px solid #ddd;
933 border-radius: 4px;
934 font-size: 1rem;
935}
936
937.search-box button {
938 padding: 10px 20px;
939 color: white;
940 border: none;
941 border-radius: 4px;
942 cursor: pointer;
943 font-size: 1rem;
944 font-weight: 500;
945}
946
947.search-box button:hover {
948 background-color: #2980b9;
949}
950
951.search-box button:disabled {
952 background-color: #95a5a6;
953 cursor: not-allowed;
954}
955
956.error-message {
957 background-color: #fee;
958 border-left: 4px solid #e74c3c;
959 padding: 12px 16px;
960 margin-bottom: 20px;
961 border-radius: 4px;
962}
963
964.error-message p {
965 margin: 0 0 10px 0;
966 color: #c0392b;
967}
968
969.retry-button {
970 background-color: #e74c3c;
971 color: white;
972 border: none;
973 padding: 6px 12px;
974 border-radius: 4px;
975 cursor: pointer;
976 font-size: 0.9rem;
977}
978
979.retry-button:hover {
980 background-color: #c0392b;
981}
982
983.loading-indicator {
984 display: flex;
985 flex-direction: column;
986 align-items: center;
987 justify-content: center;
988 padding: 40px 0;
989}
990
991.spinner {
992 border: 4px solid rgba(0, 0, 0, 0.1);
993 border-radius: 50%;
994 border-top: 4px solid #3498db;
995 width: 40px;
996 height: 40px;
997 animation: spin 1s linear infinite;
998 margin-bottom: 20px;
999}
1000
1001@keyframes spin {
1002 0% { transform: rotate(0deg); }
1003 100% { transform: rotate(360deg); }
1004}
1005
1006.user-info {
1007 background-color: #fff;
1008 border-radius: 8px;
1009 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
1010 padding: 20px;
1011}
1012
1013.user-info h2 {
1014 margin-top: 0;
1015 border-bottom: 1px solid #eee;
1016 padding-bottom: 10px;
1017}
1018
1019.user-info .handle {
1020 font-weight: normal;
1021 color: #666;
1022 margin-left: 8px;
1023 font-size: 0.9em;
1024}
1025
1026.collections-meta {
1027 display: flex;
1028 justify-content: space-between;
1029 align-items: center;
1030 margin-bottom: 20px;
1031}
1032
1033.time-toggle {
1034 display: flex;
1035 align-items: center;
1036}
1037
1038.info-tooltip {
1039 position: relative;
1040 display: inline-block;
1041 width: 18px;
1042 height: 18px;
1043 background-color: #3498db;
1044 color: white;
1045 border-radius: 50%;
1046 text-align: center;
1047 margin-left: 8px;
1048 font-size: 12px;
1049 cursor: pointer;
1050}
1051
1052.tooltip-text {
1053 visibility: hidden;
1054 width: 250px;
1055 background-color: #333;
1056 color: #fff;
1057 text-align: center;
1058 border-radius: 6px;
1059 padding: 8px;
1060 position: absolute;
1061 z-index: 1;
1062 bottom: 125%;
1063 left: 50%;
1064 transform: translateX(-50%);
1065 opacity: 0;
1066 transition: opacity 0.3s;
1067 font-size: 0.8rem;
1068}
1069
1070.info-tooltip:hover .tooltip-text {
1071 visibility: visible;
1072 opacity: 1;
1073}
1074
1075.collections-filter {
1076 margin-bottom: 20px;
1077 background-color: #f9f9f9;
1078 border-radius: 6px;
1079 padding: 15px;
1080}
1081
1082.collections-filter h3 {
1083 margin-top: 0;
1084 margin-bottom: 10px;
1085}
1086
1087.filter-actions {
1088 display: flex;
1089 gap: 10px;
1090 margin-bottom: 15px;
1091}
1092
1093.filter-actions button {
1094 padding: 6px 12px;
1095 border: none;
1096 border-radius: 4px;
1097 background-color: #f1f1f1;
1098 cursor: pointer;
1099 font-size: 0.9rem;
1100}
1101
1102.filter-actions button:hover {
1103 background-color: #e5e5e5;
1104}
1105
1106.filter-actions button.refresh-button {
1107 margin-left: auto;
1108 background-color: #2ecc71;
1109 color: white;
1110}
1111
1112.filter-actions button.refresh-button:hover {
1113 background-color: #27ae60;
1114}
1115
1116.collections-list {
1117 display: grid;
1118 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1119 gap: 10px;
1120 max-height: 300px;
1121 overflow-y: auto;
1122}
1123
1124.collection-item {
1125 padding: 6px 10px;
1126 background-color: #fff;
1127 border-radius: 4px;
1128 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1129}
1130
1131.collection-item label {
1132 display: flex;
1133 align-items: center;
1134 cursor: pointer;
1135 font-size: 0.9rem;
1136}
1137
1138.collection-item input {
1139 margin-right: 8px;
1140}
1141
1142.chart-loading {
1143 display: flex;
1144 flex-direction: column;
1145 align-items: center;
1146 padding: 30px 0;
1147 background-color: #f9f9f9;
1148 border-radius: 6px;
1149 margin-bottom: 20px;
1150}
1151
1152.chart-container {
1153 margin-bottom: 20px;
1154}
1155
1156.feed-heading {
1157 border-bottom: 1px solid #eee;
1158 padding-bottom: 8px;
1159 margin-top: 30px;
1160}
1161
1162.no-records-message {
1163 padding: 20px;
1164 text-align: center;
1165 color: #666;
1166 background-color: #f9f9f9;
1167 border-radius: 6px;
1168 margin-top: 10px;
1169}
1170
1171.no-collections-selected {
1172 padding: 20px;
1173 text-align: center;
1174 color: #666;
1175 background-color: #f9f9f9;
1176 border-radius: 6px;
1177 margin-top: 20px;
1178}
1179
1180.load-more-container {
1181 display: flex;
1182 justify-content: center;
1183 margin: 20px 0;
1184}
1185
1186.load-more-button {
1187 padding: 10px 20px;
1188 background-color: #3498db;
1189 color: white;
1190 border: none;
1191 border-radius: 4px;
1192 cursor: pointer;
1193 font-size: 1rem;
1194}
1195
1196.load-more-button:hover {
1197 background-color: #2980b9;
1198}
1199
1200.load-more-button:disabled {
1201 background-color: #95a5a6;
1202 cursor: not-allowed;
1203}
1204
1205/* Debug panel styling */
1206.debug-controls {
1207 position: fixed;
1208 bottom: 20px;
1209 right: 20px;
1210 z-index: 1000;
1211}
1212
1213.debug-button {
1214 background-color: #333;
1215 color: white;
1216 border: none;
1217 border-radius: 4px;
1218 padding: 8px 12px;
1219 font-size: 12px;
1220 cursor: pointer;
1221 opacity: 0.7;
1222 transition: opacity 0.2s;
1223}
1224
1225.debug-button:hover {
1226 opacity: 1;
1227}
1228
1229.debug-panel {
1230 position: fixed;
1231 bottom: 60px;
1232 right: 20px;
1233 width: 400px;
1234 max-height: 600px;
1235 overflow-y: auto;
1236 background-color: #f5f5f5;
1237 border: 1px solid #ddd;
1238 border-radius: 6px;
1239 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
1240 z-index: 1001;
1241}
1242
1243.debug-header {
1244 display: flex;
1245 justify-content: space-between;
1246 align-items: center;
1247 padding: 10px 15px;
1248 background-color: #333;
1249 color: white;
1250 border-top-left-radius: 6px;
1251 border-top-right-radius: 6px;
1252}
1253
1254.debug-header h4 {
1255 margin: 0;
1256 font-size: 14px;
1257}
1258
1259.debug-header button {
1260 background: none;
1261 border: none;
1262 color: white;
1263 font-size: 12px;
1264 cursor: pointer;
1265 padding: 4px 8px;
1266}
1267
1268.debug-header button:hover {
1269 text-decoration: underline;
1270}
1271
1272.debug-panel pre {
1273 margin: 0;
1274 padding: 15px;
1275 font-family: monospace;
1276 font-size: 12px;
1277 overflow-x: auto;
1278 white-space: pre-wrap;
1279}
1280
1281/* Matter Loading Animation Container */
1282.matter-loading-container {
1283 display: flex;
1284 flex-direction: column;
1285 align-items: center;
1286 justify-content: center;
1287 min-height: 80vh;
1288 width: 100%;
1289}
1290
1291/* Add animation for content fade-in */
1292@keyframes fadeIn {
1293 from { opacity: 0; }
1294 to { opacity: 1; }
1295}
1296
1297.fade-in {
1298 animation: fadeIn 0.5s ease-in-out;
1299}