Ещё одна темная тема для реактора (мои рассуждения + код)
Доброго времени суток, глубокоуважаемые пидоры и прочие интересные личности.
Использовал я значит раньше тему Dark Reactor [by Sirko] [Fixed by FeaR], которую допилил напильником и выложил на greasyfork.org. Однако подумал что она слишком тяжела и пора бы запилить нечто более легкое. То есть, представленная ниже тема минимально затрагивает разметку css сайта, а также не содержит никаких картинок. И вот что я делал.
Как наверное кто-то (а может и нихуя никто) видел в моих предыдущих кастомных темах я использую расширение Tampermonkey, отличительной особенностью которого (а также его подобий типа greasemonkey) в том, что он позволяет исполнять пользовательские скрипты JavaScript, как-то изменяя или дополняя функционал различных сайтов. Поскольку я не программист, попытаюсь порассуждать с позиции того что я понял как обычный мимокрокодил, прошу не пинать за неточности формулировок или ламерство.
Итак, что же делает скрипт. Во время события document-start, что видимо означает начало отображения документа, он инкапсулирует кастомную разметку css. Как вы наверное видели, современные браузеры начинают отображать веб-страницу еще до её полной загрузки, то есть пока не будет полностью загружено дерево документа. Если что, вся веб-страница со всей её иерархией блоков, картинок и прочей хуеты называется веб-документ.
Так вот начало скрипта document.addEventListener("DOMContentLoaded"... по сути позволяет добавлять в обработчики событий документа событие когда весь документ можно сопоставить со всей его иерархией. Ну а дальше идет представление пользовательского стиля css, в котором я меняю разметку, а после - внедрения стиля при помощи внутреннего инструмента GM_addStyle, который встроен в Tampermonkey. Либо PRO_addStyle или addStyle или ручное внедрение стиля средствами js.
Что касается самого стиля - во первых вместо шапки с пекафейсом простая заливка linear-gradient. Минималистично, и не требуется отображать пиксельную картинку как в предыдущей теме раньше.
Второе - закругления. Тут вы можете меня гнать и насмехаться надо мной, но мне они нравятся, я постарался закруглить где это счел нужным.
И что самое интересное - айфреймы. Если кто не знает - iframe это контейнер который разрешает стороннему сайту встроить в него что хочешь, например плеер с видеороликом. Вообще, с фреймами на джое что-то странное, так как допустим при размещения ютуп-ролика сайт будет встраивать в пост окно разрешения 560 на 315. У меня уже давно вопрос встал - нахуя, а главное - зачем? Неужели чтобы тренировать наше потраченное от дрочки на трапов зрение? Хотя, я так полагаю чтобы была какая-никакая совместимость с небольшими дисплеями 1024х768 на которых до сих пор сидят олдфаги..
Как бы то ни было, я решил этот момент в три строчки. Буквально.
iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
Первое - даем фрейму ширину его родителя, так как это может быть блок нового поста или комментарий. Второе - устанавливаем правило в соотношение сторон фрейма, ведь 560х315 - это тоже самое соотношение 16 на 9. Третье, даем авто-высоту, благодаря установленным выше двум правилам. Всё.
Если подумать, большинство фреймов на джое - это либо видеоролики ютупа, вимео, куба, либо песня с саундклауд. Но насчет последнего я вставил селектор, дабы он не менял высоту фрейма:
iframe[src^='https://w.soundcloud.com'] {
aspect-ratio: auto;
}
![Я Kurchi sample bit сделал сам музыка synth-pop Sample Bit - New Shell И вновь всем привет! Почти год прошёл с даты публикации прошлого трека (OST к короткометражке - не в счет). Я помнится намеревался там набрать материал на Vol.3, и тут можно вставить мем - "Набрал... Набрал ведь же?".]рд И](http://img1.joyreactor.cc/pics/post/full/%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82-script-userscript-%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%BE%D1%80-7911313.jpeg "скрипт,script,userscript,реактор,сделал сам,нарисовал сам, сфоткал сам, написал сам, придумал сам, перевел сам,тема")
Ролики ютуб почти все с таким соотношением, фрейм дают стандартно. А вот с остальными, типа куб, как посмотреть - вертикальный фрейм не будет растягиваться по ширине блока поста, а встанет гордо по центру. Хуй с ним тогда.
Для гифок я сделал поменьше плашку их скачивания, так ИМХО красивше:
Отельный гемор еще раньше, для предыдущей темы вызвала посветка родительского комментария. Это когда наводишь на коммент и подсвечивается он и его родитель. Я долго искал где это в css, но потом вяснил что это реализовано при помощи того же JS. Пришлось инкапсулировать не только css, но и js, в итоге стало темнее:
![На, Колян, закуси . ' @юздо 16.Apr.2023 16:37 ссылка[ в избранное ладно, можете не вытаскивать меня из кота... котт! 16.Apr.2023 16:38 ссылка | в избранное Димас, слуш не в падлу, почеши за ушком ¡14^ 16.Apr.2023 16:45 ссылка Т в избранное Приемлемо апс!ге]Иоуап 16.Apr.2023 16:58 в](http://img1.joyreactor.cc/pics/post/full/%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82-script-userscript-%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%BE%D1%80-7911315.png "скрипт,script,userscript,реактор,сделал сам,нарисовал сам, сфоткал сам, написал сам, придумал сам, перевел сам,тема")
Ну и в остальном, прошу любить и жаловаться!
https://greasyfork.org/ru/scripts/464142-new-dark-reactor-by-donotblink
Прошу писать в комментах, если что я упустил или что-то написал коряво и надо бы доделать/переделать.
Темная тема работает через расширение для браузеров: Tampermonkey или Greasemonkey:
* greasemonkey (в Firefox'е) https://addons.mozilla.org/ru/firefox/addon/greasemonkey/
* tampermonkey (в Хроме, Опере и для Firefox)
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/
Отличный комментарий!