☰

DTF return like

Скрипт для замены иконки лайка (сердечка) на стрелку

  1. // ==UserScript==
  2. // @name         DTF return like
  3. // @version      0.4
  4. // @description  Скрипт для замены иконки лайка (сердечка) на стрелку
  5. // @author       geuarg1y
  6. // @match        *://*.dtf.ru/*
  7. // @grant        none
  8. // @license      MIT
  9. // @namespace    https://greasyfork.org/users/998190
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     injectStyles();
  14. })();
  15.  
  16. function injectStyles() {
  17.     const styles = `
  18.         /* Лайки у постов */
  19.         .content-footer__item:first-child {
  20.             order: 2;
  21.             margin-right: 0px;
  22.             margin-left: 9px;
  23.         }
  24.  
  25.         .content-footer__item:last-child {
  26.             order: 1;
  27.             margin-left: auto;
  28.         }
  29.  
  30.         /* Лайки у комментов */
  31.         .comment .like-button.like-button--action-like {
  32.             order: -1;
  33.             margin-right: 0;
  34.         }
  35.  
  36.         .comment .like-button.like-button--action-dislike {
  37.             order: -2;
  38.             margin-left: auto;
  39.             margin-right: 9px;
  40.         }
  41.  
  42.         /* Количество рейтинга (и у постов, и у комментов) */
  43.         .like-button .like-button__count {
  44.             order: -1;
  45.             margin-right: 9px;
  46.             margin-left: 0px;
  47.         }
  48.  
  49.         /* Кнопка раскрытия комментов */
  50.         .comment__inline-action {
  51.             order: 1;
  52.             width: 100%;
  53.         }
  54.  
  55.         /* Цвета иконок лайка/дизлайка */
  56.         .like-button.like-button--action-like {
  57.             --like-color-text-hover: #2ea83a;
  58.             --like-color-background-hover: #2ea83a;
  59.             --like-color-active: #2ea83a;
  60.         }
  61.  
  62.         .like-button.like-button--action-dislike {
  63.             --like-color-text-hover: #cf4c59;
  64.             --like-color-background-hover: #cf4c59;
  65.             --like-color-active: #cf4c59;
  66.         }
  67.  
  68.         #v_dislike_active path {
  69.             fill: #cf4c59;
  70.         }
  71.  
  72.         #v_like_active path {
  73.             fill: #2ea83a;
  74.         }
  75.  
  76.         /* Отключаем анимацию */
  77.         .like-button--action-like .like-button__icon,
  78.         .like-button--action-dislike .like-button__icon {
  79.             visibility: visible !important;
  80.         }
  81.  
  82.         .like-button--action-like .like-button__icon,
  83.         .like-button--action-dislike .like-button__icon {
  84.           background-size: 12px !important;
  85.           background-repeat: no-repeat !important;
  86.           background-position: center !important;
  87.         }
  88.  
  89.         .like-button--action-like .like-button__icon {
  90.           background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAfCAYAAACs5j4jAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABe0lEQVRYhd3XPW7CQBCG4W8nEkrJEXwAy+IIuEuXcgOXSU5jREmZCrgBlg8QlynTOWnYVIMUEmB/Zmwrb7le7fiRtlngn2b6GmStnRPRo3NuCmDnnNuv1+tWa14vsMVi8QLg+Wy5PR6PpRZOHXYBxanhVGE3UJwKTg3mieLEcSqwQBQnihOHRaI4MZwoLBHFieDEYEIoLhknAhNGcUk4Sp0egnLOHQDMAXx4bM+IaGutzWL+KwkWiuq6rlytVntjTAllXPRVjEFtNpsTZrlczpxzWwBTjyOCr2UULBXFaeKCYVIoTgsXBJNGcRo4b5gWipPGecG0UZwk7iasLxQnhbsK6xvFSeAuwoZCcam4P2FDo7gU3C/YWFBcLO4HbGwoLgZ3go0VxYXiDABYazMievMZMASKC8ERABDRzOfgIVEAUFXVwffJ4/0eGxrF+eIIACaTye7axrGgOB/cHQDUdf2Z5/mXMebhfMPYUFzTNO9FUbwCeAJwf/a5/QaHl/YZGwHdGgAAAABJRU5ErkJggg==");
  91.         }
  92.         .like-button--action-like.like-button--active .like-button__icon {
  93.           background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAfCAYAAACs5j4jAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABlElEQVRYhd3YMU7DQBCF4TeLFJEuDRUNBwA5JYIi4QhISIQKuAE3IDlJRBUKpBwBpwtdEOEGVFTpQInwUKCJQIR47Z2xLf5yPfbq07qxgX8aFbVRNDhsMyXnYJqxSyZPp+Mby/3MYVG/1eD6Ygig/X2dwbF7qx0/Xo5mFvuawqJ+q5Fszu+JqLnqOjNP3HvtyAJnBktDSVY4E5gvSrLAqcOyoiRtnCosL0rSxKnBQlGSFk4FpoWSNHDBMG2UFIoLgmVFJUi6AODguj7zIbjcsDyoaWfcA4Dd2/1ra1wuWAhKssZlhmmgJEtcJpgmSrLCecMsUJIFzgtmiZK0camwIlCSJm4trEiUpIX7E1YGStLArYSViZJCcb9gVUBJIbgfsCqhpLy4JayKKCkPzi0X6othFVEAMO2Me/JlkBYRNZP6fLgBAHuDgwsiXPncWDRKer17GW2dbINA7bRZAu04ACCHyOfhZaGkLCf39SoyN9IGy0ZJvjgHAB+crP2PXhWU5INzAPB89hAzOF41UDWUtA7H4PgT/ibJhjjcmGEAAAAASUVORK5CYII=");
  94.         }
  95.         .like-button--action-dislike .like-button__icon {
  96.           color: var(--color-error);
  97.           background-position: 4px center;
  98.           background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAfCAYAAACs5j4jAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABxUlEQVRYhd3YP04CQRTH8e9bEhKoKC3pCcSExpLSbrWaUHEFbyDcQG/BUnkD9ARKATWlpSUh2RkbVEKUnd19wxJ/zf7LTN4nb3aTHfinkf2LOI5bzWZz5Jy7FJEPa+1jkiTrimrzznA4vHHOxSLykabpy2w2e/qGGWPaURTNgfb+IGvtJEmS8Ylr9Uocx61GozEXkcuDRw+1r7Ner/fKAQpARAadTkeWy+Vz2DLz5QgK4KoGYIwZiMjdX5OcGy4DBUC0O7azJoui6N4YM1aqrXB8ULCDWWvffCatGueLAqgBrFar9263O8Cjc1Utyzwo+FmK1Ov1W+AsO5cX5Zwbf38VF4vFpt/vJ2maXgMXWYNP1bkiqOl0Oqnt3zw3XFEU7N6x/ZwLrgwKfoFB9biyKPgDBtXhNFBwBAanx2mhIAMGp8NposADBuFx2ijwhEE4XAgU5ICBPi4UCnLCQA8XEgUFYFAeFxoFB3seeTMajVrb7XYOeBVorZ1sNpuH0CgoCYP8OGCNx+8RFEeBAgwK4TJTBgVKMNDFlUWBIgx0cBooUIZBOZwWCgLAoBhOEwWBYJAPp42CgDDww4VAQWAYHMeFQgF8Ai9wuQOhyUU8AAAAAElFTkSuQmCC")
  99.         }
  100.         .like-button--action-dislike.like-button--active .like-button__icon {
  101.           background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAfCAYAAACs5j4jAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABjUlEQVRYhd3Wz1GDQBTH8e9SAXRAB3DXDHagVmApkg5iJ3agjhlnvEEFpgNy9896SAZjNGH37duEybvBLu/9PjADwImW2TzoiipNzMeNxZTA0tr3u6x9XRwnmnt1xfmVMVwCS2t5ytr5vflZrHJjvh6AfPMia5lm7XN92Khu1RVVus5c/l6xsx62LCdvbKH6bSPE7UatKlltOrtgBwrAGG67YlJHyCeqIRSsYZDkQ83GgnNBQQ/7bFyaHhvnioI1LGtfGuDRpfmxcD4o6J8YWJtcA6N8cr4osPWf75hPg0O8LSWotJlPzfbpMeGkKNj685A2jIELQcEOmKSxJi4UBXtgkgEaOA0UDMAkg0JwWihwgEkGSnCaKHCESQb74LRR4AGTBHDBxUCBJ0wSZB8uFgoEMEmg/3AxUSCEQRguNgoCYCDDQTKLjYJAGIju/gJM7rhXhAIFGEhwLiVHgRIMtHFhKFCEgRYuHAXKMAjF6aAgAgykOD0URIKBL04XBRFh4IrTR0FkGAzh4qAAvgEE4FOSVxu7QwAAAABJRU5ErkJggg==")
  102.         }
  103.  
  104.         .like-button__icon>svg,
  105.         .like-button__lottie {
  106.           opacity: 0;
  107.         }
  108.     `;
  109.  
  110.     document.head.insertAdjacentHTML("beforeend", `<style type="text/css" id="dtfChangeIconStyles">${styles}</style>`)
  111. }