jbc.lol
unoffical wafrn mirror
wafrn.net
atproto
social-network
activitypub
1# Theme template for WAFRN
2
3## Small rickroll detector
4
5Add this to detect rickrolls
6
7```css
8a[href*="dQw4w9WgXcQ"]::before {
9 content: "this is a rickroll → ";
10 color: red;
11 background-color: white;
12 border-radius: 5px;
13 padding: 2px;
14}
15```
16
17### Initial template made by [@vegeta@app.wafrn.net](https://app.wafrn.net/blog/vegeta)
18
19This is a theme that adds colored boxes arround everything so you can see what youre touching
20
21````
22/* !!!!!!! this first bit puts boxes around everything so you can see what you're clicking on when you're inspecting elements. it is turned off by default but it might help you get your bearings maybe !!!!!!!
23
24* {
25 border-radius:0px !IMPORTANT;
26 border-width:1px;
27 border-color:limegreen;
28 border-style:dotted;
29}
30
31*/
32
33/* FONT OVERRIDE (keep or change if u like it, remove for default fonts) + no rounded corners anywhere */
34
35* {
36font-family: Roboto, sans-serif !important;
37font-feature-settings: normal !important;
38border-radius:0px !important;
39}
40
41
42/* VARIABLES */
43
44:root {
45 /* ELEMENT VARIABLES */
46
47 --main-bgcolor: maroon;
48
49 --main-textcolor: white;
50
51 --container-bordercolor: black;
52
53 --link-textcolor: yellow;
54
55 --link-textcolor-hover: violet;
56
57 --link-textcolor-visited: limegreen;
58
59 --button-bgcolor: skyblue;
60
61 --button-bgcolor-hover: powderblue;
62
63 --button-accent-color: red;
64
65 --button-accent-color-hover: hotpink;
66
67 --element-bgcolor: midnightblue;
68
69 --username-textcolor: orange;
70
71 --username-textcolor-hover: white;
72
73 --url-textcolor: cyan;
74
75 --popup-textcolor: black;
76
77 --popup-bgcolor: white;
78
79 --color-trans: 0.37s cubic-bezier(0.77, 0, 0.23, 1);
80
81 --image-transoff: 0.37s cubic-bezier(0.88, 0.52, 0.48, 1);
82
83 --image-trans: 0.37s cubic-bezier(0.81, -0.19, 0.27, 0.34);
84
85 --mat-sys-outline: limegreen;
86 /* ^ this changes the color of the timestamp text/associated icon on posts*/
87
88 --mat-badge-background-color: cyan;
89 --mat-badge-text-color: black;
90 /* ^ these two change your "notifications" number indicator */
91
92 --mat-mdc-tooltip-trigger: black;
93 /* ^ idk what this is */
94}
95
96.mdc-button__label {
97color: var(--button-accent-color);
98}
99
100/* DASHBOARD BACKGROUND */
101
102.mat-drawer-content {
103 background-color: var(--main-bgcolor) !important;
104}
105/* ^ you can put an image here [and a lot of other places] with background-image: url('url.webp');. use a link to a file you have uploaded directly to wafrn*/
106
107
108/* SIDE MENU */
109
110.instance-logo {
111 content: url('https://cdn.wafrn.net/api/cache/?media=https%3A%2F%2Fmedia.wafrn.net%2F1744521263201_d70c7598612dfe44bc84463de9ce6c4900c3c390_processed.webp');
112 }
113/* ^ use a wafrn upload link here too */
114
115.mat-drawer-inner-container {
116background-color:black;
117}
118mat-nav-list {
119background-color:black;
120}
121/* ^ side menu container and buttons [respectively]. idk what the rest below do just leave them off or keep digging*/
122
123/*
124
125mat-drawer.side-menu {}
126
127img[alt="instance logo"] {}
128
129mat-drawer.side-menu hr {}
130
131mat-nav-list {}
132
133mat-nav-list app-menu-item {}
134
135*/
136
137/* BUTTONS - these may be overwritten by the class of the button, see below */
138
139button {
140 background: var(--element-bgcolor);
141 color: var(--main-textcolor);
142 border-color: var(--button-accent-color);
143 border-style: solid;
144 border-width: 0px;
145 border-radius: 0px;
146 transition: var(--color-trans);
147}
148
149button:hover {
150 background: var(--element-bgcolor);
151 color: var(--button-accent-color);
152 border-color: var(--button-accent-color-hover);
153 border-style: dotted;
154 border-width: 0px;
155 border-radius: 0px;
156 transition: var(--color-trans);
157}
158
159button:active {
160 background: var(--element-bgcolor);
161 color: var(--button-accent-color);
162 border-color: var(--button-accent-color-hover);
163 border-style: dashed;
164 border-width: 0px;
165 border-radius: 0px;
166 transition: var(--color-trans);
167}
168
169/* BUTTONS - use these i think */
170
171.mat-mdc-unelevated-button.mat-primary {
172 background-color: var(--button-bgcolor) !important;
173 border-color: var(--button-accent-color);
174 border-width: 2px;
175 color: var(--main-textcolor);
176 transition: var(--color-trans);
177}
178
179.mat-mdc-unelevated-button.mat-primary:hover {
180 background-color: var(--button-bgcolor-hover) !important;
181 border-color: var(--button-accent-color-hover);
182 color: var(--main-textcolor);
183 border-width: 0px;
184 transition: var(--color-trans);
185}
186
187.mat-mdc-unelevated-button {
188 background-color: var(--button-bgcolor) !important;
189 border-color: var(--button-accent-color);
190 border-width: 0px;
191 color: var(--main-textcolor);
192 transition: var(--color-trans);
193}
194
195.mat-mdc-unelevated-button:hover {
196 background-color: var(--button-bgcolor-hover) !important;
197 border-color: var(--button-accent-color-hover);
198 color: var(--main-textcolor);
199 border-width: 0px;
200 transition: var(--color-trans);
201}
202
203/* ^ ALT TEXT / SENSITIVE MEDIA / NOTES ETC COLOR */
204
205/* UNIVERSAL WAFRN CONTAINER */
206.wafrn-container {
207 background-color: var(--element-bgcolor) !important;
208 color: var(--main-textcolor);
209 border-radius: 0px;
210 border-width: 0px;
211 border-style: solid;
212 border-color: var(--container-bordercolor);
213 box-shadow: none;
214}
215
216/* POPUP TOOLTIPS */
217
218.mdc-tooltip__surface {
219 background-color: var(--popup-bgcolor) !important;
220
221 color: var(--popup-textcolor) !important;
222
223 border-radius: 2px;
224}
225
226/* POSTS */
227
228/* POST CONTAINER */
229
230.mat-mdc-card {
231 color: var(--main-textcolor);
232
233 border-radius: 2px;
234
235 border-color: var(--button-accent-color);
236
237 box-shadow: none;
238}
239
240/* POST TEXT */
241
242div.wafrn-text-default {
243 color: var(--main-textcolor);
244
245 font-family: Georgia, serif;
246}
247
248/* LINK TEXT */
249
250a {
251 color: var(--link-textcolor);
252 transition: var(--color-trans);
253}
254
255a:visited {
256 color: var(--link-textcolor-visited);
257}
258
259a:hover {
260 color: var(--link-textcolor-hover);
261 transition: var(--color-trans);
262}
263
264a:active {
265 color: var(--link-textcolor-hover);
266}
267
268
269/* DIVIDER LINE */
270
271app-post hr {
272 border-color: var(--button-bgcolor) !important;
273 border-width: 2px;
274}
275
276/* POST DATE - you can use these i think but use mat-sys-outline at the top to change both at once*/
277
278/*
279
280div.date-line {}
281
282svg.fa-globe {}
283
284*/
285
286/* POSTER INFO */
287
288.original-poster-name {
289 color: var(--username-textcolor) !important;
290
291 transition: var(--color-trans);
292}
293
294.original-poster-name:hover {
295 color: var(--username-textcolor-hover) !important;
296
297 transition: var(--color-trans);
298}
299
300.original-poster-url {
301 color: var(--url-textcolor);
302
303 font-family: monospace;
304}
305
306.avatar {
307 height: 45px;
308
309 width: 45px;
310}
311
312.avatar img {
313 border-radius: 3px;
314
315 height: 45px;
316
317 width: 45px;
318}
319
320.user-name {
321 color: var(--username-textcolor) !important;
322
323 transition: var(--color-trans);
324}
325
326.user-name:hover {
327 color: var(--username-textcolor-hover) !important;
328
329 transition: var(--color-trans);
330}
331
332span.user-url {
333 color: var(--url-textcolor);
334
335 font-family: monospace;
336}
337
338/* FOLLOW BUTTON */
339
340button.follow-button {
341 background: none !important;
342
343 color: #69f0ae !important;
344
345 border: none !important;
346
347 transition: var(--color-trans);
348}
349
350button.follow-button:hover {
351 background: none !important;
352
353 color: var(--link-textcolor-hover) !important;
354
355 border: none !important;
356
357 transition: var(--color-trans);
358}
359
360/* CONTENT WARNING */
361
362#fragment-content-warning {
363 color: var(--main-textcolor);
364 background-color: var(--main-bgcolor);
365 font-family: monospace;
366}
367
368div.fragment-content-warning div.fragment-content {
369background-color: var(--main-bgcolor);
370}
371
372div.fragment-content-warning button {
373background-color: var(--element-bgcolor);
374border-color: var(--link-textcolor-visited);
375}
376
377
378/* REACTS */
379
380/* i have the backgrounds on all these set transparent. they can be a little finicky. button settings change these */
381
382#emoji-reactions {
383 background:none !important;
384 box-shadow:none !important;
385 border-width: 0px !important;
386
387 transition: var(--color-trans);
388}
389
390#emoji-reactions button:hover {
391 background:none !important;
392 box-shadow:none !important;
393 transition: var(--color-trans);
394}
395
396#emoji-reactions .mat-mdc-tooltip-trigger {
397background: none !important;
398box-shadow:none !important;
399border-radius:0px;
400}
401
402#emoji-reactions .mat-mdc-tooltip-trigger:hover {
403background: none !important;
404 box-shadow:none !important;
405border-radius:0px;
406}
407
408.mat-mdc-raised-button:not(:disabled) {
409 background:none !important;
410 box-shadow:none !important;
411}
412
413/* ^ this is for the stubborn ones */
414
415.mat-mdc-button-persistent-ripple {
416 color: black !important;
417 box-shadow:none !important;
418background:none;
419}
420
421/* ^ ??? */
422
423app-emoji-react svg {
424 fill: var(--link-textcolor);
425 background: none !important;
426 transition: var(--color-trans);
427}
428
429app-emoji-react svg:hover {
430 fill: var(--link-textcolor-hover);
431 background: none !important;
432 transition: var(--color-trans);
433}
434
435/* ^ these two change the color of the emoji react button itself, like the smiley with the plus */
436
437/*
438
439div.emojireact-overlay {}
440
441*/
442
443/* TAGS */
444
445a.tag {
446 background-color: var(--element-bgcolor) !important;
447
448 color: var(--link-textcolor) !important;
449
450 transition: var(--color-trans);
451
452 font-family: monospace;
453}
454
455a.tag:hover {
456 color: var(--link-textcolor-hover) !important;
457
458 transition: var(--color-trans);
459}
460
461.ql-snow a {
462 color: white;
463}
464
465/* ^ changes inline bsky etc. tags*/
466
467
468/* MENTIONS */
469
470a.mention {
471 color: black !important;
472 transition: var(--color-trans);
473}
474
475a.mention:hover {
476 color: red !important;
477 transition: var(--color-trans);
478}
479
480.mention {
481background-color: hotpink !important;
482border-width: 0px !important;
483border-radius: 0px !important;
484}
485
486/* container of quoted post */
487
488div.quoted-post {
489 border-width: 0px;
490 background:none;
491 border-color: var(--button-accent-color);
492 border-style: dotted;
493 box-shadow: none;
494}
495
496/* EMBED CONTAINER */
497
498.embed-container {
499background: rgba(255,255,255, 1);
500display:inline;
501}
502
503/* ^ INLINE STACKS PICTURE ON TOP OF LINK TEXT */
504
505.embed-link {
506background: #CBD0F9;
507background: linear-gradient(0deg,rgba(203, 208, 249, 1) 0%, rgba(134, 145, 242, 1) 50%, rgba(91, 97, 162, 1) 100%);
508border-style:groove;
509border-width:2px;
510border-color:black;
511border:radius:0px;
512}
513
514.embed-text {
515background-color:white;
516border-style:groove;
517border-width:2px;
518border-color:black;
519border:radius:0px;
520}
521
522.embed-title, .embed-description, .embed-link, .embed-url {
523color:black !important;
524}
525
526/* MEDIA CONTAINER */
527
528.media-content-container {
529background-color: var(--button-bgcolor) !important;
530}
531
532.media-container {
533background-color: var(--button-bgcolor) !important;
534border-style:groove;
535border-width:0px;
536border-radius:0px;
537border-color:black;
538display: grid;
539}
540
541.media-gallery, .media-carousel {
542background-color: var(--main-bgcolor) !important;
543border-radius:0px;
544margin-left: auto;
545margin-right: auto;
546}
547
548/* IMAGES */
549
550app-wafrn-media img {
551 filter: brightness(0.7);
552 transition: var(--image-transoff);
553}
554
555app-wafrn-media img:hover {
556 filter: brightness(1);
557 transition: var(--image-trans);
558}
559
560/* MEDIA DESCRIPTION */
561
562app-wafrn-media div.media-description {
563 background-color: var(--element-bgcolor) !important;
564 border-radius: 0px;
565 font-family: monospace;
566 font-size: 11px;
567}
568
569/* VOTING [lol] */
570
571/*
572
573.mdc-linear-progress__bar-inner {}
574.mdc-linear-progress__buffer-bar {}
575
576*/
577
578
579/* POST SHARE */
580
581app-post-actions button:hover {
582 background: none !important;
583 border-width: 0px;
584}
585
586svg.fa-share-nodes {
587 color: var(--button-accent-color);
588 transition: var(--color-trans);
589}
590
591svg.fa-share-nodes:hover {
592 color: var(--button-accent-color-hover);
593 transition: var(--color-trans);
594}
595
596svg.fa-chevron-down {
597 color: var(--button-accent-color);
598 transition: var(--color-trans);
599}
600
601svg.fa-chevron-down:hover {
602 color: var(--button-accent-color-hover);
603 transition: var(--color-trans);
604}
605
606/* SHARE DROPDOWN */
607
608.mat-mdc-menu-panel {
609 color: var(--link-textcolor);
610 background-color: var(--main-bgcolor);
611 box-shadow: none !important;
612}
613
614/* POST ACTIONS [??] */
615
616/*
617
618app-post hr > div a {}
619
620app-post hr > div a:hover {}
621
622*/
623
624/* USE THIS TO CHANGE ALL FA-ICONS AT ONCE, individual settings below for post options. turned off by default and i dont know the rest of them */
625
626fa-icon {
627 color: mediumvioletred;
628 transition: var(--color-trans);
629}
630
631fa-icon:hover {
632 color: white;
633 transition: var(--color-trans);
634}
635
636/*
637
638fa-icon[mattooltip="Quote woot"] {
639 color: var(--main-textcolor);
640
641 transition: var(--color-trans);
642}
643
644fa-icon[mattooltip="Quote woot"]:hover {
645 color: var(--main-textcolor);
646
647 transition: var(--color-trans);
648}
649
650fa-icon[mattooltip="Quick rewoot"] {
651 color: var(--main-textcolor);
652
653 transition: var(--color-trans);
654}
655
656fa-icon[mattooltip="Quick rewoot"]:hover {
657 color: var(--main-textcolor);
658
659 transition: var(--color-trans);
660}
661
662fa-icon[mattooltip="Delete rewoot"] {
663 color: var(--main-textcolor);
664
665 transition: var(--color-trans);
666}
667
668fa-icon[mattooltip="Delete rewoot"]:hover {
669 color: var(--main-textcolor);
670
671 transition: var(--color-trans);
672}
673
674fa-icon[mattooltip="Reply woot"] {
675 color: var(--main-textcolor);
676
677 transition: var(--color-trans);
678}
679
680fa-icon[mattooltip="Reply woot"]:hover {
681 color: var(--main-textcolor);
682
683 transition: var(--color-trans);
684}
685
686fa-icon[mattooltip="Like woot"] {
687 color: var(--main-textcolor);
688
689 transition: var(--color-trans);
690}
691
692fa-icon[mattooltip="Like woot"]:hover {
693 color: var(--main-textcolor);
694
695 transition: var(--color-trans);
696}
697
698fa-icon[mattooltip="Remove like"] {
699 color: var(--main-textcolor);
700
701 transition: var(--color-trans);
702}
703
704fa-icon[mattooltip="Remove like"]:hover {
705 color: var(--main-textcolor);
706
707 transition: var(--color-trans);
708}
709
710fa-icon[mattooltip="Delete woot"] {
711 color: var(--main-textcolor);
712
713 transition: var(--color-trans);
714}
715
716fa-icon[mattooltip="Delete woot"]:hover {
717 color: var(--main-textcolor);
718
719 transition: var(--color-trans);
720}
721
722*\
723
724/* TEXT EDITOR */
725
726.mat-mdc-dialog-container, .mdc-dialog--open, .mat-mdc-dialog-inner-container, .mdc-dialog--open, .mat-mdc-dialog-surface {
727background-color: var(--main-bgcolor) !important;
728border-radius:0px !important;
729}
730.mat-mdc-dialog-container {
731background-color: var(--element-bgcolor);
732border-width:4px;
733border-radius:0px;
734border-style: groove;
735border-color:black;
736}
737
738/* ^ container box */
739
740.mdc-floating-label {
741color:white !important;
742}
743.mdc-text-field {
744background-color: navy;
745border-color: white !important;
746border-radius: 0px !important;
747}
748
749/* ^ typing field */
750
751
752/* PROFILE */
753
754/*
755
756app-view-blog mat-card.wafrn-container {}
757
758app-view-blog img[alt="user avatar"] {}
759
760*/
761
762/* UNFOLLOW BUTTON */
763
764.mat-mdc-unelevated-button.mat-warn {
765 color: var(--main-textcolor);
766
767 background-color: #f44336;
768
769 transition: var(--color-trans);
770}
771
772.mat-mdc-unelevated-button.mat-warn:hover {
773 background-color: #f44336;
774
775 transition: var(--color-trans);
776}
777
778/* FOLLOW COUNT */
779
780/*
781
782div.follow-counts {}
783
784*/
785
786/*EXTRA STUFF*/
787
788code {
789 display: inline;
790 padding: 0 .2em;
791 background-color: white;
792 color: black;
793 border-style:groove;
794 border-width:2px;
795 border-color:black;border:radius:0px;
796}
797
798pre {
799 display: inline;
800 padding: 0 .2em;
801 background-color: white;
802 color: black;
803 border-style:groove;
804 border-width:2px;
805 border-color:black;border:radius:0px;
806}
807
808
809/*^ markdown stuff */
810
811
812/* LOADING - not quite sure this works */
813
814mat-spinner {
815 width: 42px;
816
817 height: 42px;
818}
819
820circle {
821 color: var(--button-accent-color) !important;
822
823 stroke-dasharray: 77px;
824
825 stroke-width: 33px;
826}
827
828p#if-you-see-this-load-more-posts {
829 color: var(--main-textcolor);
830}
831
832.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label {
833color: white !important;
834}
835.mdc-text-field--filled:not(.mdc-text-field--disabled) {
836background-color: navy !important;
837border-color: white !important;
838border-radius: 0px !important;
839}
840
841/* ^ changes the theme editor */
842```
843
844
845### Initial template made by [@fizzyday@app.wafrn.net](https://app.wafrn.net/blog/fizzyday)
846
847Here is a theming template you can use to customize the appearance of your profile and how the dashboard appears to you.
848
849It is not complete, nor perfect, but the most important elements are there, have fun playing with it :)
850
851Watch out for when you copy the CSS into wafrn, it changes the double-space indentations to single spaces, you may have to correct that manually for it to work.
852
853Feel free to leave any improvement as a PR, or any issue in the issues section
854
855```css
856/* VARIABLES */
857
858:root {
859 /* ELEMENT VARIABLES */
860
861 --main-bgcolor: #212121;
862
863 --main-textcolor: white;
864
865 --container-bordercolor: none;
866
867 --link-textcolor: #38fef1;
868
869 --link-textcolor-hover: #38fef1;
870
871 --link-textcolor-visited: #38fef1;
872
873 --button-bgcolor: #424242;
874
875 --button-bgcolor-hover: #424242;
876
877 --button-accent-color: #69f0ae;
878
879 --button-accent-color-hover: #69f0ae;
880
881 --element-bgcolor: #424242;
882
883 --username-textcolor: #38fef1;
884
885 --username-textcolor-hover: #38fef1;
886
887 --url-textcolor: #38fef1;
888
889 --popup-textcolor: white;
890
891 --popup-bgcolor: #424242;
892
893 --color-trans: 0.37s cubic-bezier(0.77, 0, 0.23, 1);
894
895 --image-transoff: 0.37s cubic-bezier(0.88, 0.52, 0.48, 1);
896
897 --image-trans: 0.37s cubic-bezier(0.81, -0.19, 0.27, 0.34);
898}
899
900/* BACKGROUND */
901
902.mat-drawer-content {
903 background-color: var(--main-bgcolor) !important;
904}
905
906/* LINKS */
907
908a {
909 color: var(--link-textcolor);
910
911 transition: var(--color-trans);
912}
913
914a:visited {
915 color: var(--link-textcolor-visited);
916}
917
918a:hover {
919 color: var(--link-textcolor-hover);
920
921 transition: var(--color-trans);
922}
923
924a:active {
925 color: var(--link-textcolor-hover);
926}
927
928/* BUTTONS - these may be overwritten by the class of the button, see below */
929
930button {
931 background-color: var(--button-bgcolor);
932
933 color: var(--main-textcolor);
934
935 border-color: var(--button-accent-color);
936
937 border-style: solid;
938
939 border-width: 0px;
940
941 border-radius: 3px;
942
943 color: var(--main-textcolor);
944
945 transition: var(--color-trans);
946}
947
948button:hover {
949 background-color: var(--button-bgcolor-hover);
950
951 color: var(button-accent-color);
952
953 border-color: var(--button-accent-color-hover);
954
955 border-style: solid;
956
957 border-width: 0px;
958
959 border-radius: 3px;
960
961 color: var(--main-textcolor);
962
963 transition: var(--color-trans);
964}
965
966button:active {
967 background-color: var(--button-bgcolor-hover);
968
969 color: var(button-accent-color);
970
971 border-color: var(--button-accent-color-hover);
972
973 border-style: solid;
974
975 border-width: 0px;
976
977 border-radius: 3px;
978
979 color: var(--main-textcolor);
980
981 transition: var(--color-trans);
982}
983
984/* SIDE MENU */
985
986/*
987
988mat-drawer.side-menu {}
989
990img[alt="instance logo"] {}
991
992mat-drawer.side-menu hr {}
993
994mat-nav-list {}
995
996mat-nav-list app-menu-item {}
997
998*/
999
1000/* DASHBOARD TITLE */
1001
1002div.wafrn-container.mx-1 {
1003 display: none;
1004
1005 background-color: var(--main-bgcolor);
1006}
1007
1008div.wafrn-container.mx-1 h3 {
1009 display: none;
1010
1011 font-family: sans-serif;
1012}
1013
1014/* BUTTONS - use these i think */
1015
1016.mat-mdc-unelevated-button.mat-primary {
1017 background-color: var(--button-bgcolor);
1018
1019 border-color: var(--button-accent-color);
1020
1021 border-width: 0px;
1022
1023 color: var(--main-textcolor);
1024
1025 transition: var(--color-trans);
1026}
1027
1028.mat-mdc-unelevated-button.mat-primary:hover {
1029 background-color: var(--button-bgcolor-hover);
1030
1031 border-color: var(--button-accent-color-hover);
1032
1033 color: var(--main-textcolor);
1034
1035 border-width: 0px;
1036
1037 transition: var(--color-trans);
1038}
1039
1040.mat-mdc-unelevated-button {
1041 background-color: var(--button-bgcolor);
1042
1043 border-color: var(--button-accent-color);
1044
1045 border-width: 0px;
1046
1047 color: var(--main-textcolor);
1048
1049 transition: var(--color-trans);
1050}
1051
1052.mat-mdc-unelevated-button:hover {
1053 background-color: var(--button-bgcolor-hover);
1054
1055 border-color: var(--button-accent-color-hover);
1056
1057 color: var(--main-textcolor);
1058
1059 border-width: 0px;
1060
1061 transition: var(--color-trans);
1062}
1063
1064button[aria-label="Go back to the dashboard"] {
1065 background-color: var(--button-bgcolor);
1066
1067 border-color: var(--button-accent-color);
1068
1069 color: var(--main-textcolor);
1070
1071 transition: var(--color-trans);
1072}
1073
1074button[aria-label="Go back to the dashboard"]:hover {
1075 background-color: var(--button-bgcolor-hover);
1076
1077 border-color: var(--button-accent-color-hover);
1078
1079 color: var(--main-textcolor);
1080
1081 transition: var(--color-trans);
1082}
1083
1084/* LOADING - not quite sure this works */
1085
1086mat-spinner {
1087 width: 42px;
1088
1089 height: 42px;
1090}
1091
1092circle {
1093 color: #8531a9 !important;
1094
1095 stroke-dasharray: 77px;
1096
1097 stroke-width: 33px;
1098}
1099
1100p#if-you-see-this-load-more-posts {
1101 color: var(--main-textcolor);
1102}
1103
1104/* POPUP TOOLTIPS */
1105
1106.mdc-tooltip__surface {
1107 background-color: var(--popup-bgcolor) !important;
1108
1109 color: var(--popup-textcolor) !important;
1110
1111 border-radius: 2px;
1112}
1113
1114/* UNIVERSAL WAFRN CONTAINER */
1115
1116.wafrn-container {
1117 background-color: var(--element-bgcolor) !important;
1118
1119 color: var(--main-textcolor);
1120
1121 border-radius: 0px;
1122
1123 border-width: 0px;
1124
1125 border-style: solid;
1126
1127 border-color: var(--container-bordercolor);
1128
1129 box-shadow: none;
1130}
1131
1132/* PROFILE */
1133
1134/*
1135
1136app-view-blog mat-card.wafrn-container {}
1137
1138app-view-blog img[alt="user avatar"] {}
1139
1140*/
1141
1142/* UNFOLLOW BUTTON */
1143
1144.mat-mdc-unelevated-button.mat-warn {
1145 color: var(--main-textcolor);
1146
1147 background-color: #f44336;
1148
1149 transition: var(--color-trans);
1150}
1151
1152.mat-mdc-unelevated-button.mat-warn:hover {
1153 background-color: #f44336;
1154
1155 transition: var(--color-trans);
1156}
1157
1158/* FOLLOW COUNT */
1159
1160/*
1161
1162div.follow-counts {}
1163
1164*/
1165
1166/* TEXT EDITOR */
1167
1168.ql-snow > .ql-editor {
1169 background-color: var(--element-bgcolor);
1170
1171 color: var(--main-textcolor) !important;
1172
1173 max-height: 600px;
1174}
1175
1176.ql-snow > .ql-editor:focus {
1177 background-color: var(--element-bgcolor);
1178
1179 color: var(--main-textcolor);
1180}
1181
1182/* POSTS */
1183
1184/* POST CONTAINER */
1185
1186.mat-mdc-card {
1187 color: var(--main-textcolor);
1188
1189 border-radius: 2px;
1190
1191 border-color: var(--button-accent-color);
1192
1193 box-shadow: none;
1194}
1195
1196/* DIVIDER LINE */
1197
1198app-post hr {
1199 color: var(--element-bgcolor);
1200
1201 border: 0px;
1202}
1203
1204/* POSTER INFO */
1205
1206.original-poster-name {
1207 color: var(--username-textcolor) !important;
1208
1209 transition: var(--color-trans);
1210}
1211
1212.original-poster-name:hover {
1213 color: var(--username-textcolor-hover) !important;
1214
1215 transition: var(--color-trans);
1216}
1217
1218.original-poster-url {
1219 color: var(--url-textcolor);
1220
1221 font-family: monospace;
1222}
1223
1224.avatar {
1225 height: 45px;
1226
1227 width: 45px;
1228}
1229
1230.avatar img {
1231 border-radius: 3px;
1232
1233 height: 45px;
1234
1235 width: 45px;
1236}
1237
1238.user-name {
1239 color: var(--username-textcolor) !important;
1240
1241 transition: var(--color-trans);
1242}
1243
1244.user-name:hover {
1245 color: var(--username-textcolor-hover) !important;
1246
1247 transition: var(--color-trans);
1248}
1249
1250span.user-url {
1251 color: var(--url-textcolor);
1252
1253 font-family: monospace;
1254}
1255
1256/* FOLLOW BUTTON */
1257
1258button.follow-button {
1259 background: none !important;
1260
1261 color: #69f0ae !important;
1262
1263 border: none !important;
1264
1265 transition: var(--color-trans);
1266}
1267
1268button.follow-button:hover {
1269 background: none !important;
1270
1271 color: var(--link-textcolor-hover) !important;
1272
1273 border: none !important;
1274
1275 transition: var(--color-trans);
1276}
1277
1278.mat-mdc-button-persistent-ripple {
1279 display: none;
1280}
1281
1282/* POST DATE */
1283
1284/*
1285
1286div.date-line {}
1287
1288svg.fa-globe {}
1289
1290*/
1291
1292/* POST SHARE */
1293
1294app-post-actions button:hover {
1295 background: none !important;
1296
1297 border-width: 0px;
1298}
1299
1300svg.fa-share-nodes {
1301 color: var(--button-accent-color);
1302
1303 transition: var(--color-trans);
1304}
1305
1306svg.fa-share-nodes:hover {
1307 color: var(--button-accent-color-hover);
1308
1309 transition: var(--color-trans);
1310}
1311
1312svg.fa-chevron-down {
1313 color: var(--button-accent-color);
1314
1315 transition: var(--color-trans);
1316}
1317
1318svg.fa-chevron-down:hover {
1319 color: var(--button-accent-color-hover);
1320
1321 transition: var(--color-trans);
1322}
1323
1324/* CONTENT WARNING */
1325
1326#fragment-content-warning {
1327 color: var(--main-textcolor);
1328
1329 font-family: monospace;
1330}
1331
1332/*
1333
1334div.fragment-content-warning div.fragment-content {}
1335
1336div.fragment-content-warning button {}
1337
1338*/
1339
1340/* POST TEXT */
1341
1342div.wafrn-text-default {
1343 color: var(--main-textcolor);
1344
1345 font-family: Georgia, serif;
1346}
1347
1348/* MENTIONS */
1349
1350a.mention {
1351 color: var(--username-textcolor);
1352
1353 transition: var(--color-trans);
1354}
1355
1356a.mention:hover {
1357 color: var(--username-textcolor-hover);
1358
1359 transition: var(--color-trans);
1360}
1361
1362/* MEDIA CONTAINER */
1363
1364app-wafrn-media {
1365 max-width: 57%;
1366
1367 display: block;
1368
1369 margin-left: auto;
1370
1371 margin-right: auto;
1372}
1373
1374/* IMAGES */
1375
1376app-wafrn-media img {
1377 filter: brightness(0.7);
1378
1379 transition: var(--image-transoff);
1380}
1381
1382app-wafrn-media img:hover {
1383 filter: brightness(1);
1384
1385 transition: var(--image-trans);
1386}
1387
1388/* MEDIA DESCRIPTION */
1389
1390app-wafrn-media div.media-description {
1391 background-color: var(--element-bgcolor) !important;
1392
1393 border-radius: 0px;
1394
1395 font-family: monospace;
1396
1397 font-size: 11px;
1398}
1399
1400/* VOTING */
1401
1402/*
1403
1404.mdc-linear-progress__bar-inner {}
1405
1406.mdc-linear-progress__buffer-bar {}
1407
1408*/
1409
1410/* TAGS */
1411
1412a.tag {
1413 background-color: #8531a9 !important;
1414
1415 color: var(--link-textcolor) !important;
1416
1417 transition: var(--color-trans);
1418
1419 font-family: monospace;
1420}
1421
1422a.tag:hover {
1423 color: var(--link-textcolor-hover) !important;
1424
1425 transition: var(--color-trans);
1426}
1427
1428/* container of quoted post */
1429
1430div.quoted-post {
1431 border-width: 2px;
1432
1433 border-color: var(--button-accent-color);
1434
1435 border-style: dotted;
1436
1437 box-shadow: none;
1438}
1439
1440/* REACTS */
1441
1442#emoji-reactions button {
1443 background-color: var(--element-bgcolor);
1444
1445 border-width: 0px !important;
1446
1447 transition: var(--color-trans);
1448
1449 fill: var(--main-textcolor);
1450}
1451
1452#emoji-reactions button:hover {
1453 background-color: var(--button-bgcolor-hover);
1454
1455 transition: var(--color-trans);
1456
1457 fill: var(--main-textcolor);
1458}
1459
1460/*
1461
1462#emoji-reactions .mat-mdc-tooltip-trigger {}
1463
1464#emoji-reactions .mat-mdc-tooltip-trigger:hover {}
1465
1466*/
1467
1468app-emoji-react svg {
1469 fill: var(--main-textcolor);
1470
1471 transition: var(--color-trans);
1472}
1473
1474app-emoji-react svg:hover {
1475 fill: var(--link-textcolor-hover);
1476
1477 transition: var(--color-trans);
1478}
1479
1480/*
1481
1482div.emojireact-overlay {}
1483
1484*/
1485
1486/* POST ACTIONS */
1487
1488/*
1489
1490app-post hr > div a {}
1491
1492app-post hr > div a:hover {}
1493
1494*/
1495
1496fa-icon[mattooltip="Quote woot"] {
1497 color: var(--main-textcolor);
1498
1499 transition: var(--color-trans);
1500}
1501
1502fa-icon[mattooltip="Quote woot"]:hover {
1503 color: var(--main-textcolor);
1504
1505 transition: var(--color-trans);
1506}
1507
1508fa-icon[mattooltip="Quick rewoot"] {
1509 color: var(--main-textcolor);
1510
1511 transition: var(--color-trans);
1512}
1513
1514fa-icon[mattooltip="Quick rewoot"]:hover {
1515 color: var(--main-textcolor);
1516
1517 transition: var(--color-trans);
1518}
1519
1520fa-icon[mattooltip="Delete rewoot"] {
1521 color: var(--main-textcolor);
1522
1523 transition: var(--color-trans);
1524}
1525
1526fa-icon[mattooltip="Delete rewoot"]:hover {
1527 color: var(--main-textcolor);
1528
1529 transition: var(--color-trans);
1530}
1531
1532fa-icon[mattooltip="Reply woot"] {
1533 color: var(--main-textcolor);
1534
1535 transition: var(--color-trans);
1536}
1537
1538fa-icon[mattooltip="Reply woot"]:hover {
1539 color: var(--main-textcolor);
1540
1541 transition: var(--color-trans);
1542}
1543
1544fa-icon[mattooltip="Like woot"] {
1545 color: var(--main-textcolor);
1546
1547 transition: var(--color-trans);
1548}
1549
1550fa-icon[mattooltip="Like woot"]:hover {
1551 color: var(--main-textcolor);
1552
1553 transition: var(--color-trans);
1554}
1555
1556fa-icon[mattooltip="Remove like"] {
1557 color: var(--main-textcolor);
1558
1559 transition: var(--color-trans);
1560}
1561
1562fa-icon[mattooltip="Remove like"]:hover {
1563 color: var(--main-textcolor);
1564
1565 transition: var(--color-trans);
1566}
1567
1568fa-icon[mattooltip="Delete woot"] {
1569 color: var(--main-textcolor);
1570
1571 transition: var(--color-trans);
1572}
1573
1574fa-icon[mattooltip="Delete woot"]:hover {
1575 color: var(--main-textcolor);
1576
1577 transition: var(--color-trans);
1578}
1579```
1580````