Сделал скрипт, который меняет иконку сердечка и убирает фон у кнопок

Обновление 16.12.24

Починена вёрстка после обновления
Изменена сортировка реакций: теперь слева всегда будет сердечко или выбранная реакция
Исправлен баг, когда заливка сердечка могла не появляться
Теперь можно выбрать анимацию из 3-х доступных

Обновление 08.06.24

Улучшена компоновка реакций в постах

v1.1: Кнопка статистики сдвинута влево, чтобы комментарии оказались на привычном месте

v1.2: Исправлен визуальный баг

v1.3: Исправлен визуальный баг

Обновление 07.06.24

Улучшен код
Улучшена компоновка реакций в комментариях

Обновление 06.06.24

Новая анимация при клике
Новая заливка сердечка (при желании цвет можно поменять)
Исправлен баг из закреплённого коммента

Известные проблемы

Замена иконки происходит для первого элемента в строке, т.к. никаких адекватных селекторов тут придумать невозможно. Соответственно, если там будет не лайк, а другая реакция, замена всё равно произойдёт. С этим ничего сделать нельзя.

Стало лучше?

Да

Нет

Установка

Скачать расширение Tamperermonkey

www.tampermonkey.net

Home | Tampermonkey

Нажать на иконку расширения. Выбрать "Создать новый скрипт".

Заменить код на этот. Нажать "Файл > Сохранить".

// ==UserScript== // @name DTF Improved Reactions // @namespace http://tampermonkey.net/ // @version 2024-12-16 // @description Убирает визуальный шум 💔 // @author Demon59901 // @match https://dtf.ru/* // @icon https://www.google.com/s2/favicons?sz=64&domain=dtf.ru // @grant none // ==/UserScript== const ANIMATION = `gelatin` // bounce | shaking | gelatin function addNewStyles() { document.body.insertAdjacentHTML('afterbegin', ` <style id="reactions-style"> :root { --gradient-top: #ef9a9a; --gradient-bottom: var(--theme-color-signal-negative-darkest); } .reaction-button { background: transparent; } @media (min-width: 600px) { .content:not(.content--embed) { display: grid; align-items: baseline; grid-template-columns: min-content 1fr; } .comment-item, .comment:not(.comment--writing, .comment--removed) .comment__content { display: grid; grid-template-columns: min-content auto 1fr; column-gap: 10px; } .content > *, .comment-item > *, .comment:not(.comment--writing, .comment--removed) .comment__content > * { grid-column: 1 / -1; } .content__reactions { order: 999; grid-column: 2 / -1; } .content__reactions .reactions { justify-content: flex-end; } .content > .content-footer { order: 998; grid-column: 1 / 2; } .comment-item .comment-text { margin: 8px 0 4px; } .comment-item .comment-footer, .comment:not(.comment--writing, .comment--removed) .comment-footer { flex-wrap: nowrap; order: 997; grid-column: 1 / 2; } .comment-item .comment-reactions, .comment:not(.comment--writing, .comment--removed) .comment-reactions { order: 998; margin: 0; grid-column: 2 / -1; } .comment--writing-reply { order: 999; } } .content > .content-footer { column-gap: 20px; } .content > .content-footer > * { order: 999; margin: 0; } .content-footer .content-views { order: 998; } .content-footer__space { display: none; } .link-button { text-wrap: nowrap; } .icon--like { fill: transparent; stroke: var(--theme-color-text-secondary); stroke-width: 2px; } .reactions .reaction-button:has(.icon--like) img, .reactions .reaction-button:first-child:has(.icon--reaction_add, .icon--reaction_like) .icon--like { display: none; } .reaction-button--active { animation: 0.3s ${ANIMATION} ease-in-out; color: unset; background: var(--theme-color-popover-item-bg-active-hover); } .reaction-button--active:hover, .reaction-button--active:has(.icon--like):hover { background: var(--theme-color-popover-item-bg-active); } .reaction-button--active .icon--like, .reaction-button:hover .icon--like { stroke: var(--gradient-bottom); } .reaction-button:hover .icon--reaction_like { fill: var(--gradient-bottom); } .reaction-button--active .icon--like { fill: url(#gradient); } .reaction-button--active:has(.icon--like) { color: var(--gradient-bottom); background: transparent; } .reactions > *:nth-child(n + 1) { order: 999; } .reactions > *:last-child { order: 998; } .reaction-button--active, .reactions:not(:has(.icon--like, .icon--reaction_like)) > *:first-child, .reactions:not(:has(.reaction-button--active)) > *:has(.icon--like, .icon--reaction_like) { display: flex !important; order: 997 !important; } .reactions.hidden > *:nth-child(n + 3):not(:last-child) { display: none !important; } stop.top { stop-color: var(--gradient-top); } stop.bottom { stop-color: var(--gradient-bottom); } @keyframes bounce { 40% { transform: scale(0.7) } 0%, 80%, 100% { transform: scale(1) } } @keyframes gelatin { from, to { transform: scale(1, 1) } 25% { transform: scale(0.9, 1.1) } 50% { transform: scale(1.1, 0.9) } 75% { transform: scale(0.95, 1.05) } } @keyframes shaking { 0%, 50%, 100% { transform: rotate(0deg) } 25% { transform: rotate(5deg) } 75% { transform: rotate(-5deg) } } </style> <svg style="height: 0"> <defs> <linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%"> <stop class="top" offset="0%"></stop> <stop class="bottom" offset="50%"></stop> </linearGradient> </defs> </svg> `) document.body.insertAdjacentHTML('beforeend', ` <svg style="display: none"> <defs> <symbol viewBox="0 0 24 24" id="heart"> <path d="M2.254 7.293C2.839 5.13 4.542 3.228 7.42 3.228c3.247 0 4.58 2.477 4.58 2.477s1.49-2.477 4.58-2.477 4.58 1.902 5.166 4.065c1.312 4.847-2.557 9.056-6.094 11.546-.971.683-2.04 1.474-3.18 1.85-.078.025-.26.083-.472.083-.211 0-.394-.058-.472-.084-1.151-.379-2.197-1.157-3.18-1.85C4.81 16.35.942 12.14 2.254 7.294Z"></path> </symbol> </defs> </svg> `) } const likeIcon = ` <svg class="icon icon--like" width="20" height="20"> <use href="#heart"></use> </svg> ` function addLikeIcon() { document.querySelectorAll('.reactions img[src*="/5c63be49-162a-5e4e-adca-9b9c3f76314c"]:first-child') .forEach(like => like.insertAdjacentHTML('beforebegin', likeIcon)) } const pageObserver = new MutationObserver(addLikeIcon) pageObserver.observe(document.querySelector('.view'), { childList: true, subtree: true }) addNewStyles()