Тёмная тема DTF (бета) (CSS) v1.0

Топик совмещает как описание изменений, так и большинство вложений, разного рода ссылок и т.п для того, чтобы можно было протестировать тему прямо на нём.
Покайся, всяк сюда входящий - уже существует расширение Тёмная тема для DTF/TJ/VC с набором модулей (не моё), лучше используйте его ссылка, или это/DarkTF.
Ежели не внемлишь предупреждению, и пойдёшь вперёд - удачи тебе, смелый путник.

Список изменений
Изменения вложений
Галерея изменений
Как активировать скроллбар в правой панели комментариев
Вложения (арты)
Вложения (арты, спойлер)
Вложения (галереи)
Вложения (видео YT)
Вложения (музыка, Spotify)
Вложения (музыка)
Вложения (твиттер, арты)
Вложения (твиттер, альбомы)
Вложения (твиттер, видео)
Вложения (DTF статьи)
Цитаты
Персона
Врезка
Код
Цифра
Списки
Опросы
Как установить и применить Тёмную тему DTF
Ссылки на расширение-менеджер CSS стилей (Stylus). Не ставьте Stylish
Ссылки на расширения-меденжеры скриптов
Ссылка на Тёмную тему DTF (CSS) (GitHub)
Ссылка на установку Тёмной темы DTF (CSS) (GitHub, прямая ссылка на установку)
Ссылки на JS скрипт (для скролла мышью в панели комментариев, если показ скроллбара включён)
Код JS скрипта (для скролла мышью в панели комментариев, если показ скроллбара включён)
Заключение

Список изменений:

Заместо одного цельного листа, визуально тема разделена на левую и правые колонки, центр. Если кому-то это не нравится, можно изменить в настройке.
По возможности, перекрашено всё и вся, что было замечено. Если где-то недокрашено, по возможности исправлю.
По возможности, добавлены ховеры (реакция элемента при наведении на него).
Изображения и видео теперь не не шире текста статей. Можно убрать в настройках.
Возвращены на место "поиск" и кнопка "Создать".
Правая панель (новые комментарии) теперь имеет скроллбар (по-умолчанию выключено).
Это важно! Скролл комментариев мышью в панели не работает, поэтому по-дефолту скроллбар правой панели в этой теме отключён.
Для того, чтобы была возможность скролла комментариев мышью, используйте приложенный js скрипт.
Правая панель теперь имеет "расширенный режим статей" (более широкий текст статей, изображения и т.п) при своём скрытии. Ахтунг, пока тестируется...есть косяки.
Кнопка перехода к новым комментариям в статье уменьшена, и перемещена.
Все возможные вложения статей (твиттер, голосования, и т.п) чуть изменены (об этом ниже).
Правила подсайтов теперь имеют уменьшенный размер элемента, т.е. длинный список правил теперь не будет отображаться в боковой панели на половину длины страницы.
Общий стиль округлений углов теперь не столь сильный. Можно изменить в настройках.
Аватарки чего-либо теперь в основном круглые.
NSFW текст заменён на привычное "R 18+".
NSFW кнопки теперь расположены одна над другой (по центру).
Список вакансий (в статьях) можно отключить.

Изменения вложений:

Отступы между строчками голосований уменьшены. Порой, голосования могут быть весьма большими, поэтому довольно нецелесообразно иметь настолько жирные отступы.
Кнопка показа результатов голосования также получила меньший отступ и другой цвет.
Чуть переработан альбом, а также альбом твиттера. Изображения в них теперь одинакового размера, и располагаются сеткой.
Изображения и видео, а также их надписи центрированы, и имеют фиксированную ширину. За максимальную ширину таких вложений отвечает параметр --Main-width
(под ширину текста центральной "панели") с содержимым статьи, и --topic-width-enhanced (тоже самое, только при скрытой боковой панели комментариев. Помимо этого, влияет и на ширину текста).

Галерея изменений:

Плеер, статья в закладках, оповещение о подписке на подсайт.

Как установить и применить Тёмную тему DTF:

Устанавливаем расширение для браузера Stylus. Не рекомендуется устанавливать и использовать расширение Stylish.
Создаём новый стиль, и копируем в него код. Либо устанавливаем стиль прямо с GitHub ссылок.

Как активировать скроллбар в правой панели комментариев:

Найдите код в Тёмной теме DTF ("Боковая панель (правая)"), и "включите" две строчки, убрав символы "/*" и "*/" в начале и конце строчек.

Пример:

/* Включите обе строки для активации скроллбара */ .layout__right-column > div > div > div+div { /* overflow: hidden; Включите эту строку */ } .layout__right-column > div > div > div+div > div { /* overflow-y: scroll; Включите эту строку */ height: 100%; overscroll-behavior: contain; }

После "включения" строчек, должно будет быть так:

/* Включите обе строки для активации скроллбара */ .layout__right-column > div > div > div+div { overflow: hidden; } .layout__right-column > div > div > div+div > div { overflow-y: scroll; height: 100%; overscroll-behavior: contain; }

Вложения (арты):

Вложения (арты, спойлер):

Вложения (галереи):

Вложения (видео YT):

The Night Manager

Вложения (музыка, Spotify):

Слушать в Spotify

Вложения (музыка):

Вложения (твиттер, арты):

Вложения (твиттер, альбомы):

Вложения (твиттер, видео):

“We have a comprehensive support system in place for players who aren’t too confident with action games, so even if action isn’t your thing, I hope you’ll give it a try.”

@FinalFantasyXVI Producer Naoki Yoshida explains why this game is for all players: https://sqex.link/t7ty

Твит с видео.

Вложения (DTF статьи):

Джамиль Махмутов

Кино и сериалы 28.06.2022

Фото: Марго Робби и Райан Гослинг катаются по пляжу на роликовых коньках на съёмках фильма «Барби»

Посмотрите внимательнее, вам показалось.

Цитаты:

Новые цитаты пугают всех возможно меньше, чем следовало-бы. Видение авторов разным бывает.
Бла бла бла
Апанасик, Вторая вайфу DTF (после Генри)

Персона:

Врезка:

Тестовый текст для тестовой врезки.

Код:

Это код. div[class^='theme']{ color: red; } let arr = ['test']; function test(){ if(arr.length > 0){ console.log('Success'); } } test();

Цифра:

Цифра.
Текст.

Списки:

Alpha
Beta
Gamma

Опросы:

Эта тема ужасна?

Да.

Определённо да.

Я затрудняюсь, я не отвечу на этот вопрос.

Ссылки на расширение-менеджер CSS стилей (Stylus). Не ставьте Stylish:

Судя по недавним обзорам, Stylish изменился не в лучшую сторону, плюс до сих пор сбор анонимных данных "на какие сайты вы ходите".

Ссылки на расширения-меденжеры скриптов:

Violentmonkey:

Tampermonkey:

Chrome
Firefox
Opera - разработчик просит ставить версию из магазина расширений Chrome, т.к "команда Оперы больше не просматривает расширение, потому что они думают, что Violentmonkey слишком сложен, и у них нет на это времени".
Edge
Maxthon(4 и 5)
GitHub
GitHub (для Maxthon)

Ссылка на Тёмную тему DTF (CSS) (GitHub):

github.com

GitHub - TentacleTenticals/DTF-CSS-Dark-theme

Contribute to TentacleTenticals/DTF-CSS-Dark-theme development by creating an account on GitHub.

Ссылка на установку Тёмной темы DTF (CSS) (GitHub, прямая ссылка на установку):

Просто нажмите на эту ссылку. Затем подтвердите установку.
Сработает лишь если установлен Stylus или Stylish.

Ссылки на JS скрипт (для скролла мышью в панели комментариев, если показ скроллбара включён):

Код скрипта (для скролла мышью в панели комментариев, если показ скроллбара включён):

window.addEventListener('wheel', commentScroll, true); function commentScroll(e){ if(e.composedPath().includes(document.querySelector(`.layout__right-column > div > div > div+div > div`))){ if(e.deltaY >= 100){ document.querySelector(`.layout__right-column > div > div > div+div > div`).scrollTop += 100 }else if(e.deltaY <= -100){ document.querySelector(`.layout__right-column > div > div > div+div > div`).scrollTop -= 100 } } }

Заключение:

Сия тема создана сугубо для себя, и интереса ради. Люблю ломать чужие дизайны, да.

Если замечены проблемы, неокрашенные места, есть просьбы, предложения или вопросы - добро пожаловать в комментарии.