Пользовательский стиль для Ютуба, устанаваливается через расширения Stylish или Stylebot. В библиотеке стиль называется Lighting Viewed .

При наведении мыши на видео, подсветка исчезает.

Вот весь используемый код:

.watched span {
opacity: 0.8;
transition: opacity 0.3s ease;
}

.watched span:after {

background: rgba(50,150,250,0.6);
content: '';
height: 100%;
position: absolute;
transition: opacity 0.3s ease;
width: 100%;
z-index: 100;
}

.watched:hover span { opacity: 1; }
.watched:hover span:after { opacity: 0; }

Просьба не относиться так, будто вас заставляют это покупать. Если вам это покажется полезным, я буду рад.

Если есть вопросы, пишите в комментариях.

Спустя 3 дня усердной работы представляю более-менее допиленный вариант рабочего редизайна сайта.
Это не реклама, делалось все для себя, но хочется поделиться со всеми пикабушниками.

Вот внешний вид постов. Изображения по возможности растянуты на весь пост:

Комментарии и кнопки теперь располагаются внизу:

Текстовые посты стали более чистыми и читабельными:

А вот старый вариант:

Судя по некоторым мнениям, посты стали занимать слишком много места, но, это все настраивается, достаточно исправить пару строк. Делалось для себя и мне показалось это оптимальным.

Вот полный список изменений:

- изменена шапка сайта, кнопки стали крупнее.

- посты оформлены в виде плиток по мотивам Material-дизайна.

- убраны лишние бордеры и полосы на странице.

- заменен шрифт на тот, что используется в мобильной версии.

- увеличены шрифты в постах и заголовках

- кнопки поста и комментарии убраны вниз

- обновлены кнопки рейтинга

- строки рейтинга и подписчиков в профиле скрыты, но они отображаются при наведении мыши.
- адаптивная ширина страницы, реализованная в 3 шага.

Недоработки:

- между блоками текста/изображений в постах могут быть неожиданно большие или малые отступы, связано с очень мудреной генерацией тегов в постах.

- могут быть не проработаны некоторые маловажные элементы.

Как пользоваться:

- нужно использовать расширение Stylish или Stylebot для браузера. Использование темы полностью безопасно, она не содержит никаких левых скриптов, изображений и т.д. Подробная инструкция по установке в предыдущих постах.

- в библиотеках стилей каждого из этих расширений нужно найти стиль "Pikabu Modern v2 by denvk".

Надеюсь, пост донесет информацию до всех заинтересованных. Всем спасибо!

В продолжение поста об обновлении стиля Пикабу.

Немного потренировавшись, я попробовал сделать и довести до ума новую версию дизайна Пикабу, приблизив её к мобильной версии и эскизам грядущего обновления сайта.

Напомню, что подобные действия на "чужих сайтах" производятся посредством пользовательских стилей CSS с помощью расширений браузера. Для этого не нужно быть администратором сайта.

Теперь мой редизайн вносит следующие изменения:

- Изменена шапка сайта. Проверена как с блоком рекламы, так и без;

- Посты и элементы оформлены в виде плиток на сером фоне;

- Увеличены размеры шрифтов в заголовках, постах и комментариях;

- Комментарии и кнопки перенесены вниз;

- Посты растянуты на доступную ширину, картинки увеличены.

- Добавлена некоторая резиновость по ширине.
- Увеличены кнопки для изменения рейтинга постов.

Выглядит вот так:

Установить редизайн очень просто, для этого используются расширения браузера, либо Stylish, либо Stylebot, кому как нравится.

Если у вас стоит расширение Stylish, вам нужно нажать кнопку "Найдите другие стили для этого веб-сайта", найти стиль "Pikabu Modern 2 by Denvk" и установить его. На их сайте новые материалы добавляются в конец, поэтому я приложил прямую ссылку на страницу.

Если у вы пользуетесь расширением Stylebot, нажмите "Install style on Social" и найдите пункт "Pikabu Modern v2"

Надеюсь, что в новом оформлении вы найдете свои плюсы. Если же нет, пишите свои пожелания в комменты.

Внимание! Стиль не тестировался с мобильной версией, и с определенной вероятностью может конфликтовать с ней. Хотя, думаю, что в любом случае найдутся ошибки. Пожалуйста, сообщайте о них.