Переносим кнопки дизлайков назад на своё место (CSS) v1.2.6
(Обновлено, 1.2.6) Кнопки дизлайков вернутся назад на своё законное место.
Решение тестовое, под статьями возможно уедут не туда, куда надо.
Строчек для правки совсем немного, поэтому пока что нет смысла загружать на GitHub.
Патчлист:
- 1.1 - появился ещё третий вариант. Заменяются новые иконки, кнопки перемещаются немного иначе. Пока только для комментариев.
- 1.2 - фикс для обычных комментариев (не "ответов").
- 1.2.1 - добавлено перемещение кнопок для статей, статей в "Популярное" и т.п. Не должно уезжать, т.к сами элементы поменялись местами.
- 1.2.2 - обновлено перемещение кнопок для комментариев.
Теперь кнопки перемещены по аналогии с 1.2.1, т.е сами элементы поменялись местами "физически". - 1.2.3 - хотфикс. Таки нашёл баг - вложения оказались впереди текста сообщения.
- 1.2.4 - хотфикс. Добавлено изменение цвета "лайкнутого" комментария/статьи. В смысле цвет активной кнопки.
- 1.2.5 - хотфиксы цвета кнопок "лайков/дизлайков". Код объединён в один CSS файлик для браузерных расширений Stylus и Styler
- 1.2.6 (стиль Stylus/Styler) - добавлено отключение анимаций "лайков/дизлайков". Изменены дефолтные цвета, добавлены настройки, фикс расположения кнопки загрузки комментариев в ветке.
(Устарело, смотрите 1.2.1 и 1.2.2) Вбиваем сей CSS (комментарии, статьи, "Популярное" и т.п. У статей и "Популярного" кнопки могут уехать, т.к там счётчик комментариев):
/* Комментарий */
/* Кнопка "Дизлайк" */
.comment:not(.comment--reply) .like-button--action-dislike {
margin-left: unset;
position: relative;
left: -110px;
}
/* Кнопка "Ответить" */
.comment:not(.comment--reply) .like-button+.comment__action {
margin-left: 15px;
}
/* Комментарий (ответ) */
/* Кнопка "Дизлайк" */
.comment.comment--reply .like-button--action-dislike {
margin-left: unset;
position: relative;
left: -110px;
}
/* Кнопка "Ответить" */
.comment.comment--reply .like-button+.comment__action {
margin-left: 15px;
}
/* Кнопка "..." у комментариев */
.comment__action--etc {
margin-left: unset;
}
/* Статья */
/* Кол-во комментариев */
.content.content--full+.content-footer.content-footer--full .comments_counter {
position: relative;
left: 10px;
}
/* Кнопка "Дизлайк" */
.content.content--full+.content-footer.content-footer--full .content-footer__item--right {
position: relative;
margin-left: unset;
left: -157px;
}
/* Статья (в "Популярное" и т.п) */
/* Кол-во комментариев */
.content-feed .content-footer.content-footer--short .comments_counter {
position: relative;
left: 10px;
}
/* Кнопка "Дизлайк" */
.content-feed .content-footer.content-footer--short .content-footer__item--right {
position: relative;
margin-left: -157px;
/* left: -165px; */
}
(Устарело, смотрите 1.2.1 и 1.2.2) Либо вариант №2 (перенесёт кнопки "Дизлайков" направо, смотрите скриншот ниже):
Второй вариант просто перемещает кнопку "Дизлайк" справа от "Ответить"
/* Комментарий */
/* Кнопка "Дизлайк" */
.comment:not(.comment--reply) .like-button--action-dislike {
margin-left: unset;
}
/* Комментарий (ответ) */
/* Кнопка "Дизлайк" */
.comment.comment--reply .like-button--action-dislike {
margin-left: unset;
}
/* Кнопка "..." у комментариев */
.comment__action--etc {
margin-left: unset;
}
/* Статья */
/* Кнопка "Дизлайк" */
.content.content--full+.content-footer.content-footer--full .content-footer__item--right {
position: relative;
margin-left: unset;
}
/* Кнопка "Дизлайк" */
.content-feed .content-footer.content-footer--short .content-footer__item--right {
position: relative;
margin-left: unset;
}
(Устарело, смотрите 1.2.1 и 1.2.2) Третий вариант (v1.1). Пока только для комментариев
/* Коммент */
/* Кнопка "Дизлайк" */
.comment:not(.comment--reply) .like-button--action-dislike {
position: relative;
margin-left: 0px;
margin-right: 0px;
left: -90px;
}
/* Кнопка "..." */
.comment:not(.comment--reply) .comment__action[air-module='module.etc_controls'] {
margin: 0px -45px 0px 45px;
}
/* Кнопка "Ответить" */
.comment:not(.comment--reply) .like-button+.comment__action {
margin: -3px -17px 0px 13px;
}
/* Коммент (ответ) */
/* Кнопка "Дизлайк" */
.comment.comment--reply .like-button--action-dislike {
position: relative;
margin: 0px 0px 0px 0px;
left: -90px;
}
.comment.comment--reply .like-button__count {
margin: -12px 5px 0px 5px;
}
/* Кнопка "Ответить" */
.comment.comment--reply .comment__action[air-click*='place_form?to'] {
margin: -3px -35px 10px 12px;
}
/* Кнопка "..." */
.comment.comment--reply .comment__action[air-module='module.etc_controls'] {
margin: 0px -27px 10px 45px;
}
/* Заменить иконки "лайков/дизлайков" */
.comment .like-button__icon svg {
display: none;
}
/* Коммент */
.comment:not(.comment--reply) .like-button--action-like::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: 0px 0px 0px 0px;
width: unset;
height: unset;
transform: scaley(-1)
}
.comment:not(.comment--reply) .like-button--action-dislike::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: -10px 0px 0px 0px;
width: unset;
height: unset;
}
/* Коммент (ответ) */
.comment.comment--reply .like-button--action-like::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: -10px 0px 0px 0px;
width: unset;
height: unset;
transform: scaley(-1)
}
.comment.comment--reply .like-button--action-dislike::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: -10px 0px 10px 0px;
width: unset;
height: unset;
}
/* Ховеры "лайков/дизлайков" */
.comment :is(.like-button--action-like:hover, .like-button--action-like:hover .like-button__count) {
color: rgb(29,200,27);
}
.comment .like-button--action-dislike:hover {
color: red;
}
1.2.1 (для статей)
1.2.1
/* Статьи (страницы статей, "Популярное" и т.п) */
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) {
display: flex;
}
/* Кнопка "Лайк" */
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) .content-footer__item:first-child {
order: -2;
margin: 0px 5px 0px 0px;
}
/* Кнопка "Дизлайк" */
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) .content-footer__item:last-child {
margin: 0px 5px 0px 0px;
order: -1;
}
/* Заменить иконки "лайков/дизлайков" */
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) .content-footer__item .like-button__icon svg {
display: none;
}
/* Иконка "Лайка" */
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) .content-footer__item .like-button--action-like::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: 0px 0px 0px 0px;
width: unset;
height: unset;
transform: scaley(-1)
}
/* Иконка "Дизлайка" */
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) .content-footer__item .like-button--action-dislike::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: -10px 0px 0px 0px;
width: unset;
height: unset;
}
/* Ховеры "лайков/дизлайков" */
/* Сносим изменения DTF */
.content-footer :is(.like-button--action-like,
.like-button--action-dislike) {
--like-color-text-hover: unset;
--like-color-active: unset;
}
/* "Лайки/Дизлайки" */
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) :is(.like-button--action-like:hover, .like-button--action-like:hover .like-button__count) {
color: rgb(29,200,27);
}
.content-footer.content-footer:is(.content-footer--short, .content-footer--full) .like-button--action-dislike:hover {
color: red;
}
/* Цвет уже "лайкнутого" комментария/статьи */
.like-button--active {
color: rgb(29,200,27);
}
1.2.3 (для комментариев. 1.2.1 и 1.2.3 должны нормально работать вместе, можете смело совмещать). Сделано по аналогии с 1.2.1, т.е элементы поменялись местами "физически".
Могут быть баги, т.к возможны элементы, которые я не учёл. Но как способ возврата кнопок на места, этот должен быть идеальным.
1.2.3
/* Комментарии */
/* Меняем порядок элементов */
.comment__avatar {
order: -1;
}
.comment__author {
order: -1;
}
.comment__detail {
order: -1;
}
.comment__icon {
order: -1;
}
.comment__break {
order: -1;
}
.comment__expand-branch {
order: -1;
}
:is(.comment--with-no-replies .comment__load-more, .comment__load-more).comment__load-more {
order: -1;
}
.comment__text {
order: 1;
}
.comment__attaches {
order: 1;
}
/* Кнопка "Лайк" */
.comment:not(.comment--reply) .like-button--action-like {
margin: 0px 5px 0px 0px;
order: 1;
}
/* Кнопка "Дизлайк" */
.comment:not(.comment--reply) .like-button--action-dislike {
margin: 0px 10px 0px 0px;
order: 2;
}
/* Кнопка "Ответить" */
.comment:not(.comment--reply) .like-button+.comment__action {
margin: -5px 12px 0px 0px;
order: 3;
}
/* Кнопка "..." */
.comment:not(.comment--reply) .comment__action[air-module='module.etc_controls'] {
margin: -5px 0px 0px 0px;
order: 4;
}
/* Коммент (ответ) */
/* Кнопка "Лайк" */
.comment.comment--reply .like-button--action-like {
margin: 0px 5px 0px 0px;
order: 1;
}
.comment.comment--reply .like-button__count {
margin: -14px 0px 0px 5px;
}
/* Кнопка "Дизлайк" */
.comment.comment--reply .like-button--action-dislike {
margin: 0px 10px 0px 0px;
order: 2;
}
/* Кнопка "Ответить" */
.comment.comment--reply .like-button+.comment__action {
margin: -14px 12px 0px 0px;
order: 3;
}
/* Кнопка "..." */
.comment.comment--reply .comment__action[air-module='module.etc_controls'] {
margin: -14px 0px 0px 0px;
order: 4;
}
/* Заменить иконки "лайков/дизлайков" */
.comment .like-button__icon svg {
display: none;
}
/* Коммент */
.comment:not(.comment--reply) .like-button--action-like::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: 0px 0px 0px 0px;
width: unset;
height: unset;
transform: scaley(-1)
}
.comment:not(.comment--reply) .like-button--action-dislike::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: -10px 0px 0px 0px;
width: unset;
height: unset;
}
/* Коммент (ответ) */
.comment.comment--reply .like-button--action-like::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: -10px 0px 0px 0px;
width: unset;
height: unset;
transform: scaley(-1)
}
.comment.comment--reply .like-button--action-dislike::before {
content: '⌵';
font-size: 25px;
font-weight: 800;
line-height: unset;
margin: -10px 0px 10px 0px;
width: unset;
height: unset;
}
/* Сносим изменения DTF */
.content-footer :is(.like-button--action-like,
.like-button--action-dislike) {
--like-color-text-hover: unset;
--like-color-active: unset;
}
/* Ховеры "лайков/дизлайков" */
.comment :is(.like-button--action-like:hover, .like-button--action-like:hover .like-button__count) {
color: rgb(29,200,27);
}
.comment .like-button--action-dislike:hover {
color: red;
}
/* Цвет уже "лайкнутого" комментария/статьи */
.like-button--active {
color: rgb(29,200,27);
}
Ссылки:
- GitHub (1.2.4)
Возможно, кодеры (или кто там) DTF продолжат обновлять эту "новую фичу", и тогда эта CSS правка перестанет действовать. Возможно. Если так и будет, то постараюсь обновить CSS правку вовремя.
Если замечен баг, есть идея, или же просто страсть как хочется написать комментарий - добро пожаловать в комментарии.
1919 показов
253253 открытия
Вот только знак стрелки вниз ⇓ - это всегда был знак "скачать", какой нахуй дизлайк? Так что тут проблема глубже.
это кор на reddit и 9gag
но там есть и вверх (upvote) что логично и универсально
так лучше в правую часть, как и было - нет?
Можно и так. В третьем варианте.
Как бонус - заменённые иконки, наиболее близкие к прошлым стрелочкам.
v1.2
Пофиксил съехавшие элементы у обычных комментариев (не "ответов").
1.2.1
Добавлено перемещение кнопок и для статей. Вчера пытался быстренько переместить этим способом, но не вышло...теперь сработало.
1.2.2
Перемещение кнопок для комментариев обновлено по аналогии с 1.2.1, т.е сами элементы поменялись местами "физически".
Возможно будут баги, т.к мог учесть не все элементы. Если хотя бы один элемент не имеет новую прописанную позицию, то он вмешается в порядок элементов.