Починим немного новые вырвиглазные реакции DTF – сделаем их ч/б или почти ч/б (инструкция внутри) + небольшой бонус
Проблема
Так как на сайте добавили новые реакции, которые слишком отвлекают внимание, давайте попробуем сделать их не такими навязчивыми.
Правило для расширения Stylus для браузера будет ниже.
А пока примеры, как будет выглядеть с исправлением:
Пример полносью ч/б
30% насыщенности цвета
Правило для Stylus
/* Делаем панель реакции менее яркой */
.reactions {
filter: grayscale(100%)
}
Наложение "100%" фильтра - даст полностью ч/б.
Наложение "70%" фильтра - оставит немного цвета.
Я для себя пока выбрал 70%.
Как установить правило – всё просто:
- Скачиваем расширение Stylus – для Firefox, или для Chrome
- Открываем сайт DTF, и нажимаем на иконку расширения в панели браузера;
- Нажимаем в меню "Создать правило для / Write style for" – курсором выбираем "dtf.ru" (внимательно выбирайте только основной домен "dtf.ru", без адреса страницы через знак "/" после него)
- В открывшемся окне создания стиля вставляем код который приведён выше, и сохраняем через кнопку "Сохранить / Save" или "Ctrl+S"
Возвращаемся на сайт, и видим что цвет новой панели со реакциями стал не таким бросающимся в глаза
Бонус
Кому не нравится вот эта полоса слева от ленты:
Было
Её тоже можно исправить, сделав невидимой.
Чтобы появлялать только при наведении курсора, и то тонкой и аккуратной.
Правило для Stylus (вставляем в тот же стиль для DTF, ниже/выше предыдущего правила, через перенос строки):
/* Исправление полосы прокрутки слева от ленты */
.sidebar {
/* For Firefox */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&:hover {
scrollbar-color: rgba(128, 128, 128, 0.3) transparent; /* Серый полупрозрачный цвет */
}
/* For WebKit browsers */
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.3s;
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.3);
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
Вот что получится
Станет (без наведения курсора на левую панель)
Станет (при наведении курсора на левую панель)
9 комментариев