last update 2015-01-22

haPages bay

Разработки скриптописателя spmbt
установить стили HabraDarkAge в браузер
(требуется расширение Stylish)

HabraDarkAge: тёмная тема

Юзерстили для модификации вида сайта Habrahabr


Особенности стилей:
тёмная расцветка дизайна, без отхода от дизайна блоков оригинального сайта, на основе стилей "New Habr: Night Mode", за некоторыми исключениями, унаследованными из ZenComment (описаны ниже);
приглушенные цвета картинок и блоков сайдбара, полностью проявляющиеся при наведении мыши;
Кнопки левой панели совмещены с навигацией страниц (для страниц-лент) и видны постоянно слева;
Поддержка страниц "мобильной версии";

Кроме тёмной расцветки дизайна, имеет некоторые свойства, унаследованные от ZenComment, отличные от дизайна оригинального сайта:
незаметное Geektimes-меню: показ по наведению, сокращение занимаемой высоты до 1 пикс.;
разблокировано изменение размера полей ввода (меняется вручную);
● смягчение последствий двойных переносов строк (насколько возможно в стилях);
● небольшое уменьшение размеров заголовков;
контрастный разделитель между статьёй и ответами;
приглушенные аватары в ответах, расут вдвое по наведению на заголовок;
деакцентирование кнопок "Пожаловаться";
кнопка "ответ" скрыта и появляется по наведению на блок ответа;
фильтрация нежелательных блоков в сайдбаре и подобных местах;
модификация 3 нижних ссылок до равномерного заполнения пространства текстами ссылок;
компактный футер, на 3 строки по высоте;
исправление ошибок сайта в форматировании и отображении элементов страниц: ряд ошибок, случайно возникших и с неизвестным временем официального исправления, которые проще исправить в стилях;

● ... и ряд незначительных модификаций стилей.

На каких сайтах работают стили

Habrahabr, m.Habr (облегчённая версия для мобильных браузеров),
Geektimes (частичный официальный клон по новинкам техники, науке, интересным фактам),
Megamozg (частичный официальный клон для менеджерских, финансовых и организаторских статей),
TMfeed (объединённая лента, без авторизации, по 3 вышеперечисленным сайтам),
кеш Гугла (для просмотра недавно удалённых статей),
локальный сайт под именем h.ru или haru/ (для разработчиков или для просмотра копий страниц).

Использование кеша Гугла: если статью недавно (до 2 недель назад) удалили с сайта - идём на http://webcache.googleusercontent.com/search?q=cache:<URL_этой_статьи>, и видим копию статьи, которую успел сохранить Гугл. (Скрипт HabrAjax сам подсказывает ссылку на странице "отбоя", но пока не совместим с "тёмной темой"). Видим оформление её с юзерстилями, если они подключены к браузеру. (Переключать стили достаточно легко, и это не требует перезагрузки страниц, благодаря плагину Scriptish, в котором это всё выполняется.)
Локальный сайт: будет полезен для оффлайн-чтения страниц сайта (или для тестирования при разработке юзерскриптов/стилей). На своём компьютере для его просмотра нужно установить веб-сервер (например, Apache) и создать в нём виртуальный хост под именем h.ru или haru/, и в его образ класть сохранённые через браузер страницы (которые с папками *_files/ при них). Для этого домена будут работать ZenComment, HabrAjax и HabraDarkAge (на выбор). Одна особенность: если страницы сохраняются (Ctrl+S) через Firefox или Chrome, перед сохранением лучше отключить скрипты HabrAjax и стили ZenComment, чтобы не сохранились их последствия. Старая Опера сохраняет страницы "чисто" (без артефактов) всегда - с подключением стилей и скриптов или без подключения. И есть проблемы с показом веб-шрифтов - браузер их не сохраняет в копии страницы, а они имеются в главном меню. (Если поправить стили и вытащить шрифты из веба - показывать будут. TODO nodeJS-скрипт для "доводки" копий и выделения общих скриптов и стилей из сохранённых страниц или полный "сейвер" страниц в формат JSON или HTML.)

Поддержка браузерами

● Firefox 30+ (возможно, немного более ранние - тоже).
● Chrome 35+.
Не исключена работа с Safari/Mac (не тестировалась).
Для Opera 12 могут быть настроены (приветствуются пулл-реквесты).

Вид и функции

● Главная, "моя лента", "лучшие" или другой вид списков (результаты поиска, избранное, песочница)
блок сайдбара (при наведении)
список авторских или найденных комментариев (на GeekTimes, + увеличенный аватар при наведении мыши)
Минимальная высота и кнопки навигации
Кнопки меню при минимальной высоте
Под-меню при минимальной высоте
Кнопки меню при не самой малой высоте окна
Навигация ленты при достаточно большой высоте окна
подсветка заголовков комментариев (новые, автор, автор-новые, свои)
Результаты поиска + малая высота окна + Geektimes-меню
постоянные подменю при ширине более 1520px и высоте более 705

Причины появления HabraDarkAge и история развития

Однажды возник вопрос (октябрь 2014 г), может ли HabrAjax поддерживать имеющиеся тёмные юзерстили совместно с ZenComment? Очевидно, что что-то конфликтовало достаточно сильно, и пользоваться совместно было нельзя. Следующая идея: не сделать ли переключатель расцветки стилей в скрипте, а заодно и в Less-исходниках стилей (в будущем)? Чтобы не делать лишней работы полезно было воспользоваться наработками одного из стилей. Были выбраны "New Habr: Night Mode".
;Но возникла группа проблем: 1) стили не развивались уже 2 месяца и сайт ушёл немного вперёд, 2) некоторые стили и элементы вообще были недоработтаны, хотя их было немного 3) были нерешённые баги оригинального сайта.
Лучшим способом решения показалось - довести исходные стили до рабочего и эстетичного состояния, добавить кое-что из ZenComment, решить некоторые проблемы сайта, и получить таким образом сначала общеупотребительные стили, никак не связанные и не совместимые пока с ZenComment и HabrAjax.
Получится 2 варианта стилей в сравнении которых было бы видно, чего не хватает для объединения - появления концепции простого переключения стилей в настройках скрипта. Видны и недостатки HabrAjax, в котором много светлых стилей просто зашиты в код и не отключаются.
Тёмные стили получились, хотя на момент создания не решили исходных вопросов.

Новинки версий

435 (2015-11-05) - учёт массы небольших изменений в вёрстке сайта за последние 1.5 месяца;
431 (2015-09-10) - оформление нового формата подписей к статьям - имеется не менее 4 конфигураций оформления автора, перевода и статьи компании (к подписи добавилось описание блога компании);
● Главная, "Автор с реальным" именем и ссылкой
Обычное описание автора (и аватар при наведении)
Подписи аннотаций в списках и увеличение аватара при наведении мыши
428 (2015-02-15) - расширение на сайт TMfeed.ru, формат однострочной новости: сообщение с классом CSS "post_shortwrite"; доработки ссылок посещённых страниц;
426 (2015-01-22) - расширение на сайт megamozg.ru, включая новости с него в сайдбаре и лого;
423 (2014-11-22) - тёмные кнопки над полем ввода; цвет элемента HR; картинка "ключа" (ред. своей статьи) - темнее и без багов; постоянные подменю при ширине более 1520px;
4.20 (2014-11-06) - иная подсветка выделения текстов; зелёные хабы, теги, даты; открыт сайдбар компаний; приглушенные заголовки новых комментов, серый разделитель комментов и статьи; фон и текст "html-теги";
4.18 (2014-10-29) - расширена доступность сайтов (https); namespace на основе общего регекспа (6 сайтов, 2 исключения), исправление бага сайта "менее 530px высоты";
4.16 (2014-10-26) - доработка исходных стилей с учётом Geektimes и текущего состояния сайта;

Публикации

Хостинг HabraDarkAge на userstyles.org;
Наступают тёмные времена (предварительная версия статьи) (введение в HabraDarkAge);
Модификация и доработки Night mode ("issue request "о переносе кода в исходный репо);

Лицензия / License

    Код распространяется под лицензией CC-BY-NC v.4.0, , на русском, wiki. Она призвана поддерживать распространение стилей показа интерфейсов. Основные возможности и следствия из лицензии:
* не ограничивает копирование и распространение в любом формате при условии некоммерческого использования;
* при копировании и модификации требуется указание авторства;
* дает права на:
.. пересборку, модификацию и использование в иных некоммерческих разработках;
* запрещает пользователю ограничивать эти права, пока для данного кода существуют условия лицензии
Подробнее все права и требования приведены в тексте лицензии. О версии 4.0. PDF v.3.0