Thread viewer for Bluesky
mackuba.eu
1:root {
2 color-scheme: light dark;
3 supported-color-schemes: light dark;
4}
5
6@keyframes rotation {
7 from {
8 transform: rotate(0deg);
9 }
10 to {
11 transform: rotate(360deg);
12 }
13}
14
15body {
16 width: 960px;
17 margin: 0px auto 40px;
18 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
19 text-rendering: optimizeLegibility;
20 -webkit-font-smoothing: antialiased;
21 overflow-y: scroll;
22}
23
24a {
25 text-decoration: none;
26 color: rgb(0, 0, 255);
27}
28
29a:hover {
30 text-decoration: underline;
31}
32
33a:visited {
34 color: rgb(0, 0, 255);
35}
36
37#github {
38 position: fixed;
39 bottom: 10px;
40 right: 10px;
41 z-index: 10;
42}
43
44#github img {
45 width: 20px;
46 opacity: 0.4;
47}
48
49#github a:hover img {
50 opacity: 0.6;
51}
52
53#search {
54 visibility: hidden;
55 position: fixed;
56 top: 0;
57 bottom: 0;
58 left: 0;
59 right: 0;
60 display: flex;
61 align-items: center;
62 justify-content: center;
63 padding-bottom: 5%;
64}
65
66#search form {
67 border: 2px solid hsl(210, 100%, 80%);
68 border-radius: 10px;
69 padding: 15px 20px;
70 margin-left: 50px;
71}
72
73#search input {
74 font-size: 16pt;
75 width: 600px;
76 border: 0;
77 margin-left: 8px;
78}
79
80#search input:focus {
81 outline: none;
82}
83
84#account {
85 position: fixed;
86 top: 10px;
87 left: 10px;
88 line-height: 24px;
89 z-index: 20;
90 user-select: none;
91 -webkit-user-select: none;
92}
93
94#account i {
95 opacity: 0.4;
96}
97
98#account i:hover {
99 cursor: pointer;
100 opacity: 0.6;
101}
102
103#account img.avatar {
104 width: 24px;
105 height: 24px;
106 border-radius: 13px;
107 box-shadow: 0px 0px 2px black;
108}
109
110#account_menu {
111 position: fixed;
112 visibility: hidden;
113 top: 5px;
114 left: 5px;
115 padding-top: 30px;
116 z-index: 15;
117 background: hsl(210, 33.33%, 94.0%);
118 border: 1px solid #ccc;
119 border-radius: 5px;
120 user-select: none;
121 -webkit-user-select: none;
122}
123
124#account_menu ul {
125 list-style-type: none;
126 margin: 0px 0px 10px;
127 padding: 6px 11px;
128}
129
130#account_menu li a[data-action] {
131 display: inline-block;
132 color: #333;
133 font-size: 11pt;
134 border: 1px solid #bbb;
135 padding: 3px 5px;
136 margin-top: 8px;
137 border-radius: 5px;
138 background-color: hsla(210, 100%, 4%, 0.12);
139}
140
141#account_menu li a[data-action]:hover {
142 background-color: hsla(210, 100%, 4%, 0.2);
143 text-decoration: none;
144}
145
146#account_menu li:not(.link) + li.link {
147 margin-top: 16px;
148 padding-top: 10px;
149 border-top: 1px solid #ccc;
150}
151
152#account_menu li.link {
153 margin-top: 8px;
154 margin-left: 2px;
155}
156
157#account_menu li.link a {
158 font-size: 11pt;
159 color: #333;
160}
161
162#account_menu li .check {
163 display: none;
164}
165
166.dialog {
167 visibility: hidden;
168 position: fixed;
169 top: 0;
170 bottom: 0;
171 left: 0;
172 right: 0;
173 display: flex;
174 align-items: center;
175 justify-content: center;
176 padding-bottom: 5%;
177 z-index: 10;
178 background-color: rgba(240, 240, 240, 0.4);
179}
180
181.dialog.expanded {
182 padding-bottom: 0;
183}
184
185.dialog form {
186 position: relative;
187 border: 2px solid hsl(210, 100%, 85%);
188 background-color: hsl(210, 100%, 98%);
189 border-radius: 10px;
190 padding: 15px 25px;
191}
192
193.dialog .close {
194 position: absolute;
195 top: 5px;
196 right: 5px;
197 color: hsl(210, 100%, 75%);
198 opacity: 0.6;
199}
200
201.dialog .close:hover {
202 color: hsl(210, 100%, 65%);
203 opacity: 1.0;
204}
205
206.dialog p {
207 text-align: center;
208 line-height: 125%;
209}
210
211.dialog h2 {
212 font-size: 13pt;
213 font-weight: 600;
214 text-align: center;
215 margin-bottom: 25px;
216 padding-right: 10px;
217}
218
219.dialog p.submit {
220 margin-top: 25px;
221}
222
223.dialog p.info {
224 font-size: 9pt;
225}
226
227.dialog p.info a {
228 color: #666;
229}
230
231.dialog input[type="text"], .dialog input[type="password"] {
232 width: 200px;
233 font-size: 11pt;
234 border: 1px solid #d6d6d6;
235 border-radius: 4px;
236 padding: 5px 6px;
237 margin: 0px 15px;
238}
239
240.dialog input[type="submit"] {
241 width: 150px;
242 font-size: 11pt;
243 border: 1px solid hsl(210, 90%, 85%);
244 background-color: hsl(210, 100%, 92%);
245 border-radius: 4px;
246 padding: 5px 6px;
247}
248
249.dialog input[type="submit"]:hover {
250 background-color: hsl(210, 100%, 90%);
251 border: 1px solid hsl(210, 90%, 82%);
252}
253
254.dialog input[type="submit"]:active {
255 background-color: hsl(210, 100%, 87%);
256 border: 1px solid hsl(210, 90%, 80%);
257}
258
259#login #cloudy {
260 color: hsl(210, 60%, 75%);
261 margin: 14px 0px;
262 display: none;
263}
264
265#login .info-box {
266 display: none;
267 border: 1px solid hsl(45, 100%, 60%);
268 background-color: hsl(50, 100%, 96%);
269 width: 360px;
270 font-size: 11pt;
271 border-radius: 6px;
272}
273
274#login.expanded .info-box {
275 display: block;
276}
277
278#login .info-box p {
279 margin: 15px 15px;
280 text-align: left;
281}
282
283#biohazard_dialog form {
284 width: 400px;
285}
286
287#biohazard_dialog p.submit {
288 margin-top: 40px;
289 margin-bottom: 20px;
290}
291
292#biohazard_dialog input[type="submit"] {
293 width: 180px;
294 margin-left: 5px;
295 margin-right: 5px;
296}
297
298#loader {
299 display: none;
300 position: fixed;
301 top: 0;
302 bottom: 0;
303 left: 0;
304 right: 0;
305 margin: auto;
306 width: 36px;
307 height: 36px;
308}
309
310#loader img {
311 width: 36px;
312 animation: rotation 3s infinite linear;
313}
314
315#thread {
316 padding-top: 1px;
317}
318
319#thread.overlay {
320 filter: blur(8px);
321}
322
323#thread header h2 {
324 margin-left: 20px;
325 margin-top: 40px;
326 margin-bottom: 50px;
327 font-size: 18pt;
328}
329
330#thread.quotes .post {
331 padding-bottom: 5px;
332}
333
334#thread.hashtag .post {
335 padding-bottom: 10px;
336 border-bottom: 1px solid #ddd;
337}
338
339#thread.notifications .post {
340 padding-bottom: 4px;
341 border-bottom: 1px solid #ddd;
342 margin-top: 24px;
343}
344
345#thread.notifications .back {
346 margin-left: 22px;
347 margin-bottom: -12px;
348 margin-top: 15px;
349}
350
351#thread.notifications .back, #thread.notifications .back a {
352 font-size: 10pt;
353}
354
355#thread.notifications .back i {
356 font-size: 9pt;
357 margin-right: 2px;
358}
359
360#thread + p.note {
361 margin-top: 30px;
362 margin-left: 15px;
363 font-size: 11pt;
364 color: #666;
365}
366
367.back, .back a {
368 font-size: 11pt;
369 color: #666;
370}
371
372.back i {
373 margin-right: 2px;
374}
375
376p.back i {
377 font-size: 10pt;
378 color: #888;
379 margin-right: 5px;
380}
381
382.post {
383 position: relative;
384 padding-left: 21px;
385 margin-top: 30px;
386}
387
388.post .edge {
389 position: absolute;
390 left: -2px;
391 top: 30px;
392 bottom: 0px;
393 width: 6px;
394}
395
396.post .edge .line {
397 position: absolute;
398 left: 2px;
399 top: 0px;
400 bottom: 0px;
401 border-left: 1px solid #aaa;
402}
403
404.post .edge:hover .line {
405 border-left: 2px solid #888;
406}
407
408.post .plus {
409 position: absolute;
410 top: 8px;
411 left: -6px;
412 width: 14px;
413}
414
415.post.collapsed .line {
416 display: none;
417}
418
419.post.collapsed .content {
420 display: none;
421}
422
423.post.flat {
424 padding-left: 0px;
425 margin-top: 25px;
426}
427
428.post.flat > .margin {
429 display: none;
430}
431
432.post .avatar {
433 width: 32px;
434 height: 32px;
435 border-radius: 16px;
436 vertical-align: middle;
437 margin-bottom: 3px;
438 margin-right: 8px;
439}
440
441.post .missing {
442 color: #aaa;
443 background-color: #eee;
444 border-radius: 16px;
445 vertical-align: middle;
446 margin-right: 8px;
447}
448
449.post.muted .missing {
450 color: #bbb;
451}
452
453.post h2 {
454 font-size: 12pt;
455 margin-bottom: 0;
456}
457
458.post h2 .handle {
459 color: #888;
460 font-weight: normal;
461 font-size: 11pt;
462 vertical-align: text-top;
463}
464
465.post h2 .separator, .post .blocked-header .separator, .blocked-header .separator {
466 color: #888;
467 font-weight: normal;
468 font-size: 11pt;
469 vertical-align: text-top;
470}
471
472.post h2 .time {
473 color: #666;
474 font-weight: normal;
475 font-size: 10pt;
476 vertical-align: text-top;
477}
478
479.post h2 .action, .post .blocked-header .action, .blocked-header .action {
480 color: #888;
481 font-weight: normal;
482 font-size: 10pt;
483 vertical-align: text-top;
484}
485
486.post h2 .action:hover, .post .blocked-header .action:hover, .blocked-header .action:hover {
487 color: #444;
488}
489
490.post h2 img.mastodon {
491 width: 15px;
492 position: relative;
493 top: 2px;
494 margin-left: 3px;
495}
496
497.post p {
498 margin-top: 10px;
499}
500
501.post div.body p + p {
502 margin-top: 18px;
503}
504
505.post .body .highlight {
506 background-color: rgba(255, 255, 0, 0.75);
507 padding: 1px 2px;
508 margin-left: -1px;
509 margin-right: -1px;
510}
511
512.post .quote-embed {
513 border: 1px solid #ddd;
514 border-radius: 8px;
515 background-color: #fbfcfd;
516 margin-top: 25px;
517 margin-bottom: 15px;
518 margin-left: 0px;
519 max-width: 800px;
520}
521
522.post .quote-embed .post {
523 margin-top: 16px;
524 padding-left: 16px;
525 padding-right: 16px;
526 padding-bottom: 5px;
527}
528
529.post .quote-embed .placeholder {
530 font-style: italic;
531 font-size: 11pt;
532 color: #888;
533}
534
535.post-quotes .post-quote .quote-embed {
536 display: none;
537}
538
539.post-quotes .post-quote p.stats {
540 display: none;
541}
542
543.post .image-alt {
544 font-size: 11pt;
545 color: #666;
546 margin-bottom: 20px;
547}
548
549.post .image-alt summary {
550 font-size: 11pt;
551 color: #666;
552 margin-bottom: 5px;
553 user-select: none;
554 -webkit-user-select: none;
555 cursor: default;
556}
557
558.post.blocked p, .post.blocked a {
559 font-size: 11pt;
560 color: #666;
561}
562
563.post.blocked .blocked-header i {
564 margin-right: 2px;
565}
566
567.post.muted > h2, .post.muted > .content > details > p, .post.muted > .content > details summary {
568 opacity: 0.3;
569}
570
571.post.muted > h2 {
572 font-weight: 600;
573}
574
575.post.muted details {
576 margin-top: 12px;
577 margin-bottom: 10px;
578}
579
580.post.muted details summary {
581 font-size: 10pt;
582 user-select: none;
583 -webkit-user-select: none;
584 cursor: default;
585}
586
587.post a.link-card {
588 display: block;
589 position: relative;
590 max-width: 500px;
591 margin-bottom: 12px;
592}
593
594.post a.link-card:hover {
595 text-decoration: none;
596}
597
598.post a.link-card > div {
599 background-color: #fcfcfd;
600 border: 1px solid #d8d8d8;
601 border-radius: 8px;
602 padding: 11px 15px;
603}
604
605.post a.link-card:hover > div {
606 background-color: #f6f7f8;
607 border: 1px solid #c8c8c8;
608}
609
610.post a.link-card > div:not(:has(p.description)) {
611 padding-bottom: 14px;
612}
613
614.post a.link-card p.domain {
615 color: #888;
616 font-size: 10pt;
617 margin-top: 1px;
618 margin-bottom: 5px;
619}
620
621.post a.link-card h2 {
622 color: #333;
623 margin-top: 8px;
624}
625
626.post a.link-card p.description {
627 color: #666;
628 font-size: 11pt;
629 margin-top: 8px;
630 margin-bottom: 4px;
631 line-height: 135%;
632}
633
634.post a.link-card.record > div:has(.avatar) {
635 padding-left: 65px;
636}
637
638.post a.link-card.record h2 {
639 margin-top: 3px;
640}
641
642.post a.link-card.record .handle {
643 color: #666;
644 margin-left: 5px;
645}
646
647.post a.link-card.record .avatar {
648 width: 36px;
649 height: 36px;
650 border: 1px solid #ddd;
651 border-radius: 6px;
652 position: absolute;
653 top: 15px;
654 left: 15px;
655}
656
657.post a.link-card.record .stats {
658 margin-top: 9px;
659 margin-bottom: 1px;
660}
661
662.post a.link-card.record .stats i.fa-heart:hover {
663 color: #aaa;
664}
665
666.post a.fedi-link {
667 display: inline-block;
668 margin-bottom: 6px;
669 margin-top: 2px;
670}
671
672.post a.fedi-link:hover {
673 text-decoration: none;
674}
675
676.post a.fedi-link > div {
677 border: 1px solid #d0d0d0;
678 border-radius: 8px;
679 padding: 5px 9px;
680 color: #555;
681 font-size: 10pt;
682}
683
684.post a.fedi-link i {
685 margin-right: 3px;
686}
687
688.post a.fedi-link:hover > div {
689 background-color: #f6f7f8;
690 border: 1px solid #c8c8c8;
691}
692
693.post div.gif img {
694 user-select: none;
695 -webkit-user-select: none;
696}
697
698.post div.gif img.static {
699 opacity: 0.75;
700}
701
702.post .stats {
703 font-size: 10pt;
704 color: #666;
705}
706
707.post .stats a {
708 color: #666;
709 text-decoration: none;
710}
711
712.post .stats a:hover {
713 text-decoration: underline;
714}
715
716.post .stats i {
717 font-size: 9pt;
718 color: #888;
719}
720
721.post .stats i.fa-heart {
722 color: #aaa;
723}
724
725.post .stats i.fa-heart.liked {
726 color: #e03030;
727}
728
729.post .stats i.fa-heart:hover {
730 color: #888;
731 cursor: pointer;
732}
733
734.post .stats i.fa-heart.liked:hover {
735 color: #c02020;
736}
737
738.post .stats span {
739 margin-right: 10px;
740}
741
742.post .stats .blocked-info {
743 color: #a02020;
744 font-weight: bold;
745 margin-left: 5px;
746}
747
748.post img.loader {
749 width: 24px;
750 animation: rotation 3s infinite linear;
751 margin-top: 5px;
752}
753
754.post .tags a {
755 background-color: hsl(210, 90%, 97%);
756 border: 1px solid hsl(215, 90%, 85%);
757 border-radius: 6px;
758 padding: 3px 7px;
759 margin-right: 5px;
760 font-size: 10pt;
761 color: #333;
762}
763
764.post .tags a:hover {
765 text-decoration: none;
766 background-color: hsl(210, 90%, 93%);
767}
768
769.post p.hidden-replies {
770 margin-top: 20px;
771 font-size: 11pt;
772}
773
774.post p.hidden-replies a {
775 font-size: 12pt;
776 color: saddlebrown;
777}
778
779.post p.missing-replies-info {
780 font-size: 11pt;
781 color: darkred;
782 margin-top: 25px;
783}
784
785#posting_stats_page {
786 display: none;
787}
788
789#posting_stats_page input[type="radio"] {
790 position: relative;
791 top: -1px;
792 margin-left: 5px;
793}
794
795#posting_stats_page input[type="radio"] + label {
796 user-select: none;
797 -webkit-user-select: none;
798}
799
800#posting_stats_page input[type="radio"]:disabled + label {
801 color: #999;
802}
803
804#posting_stats_page input[type="range"] {
805 width: 250px;
806 vertical-align: middle;
807}
808
809#posting_stats_page input[type="submit"] {
810 font-size: 12pt;
811 margin: 5px 0px;
812 padding: 5px 10px;
813}
814
815#posting_stats_page select {
816 font-size: 12pt;
817 margin-left: 5px;
818}
819
820#posting_stats_page progress {
821 width: 300px;
822 margin-left: 10px;
823 vertical-align: middle;
824 display: none;
825}
826
827#posting_stats_page .list-choice {
828 display: none;
829}
830
831#posting_stats_page .user-choice {
832 display: none;
833 position: relative;
834}
835
836#posting_stats_page .user-choice input {
837 width: 260px;
838 font-size: 11pt;
839}
840
841#posting_stats_page .user-choice .autocomplete {
842 display: none;
843 position: absolute;
844 left: 0;
845 top: 0;
846 margin-top: 4px;
847 width: 350px;
848 max-height: 250px;
849 overflow-y: auto;
850 background-color: white;
851 border: 1px solid #ccc;
852 z-index: 10;
853}
854
855#posting_stats_page .user-choice .selected-users {
856 width: 275px;
857 height: 150px;
858 overflow-y: auto;
859 border: 1px solid #aaa;
860 padding: 4px;
861 margin-top: 20px;
862}
863
864#posting_stats_page .user-choice .user-row {
865 position: relative;
866 padding: 2px 4px 2px 37px;
867 cursor: pointer;
868}
869
870#posting_stats_page .user-choice .user-row .avatar {
871 position: absolute;
872 left: 6px;
873 top: 8px;
874 width: 24px;
875 border-radius: 12px;
876}
877
878#posting_stats_page .user-choice .user-row span {
879 display: block;
880 overflow-x: hidden;
881 text-overflow: ellipsis;
882}
883
884#posting_stats_page .user-choice .user-row .name {
885 font-size: 11pt;
886 margin-top: 1px;
887 margin-bottom: 1px;
888}
889
890#posting_stats_page .user-choice .user-row .handle {
891 font-size: 10pt;
892 margin-bottom: 2px;
893 color: #666;
894}
895
896#posting_stats_page .user-choice .autocomplete .user-row {
897 cursor: pointer;
898}
899
900#posting_stats_page .user-choice .autocomplete .user-row.hover {
901 background-color: hsl(207, 100%, 85%);
902}
903
904#posting_stats_page .user-choice .selected-users .user-row span {
905 padding-right: 14px;
906}
907
908#posting_stats_page .user-choice .selected-users .user-row .remove {
909 position: absolute;
910 right: 4px;
911 top: 11px;
912 padding: 0px 4px;
913 color: #333;
914 line-height: 17px;
915}
916
917#posting_stats_page .user-choice .selected-users .user-row .remove:hover {
918 text-decoration: none;
919 background-color: #ddd;
920 border-radius: 8px;
921}
922
923#posting_stats_page .scan-info {
924 display: none;
925 font-weight: 600;
926 line-height: 125%;
927 margin: 20px 0px;
928}
929
930#posting_stats_page .scan-result {
931 border: 1px solid #333;
932 border-collapse: collapse;
933 display: none;
934}
935
936#posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
937 border: 1px solid #333;
938}
939
940#posting_stats_page .scan-result td {
941 text-align: right;
942 padding: 5px 8px;
943}
944
945#posting_stats_page .scan-result th {
946 text-align: center;
947 background-color: hsl(207, 100%, 86%);
948 padding: 7px 10px;
949}
950
951#posting_stats_page .scan-result td.handle {
952 text-align: left;
953 max-width: 450px;
954 overflow: hidden;
955 text-overflow: ellipsis;
956 white-space: nowrap;
957}
958
959#posting_stats_page .scan-result tr.total td {
960 font-weight: bold;
961 font-size: 11pt;
962 background-color: hsla(207, 100%, 86%, 0.4);
963}
964
965#posting_stats_page .scan-result tr.total td.handle {
966 text-align: left;
967 padding: 10px 12px;
968}
969
970#posting_stats_page .scan-result .avatar {
971 width: 24px;
972 height: 24px;
973 border-radius: 14px;
974 vertical-align: middle;
975 margin-right: 2px;
976 padding: 2px;
977}
978
979#posting_stats_page .scan-result td.no {
980 font-weight: bold;
981}
982
983#posting_stats_page .scan-result td.percent {
984 min-width: 70px;
985}
986
987#like_stats_page {
988 display: none;
989}
990
991#like_stats_page input[type="range"] {
992 width: 250px;
993 vertical-align: middle;
994}
995
996#like_stats_page input[type="submit"] {
997 font-size: 12pt;
998 margin: 5px 0px;
999 padding: 5px 10px;
1000}
1001
1002#like_stats_page progress {
1003 width: 300px;
1004 margin-left: 10px;
1005 vertical-align: middle;
1006 display: none;
1007}
1008
1009#like_stats_page .scan-result {
1010 border: 1px solid #333;
1011 border-collapse: collapse;
1012 display: none;
1013 float: left;
1014 margin-top: 20px;
1015 margin-bottom: 40px;
1016}
1017
1018#like_stats_page .given-likes {
1019 margin-right: 100px;
1020}
1021
1022#like_stats_page .scan-result td, #like_stats_page .scan-result th {
1023 border: 1px solid #333;
1024 padding: 5px 10px;
1025}
1026
1027#like_stats_page .scan-result th {
1028 text-align: center;
1029 background-color: hsl(207, 100%, 86%);
1030 padding: 12px 10px;
1031}
1032
1033#like_stats_page .scan-result td.no {
1034 font-weight: bold;
1035 text-align: right;
1036}
1037
1038#like_stats_page .scan-result td.handle {
1039 width: 280px;
1040}
1041
1042#like_stats_page .scan-result td.count {
1043 padding: 5px 15px;
1044}
1045
1046#like_stats_page .scan-result .avatar {
1047 width: 24px;
1048 height: 24px;
1049 border-radius: 14px;
1050 vertical-align: middle;
1051 margin-right: 2px;
1052 padding: 2px;
1053}
1054
1055#private_search_page {
1056 display: none;
1057}
1058
1059#private_search_page input[type="range"] {
1060 width: 250px;
1061 vertical-align: middle;
1062}
1063
1064#private_search_page input[type="submit"] {
1065 font-size: 12pt;
1066 margin: 5px 0px;
1067 padding: 5px 10px;
1068}
1069
1070#private_search_page progress {
1071 width: 300px;
1072 margin-left: 10px;
1073 vertical-align: middle;
1074 display: none;
1075}
1076
1077#private_search_page .search {
1078 display: none;
1079}
1080
1081#private_search_page .search-query {
1082 font-size: 12pt;
1083 border: 1px solid #ccc;
1084 border-radius: 6px;
1085 padding: 5px 6px;
1086 margin-left: 8px;
1087}
1088
1089#private_search_page .search-collections label {
1090 vertical-align: middle;
1091}
1092
1093#private_search_page .lycan-import {
1094 display: none;
1095
1096 margin-top: 30px;
1097 border-top: 1px solid #ccc;
1098 padding-top: 5px;
1099}
1100
1101#private_search_page .lycan-import form p {
1102 line-height: 135%;
1103}
1104
1105#private_search_page .lycan-import .import-progress progress {
1106 margin-left: 0;
1107 margin-right: 6px;
1108}
1109
1110#private_search_page .lycan-import .import-progress progress + output {
1111 font-size: 11pt;
1112}
1113
1114#private_search_page .results {
1115 margin-top: 30px;
1116}
1117
1118#private_search_page .results > .post {
1119 margin-left: -15px;
1120 padding-left: 15px;
1121 border-bottom: 1px solid #ddd;
1122 padding-bottom: 10px;
1123 margin-top: 24px;
1124}
1125
1126#private_search_page .results-end {
1127 font-size: 12pt;
1128 color: #333;
1129}
1130
1131#private_search_page .post + .results-end {
1132 font-size: 11pt;
1133}
1134
1135@media (prefers-color-scheme: dark) {
1136 body {
1137 background-color: rgb(39, 39, 37);
1138 color: #eee;
1139 }
1140
1141 a {
1142 color: rgb(0, 133, 255);
1143 }
1144
1145 a:visited {
1146 color: rgb(0, 133, 255);
1147 }
1148
1149 #loader {
1150 filter: invert();
1151 }
1152
1153 #search form {
1154 border-color: hsl(210, 40%, 60%);
1155 }
1156
1157 #search form input {
1158 background-color: transparent;
1159 }
1160
1161 #account.active {
1162 color: #333;
1163 }
1164
1165 #account_menu {
1166 background: hsl(210, 33.33%, 94.0%);
1167 border-color: #ccc;
1168 }
1169
1170 #account_menu li a[data-action] {
1171 color: #333;
1172 border-color: #bbb;
1173 background-color: hsla(210, 100%, 4%, 0.12);
1174 }
1175
1176 #account_menu li a[data-action]:hover {
1177 background-color: hsla(210, 100%, 4%, 0.2);
1178 }
1179
1180 #login {
1181 background-color: rgba(240, 240, 240, 0.15);
1182 }
1183
1184 #login form {
1185 border-color: hsl(210, 20%, 40%);
1186 background-color: hsl(210, 12%, 25%);
1187 }
1188
1189 #login .close {
1190 color: hsl(210, 20%, 50%);
1191 opacity: 0.6;
1192 }
1193
1194 #login .close:hover {
1195 color: hsl(210, 20%, 50%);
1196 opacity: 1.0;
1197 }
1198
1199 #login p.info a {
1200 color: #888;
1201 }
1202
1203 #login input[type="text"], #login input[type="password"] {
1204 border-color: #666;
1205 }
1206
1207 #login input[type="submit"] {
1208 border-color: hsl(210, 15%, 40%);
1209 background-color: hsl(210, 12%, 35%);
1210 }
1211
1212 #login input[type="submit"]:active {
1213 border-color: hsl(210, 15%, 35%);
1214 background-color: hsl(210, 12%, 30%);
1215 }
1216
1217 #login #cloudy {
1218 color: hsl(210, 60%, 75%);
1219 }
1220
1221 #login .info-box {
1222 border-color: hsl(45, 100%, 45%);
1223 background-color: hsl(50, 40%, 30%);
1224 }
1225
1226 #login .info-box a {
1227 color: hsl(45, 100%, 50%);
1228 }
1229
1230 #github {
1231 filter: invert();
1232 }
1233
1234 .back, .back a {
1235 color: #888;
1236 }
1237
1238 p.back i {
1239 color: #888;
1240 }
1241
1242 .post h2 .handle {
1243 color: #888;
1244 }
1245
1246 .post h2 .separator {
1247 color: #888;
1248 }
1249
1250 .post h2 .time {
1251 color: #aaa;
1252 }
1253
1254 .post h2 .action {
1255 color: #888;
1256 }
1257
1258 .post .body .highlight {
1259 background-color: rgba(255, 255, 0, 0.35);
1260 }
1261
1262 .post .quote-embed {
1263 background-color: #303030;
1264 border-color: #606060;
1265 }
1266
1267 .post .image-alt, .post .image-alt summary {
1268 color: #999;
1269 }
1270
1271 .post.blocked p, .post.blocked a {
1272 color: #aaa;
1273 }
1274
1275 .post .edge .line {
1276 border-left-color: #666;
1277 }
1278
1279 .post .edge:hover .line {
1280 border-left-color: #888;
1281 }
1282
1283 .post .plus {
1284 filter: invert();
1285 }
1286
1287 .post .stats {
1288 color: #aaa;
1289 }
1290
1291 .post .stats i {
1292 color: #888;
1293 }
1294
1295 .post .stats i.fa-heart {
1296 color: #aaa;
1297 }
1298
1299 .post .stats i.fa-heart.liked {
1300 color: #f04040;
1301 }
1302
1303 .post .stats i.fa-heart:hover {
1304 color: #eee;
1305 }
1306
1307 .post .stats i.fa-heart.liked:hover {
1308 color: #ff7070;
1309 }
1310
1311 .post a.link-card > div {
1312 background-color: #303030;
1313 border-color: #606060;
1314 }
1315
1316 .post a.link-card:hover > div {
1317 background-color: #383838;
1318 border-color: #707070;
1319 }
1320
1321 .post a.link-card p.domain {
1322 color: #666;
1323 }
1324
1325 .post a.link-card h2 {
1326 color: #ccc;
1327 }
1328
1329 .post a.link-card p.description {
1330 color: #888;
1331 }
1332
1333 .post a.link-card.record .handle {
1334 color: #666;
1335 }
1336
1337 .post a.link-card.record .avatar {
1338 border-color: #888;
1339 }
1340
1341 .post a.link-card.record .stats i.fa-heart:hover {
1342 color: #eee;
1343 }
1344
1345 .post a.fedi-link > div {
1346 border-color: #606060;
1347 color: #909090;
1348 }
1349
1350 .post a.fedi-link:hover > div {
1351 background-color: #444;
1352 border-color: #909090;
1353 }
1354
1355 #posting_stats_page input:disabled + label {
1356 color: #777;
1357 }
1358
1359 #posting_stats_page .user-choice .autocomplete {
1360 background-color: hsl(210, 5%, 18%);
1361 border-color: #4b4b4b;
1362 }
1363
1364 #posting_stats_page .user-choice .selected-users {
1365 border-color: #666;
1366 }
1367
1368 #posting_stats_page .user-choice .user-row .handle {
1369 color: #888;
1370 }
1371
1372 #posting_stats_page .user-choice .autocomplete .user-row.hover {
1373 background-color: hsl(207, 90%, 25%);
1374 }
1375
1376 #posting_stats_page .user-choice .selected-users .user-row .remove {
1377 color: #aaa;
1378 }
1379
1380 #posting_stats_page .user-choice .selected-users .user-row .remove:hover {
1381 background-color: #555;
1382 color: #bbb;
1383 }
1384
1385 #posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
1386 border-color: #888;
1387 }
1388
1389 #posting_stats_page .scan-result th {
1390 background-color: hsl(207, 90%, 25%);
1391 }
1392
1393 #posting_stats_page .scan-result tr.total td {
1394 background-color: hsla(207, 90%, 25%, 0.4);
1395 }
1396
1397 #like_stats_page .scan-result, #like_stats_page .scan-result td, #like_stats_page .scan-result th {
1398 border-color: #888;
1399 }
1400
1401 #like_stats_page .scan-result th {
1402 background-color: hsl(207, 90%, 25%);
1403 }
1404
1405 #private_search_page .search-query {
1406 border: 1px solid #666;
1407 }
1408
1409 #private_search_page .lycan-import {
1410 border-top-color: #888;
1411 }
1412
1413 #private_search_page .results-end {
1414 color: #888;
1415 }
1416
1417 #private_search_page .results > .post {
1418 border-bottom: 1px solid #555;
1419 }
1420}