Тема для тех у кого изображение монитора или телевизора в качестве монитора настроено контрастно и ярко для просмотров: фильмов, ютуба, различных видеороликов; просмотр различных сайтов c текстами со временем утомляет глаза.
Каждый раз вручную менять настройки устройства отображения при смене медиа контента с фильмов на чтение новостей и обратно это конечно не выход. Кроме того могут быть индивидуальные особенности и предпочтения годами проверенные на практике. Предпочтения которые не одно средство отображения с помощью его настроек удовлетворить не в состоянии.
Чтобы большинство сайтов меньше влияли на глаза — можно перекрашивать большинство сайтов на свой лад с помощью расширения и кода CSS, делая фон и текст со ссылками c меньшей разницей в яркости — тем самым уменьшая: контраст, яркость; или наоборот.
Например ШИМ это мерцание подсветки в мониторах или телевизорах, делая фоны страниц более тёмными можно уменьшить влияние мерцания подсветки, например в печати принято считать, что тексты это примерно 5% заполнения стрницы, в таком случае при замене фона на более тёмный можно говорить о снижении влияния ШИМ при просмотре текстов до 95%(максимум при полностью чёрном фоне) и при полностью белом тексте + при снижении яркости текста влияние ШИМ ещё больше уменьшается.
Занимательная математика относительно ШИМ: если ШИМ в каких то устройствах отображения равен 120 Гц = принимаем его за 100% влияния на глаза, то поднятие частоты производителем в следующих моделях отображения ШИМ до 960 Гц(а эта частота уже считается безопасной для глаз) снизит процент влияния ШИМ = 100-(100/8)=на 87.5%.
Программа конвертирует RGB значение кода цвета в Hex (шестнадцатеричный) код цвета.
Встретил также, что можно в коде и так:
background-color: rgb(255, 255, 128) !important;Переведя в RGB предлагаемое значение цвета фона:
#3D2B1Fполучил RGB = 61 43 31, что в среднем в 5.7 раз меньше от 255 255 255.
Начём с названия применяемого расширения для браузеров на оcнове Chromium:
User JavaScript and CSS
Адрес в строке:
*,!www.youtube.com
- * — Означает, что применяется к любым сайтам ! — кроме (www.youtube.com)
Вот предлагаемый код CSS:
:not(:link):not(:link>*):not(:visited):not(:visited>*){background-color:#3D2B1F !important; color:#E6E6FA !important;}
:link{background-color:#3D2B1F !important; color:#66FF00 !important;}
:visited{background-color:#3D2B1F !important; color:#1E90FF !important;}
:visited>*{background-color:#3D2B1F !important; color:#1E90FF !important;}
:link:hover{background-color:#3D2B1F !important; color:#E75480 !important;}
:visited:hover{background-color:#3D2B1F !important; color: #E75480 !important;}
:visited>*:hover{background-color:#3D2B1F !important; color: #E75480 !important;}Разберём код более внимательно.
1 :not — означает не содержит.
2 (:link) — в скобках название селектора, в данном случае :link — не содержит ссылку.
3 :not(:link>) — не содержит любое количество дочерних элементов после родителя(ссылки), часто на сайтах в коде после адреса ссылки идёт текст который закрашивать не надо.
4 :not(:visited) — в скобках название селектора, в данном случае :visited — не содержит посещённую ссылку.
5 :not(:visited>) — не содержит любое количество дочерних элементов после родителя(посещённой ссылки).
6 { — открывает название «операторов» применяемых к «объектам»(селекторам) или по правильному открывает свойства селекторов.
15 :link — ссылка.
16 далее всё аналогично 6-14.
17 :visited — посещённая ссылка.
18 далее всё аналогично 6-14.
19 :visited>* — элементы(тексты) дочерних элементов после родителя(посещённой ссылки).
20 далее всё аналогично 6-14.
21 :link:hover — ссылка на которую наведена мышь.
22 далее всё аналогично 6-14.
23 :visited:hover — посещённая ссылка на которую наведена мышь.
24 далее всё аналогично 6-14.
25 :visited>*:hover — элементы(тексты) дочерних элементов после родителя(посещённой ссылки) на которую наведена мышь.
26 далее всё аналогично 6-14.
Перекраска большинства сайтов под свои предпочтения заключается в замене цветов фона и цветов шрифтов, фон можно быстро поменять загрузив код в блокнот, произведя замену и скопировав обратно:
Список кодов подходящего цвета можно посмотреть в Википедии.
Вот как например для меня выглядят сайты с моими предпочтениями:
Для ютуба(www.youtube.com) понадобился другой код на основе исключений:
:not(:link,:link>*,:visited,:visited>*):not(div[class^="style-scope ytd-player"]):not(div[class^="style-scope ytd-player"]>*):not(div[class^="style-scope ytd-player"]>*>*):not(div[class^="style-scope ytd-player"]>*>*>*):not(div[class^="ytp-progress"]):not(div[class^="ytp-progress"]>*):not(div[class^="ytp-progress"]>*>*):not(div[class^="ytp-progress"]>*>*>*):not([class="style-scope ytd-rich-grid-row"]):not([class="style-scope ytd-rich-grid-row"]>*):not([class="style-scope ytd-rich-grid-row"]>*>*):not([class="style-scope ytd-rich-grid-row"]>*>*>*):not(div[class^="ytd-searchbox"]):not(yt-interaction[id="interaction"]){background-color:#3D2B1F !important; color:#E6E6FA !important;}
:link{background-color:#3D2B1F !important; color:#66FF00 !important;}
:visited{background-color:#3D2B1F !important; color: #ACE1AF !important;}
:visited>*{background-color:#3D2B1F !important; color: #ACE1AF !important;}
:link:hover{background-color:#3D2B1F !important; color:#E75480 !important;}
:link>*{background-color:#000000 !important; color:#66FF00 !important;}
:link>*>*{background-color:#000000 !important; color:#66FF00 !important;}
:visited:hover{background-color:#3D2B1F !important; color:#E75480 !important;}
Сегодня он работает так как в коде применены используемые селекторы, а завтра уже может не работать так как названия селекторов в коде ютуба может измениться.
Можно конечно исключить по ключевым значениям:
:not(:link,:link>*,:visited,:visited>*):not(div[class*="player"]):not(div[class*="player"]>*):not(div[class*="player"]>*>*):not(div[class*="player"]>*>*>*):not(div[class*="progress"]):not(div[class*="progress"]>*):not(div[class*="progress"]>*>*):not(div[class*="progress"]>*>*>*):not([class*="rich-grid-row"]):not([class*="rich-grid-row"]>*):not([class*="rich-grid-row"]>*>*):not([class*="rich-grid-row"]>*>*>*):not(div[class*="search"]):not(yt-interaction[id*="interaction"]){background-color:#3D2B1F !important; color:#E6E6FA !important;}
:link{background-color:#3D2B1F !important; color:#66FF00 !important;}
:visited{background-color:#3D2B1F !important; color: #ACE1AF !important;}
:visited>*{background-color:#3D2B1F !important; color: #ACE1AF !important;}
:link:hover{background-color:#3D2B1F !important; color:#E75480 !important;}
:link>*{background-color:#000000 !important; color:#66FF00 !important;}
:link>*>*{background-color:#000000 !important; color:#66FF00 !important;}
:visited:hover{background-color:#3D2B1F !important; color:#E75480 !important;}Но применяемые селекторы могут полностью изменить названия либо могут быть добавлены новые.
Внедряя код в файлы(например .css) расширений на носителе можно менять их оформление:
Вот ещё вариант кода настройки оформления сайтов, так даже ещё проще подстраивать под свои потребности яркость и контраст:
:not(:link):not(:link>*):not(:visited):not(:visited>*){background-color: rgb(30, 30, 30) !important; color: rgb(150, 150, 150) !important; font-size: 18px !important;}
:link{background-color: rgb(50, 50, 70) !important; color: rgb(0, 122, 0) !important;}
:visited{background-color: rgb(70, 50, 50) !important; color: rgb(0, 100, 122) !important;}
:visited>*{background-color: rgb(30, 30, 30) !important; color: rgb(0, 100, 122) !important;}
:link:hover{background-color:#3D2B1F !important; color:#E75480 !important;}
:visited:hover{background-color:#3D2B1F !important; color: #E75480 !important;}
:visited>*:hover{background-color:#3D2B1F !important; color: #E75480 !important;}
Записи кодов цветов заменены более понятными значениями:
rgb(30, 30, 30)
rgb(150, 150, 150)
Если яркость между белым и чёрным составляет по трём цветам 255 значений то в данном случае 120.
Меняем немного код:
:not(:link):not(:link>*):not(:visited):not(:visited>*){background-color: rgb(30, 30, 30) !important; color: rgb(150, 150, 150) !important; font-size: 18px !important;}
:link{background-color: rgb(20, 20, 30) !important; color: rgb(0, 122, 0) !important;}
:visited{background-color: rgb(30, 20, 20) !important; color: rgb(0, 100, 122) !important;}
:visited>*{background-color: rgb(30, 30, 30) !important; color: rgb(0, 100, 122) !important;}
:link:hover{background-color:#3D2B1F !important; color:#E75480 !important;}
:visited:hover{background-color:#3D2B1F !important; color: #E75480 !important;}
:visited>*:hover{background-color:#3D2B1F !important; color:#E75480 !important;}
и сайты уже выглядят по другому:
MagikSP 