Переработан стилизатор Stylish / Habrahabr — Prettifier (Firefox), он довольно хорошо проработан в плане внешнего вида, но добавлен более компактный показ комментариев. Полученные стили можно использовать не только с ним, но и установить как юзер-стили для сайта (в Опере, Хроме) или установить через Stylish в Chrome (не проверялось)..На данный момент автор стилизатора выложил версию 2.0.1.2 (24.05.10), и обещает её обновить не раньше октября. Некоторые незначительные детали (округлые границы вокруг номеров страниц) взяты из более ранней версии 1.9.9.1 (13.02.2010).
Так выглядят комментарии на Хабре без стилизаторов:
Имеется из недостатков:
1) близко расположенные кнопки "+" и "-";
2) потеря места на кнопку (ссылку) «Ответить», которая, к тому же, плохо видна;
Большей частью, эти вопросы решены в Prettifier.
Включаем Habrahabr — Prettifier v.2.0.1.2. (Я с ним работал на протяжении 3-4 месяцев, он показал себя удобным.)
С имеющимся содержимым поступаем так:
1) расставляем кнопки оценок подальше;
2) перетаскиваем кнопку ответа в сторону и экономим место;
(Работа затеяна ради исправления отступа текста комментариев вправо, но это уже сделали разработчики сайта.)
Строчки, подвергшиеся изменениям:
(пригодятся для разбора или для желающих сделать юзер-стиль без Stylish / Habrahabr — Prettifier
/*уменьшение пустот между комментариями*/
.comment_holder .entry-content{
max-width:800px;
margin-left: -6px !important;
}
...
/*сдвиг для размещения кнопок ответов на комментарии:*/
#comments{
padding-left: 74px !important;
overflow:hidden; margin-left:-49px !important;
}
#comments > .hentry > .comment_holder{
margin-bottom: 0 !important;
}
.entry-content{
margin-bottom: 0 !important;
}
.comment_holder .entry-content,
.popular-comment .entry-content{
padding: 10px 0 6px 5px !important;
}
/*отодвинуть цифры от стрелок оценивания*/
.comment_holder .mark{
margin: 1px 38px !important;
}
/*цвет кнопок ответа чуть темнее:*/
.new-reply{
background: #E0E0F8;
}
.comment_holder .reply{
margin-top: 0 !important; margin-bottom: 0 !important;
}
.comment_holder .reply a{
background-color: #eee;
width:50px;
padding: 2px 7px 5px!important;
-moz-border-radius:5px;
}
.comment_holder .reply a:hover{
background-color:#ddd;
}
/*перемещение кнопки коммента:*/</font>
.entry-content .reply a.js-serv{
position:relative;
left: -71px;
top: -12px;
}
/*раздвигание стрелок оценивания:*/
ul.hentry .vote .buttons a{
display: none; /*бывает нужно*/
float: none !important; /*так проще*/
}
ul.hentry .vote .buttons{
padding-left: 15px !important;
}
ul.hentry .vote .buttons a:last-child{
margin-left:-26px !important;
margin-top:-16px !important;
}
ul.hentry .vote .buttons a{
background-image:url('http://habrahabr.ru/i/icos/icons_vote_posts.gif')!important;
height: 15px !important;
width: 11px !important;
}
ul.hentry .vote .buttons .vote-for-comment{
margin-left: 11px;
}
ul.hentry .vote .buttons a.vote_plus {
display: block;
background-position:left bottom !important;
}
ul.hentry .vote .buttons a.vote_minus{
display: block;
background-position: -11px -15px !important;
}
...
ul.hentry .vote.voted_plus a.vote_plus{
margin-right: 30px;
background-position: 0 0 !important;
}
/*цвет заголовков комментариев - чуть темнее (они становятся разделителями)*/
.comment_holder .msg-meta{
background: #ddd;
}
.hentry .hentry .msg-meta,
.popular-comment .msg-meta{
background: #ddd;
}
/*подвижка ссылки "html-теги"*/
.comment-help dd span{
color: white;
}
.comment-help dd span a.js-serv{
margin-top: 16px;
float:right;
}
#js-field-holder-with-help .comment-help dd span a.js-serv{
margin: 6px 18px 0 0;;
}
#js-field-holder-with-help{
margin-top: -16px;
}Примечания:
*) остальные изменения полного кода плагина несущественны (но есть ещё одно полезное улучшение);
*) плагин размещён по адресу userstyles.org/styles/36690;
*) стили совместимы и дополняют расширения к Хабру Хабратулз, Кармавьюер.
*) в процессе написания было видно, что разработчики сайта тоже не дремлют и работают над видом комментариев: исчез аватар и имя юзера над полем ввода внизу страницы (хорошо — только мешало). Итак, мы «совместно» подкрутили вид поля ввода, и стало так (это чуть более ранняя версия, кнопки позже доработаны):
*) бледные стрелки на более тёмном фоне теряются, поэтому по-хорошему надо ещё затемнить рисунок кнопок;
*) отправил письмо разработчику с предложением использовать мои доработки или их часть в следующих версиях и выложил свою версию стилей на userstyles.org со всеми упоминаниями источников.
*) также было бы неплохо если разработчики Хабра что-либо из стилей реализуют нативно.
UPD:
*) кнопки и заголовки доработаны с градиентами в заголовках — сделана версия 1.1.
Градиенты на заголовках различаются для первого уровня комментария и для остальных.
Код выложен на userstyles.org/styles/36690. Просмотреть код (без инсталляции) — через ту же страницу.
*) Изменены стили для улучшения читаемости: заголовки и кнопки бледные, текст ими разделяется. Версия выложена на userstyles.org/styles/36690.
*) Если раскомментировать (убрав 1 пробел между "*" и "/") несколько строчек /*для нетбуков ...*/, получим сайдбар (который обычно справа) внизу, а текст и комментарии — по всей ширине окна (для ширины окна браузера 730-1000 пикс.). Вместе с повышенной компактностью комментариев становится ещё удобнее для нетбуков с их невысоким окном. Версию с обычным положением сайдбара удобно использовать при ширине окна от 900 пикс..
*) Большая пустота, разделяющая текст и комментарии, заменена большим бледным полем цвета хаки — удобнее ловит взглядом место начала комментариев.
UPD 13.09.10: версия 1.2.1: подпись в статьях перенесена наверх, некоторые незначительные поля подправлены по высоте.
UPD 14.09.10: версия 1.2.2: заголовки стали ещё бледнее (opacity:0.33), но при наведении мыши восстанавливают непрозрачность. Скриншот — на userstyles.org/styles/36690 или ниже.
