unoffical wafrn mirror wafrn.net
atproto social-network activitypub
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

added wafrn98 theme by @vv0ltz@app.wafrn.net

+922 -2
+4 -1
packages/frontend/src/app/components/color-scheme-switcher/color-scheme-switcher.component.html
··· 87 87 <link href="/assets/themes/pink.css" rel="stylesheet" /> 88 88 } 89 89 @case ('grey') { 90 - <link href="/assets/themes/grey.css" rel="stylesheet" /> 90 + <link href="/assets/themes/grey.css" rel="stylesheet" /> 91 91 } 92 92 @case ('rizzler') { 93 93 <link href="/assets/themes/rizzler.css" rel="stylesheet" /> 94 + } 95 + @case ('wafrn98') { 96 + <link href="/assets/themes/wafrn98.css" rel="stylesheet" /> 94 97 } 95 98 @case ('wafrnverse') { 96 99 <link href="/assets/themes/wafrnverse.css" rel="stylesheet" />
+13 -1
packages/frontend/src/app/components/color-scheme-switcher/color-scheme-switcher.component.ts
··· 24 24 function isColorScheme(value: string): value is ColorScheme { 25 25 return colorSchemeVariants.includes(value as ColorScheme) 26 26 } 27 - const colorSchemeVariants = ['default', 'tan', 'green', 'gold', 'red', 'pink', 'grey', 'rizzler', 'wafrnverse', 'fan'] as const 27 + const colorSchemeVariants = [ 28 + 'default', 29 + 'tan', 30 + 'green', 31 + 'gold', 32 + 'red', 33 + 'pink', 34 + 'grey', 35 + 'wafrn98', 36 + 'rizzler', 37 + 'wafrnverse', 38 + 'fan' 39 + ] as const 28 40 type ColorSchemeTuple = typeof colorSchemeVariants 29 41 type ColorScheme = ColorSchemeTuple[number] 30 42
+2
packages/frontend/src/assets/fonts/credits.md
··· 1 + # Credits per font 2 + Pixelify: https://github.com/eifetx/Pixelify-Sans/tree/main
packages/frontend/src/assets/fonts/pixelify-sans-latin-400-normal.woff2

This is a binary file and will not be displayed.

+903
packages/frontend/src/assets/themes/wafrn98.css
··· 1 + /* 2 + theme by vv0ltz 3 + https://app.wafrn.net/blog/vv0ltz 4 + */ 5 + 6 + @font-face { 7 + font-family: 'Pixelify Sans'; 8 + font-style: normal; 9 + font-stretch: 100%; 10 + src: url(/assets/fonts/pixelify-sans-latin-400-normal.woff2) format('woff2'); 11 + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; 12 + } 13 + 14 + :root { 15 + /* ELEMENT VARIABLES */ 16 + 17 + --main-bgcolor: #008080; 18 + 19 + --main-textcolor: black; 20 + 21 + --container-bordercolor: none; 22 + 23 + --link-textcolor: #00f; 24 + 25 + --link-textcolor-hover: #00f 26 + 27 + --link-textcolor-visited: #00f; 28 + 29 + --button-bgcolor: silver; 30 + 31 + --button-bgcolor-hover: silver; 32 + 33 + --button-accent-color: #00f; 34 + 35 + --button-accent-color-hover: #00f; 36 + 37 + --element-bgcolor: silver; 38 + 39 + --username-textcolor: #00f; 40 + 41 + --username-textcolor-hover: #00f 42 + 43 + --url-textcolor: #00f; 44 + 45 + --popup-textcolor: black; 46 + 47 + --popup-bgcolor: silver; 48 + 49 + --color-trans: 0.37s cubic-bezier(0.77, 0, 0.23, 1); 50 + 51 + --image-transoff: 0.37s cubic-bezier(0.88, 0.52, 0.48, 1); 52 + 53 + --image-trans: 0.37s cubic-bezier(0.81, -0.19, 0.27, 0.34); 54 + 55 + --mat-sys-corner-large: 0px; 56 + 57 + --mat-sys-corner-extra-large: 0px; 58 + 59 + --mat-sys-corner-extra-large-top: 0px; 60 + 61 + --mat-sys-corner-large-end: 0px; 62 + 63 + --mat-sys-corner-extra-small: 0px; 64 + 65 + --mat-sys-corner-extra-small-top: 0px; 66 + 67 + --mat-sys-corner-full: 0px; 68 + 69 + --mat-sys-corner-large-start: 0px; 70 + 71 + --mat-sys-corner-large-top: 0px; 72 + 73 + --mat-sys-corner-medium: 0px; 74 + 75 + --mat-sys-corner-small: 0px; 76 + 77 + --mat-sys-primary: #a9a9a9; 78 + 79 + --mat-sys-surface-variant: silver; 80 + 81 + --mat-sys-on-surface-variant: black; 82 + 83 + --mat-sys-on-surface: black; 84 + 85 + --mat-sys-secondary-container: #00f; 86 + 87 + --mat-sys-surface-container: silver; 88 + 89 + --mat-sys-surface-container-high: silver; 90 + 91 + --mat-sys-primary-container: navy; 92 + 93 + --mat-sys-outline: #323232; 94 + 95 + --mat-sys-error: maroon; 96 + 97 + --mat-sys-surface: silver; 98 + 99 + } 100 + 101 + /* BACKGROUND */ 102 + 103 + .mat-drawer-content { 104 + background-color: var(--main-bgcolor) !important; 105 + } 106 + 107 + /* LINKS */ 108 + 109 + a { 110 + color: var(--link-textcolor); 111 + 112 + transition: var(--color-trans); 113 + } 114 + 115 + a:visited { 116 + color: var(--link-textcolor-visited); 117 + outline: 1px dotted var(--link-textcolor-visited); 118 + } 119 + 120 + a:hover { 121 + color: var(--link-textcolor-hover); 122 + 123 + transition: var(--color-trans); 124 + outline: 1px dotted var(--link-textcolor-hover); 125 + } 126 + 127 + a:active { 128 + color: var(--link-textcolor-hover); 129 + } 130 + 131 + /* BUTTONS - these may be overwritten by the class of the button, see below */ 132 + 133 + button { 134 + background-color: var(--button-bgcolor); 135 + 136 + color: var(--main-textcolor); 137 + 138 + border-color: var(--button-accent-color); 139 + 140 + border-style: solid; 141 + 142 + border-width: 0px; 143 + 144 + border-radius: 3px; 145 + 146 + color: var(--main-textcolor); 147 + 148 + transition: var(--color-trans); 149 + } 150 + 151 + button:hover { 152 + background-color: var(--button-bgcolor-hover); 153 + 154 + color: var(button-accent-color); 155 + 156 + border-color: var(--button-accent-color-hover); 157 + 158 + border-style: solid; 159 + 160 + border-width: 0px; 161 + 162 + border-radius: 3px; 163 + 164 + color: var(--main-textcolor); 165 + 166 + transition: var(--color-trans); 167 + } 168 + 169 + button:active { 170 + background-color: var(--button-bgcolor-hover); 171 + 172 + color: var(button-accent-color); 173 + 174 + border-color: var(--button-accent-color-hover); 175 + 176 + border-style: solid; 177 + 178 + border-width: 0px; 179 + 180 + border-radius: 3px; 181 + 182 + color: var(--main-textcolor); 183 + 184 + transition: var(--color-trans); 185 + 186 + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 187 + } 188 + .mat-mdc-raised-button:not(:disabled) { 189 + background: silver; 190 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; 191 + border: none; 192 + border-radius: 0px; 193 + } 194 + 195 + .mat-mdc-menu-item:not([disabled]) { 196 + color:black; 197 + } 198 + 199 + /* .mat-mdc-checkbox .mat-internal-form-field { 200 + color: black; 201 + } */ 202 + /* SIDE MENU */ 203 + 204 + .mat-drawer-inner-container { 205 + background: var(--element-bgcolor); 206 + } 207 + 208 + 209 + 210 + .ml-3 { 211 + color: var(--main-textcolor); 212 + } 213 + 214 + .menu-item-icon { 215 + color: var(--button-accent-color); 216 + } 217 + 218 + 219 + /* DASHBOARD TITLE */ 220 + 221 + div.wafrn-container.mx-1 { 222 + display: none; 223 + 224 + background-color: var(--main-bgcolor); 225 + } 226 + 227 + div.wafrn-container.mx-1 h3 { 228 + display: none; 229 + 230 + font-family: "Pixelify Sans", sans-serif; 231 + } 232 + 233 + /* BUTTONS - use these i think */ 234 + 235 + .mat-mdc-unelevated-button.mat-primary { 236 + background-color: var(--button-bgcolor); 237 + 238 + border-color: var(--button-accent-color); 239 + 240 + border-width: 0px; 241 + 242 + color: var(--main-textcolor); 243 + 244 + transition: var(--color-trans); 245 + 246 + border-radius: 0; 247 + 248 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; 249 + } 250 + 251 + .mat-mdc-unelevated-button.mat-primary:hover { 252 + background-color: var(--button-bgcolor-hover); 253 + 254 + border-color: var(--button-accent-color-hover); 255 + 256 + color: var(--main-textcolor); 257 + 258 + border-width: 0px; 259 + 260 + transition: var(--color-trans); 261 + 262 + border-radius: 0; 263 + 264 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; 265 + } 266 + 267 + .mat-mdc-unelevated-button { 268 + background-color: var(--button-bgcolor); 269 + 270 + border-color: var(--button-accent-color); 271 + 272 + border-width: 0px; 273 + 274 + color: var(--main-textcolor); 275 + 276 + transition: var(--color-trans); 277 + 278 + border-radius: 0; 279 + 280 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; 281 + } 282 + 283 + .mat-mdc-unelevated-button:hover { 284 + background-color: var(--button-bgcolor-hover); 285 + 286 + border-color: var(--button-accent-color-hover); 287 + 288 + color: var(--main-textcolor); 289 + 290 + border-width: 0px; 291 + 292 + transition: var(--color-trans); 293 + 294 + border-radius: 0; 295 + 296 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; 297 + } 298 + 299 + button[aria-label="Go back to the dashboard"] { 300 + background-color: var(--button-bgcolor); 301 + 302 + border-color: var(--button-accent-color); 303 + 304 + color: var(--main-textcolor); 305 + 306 + transition: var(--color-trans); 307 + } 308 + 309 + button[aria-label="Go back to the dashboard"]:hover { 310 + background-color: var(--button-bgcolor-hover); 311 + 312 + border-color: var(--button-accent-color-hover); 313 + 314 + color: var(--main-textcolor); 315 + 316 + transition: var(--color-trans); 317 + } 318 + 319 + /* LOADING - not quite sure this works */ 320 + 321 + mat-spinner { 322 + width: 42px; 323 + 324 + height: 42px; 325 + } 326 + 327 + circle { 328 + color: black !important; 329 + 330 + stroke-dasharray: 77px; 331 + 332 + stroke-width: 33px; 333 + } 334 + 335 + p#if-you-see-this-load-more-posts { 336 + color: var(--main-textcolor); 337 + } 338 + 339 + /* POPUP TOOLTIPS */ 340 + 341 + .mdc-tooltip__surface { 342 + background-color: var(--popup-bgcolor) !important; 343 + 344 + color: var(--popup-textcolor) !important; 345 + 346 + border-radius: 2px; 347 + } 348 + 349 + /* UNIVERSAL WAFRN CONTAINER */ 350 + 351 + .wafrn-container { 352 + background-color: var(--element-bgcolor) !important; 353 + 354 + color: var(--main-textcolor); 355 + 356 + border-radius: 0px; 357 + 358 + border-width: 0px; 359 + 360 + border-style: solid; 361 + 362 + border-color: var(--container-bordercolor); 363 + 364 + box-shadow: none; 365 + } 366 + 367 + /* OTHER CONTAINERS (except left sidebar) */ 368 + 369 + .p-3 { 370 + background: var(--element-bgcolor); 371 + } 372 + 373 + .mat-mdc-table { 374 + background: var(--element-bgcolor) !important; 375 + } 376 + 377 + .mat-mdc-table .mat-mdc-header-cell { 378 + color: var(--main-textcolor); 379 + } 380 + 381 + .embed-text { 382 + color: var(--link-textcolor); 383 + } 384 + 385 + .mat-mdc-paginator { 386 + background: silver; 387 + } 388 + 389 + .mat-expansion-panel { 390 + background: silver; 391 + } 392 + 393 + .mat-expansion-panel:not([class*="mat-elevation-z"]) { 394 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; 395 + border-radius: 0 !important; 396 + } 397 + 398 + /* PROFILE */ 399 + 400 + /* 401 + 402 + app-view-blog mat-card.wafrn-container {} 403 + 404 + app-view-blog img[alt="user avatar"] {} 405 + 406 + */ 407 + 408 + /* UNFOLLOW BUTTON */ 409 + 410 + .mat-mdc-unelevated-button.mat-warn { 411 + color: var(--main-textcolor); 412 + 413 + background-color: #f44336; 414 + 415 + transition: var(--color-trans); 416 + } 417 + 418 + .mat-mdc-unelevated-button.mat-warn:hover { 419 + background-color: #f44336; 420 + 421 + transition: var(--color-trans); 422 + } 423 + 424 + /* FOLLOW COUNT */ 425 + 426 + /* 427 + 428 + div.follow-counts {} 429 + 430 + */ 431 + 432 + /* TEXT EDITOR */ 433 + 434 + .ql-snow > .ql-editor { 435 + background-color: var(--element-bgcolor); 436 + 437 + color: var(--main-textcolor) !important; 438 + 439 + max-height: 600px; 440 + } 441 + 442 + .ql-snow > .ql-editor:focus { 443 + background-color: var(--element-bgcolor); 444 + 445 + color: var(--main-textcolor); 446 + } 447 + 448 + /* CREATE POST */ 449 + :root .mat-mdc-dialog-inner-container { 450 + --mat-sys-primary: ; 451 + 452 + --mat-sys-on-surface-variant: black; 453 + 454 + --mat-sys-on-surface: black; 455 + } 456 + 457 + 458 + /* POSTS */ 459 + 460 + /* POST CONTAINER */ 461 + 462 + .mat-mdc-card { 463 + color: var(--main-textcolor); 464 + 465 + border-radius: 2px; 466 + 467 + border-color: var(--button-accent-color); 468 + 469 + box-shadow: none; 470 + } 471 + 472 + .mat-mdc-card::after { 473 + border: none; 474 + border-radius: 0; 475 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff; 476 + } 477 + 478 + /* DIVIDER LINE */ 479 + 480 + app-post hr { 481 + color: var(--element-bgcolor); 482 + 483 + border: 0px; 484 + } 485 + 486 + /* POSTER INFO */ 487 + 488 + .original-poster-name { 489 + color: var(--username-textcolor) !important; 490 + 491 + transition: var(--color-trans); 492 + } 493 + 494 + .original-poster-name:hover { 495 + color: var(--username-textcolor-hover) !important; 496 + 497 + transition: var(--color-trans); 498 + } 499 + 500 + .original-poster-url { 501 + color: var(--url-textcolor); 502 + 503 + font-family: "Pixelify Sans", sans-serif; 504 + } 505 + 506 + .avatar { 507 + height: 45px; 508 + 509 + width: 45px; 510 + } 511 + 512 + .avatar img { 513 + border-radius: 3px; 514 + 515 + height: 45px; 516 + 517 + width: 45px; 518 + } 519 + 520 + .user-name { 521 + color: var(--username-textcolor) !important; 522 + 523 + transition: var(--color-trans); 524 + } 525 + 526 + .user-name:hover { 527 + color: var(--username-textcolor-hover) !important; 528 + 529 + transition: var(--color-trans); 530 + } 531 + 532 + span.user-url { 533 + color: #00f; 534 + 535 + font-family: "Pixelify Sans", sans-serif; 536 + } 537 + 538 + /* FOLLOW BUTTON */ 539 + 540 + button.follow-button { 541 + background: none !important; 542 + 543 + color: #00f!important; 544 + 545 + border: none !important; 546 + 547 + transition: var(--color-trans); 548 + } 549 + 550 + button.follow-button:hover { 551 + background: none !important; 552 + 553 + color: var(--link-textcolor-hover) !important; 554 + 555 + border: none !important; 556 + 557 + transition: var(--color-trans); 558 + } 559 + 560 + .mat-mdc-button-persistent-ripple { 561 + display: none; 562 + } 563 + 564 + /* NOTES BUTTON */ 565 + 566 + .mat-mdc-outlined-button:not(:disabled) { 567 + border-radius: 0; 568 + color: black; 569 + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; 570 + } 571 + 572 + .mat-mdc-outlined-button:active { 573 + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 574 + } 575 + 576 + .mdc-button .mdc-button__label { 577 + color: black; 578 + } 579 + 580 + /* POST DATE */ 581 + 582 + /* 583 + 584 + div.date-line {} 585 + 586 + svg.fa-globe {} 587 + 588 + */ 589 + 590 + /* POST SHARE */ 591 + 592 + app-post-actions button:hover { 593 + background: none !important; 594 + 595 + border-width: 0px; 596 + } 597 + 598 + svg.fa-share-nodes { 599 + color: var(--button-accent-color); 600 + 601 + transition: var(--color-trans); 602 + } 603 + 604 + svg.fa-share-nodes:hover { 605 + color: var(--button-accent-color-hover); 606 + 607 + transition: var(--color-trans); 608 + } 609 + 610 + svg.fa-chevron-down { 611 + color: var(--button-accent-color); 612 + 613 + transition: var(--color-trans); 614 + } 615 + 616 + svg.fa-chevron-down:hover { 617 + color: var(--button-accent-color-hover); 618 + 619 + transition: var(--color-trans); 620 + } 621 + 622 + /* CONTENT WARNING */ 623 + 624 + #fragment-content-warning { 625 + color: var(--main-textcolor); 626 + 627 + font-family: "Pixelify Sans", sans-serif; 628 + } 629 + 630 + /* 631 + 632 + div.fragment-content-warning div.fragment-content {} 633 + 634 + div.fragment-content-warning button {} 635 + 636 + */ 637 + 638 + /* POST TEXT */ 639 + 640 + div.wafrn-text-default { 641 + color: var(--main-textcolor); 642 + 643 + font-family: "Pixelify Sans", sans-serif; 644 + } 645 + 646 + /* MENTIONS */ 647 + 648 + :root .mention { 649 + border-radius: 0; 650 + color: white; 651 + } 652 + 653 + a.mention { 654 + color: var(--username-textcolor); 655 + 656 + transition: var(--color-trans); 657 + } 658 + 659 + a.mention:hover { 660 + color: var(--username-textcolor-hover); 661 + 662 + transition: var(--color-trans); 663 + } 664 + 665 + /* MEDIA CONTAINER */ 666 + 667 + app-wafrn-media { 668 + max-width: 70%; 669 + 670 + display: block; 671 + 672 + margin-left: auto; 673 + 674 + margin-right: auto; 675 + } 676 + 677 + /* IMAGES */ 678 + 679 + app-wafrn-media img { 680 + filter: brightness(0.7); 681 + 682 + transition: var(--image-transoff); 683 + } 684 + 685 + app-wafrn-media img:hover { 686 + filter: brightness(1); 687 + 688 + transition: var(--image-trans); 689 + } 690 + 691 + 692 + /* MEDIA DESCRIPTION */ 693 + 694 + app-wafrn-media div.media-description { 695 + background-color: var(--element-bgcolor) !important; 696 + 697 + border-radius: 0px; 698 + 699 + font-family: "Pixelify Sans", sans-serif; 700 + 701 + font-size: 11px; 702 + } 703 + 704 + /* VOTING */ 705 + 706 + /* 707 + 708 + .mdc-linear-progress__bar-inner {} 709 + 710 + .mdc-linear-progress__buffer-bar {} 711 + 712 + */ 713 + 714 + /* TAGS */ 715 + 716 + a.tag { 717 + background-color: silver !important; 718 + 719 + color: var(--link-textcolor) !important; 720 + 721 + transition: var(--color-trans); 722 + 723 + font-family: "Pixelify Sans", sans-serif; 724 + 725 + box-shadow: inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset 2px 2px #fff,inset -3px -3px grey,inset 3px 3px #dfdfdf; 726 + 727 + border-radius: 0; 728 + } 729 + 730 + a.tag:hover { 731 + color: var(--link-textcolor-hover) !important; 732 + 733 + transition: var(--color-trans); 734 + } 735 + 736 + a.tag:active { 737 + box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; 738 + } 739 + 740 + /* container of quoted post */ 741 + 742 + div.quoted-post { 743 + border-width: 2px; 744 + 745 + border-color: var(--button-accent-color); 746 + 747 + border-style: dotted; 748 + 749 + box-shadow: none; 750 + 751 + border-radius: 0; 752 + } 753 + 754 + /* REACTS */ 755 + 756 + #emoji-reactions button { 757 + background-color: var(--element-bgcolor); 758 + 759 + border-width: 0px !important; 760 + 761 + transition: var(--color-trans); 762 + 763 + fill: var(--main-textcolor); 764 + } 765 + 766 + #emoji-reactions button:hover { 767 + background-color: var(--button-bgcolor-hover); 768 + 769 + transition: var(--color-trans); 770 + 771 + fill: var(--main-textcolor); 772 + } 773 + 774 + /* 775 + 776 + #emoji-reactions .mat-mdc-tooltip-trigger {} 777 + 778 + #emoji-reactions .mat-mdc-tooltip-trigger:hover {} 779 + 780 + */ 781 + 782 + app-emoji-react svg { 783 + fill: var(--main-textcolor); 784 + 785 + transition: var(--color-trans); 786 + } 787 + 788 + app-emoji-react svg:hover { 789 + fill: var(--link-textcolor-hover); 790 + 791 + transition: var(--color-trans); 792 + } 793 + 794 + /* 795 + 796 + div.emojireact-overlay {} 797 + 798 + */ 799 + 800 + /* POST ACTIONS */ 801 + 802 + /* 803 + 804 + app-post hr > div a {} 805 + 806 + app-post hr > div a:hover {} 807 + 808 + */ 809 + 810 + fa-icon[mattooltip="Quote woot"] { 811 + color: var(--main-textcolor); 812 + 813 + transition: var(--color-trans); 814 + } 815 + 816 + fa-icon[mattooltip="Quote woot"]:hover { 817 + color: var(--main-textcolor); 818 + 819 + transition: var(--color-trans); 820 + } 821 + 822 + fa-icon[mattooltip="Quick rewoot"] { 823 + color: var(--main-textcolor); 824 + 825 + transition: var(--color-trans); 826 + } 827 + 828 + fa-icon[mattooltip="Quick rewoot"]:hover { 829 + color: var(--main-textcolor); 830 + 831 + transition: var(--color-trans); 832 + } 833 + 834 + fa-icon[mattooltip="Delete rewoot"] { 835 + color: var(--main-textcolor); 836 + 837 + transition: var(--color-trans); 838 + } 839 + 840 + fa-icon[mattooltip="Delete rewoot"]:hover { 841 + color: var(--main-textcolor); 842 + 843 + transition: var(--color-trans); 844 + } 845 + 846 + fa-icon[mattooltip="Reply woot"] { 847 + color: var(--main-textcolor); 848 + 849 + transition: var(--color-trans); 850 + } 851 + 852 + fa-icon[mattooltip="Reply woot"]:hover { 853 + color: var(--main-textcolor); 854 + 855 + transition: var(--color-trans); 856 + } 857 + 858 + fa-icon[mattooltip="Like woot"] { 859 + color: var(--main-textcolor); 860 + 861 + transition: var(--color-trans); 862 + } 863 + 864 + fa-icon[mattooltip="Like woot"]:hover { 865 + color: var(--main-textcolor); 866 + 867 + transition: var(--color-trans); 868 + } 869 + 870 + fa-icon[mattooltip="Remove like"] { 871 + color: var(--main-textcolor); 872 + 873 + transition: var(--color-trans); 874 + } 875 + 876 + fa-icon[mattooltip="Remove like"]:hover { 877 + color: var(--main-textcolor); 878 + 879 + transition: var(--color-trans); 880 + } 881 + 882 + fa-icon[mattooltip="Delete woot"] { 883 + color: var(--main-textcolor); 884 + 885 + transition: var(--color-trans); 886 + } 887 + 888 + fa-icon[mattooltip="Delete woot"]:hover { 889 + color: var(--main-textcolor); 890 + 891 + transition: var(--color-trans); 892 + } 893 + 894 + /* "USER REWOOTED/REPLIED POST DIV" */ 895 + .nudge-left { 896 + background: linear-gradient(90deg,navy,#1084d0); 897 + margin-left: -0.9rem !important; 898 + margin-right: -0.9rem; 899 + margin-top: -0.65rem; 900 + } 901 + .nudge-left .user-name, .post-action, .ribbon-date, .ribbon-icon { 902 + color: white !important; 903 + }