Улучшаем реакции своими руками

Не выдержал и поправил. Получилось что-то такое:

Улучшаем реакции своими руками
Улучшаем реакции своими руками

Инструкция:

  • Ставим расширение Stylus: Chrome, Firefox;
  • Тыкаем на его иконку на панели инструментов браузера, там нажимаем на кнопку "Менеджер стилей" (у меня надпись обрезана до "Менед...");
  • Нажимаем на кнопку "Создать стиль" слева в разделе "Другие действия";
  • Пишем в названии слева "DTF" или что-то другое, на ваш вкус;
  • В основной части окна в самом верху в выпадающем списке выбираем "URL в домене", в поле для значения пишем "dtf.ru";
  • Вставляем код в самое большое поле:
.reactions > .reaction-button:not(.reaction-button--active) > img[src$="Ev8A220c+E8hITIAAAAASUVORK5CYII="] { display: none; } .reactions > .reaction-button:not(.reaction-button--active):has(img[src$="Ev8A220c+E8hITIAAAAASUVORK5CYII="]):before { content: ""; display: block; width: 20px; height: 20px; background-color: var(--theme-color-text-secondary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1.888 6.115C2.395 4.242 3.922 2.5 6.505 2.5c1.429 0 2.457.55 3.123 1.108a4.786 4.786 0 0 1 .274.249 5.222 5.222 0 0 1 .29-.255A4.799 4.799 0 0 1 13.262 2.5c1.325 0 2.374.414 3.155 1.114.768.687 1.217 1.597 1.462 2.501.561 2.076-.002 3.986-1.007 5.575-.998 1.577-2.457 2.887-3.815 3.843l-.174.124c-.654.462-1.488 1.053-2.391 1.35-.075.025-.315.104-.609.104s-.534-.079-.608-.103c-.906-.298-1.723-.877-2.379-1.342a56.816 56.816 0 0 0-.187-.133c-1.358-.956-2.817-2.266-3.815-3.843-1.005-1.589-1.568-3.5-1.007-5.575Zm8.71-.524-.003.004a.833.833 0 0 1-.73.4.833.833 0 0 1-.712-.433V5.56l-.001-.001m.001.003V5.56a1.076 1.076 0 0 0-.02-.032 3.055 3.055 0 0 0-.575-.642c-.425-.356-1.086-.72-2.053-.72-1.664 0-2.65 1.064-3.008 2.385-.406 1.5-.027 2.93.807 4.248.84 1.329 2.113 2.49 3.365 3.371l.158.112c.7.494 1.314.927 1.97 1.143a.5.5 0 0 0 .087.02.5.5 0 0 0 .088-.02c.653-.216 1.287-.663 1.99-1.158l.137-.097c1.252-.88 2.525-2.042 3.365-3.37.834-1.318 1.213-2.749.807-4.25-.187-.692-.504-1.282-.965-1.695-.447-.4-1.088-.688-2.043-.688-.901 0-1.566.357-2.017.726a3.524 3.524 0 0 0-.624.663 1.559 1.559 0 0 0-.024.035m0 0-.001.002-.001.001v.001l.002-.004Z'/%3E%3C/svg%3E") no-repeat; } /* Скрывает все реакции, кроме сердца. Можно удалить */ .reactions > .reaction-button:not(:has(img[src$="Ev8A220c+E8hITIAAAAASUVORK5CYII="])) { display: none; }

Жмём "Сохранить" и радуемся до следующего редизайна.

1111
11
9 комментариев

шо то х шо это

1
1
Ответить

спрячутся все иконки кроме первой
а первой может быть и не сердце

лучше прятать так:
/* Hide all reactions except heart */
.reactions .reaction-button:not(:has(img[src^='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAMAAAC4uKf/AAAC+lBMVEUAAADLOjbmRj22KSfVOja0KSffQDq0KSe1KSfMOTK1KSe0KSfh'])) {
display: none;
}

1
Ответить

блять, они иконки меняют постоянно
дебилы

/* Hide all reactions except heart */
.reactions .reaction-button:not(:has(img[src^='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAMAAAC4uKf/AAAAjVBMVEUAAAD1Vmb3WGj9WW3/XW32V2f7Wmr9XWz3V2f/X2/+XGz'])) {
display: none;
}

2
Ответить

Спасибо. Убрал, короче, вообще изменение цвета фона вокруг активного сердечка. В итоге нажатые мной красные, остальные все с серым контуром.
.reaction-button--active { background-color: #F0F0F0;
color: #595959;
}

1
Ответить

@Бумажный тигр А не получится ли, случаем, подобным методом вернуть личку? Которая после редизайна сейчас для браузеров укокошена, но работает в приложении для мобилок.

Ответить

Таким - нет. Это просто стили, можно только изменять внешний вид того, что есть, или скрывать что-то. Скриптами наверное можно, если API живое. Но это сизифов труд - постоянно за ними переделывать. Они даже иконку сердца поменяли спустя несколько часов.

1
Ответить

Каво? куда тыкаешь? я могу только пернуть и рыгнуть, тыкайте сами.

Ответить