Ещё одна темная тема для реактора (мои рассуждения + код)
Доброго времени суток, глубокоуважаемые пидоры и прочие интересные личности.
Использовал я значит раньше тему 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. Третье, даем авто-высоту, благодаря установленным выше двум правилам. Всё.
Если подумать, большинство фреймов на джое - это либо видеоролики ютупа, вимео, куба, либо песня с саундклауд. Но насчет последнего я вставил селектор, дабы он не менял высоту фрейма:
aspect-ratio: auto;
}
Ролики ютуб почти все с таким соотношением, фрейм дают стандартно. А вот с остальными, типа куб, как посмотреть - вертикальный фрейм не будет растягиваться по ширине блока поста, а встанет гордо по центру. Хуй с ним тогда.
Для гифок я сделал поменьше плашку их скачивания, так ИМХО красивше:
Отельный гемор еще раньше, для предыдущей темы вызвала посветка родительского комментария. Это когда наводишь на коммент и подсвечивается он и его родитель. Я долго искал где это в css, но потом вяснил что это реализовано при помощи того же JS. Пришлось инкапсулировать не только css, но и js, в итоге стало темнее:
Ну и в остальном, прошу любить и жаловаться!
Прошу писать в комментах, если что я упустил или что-то написал коряво и надо бы доделать/переделать.
Темная тема работает через расширение для браузеров: Tampermonkey или Greasemonkey:
* tampermonkey (в Хроме, Опере и для Firefox)
![Я Kurchi
sample bit сделал сам музыка synth-pop
Sample Bit - New Shell
И вновь всем привет! Почти год прошёл с даты публикации прошлого трека (OST к короткометражке - не в счет). Я помнится намеревался там набрать материал на Vol.3, и тут можно вставить мем - "Набрал... Набрал ведь же?".]рд
И](https://img2.joyreactor.cc/pics/post/full/скрипт-script-userscript-7911313.jpeg "скрипт,script,userscript,реактор,сделал сам,нарисовал сам, сфоткал сам, написал сам, придумал сам, перевел сам,тема")
![На, Колян, закуси
. ' @юздо 16.Apr.2023 16:37
ссылка[ в избранное
ладно, можете не вытаскивать меня из кота...
котт! 16.Apr.2023 16:38 ссылка | в избранное
Димас, слуш не в падлу, почеши за ушком
¡14^ 16.Apr.2023 16:45
ссылка Т
в избранное
Приемлемо
апс!ге]Иоуап 16.Apr.2023 16:58
в](https://img2.joyreactor.cc/pics/post/full/скрипт-script-userscript-7911315.png "скрипт,script,userscript,реактор,сделал сам,нарисовал сам, сфоткал сам, написал сам, придумал сам, перевел сам,тема")
Отличный комментарий!