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 .quote-embed {
490 border: 1px solid #ddd;
491 border-radius: 8px;
492 background-color: #fbfcfd;
493 margin-top: 25px;
494 margin-bottom: 15px;
495 margin-left: 0px;
496 max-width: 800px;
497}
498
499.post .quote-embed .post {
500 margin-top: 16px;
501 padding-left: 16px;
502 padding-right: 16px;
503 padding-bottom: 5px;
504}
505
506.post .quote-embed .placeholder {
507 font-style: italic;
508 font-size: 11pt;
509 color: #888;
510}
511
512.post-quotes .post-quote .quote-embed {
513 display: none;
514}
515
516.post-quotes .post-quote p.stats {
517 display: none;
518}
519
520.post .image-alt {
521 font-size: 11pt;
522 color: #666;
523 margin-bottom: 20px;
524}
525
526.post .image-alt summary {
527 font-size: 11pt;
528 color: #666;
529 margin-bottom: 5px;
530 user-select: none;
531 -webkit-user-select: none;
532 cursor: default;
533}
534
535.post.blocked p, .post.blocked a {
536 font-size: 11pt;
537 color: #666;
538}
539
540.post.blocked .blocked-header i {
541 margin-right: 2px;
542}
543
544.post.muted > h2, .post.muted > .content > details > p, .post.muted > .content > details summary {
545 opacity: 0.3;
546}
547
548.post.muted > h2 {
549 font-weight: 600;
550}
551
552.post.muted details {
553 margin-top: 12px;
554 margin-bottom: 10px;
555}
556
557.post.muted details summary {
558 font-size: 10pt;
559 user-select: none;
560 -webkit-user-select: none;
561 cursor: default;
562}
563
564.post a.link-card {
565 display: block;
566 position: relative;
567 max-width: 500px;
568 margin-bottom: 12px;
569}
570
571.post a.link-card:hover {
572 text-decoration: none;
573}
574
575.post a.link-card > div {
576 background-color: #fcfcfd;
577 border: 1px solid #d8d8d8;
578 border-radius: 8px;
579 padding: 11px 15px;
580}
581
582.post a.link-card:hover > div {
583 background-color: #f6f7f8;
584 border: 1px solid #c8c8c8;
585}
586
587.post a.link-card > div:not(:has(p.description)) {
588 padding-bottom: 14px;
589}
590
591.post a.link-card p.domain {
592 color: #888;
593 font-size: 10pt;
594 margin-top: 1px;
595 margin-bottom: 5px;
596}
597
598.post a.link-card h2 {
599 color: #333;
600 margin-top: 8px;
601}
602
603.post a.link-card p.description {
604 color: #666;
605 font-size: 11pt;
606 margin-top: 8px;
607 margin-bottom: 4px;
608 line-height: 135%;
609}
610
611.post a.link-card.record > div:has(.avatar) {
612 padding-left: 65px;
613}
614
615.post a.link-card.record h2 {
616 margin-top: 3px;
617}
618
619.post a.link-card.record .handle {
620 color: #666;
621 margin-left: 5px;
622}
623
624.post a.link-card.record .avatar {
625 width: 36px;
626 height: 36px;
627 border: 1px solid #ddd;
628 border-radius: 6px;
629 position: absolute;
630 top: 15px;
631 left: 15px;
632}
633
634.post a.link-card.record .stats {
635 margin-top: 9px;
636 margin-bottom: 1px;
637}
638
639.post a.link-card.record .stats i.fa-heart:hover {
640 color: #aaa;
641}
642
643.post div.gif img {
644 user-select: none;
645 -webkit-user-select: none;
646}
647
648.post div.gif img.static {
649 opacity: 0.75;
650}
651
652.post .stats {
653 font-size: 10pt;
654 color: #666;
655}
656
657.post .stats a {
658 color: #666;
659 text-decoration: none;
660}
661
662.post .stats a:hover {
663 text-decoration: underline;
664}
665
666.post .stats i {
667 font-size: 9pt;
668 color: #888;
669}
670
671.post .stats i.fa-heart {
672 color: #aaa;
673}
674
675.post .stats i.fa-heart.liked {
676 color: #e03030;
677}
678
679.post .stats i.fa-heart:hover {
680 color: #888;
681 cursor: pointer;
682}
683
684.post .stats i.fa-heart.liked:hover {
685 color: #c02020;
686}
687
688.post .stats span {
689 margin-right: 10px;
690}
691
692.post .stats .blocked-info {
693 color: #a02020;
694 font-weight: bold;
695 margin-left: 5px;
696}
697
698.post img.loader {
699 width: 24px;
700 animation: rotation 3s infinite linear;
701 margin-top: 5px;
702}
703
704.post .tags a {
705 background-color: hsl(210, 90%, 97%);
706 border: 1px solid hsl(215, 90%, 85%);
707 border-radius: 6px;
708 padding: 3px 7px;
709 margin-right: 5px;
710 font-size: 10pt;
711 color: #333;
712}
713
714.post .tags a:hover {
715 text-decoration: none;
716 background-color: hsl(210, 90%, 93%);
717}
718
719.post p.hidden-replies {
720 margin-top: 20px;
721 font-size: 11pt;
722}
723
724.post p.hidden-replies a {
725 font-size: 12pt;
726 color: saddlebrown;
727}
728
729.post p.missing-replies-info {
730 font-size: 11pt;
731 color: darkred;
732 margin-top: 25px;
733}
734
735#posting_stats_page {
736 display: none;
737}
738
739#posting_stats_page input[type="radio"] {
740 position: relative;
741 top: -1px;
742 margin-left: 5px;
743}
744
745#posting_stats_page input[type="radio"] + label {
746 user-select: none;
747 -webkit-user-select: none;
748}
749
750#posting_stats_page input[type="radio"]:disabled + label {
751 color: #999;
752}
753
754#posting_stats_page input[type="range"] {
755 width: 250px;
756 vertical-align: middle;
757}
758
759#posting_stats_page input[type="submit"] {
760 font-size: 12pt;
761 margin: 5px 0px;
762 padding: 5px 10px;
763}
764
765#posting_stats_page select {
766 font-size: 12pt;
767 margin-left: 5px;
768}
769
770#posting_stats_page progress {
771 width: 300px;
772 margin-left: 10px;
773 vertical-align: middle;
774 display: none;
775}
776
777#posting_stats_page .list-choice {
778 display: none;
779}
780
781#posting_stats_page .user-choice {
782 display: none;
783 position: relative;
784}
785
786#posting_stats_page .user-choice input {
787 width: 260px;
788 font-size: 11pt;
789}
790
791#posting_stats_page .user-choice .autocomplete {
792 display: none;
793 position: absolute;
794 left: 0;
795 top: 0;
796 margin-top: 4px;
797 width: 350px;
798 max-height: 250px;
799 overflow-y: auto;
800 background-color: white;
801 border: 1px solid #ccc;
802 z-index: 10;
803}
804
805#posting_stats_page .user-choice .selected-users {
806 width: 275px;
807 height: 150px;
808 overflow-y: auto;
809 border: 1px solid #aaa;
810 padding: 4px;
811 margin-top: 20px;
812}
813
814#posting_stats_page .user-choice .user-row {
815 position: relative;
816 padding: 2px 4px 2px 37px;
817 cursor: pointer;
818}
819
820#posting_stats_page .user-choice .user-row .avatar {
821 position: absolute;
822 left: 6px;
823 top: 8px;
824 width: 24px;
825 border-radius: 12px;
826}
827
828#posting_stats_page .user-choice .user-row span {
829 display: block;
830 overflow-x: hidden;
831 text-overflow: ellipsis;
832}
833
834#posting_stats_page .user-choice .user-row .name {
835 font-size: 11pt;
836 margin-top: 1px;
837 margin-bottom: 1px;
838}
839
840#posting_stats_page .user-choice .user-row .handle {
841 font-size: 10pt;
842 margin-bottom: 2px;
843 color: #666;
844}
845
846#posting_stats_page .user-choice .autocomplete .user-row {
847 cursor: pointer;
848}
849
850#posting_stats_page .user-choice .autocomplete .user-row.hover {
851 background-color: hsl(207, 100%, 85%);
852}
853
854#posting_stats_page .user-choice .selected-users .user-row span {
855 padding-right: 14px;
856}
857
858#posting_stats_page .user-choice .selected-users .user-row .remove {
859 position: absolute;
860 right: 4px;
861 top: 11px;
862 padding: 0px 4px;
863 color: #333;
864 line-height: 17px;
865}
866
867#posting_stats_page .user-choice .selected-users .user-row .remove:hover {
868 text-decoration: none;
869 background-color: #ddd;
870 border-radius: 8px;
871}
872
873#posting_stats_page .scan-info {
874 display: none;
875 font-weight: 600;
876 line-height: 125%;
877 margin: 20px 0px;
878}
879
880#posting_stats_page .scan-result {
881 border: 1px solid #333;
882 border-collapse: collapse;
883 display: none;
884}
885
886#posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
887 border: 1px solid #333;
888}
889
890#posting_stats_page .scan-result td {
891 text-align: right;
892 padding: 5px 8px;
893}
894
895#posting_stats_page .scan-result th {
896 text-align: center;
897 background-color: hsl(207, 100%, 86%);
898 padding: 7px 10px;
899}
900
901#posting_stats_page .scan-result td.handle {
902 text-align: left;
903 max-width: 450px;
904 overflow: hidden;
905 text-overflow: ellipsis;
906 white-space: nowrap;
907}
908
909#posting_stats_page .scan-result tr.total td {
910 font-weight: bold;
911 font-size: 11pt;
912 background-color: hsla(207, 100%, 86%, 0.4);
913}
914
915#posting_stats_page .scan-result tr.total td.handle {
916 text-align: left;
917 padding: 10px 12px;
918}
919
920#posting_stats_page .scan-result .avatar {
921 width: 24px;
922 height: 24px;
923 border-radius: 14px;
924 vertical-align: middle;
925 margin-right: 2px;
926 padding: 2px;
927}
928
929#posting_stats_page .scan-result td.no {
930 font-weight: bold;
931}
932
933#posting_stats_page .scan-result td.percent {
934 min-width: 70px;
935}
936
937#like_stats_page {
938 display: none;
939}
940
941#like_stats_page input[type="range"] {
942 width: 250px;
943 vertical-align: middle;
944}
945
946#like_stats_page input[type="submit"] {
947 font-size: 12pt;
948 margin: 5px 0px;
949 padding: 5px 10px;
950}
951
952#like_stats_page progress {
953 width: 300px;
954 margin-left: 10px;
955 vertical-align: middle;
956 display: none;
957}
958
959#like_stats_page .scan-result {
960 border: 1px solid #333;
961 border-collapse: collapse;
962 display: none;
963 float: left;
964 margin-top: 20px;
965 margin-bottom: 40px;
966}
967
968#like_stats_page .given-likes {
969 margin-right: 100px;
970}
971
972#like_stats_page .scan-result td, #like_stats_page .scan-result th {
973 border: 1px solid #333;
974 padding: 5px 10px;
975}
976
977#like_stats_page .scan-result th {
978 text-align: center;
979 background-color: hsl(207, 100%, 86%);
980 padding: 12px 10px;
981}
982
983#like_stats_page .scan-result td.no {
984 font-weight: bold;
985 text-align: right;
986}
987
988#like_stats_page .scan-result td.handle {
989 width: 280px;
990}
991
992#like_stats_page .scan-result td.count {
993 padding: 5px 15px;
994}
995
996#like_stats_page .scan-result .avatar {
997 width: 24px;
998 height: 24px;
999 border-radius: 14px;
1000 vertical-align: middle;
1001 margin-right: 2px;
1002 padding: 2px;
1003}
1004
1005#private_search_page {
1006 display: none;
1007}
1008
1009#private_search_page input[type="range"] {
1010 width: 250px;
1011 vertical-align: middle;
1012}
1013
1014#private_search_page input[type="submit"] {
1015 font-size: 12pt;
1016 margin: 5px 0px;
1017 padding: 5px 10px;
1018}
1019
1020#private_search_page progress {
1021 width: 300px;
1022 margin-left: 10px;
1023 vertical-align: middle;
1024 display: none;
1025}
1026
1027#private_search_page .search {
1028 display: none;
1029}
1030
1031#private_search_page .search-query {
1032 font-size: 12pt;
1033 border: 1px solid #ccc;
1034 border-radius: 6px;
1035 padding: 5px 6px;
1036 margin-left: 8px;
1037}
1038
1039@media (prefers-color-scheme: dark) {
1040 body {
1041 background-color: rgb(39, 39, 37);
1042 color: #eee;
1043 }
1044
1045 a {
1046 color: rgb(0, 133, 255);
1047 }
1048
1049 a:visited {
1050 color: rgb(0, 133, 255);
1051 }
1052
1053 #loader {
1054 filter: invert();
1055 }
1056
1057 #search form {
1058 border-color: hsl(210, 40%, 60%);
1059 }
1060
1061 #search form input {
1062 background-color: transparent;
1063 }
1064
1065 #account_menu {
1066 background: hsl(210, 33.33%, 94.0%);
1067 border-color: #ccc;
1068 }
1069
1070 #account_menu li a {
1071 color: #333;
1072 border-color: #bbb;
1073 background-color: hsla(210, 100%, 4%, 0.12);
1074 }
1075
1076 #account_menu li a:hover {
1077 background-color: hsla(210, 100%, 4%, 0.2);
1078 }
1079
1080 #login {
1081 background-color: rgba(240, 240, 240, 0.15);
1082 }
1083
1084 #login form {
1085 border-color: hsl(210, 20%, 40%);
1086 background-color: hsl(210, 12%, 25%);
1087 }
1088
1089 #login .close {
1090 color: hsl(210, 20%, 50%);
1091 opacity: 0.6;
1092 }
1093
1094 #login .close:hover {
1095 color: hsl(210, 20%, 50%);
1096 opacity: 1.0;
1097 }
1098
1099 #login p.info a {
1100 color: #888;
1101 }
1102
1103 #login input[type="text"], #login input[type="password"] {
1104 border-color: #666;
1105 }
1106
1107 #login input[type="submit"] {
1108 border-color: hsl(210, 15%, 40%);
1109 background-color: hsl(210, 12%, 35%);
1110 }
1111
1112 #login input[type="submit"]:active {
1113 border-color: hsl(210, 15%, 35%);
1114 background-color: hsl(210, 12%, 30%);
1115 }
1116
1117 #login #cloudy {
1118 color: hsl(210, 60%, 75%);
1119 }
1120
1121 #login .info-box {
1122 border-color: hsl(45, 100%, 45%);
1123 background-color: hsl(50, 40%, 30%);
1124 }
1125
1126 #login .info-box a {
1127 color: hsl(45, 100%, 50%);
1128 }
1129
1130 #github {
1131 filter: invert();
1132 }
1133
1134 .back, .back a {
1135 color: #888;
1136 }
1137
1138 p.back i {
1139 color: #888;
1140 }
1141
1142 .post h2 .handle {
1143 color: #888;
1144 }
1145
1146 .post h2 .separator {
1147 color: #888;
1148 }
1149
1150 .post h2 .time {
1151 color: #aaa;
1152 }
1153
1154 .post h2 .action {
1155 color: #888;
1156 }
1157
1158 .post .quote-embed {
1159 background-color: #303030;
1160 border-color: #606060;
1161 }
1162
1163 .post .image-alt, .post .image-alt summary {
1164 color: #999;
1165 }
1166
1167 .post.blocked p, .post.blocked a {
1168 color: #aaa;
1169 }
1170
1171 .post .edge .line {
1172 border-left-color: #666;
1173 }
1174
1175 .post .edge:hover .line {
1176 border-left-color: #888;
1177 }
1178
1179 .post .plus {
1180 filter: invert();
1181 }
1182
1183 .post .stats {
1184 color: #aaa;
1185 }
1186
1187 .post .stats i {
1188 color: #888;
1189 }
1190
1191 .post .stats i.fa-heart {
1192 color: #aaa;
1193 }
1194
1195 .post .stats i.fa-heart.liked {
1196 color: #f04040;
1197 }
1198
1199 .post .stats i.fa-heart:hover {
1200 color: #eee;
1201 }
1202
1203 .post .stats i.fa-heart.liked:hover {
1204 color: #ff7070;
1205 }
1206
1207 #posting_stats_page input:disabled + label {
1208 color: #777;
1209 }
1210
1211 #posting_stats_page .user-choice .autocomplete {
1212 background-color: hsl(210, 5%, 18%);
1213 border-color: #4b4b4b;
1214 }
1215
1216 #posting_stats_page .user-choice .selected-users {
1217 border-color: #666;
1218 }
1219
1220 #posting_stats_page .user-choice .user-row .handle {
1221 color: #888;
1222 }
1223
1224 #posting_stats_page .user-choice .autocomplete .user-row.hover {
1225 background-color: hsl(207, 90%, 25%);
1226 }
1227
1228 #posting_stats_page .user-choice .selected-users .user-row .remove {
1229 color: #aaa;
1230 }
1231
1232 #posting_stats_page .user-choice .selected-users .user-row .remove:hover {
1233 background-color: #555;
1234 color: #bbb;
1235 }
1236
1237 #posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
1238 border-color: #888;
1239 }
1240
1241 #posting_stats_page .scan-result th {
1242 background-color: hsl(207, 90%, 25%);
1243 }
1244
1245 #posting_stats_page .scan-result tr.total td {
1246 background-color: hsla(207, 90%, 25%, 0.4);
1247 }
1248
1249 #like_stats_page .scan-result, #like_stats_page .scan-result td, #like_stats_page .scan-result th {
1250 border-color: #888;
1251 }
1252
1253 #like_stats_page .scan-result th {
1254 background-color: hsl(207, 90%, 25%);
1255 }
1256
1257 #private_search_page .search-query {
1258 border: 1px solid #666;
1259 }
1260}