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