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

Обновление 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-07-04 // @description Убирает визуальный шум 💔 // @author Demon59901 // @match https://dtf.ru/* // @icon https://www.google.com/s2/favicons?sz=64&domain=dtf.ru // @grant none // ==/UserScript== const DELAY = 2000 function addNewStyles() { const style = document.createElement('style') style.id = 'reactions-style' style.innerHTML = ` .reaction-button { --gradient-top: #ef9a9a; --gradient-bottom: var(--theme-color-signal-negative-darkest); background: transparent; } @media (min-width: 600px) { .content { display: grid; grid-template-columns: min-content 1fr; align-items: baseline; } .comment:not(.comment--writing, .comment--removed) .comment__content { display: grid; grid-template-columns: min-content auto 1fr; column-gap: 10px; } .content > *, .comment:not(.comment--writing, .comment--removed) .comment__content > * { grid-column: 1 / -1; } .content__reactions { grid-column: 2 / -1; order: 999; } .content__reactions .reactions { justify-content: flex-end; } .content > .content-footer { grid-column: 1 / 2; order: 998; } .comment:not(.comment--writing, .comment--removed) .comment__actions { grid-column: 1 / 2; flex-wrap: nowrap; order: 997; } .comment:not(.comment--writing, .comment--removed) .comment__reactions { grid-column: 2 / -1; order: 998; margin: 0; } .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 { background: var(--theme-color-popover-item-bg-active-hover); color: unset; animation: 0.3s bounce ease-in-out; } .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) { background: transparent; color: var(--gradient-bottom); } .reactions > *:nth-child(n + 1) { order: 999; } .reactions > *:last-child { order: 998; } .reactions > *:has(.icon--like, .icon--reaction_like) { display: flex !important; order: 997; } .top { stop-color: var(--gradient-top); } .bottom { stop-color: var(--gradient-bottom); } @keyframes tilt-shaking { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @keyframes bounce { 40% { transform: scale(0.7); } 0%, 80%, 100% { transform: scale(1); } } ` const extraSvgIcons = document.createElement('svg') extraSvgIcons.id = 'extra-svg-icons' extraSvgIcons.style.display = 'none' extraSvgIcons.innerHTML = ` <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> ` document.body.appendChild(style) document.body.appendChild(extraSvgIcons) } function replaceLikeIcon() { const newIcon = ` <svg class="icon icon--like" width="20" height="20"> <use xlink:href="#heart"></use> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop class="top" offset="0%"></stop> <stop class="bottom" offset="50%"></stop> </linearGradient> </svg> ` document.querySelectorAll('.reactions').forEach(reactions => { const like = reactions.querySelector('div:has(img[src*="/y0MWKocKBWraZQer8OvqMls7h/"])') || reactions.firstElementChild if (reactions.querySelector('.icon--like')) return like.querySelector('.reaction-button img')?.insertAdjacentHTML('beforebegin', newIcon) }) } const pageObserver = new MutationObserver(replaceLikeIcon) pageObserver.observe(document.body, { childList: true, subtree: true }) addNewStyles() setTimeout(replaceLikeIcon, DELAY)