Напомню, что в предыдущем посте я вывернул наизнанку Главную и если кто-то хочет присоединиться к энтузиастам и конвертировать PSD > Stylish, то исходник выложил на г.драйве (сорри за беспорядок в слоях, но обычно я прилежный)
Кстати, пробу уже можете снять. Камрад bano-notit просто молодчинка, схватил пипетку в руки и прямо с png-шек начал выцеплять весь окрас. Скачайте посмотрите этоn пресет для Stylish. Конечно могут быть неточности, ведь дальше главной он пошёл по своей инициативе разукрашивать. Тут я понял, что надо продолжать начатое дело, чтобы он не сбился с пути.
Действительно, на даркуле гораздо сильнее могут забирать на себя внимания картинки с белым фоном. Хорошее решение предложил камрад Rondo в комментах: всем изображениям уменьшать opacity (я рекомендовал бы до 70% / 0.7), а по onhover восстанавливать до 100%. Круто и эффективно!
Идею вновь подхватывает bano-notit, предлагая делать эффекты более плавными через css путём:
.img {opacity: .1; transition: all 1s ease-out;}Вообще заботушка о юзерах!
Итак — разворот. Посмотрим, что тут у нас темненького:
Автор поста
Ничего необычного тут: линки, цвет кармы и рейтинг у нас уже были определены в первом посте. В блоке ниже лишь позволил себе убрать разделители, добавил ему 1px бордер, который визуально немного усилил очертания. В тот же цвет окрашивается выделенная область блока.
Автор поста снизу
Вроде бы нужно просто сделать копи-паст. Но нет. Почему-то в оригинале на Хабре разная размерность и интенсивность шрифта как для заголовков “карма” и “рейтинг”, так и для их значений. Решил сохранить, вдруг Хабр что-то понял, а я — еще нет!
Похожие публикации
С ними всё тоже самое как и с Хабами на главной. Убрались только куда-то полосочки (не мной!). Это всё какие-то хитрые стили Хабра, меня не спрашивайте. Я лишь только по аналогии с кармой использовал аналогичный цвет для количества комментариев к постам.
Самое читаемое
Базируется на аналогичной гаммой что и вышеупомянутый блок, располагающийся справа. Цвет плашки с фильтрами отображения взят из основных табов с главной страницы.
Заголовок комментариев
Странно, что у Хабра в оригинале тут какой-то уже нцатый стиль шрифта и не от мира сего. Предлагаю “натянуть” сюда аналогичный всем заголовкам font-face. Ведь это и есть заголовок…
Комментарии
Пытаюсь оптимизировать UX тут. Мне кажется, что если чуть “углубить” ступеньки древовидности комментов, то визуально иерархия будет лучше читаться. Поэтому я выровнял тело коммента и “ответить” не по уровню аватарки, а по уровню никнейма. Попробуйте это прочувствовать в самом низу, когда я покажу картинку целиком.
Иерархия
И без меня знаете, какие порой жаркие перепалки случаются в комментах аж до нцатого уровня. Тут я опять пытаюсь чуть-чуть оптимизировать user experience, проведя border-left для контейнера с ответами (да, я оказывается умею инспектить элементы в Хроме :). Мне кажется это +N к скорости осознания визуального порядка. Специально усложнил себе задачу, показав версию с пестрейшими аватарками. Хотя если гасить прозрачность аватарок до alpha=0.7 как и все изображения в darcul’e, то возможно и +2N…
Textarea снизу
Вообще конечно все эти иконостасы невнятные надо сменить на материальные, но было ленно. Извините. Зато было не ленно применить к кнопкам аналогичный стиль как и для кнопки написания поста наверху. В оригинале стили этих кнопок отличаются. Это для меня немного странно.
Интересные публикации
Один в один с “Самое читаемое”. Ладно, ведь утомил небось фрагментами отдельными… Вот смотрите “простыню” целиком:
Желающие скачать PSD могут проследовать на г.диск
Комментарии (45)
Nekto_Habr
07.10.2016 09:49+2Тема в целом хороша. Однако, по моему мнению, есть несколько штук, в которой она уступает оригинальному оформлению:
1) Обводка кнопок и блоков «написать комментарий», автор сверху/снизу. Слишком яркая она.
2) Над деревом комментов еще нужно поработать. Если в оригинале действительно сложновато понять, кто кому ответил из-за отсутствия хороших визуальных ориентиров, то в темной теме этих ориентиров столько, что интерфейс начинает отвлекать от контента. Оригинал тут снова выигрывает по юзабельности.
3) Verdana для тела статьи смотрится хорошо и органично в оригинале. В тёмную версию просится другой шрифт (только не Roboto и не Open Sans!). Не могли бы прикрепить скриншот с вариантами шрифтов? Raleway Cyrllic, Source Sans, Century Gothic хотя бы, ну или какой-то из хороших платных, либо системных дефолтных (Segoe UI, Helvetica).
4ebriking
07.10.2016 09:54(эхх, перфекционизм...) а отступ каждого следующего уровня комментария от предыдущего — поменьше наверное бы…
и, как вариант — вертикальные линии цветом чуть-чуть различить, что бы когда их будет 4-5 рядом — было видно наверх по какой идти, что бы увидеть на какой твой ответ поместился…
Но вцелом действтиельно здорово — ибо нацелено на главное, на что вообще должно быть нацелено ВСЁ — сделать мир удобнее.
kamushken
07.10.2016 09:56у меня была мысль каждую линию окрашивать в свой цвет, но я не уверен что Stylish потянет такую генерацию цвета в зависимости от глубины уровней комментов. поправьте меня, если что…
AngReload
07.10.2016 10:33+2Это очень просто, например:
.reply_comments { border-left: 1px solid red } .reply_comments .reply_comments { border-color: greed} .reply_comments .reply_comments .reply_comments { border-color: blue }
turone
07.10.2016 10:23Хочу, хочу! Есть какой- либо ответ от хабра?
handicraftsman
07.10.2016 11:04Обычно не использую тёмные темы, т. к. от них у меня болят глаза. Да и экран у меня не совсем хорошо на них реагирует.
alltiptop
07.10.2016 11:41ЭЛТ?
handicraftsman
07.10.2016 13:58Старый ЖК. Раньше был ЭЛТ, и как-раз на нём от светлых тем я уставал :D
bano-notit
07.10.2016 12:45+1А у меня наоборот… Глаза болят от светлых тем. Потому что обычно работаю и читаю ночью.
bano-notit
07.10.2016 12:46Есть вопрос. В комментариях разным цветом "заголовка" комментария выделаются автор и комментарии написанные, например, мной. Нет ли идей как это дело выделять? + комментарии "ожидающие модерации".
ange007
07.10.2016 12:47Косяки с цветами
bano-notit
07.10.2016 12:48Можно ли ссылку на этот поток или хаб, или от куда вы это вообще взяли?
ange007
07.10.2016 12:51Ну вообще в ленте на главной.
А так вот оно: https://habrahabr.ru/company/mir/
Но там другие проблемы с цветами.
З.Ы.: А чего лого тёмное?bano-notit
07.10.2016 12:55Лого тёмное… Потому что я со вчера ничего не обновлял в стиле. А сейчас могу выложить последнюю свою версию и пойду делать уже по готовому дизайну.
bano-notit
07.10.2016 12:56А вообще у хабра странные способы стилизации) У них на посты компаний отдельно, на посты переводы отдельно, на обычные посты отдельно...
bano-notit
07.10.2016 13:00Обновил.
ange007
07.10.2016 13:05Изменений не вижу.
З.Ы. Стили обновил конечно.bano-notit
07.10.2016 13:07Я тоже сейчас сижу обновляю постоянно… Что-то не обновляется действительно. Ну я закинул, может он долго в бд обновляет… Не знаю.
Если очень хотите, то могу вам выдать исходники текущей версии, но они не читаемые)
Nekto_Habr
07.10.2016 15:41Действительно, на даркуле гораздо сильнее могут забирать на себя внимания картинки с белым фоном. Хорошее решение предложил камрад Rondo в комментах: всем изображениям уменьшать opacity (я рекомендовал бы до 70% / 0.7), а по onhover восстанавливать до 100%. Круто и эффективно!
Вот еще идея: делать все картинки чёрно-белыми, с наложением 30-50% черного цвета, а на онховере восстанавливать оригинал за 0,7-1,5 секунды, и чтобы этот интервал зависил от размера картинки (маленькие — почти сразу восстанавливаются, большие — плавно, чтобы большое яркое пятно не сразу ударило по глазам). И дополнительно прикрутить горячую клавишу (или прикрепленную кнопку в интерфейсе), которая восстанавливает оригиналы при удержании (при онховере в случае интерфейсной кнопки)bano-notit
07.10.2016 15:45К сожалению размер картинок из css не узнать, горячие клавиши не назначить...
bano-notit
07.10.2016 16:01Кстати, неплохая идея.
Я совместил прозрачность в 10% и сделал их чёрно-белыми.
Вот что получилосьДо наведения:
После наведения:
Nekto_Habr
07.10.2016 17:07Респект, совсем другое дело.
К сожалению размер картинок из css не узнать
Неужели нельзя как-то вычислить процент занимаемой картинкой площади от общего экранного пространства или хотя бы площади браузерного окошка?
горячие клавиши не назначить...
Хмм. Как же тогда реализуют браузерные игры с поддержкой управления с клавиатуры?bano-notit
07.10.2016 17:15Неужели нельзя как-то вычислить процент занимаемой картинкой площади от общего экранного пространства или хотя бы площади браузерного окошка?
CSS вообще не занимается вычислениями. Он может только через calc и только точные, заданные человеком, циферки вычислять. Но он не может эти цифры брать
с небаиз dom.
Как же тогда реализуют браузерные игры с поддержкой управления с клавиатуры?
Хороший вопрос. Можете скинуть пример такой игры на css? А то я все растерял, хотя видел такие.
Но вообще это всё обычно делается через js.Nekto_Habr
07.10.2016 17:39Но вообще это всё обычно делается через js.
Да, вот кстати, почему мы ограничены CSS? Перемотаем назад: я вообще не очень в курсе, на чём вы реализуете смену оформления хабра) А если бы и был — не разработчик я, могу и не понять тонкости. Но думаю, если пилить аж целый отдельный плагин специально для хабра — он бы смог и не только через css менять поведение интерфейса, нет?kamushken
07.10.2016 17:42хо, хо… мне думается если бы были методы задействовать еще и свои js скрипты помимо стилей, то для фантазии не было бы ограничений
Nekto_Habr
07.10.2016 17:46мне думается если бы были методы задействовать еще и свои js скрипты помимо стилей, то для фантазии не было бы ограничений
Чем не вариант? То есть, ну тема-то эта вся ваша с интерфейсными обновлениями была, по-началу, просто полётом фантазии, которую подхватили хабравчане. Так что фантазируем дальше, возможно кто-то дерзнёт внедрять тяжелую артиллерию, лишь бы хабр стал тортом)
bano-notit
07.10.2016 17:46Тогда не плагин, а расширение… И тогда его устанавливать либо через Tampermonkey либо через ещё что-то на огнелисе. Так же можно сделать расширение для одного только хрома или делать отдельный аддон для огнелиса. Тогда да, можно делать и кнопки разные и горячие клавиши и тому подобное.
Если так сильно хочется, то конечно же я могу сделать юзерскрипт, с этими приблудами. Но не сейчас это точно)
Скорее всего когда будет уже конечный стиль, тогда можно будет подумывать и том, чтобы запиливать отдельно юзерскрипт.
PS
Для того, чтобы опубликовать расширение в магазине хрома нужно им заплатить толи $5, толи $25. С огнелисом я не сталкивался.Nekto_Habr
07.10.2016 17:50Если так сильно хочется, то конечно же я могу сделать юзерскрипт, с этими приблудами. Но не сейчас это точно)
Ну, я-то просто говорю в пустоту, на самом деле, мысли вслух, как и у автора статьи. Если есть желание пилить скрипты и расширения — думаю, вы найдёте поддержку у народа; у меня — точно. Но ни в коем случае не настаиваю, можно и просто обсудить в стиле «а вот было бы круто, если...» :)
Вообще с такой заинтересованной аудиторией, хабр мог бы запросто стать инноватором в области развлекательно-познавательного контента. Чего боятся админы — не понятно, учитывая, что народ только «за» и готов самостоятельно всю работу проделать.bano-notit
07.10.2016 17:53Посмотрим… Иконку перекраски "чтоб не бомбануло" я не знаю как рисовать. Если есть у кого-то варианты, то запросто. Но как её реализовать уже знаю. Так же знаю как можно реализовать "горячую клавишу" для этих картинок.
kamushken
07.10.2016 17:58по поведению там напрашивается такой же выпадающий список как и для выбора категории хабов, например
Nekto_Habr
08.10.2016 19:28А не надо иконку. Просто текстовая кнопка (или прямоугольник) со словом «Шкурки», или «Сменить оформление», или «Перекрасить, чтоб не бомбануло». Или переключатель, как в веб-скайпе, — «Тёмная тема». Ну или дроплист, как предлагает kamushken, если шкурок несколько.
bano-notit
08.10.2016 21:21В первом посте автор предложил использовать именно кнопку "заливки".
Скорее как в "веб-скайпе", которым я пользовался 1 раз в жизни для "посмотреть что за зверь такой".
Но до этого надо дойти. Пока что нужно бы сделать все стили. А у читывая, что будет ещё 2 этапа редизайна от ТМ, то нужно готовиться и к ним.
neoxack
Это гениально!