Сделал скрипт, который меняет иконку сердечка и убирает фон у кнопок
Обновление 08.06.24
- Улучшена компоновка реакций в постах
- v1.1: Кнопка статистики сдвинута влево, чтобы комментарии оказались на привычном месте
- v1.2: Исправлен визуальный баг
- v1.3: Исправлен визуальный баг
Обновление 07.06.24
- Улучшен код
- Улучшена компоновка реакций в комментариях
Обновление 06.06.24
- Новая анимация при клике
- Новая заливка сердечка (при желании цвет можно поменять)
- Исправлен баг из закреплённого коммента
Известные проблемы
- Замена иконки происходит для первого элемента в строке, т.к. никаких адекватных селекторов тут придумать невозможно. Соответственно, если там будет не лайк, а другая реакция, замена всё равно произойдёт. С этим ничего сделать нельзя.
Стало лучше?
Установка
Скачать расширение Tamperermonkey
Нажать на иконку расширения. Выбрать "Создать новый скрипт".
Заменить код на этот. Нажать "Файл > Сохранить".
// ==UserScript==
// @name DTF Improved Reactions
// @namespace http://tampermonkey.net/
// @version 2024-06-08.v1.3.4
// @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 > *:first-child {
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.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)
Пишите какие баги найдёте, завтра буду фиксить
Ахуй. Отлично выглядит
а можно такое сердечко?
https://i.ibb.co/8Y4HR64/image.png
А можно сделать скрипт который убирает нахуй все кроме сердечек и сердечки сделать так как они выглядели до апдейта?
Да, люди сегодня днём делились в ленте постами, надо листать только
https://dtf.ru/u/123718-provice-unify/2725291-fix-karmy-dtf-v20