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

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

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

Содержание

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

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

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

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

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

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

  1. Устанавливаем расширение для браузера Stylus. Не рекомендуется устанавливать и использовать расширение Stylish.
  2. Создаём новый стиль, и копируем в него код. Либо устанавливаем стиль прямо с 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; }

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

Тёмная тема DTF (бета) (CSS) v1.0
Тёмная тема DTF (бета) (CSS) v1.0
Описание, десу
Описание, десу

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

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

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

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

The Night Manager

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

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

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

7月最初のいいね❕

ください(ˆ꜆ .   . ).ᐟ.ᐟ
Тёмная тема DTF (бета) (CSS) v1.0
Твит.

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

Твит с галереей.

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

“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 статьи):

Цитаты:

Новые цитаты пугают всех возможно меньше, чем следовало-бы. Видение авторов разным бывает.

Бла бла бла

Апанасик, Вторая вайфу DTF (после Генри)
Natsuki
Почётная вайфу DTF

Персона:

Marise Kirasami
Smug dealer 999го уровня

Врезка:

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

Код:

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

Цифра:

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

Списки:

  • 1.1
  • 1.2
  • 1.3
  • 1.4
  1. Alpha
  2. Beta
  3. Gamma

Опросы:

Эта тема ужасна?
Да.
Определённо да.
Я затрудняюсь, я не отвечу на этот вопрос.

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

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

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

Violentmonkey:

Tampermonkey:

  • Chrome

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

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

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

Ссылки на 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 } } }

Заключение:

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

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

Тёмная тема DTF (бета) (CSS) v1.0
66
15 комментариев

темная тема ни причем, ты просто решил насрать аниме :)

5
Ответить

Есть только серая

Ответить

Два чая

Ответить

Тогда я бы просто сделал подборку. Но это не интересует.
На чужие смотреть - да, но свои делать...не, спасибо.

Ответить

HE DOESN'T KNOW

1
Ответить

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

Окей, вопрос снят. Я уже думал зачем делать вторую темную тему, когда есть от сергуна

Ответить

Цвета чисто наугад выбирал, я так понимаю?

Ответить