Я тут немного нахреновертил... Попытка объединить старый стиль кармы с новым
Немного пошаманил с CSS, получилось вот это вот на скрине
Кастомный набор CSS стилей для сайта, частично возвращающий прежнюю структуру кармы (альфа).
Версия сыровата, ибо спать хочется, может быть вернусь к этой затее позже. Если у кого руки прямее и есть время и желание, хватайте на додел.
TO DO:
- Вернуть иконки-стрелочки и цвета (или нафиг надо, вроде неплохо смотрится) // готовые SVG коды закомментированы и почти готовы к использованию;
- Победить анимации, а-то при нажатии иконки прыгают аки бесы какие-то
P.S. Писал в/для Stylus.
/* DTF Karma Fix (Alpha) */
@-moz-document url-prefix("https://dtf.ru/") {
:root {
--karma-margins: 10px;
}
/* feed part */
.like-button {
display: flex;
flex-direction: row-reverse;
}
.like-button--active, .like-button--lottie-animated {
margin-right: 0 !important;
}
.like-button__count {
margin-left: 0;
margin-right: var(--karma-margins);
}
.content-footer__item:has(button.like-button--action-like) {
margin-right: 0;
order: 3;
}
.content-footer__item:has(button.like-button--action-dislike) {
margin-right: var(--karma-margins) !important;
}
.content-footer__item--right {
margin-right: 20px !important;
order: 2 !important;
}
/* .like-button--action-dislike {
--like-color-text-hover: #f0303d;
--like-color-background-hover: #e5545e;
--like-color-active: #e65151;
}
.like-button--action-like {
--like-color-text-hover: #479d52;
--like-color-background-hover: #479d52;
--like-color-active: #479d52;
}
symbol#v_like > path {
d: path("M4.4,13l5.4-5.9c0.1-0.1,0.3-0.1,0.4,0l5.4,5.8");
}
symbol#v_like_active > path {
d: path("M4.4,13l5.4-5.9c0.1-0.1,0.3-0.1,0.4,0l5.4,5.8");
}
symbol#v_dislike > path {
d: path("M15.6,7l-5.4,5.9c-0.1,0.1-0.3,0.1-0.4,0L4.4,7");
}
symbol#v_dislike_active > path {
d: path("M15.6,7l-5.4,5.9c-0.1,0.1-0.3,0.1-0.4,0L4.4,7");
} */
}
1 комментарий