Возвращаем минусы на Пикабу через простой CSS!
Началом для этого поста стала новость на Пикабу о возвращении минусов и мой шуточный пост с ответом.
Да, вначале в просто развлекался, пририсовывая шарики к минусу. Это было намного забавнее обычной полоски.
Но потом в комментариях подсказали, что сами данные с количеством минусов лежат на Пикабу прямо в коде страницы! И не просто в коде, а еще и в атрибутах вроде: data-pluses="980" data-minuses="52". Откуда их и решено было вытащить.
А позже я вытащил и данные плюсов и минусов комментариев.
Так что нужно для их отображения?
1) Взять любое расширение страницы вроде Stylus, где можно вводить CSS код. Теоретически, может сработать даже в блокировщике рекламы вроде uBlock Origin. Кажется, он тоже поддерживает CSS.
2) Ниже я разместил стили, которые нужно добавить для сайта Пикабу в расширении. Примерный порядок действий виден на скриншоте выше.
/* 8 */
.rating-progress {position: relative; overflow: visible;}
.rating-progress:before, .rating-progress:after {content: ""; background: #e5594c; width: 8px; height: 8px; border-radius: 50%; position: absolute; top: -5px; left: -1px;}
.rating-progress:after {top: auto; bottom: -5px;}
/* Плюсы и минусы поста */
.story__rating-block:after {content: attr(data-minuses); font-size: 12px; color: red; margin-top: -14px;}
.story__rating-block:before {content: attr(data-pluses); font-size: 12px; color: green; margin-bottom: -14px;}
/* Плюсы и минусы Комментария */
.comment__rating:after {content: attr(data-minuses); font-size: 12px; color: red; margin-right: 5px; margin-left: -3px;}
.comment__rating:before {content: attr(data-pluses); font-size: 12px; color: green; margin-left: 5px; margin-right: -3px;}
В принципе, остается только нажать кнопку сохранить и все будет работать! Теперь количество плюсов и минусов видно и в постах и в комментариях. Причем, даже в новых.
Я знаю, что администрация Пикабу может в любой момент что-то изменить, но мне было весело работать над этим всем!
Из глюков:
При 100% заполнении шакалы полоска становится квадратной.
Оценки на собственных комментариях сливаются.
Почти отсутствует оформление.
