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