mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-05 16:04:24 +03:00
d6029b1b12
* Оптимизировано добавление\удаление из избранного * Документирование * Мелкие доработки и исправления
171 lines
8.2 KiB
CSS
171 lines
8.2 KiB
CSS
/**
|
||
* Комментарии
|
||
*
|
||
* @template comments/*.tpl
|
||
*/
|
||
|
||
/* Блок с комментариями */
|
||
.comments { margin-bottom: 30px; }
|
||
|
||
.comments-header { margin-bottom: 10px; position: relative; }
|
||
.comments-header h3 { font-size: 27px; margin-bottom: 5px; }
|
||
|
||
.comments-header .comments-subscribe { position: absolute; top: 15px; right: 0; font-size: 11px; color: #7b848d; }
|
||
.comments-header .comments-subscribe input { top: 2px; }
|
||
|
||
/* Вспомогательный блок-обертка */
|
||
.comment-wrapper { position: relative; }
|
||
.comment-wrapper .comment-wrapper { padding-left: 40px; }
|
||
|
||
/* Предпросмотр текста */
|
||
.comment-preview { padding: 5px 10px 6px; margin: 0 0 10px 0; border: 1px solid #eee; border-radius: 3px; font-size: 13px; line-height: 1.6em; }
|
||
.comment-wrapper .comment-preview { margin-left: 80px; }
|
||
|
||
|
||
/**
|
||
* Комментарий
|
||
*
|
||
* @template comments/comment.tpl
|
||
*/
|
||
.comment { min-height: 48px; margin-bottom: 10px; padding: 10px 0 0 0; position: relative; }
|
||
|
||
/* Аватар */
|
||
.comment-avatar { position: absolute; top: 8px; left: 0; width: 24px; height: 24px; }
|
||
|
||
/* Кнопка сворачивания ветки комментариев */
|
||
.comment-folding {
|
||
width: 13px;
|
||
height: 13px;
|
||
position: absolute;
|
||
top: 13px;
|
||
left: -20px;
|
||
background-repeat: no-repeat;
|
||
background-image: url(../images/icons/folding.png);
|
||
cursor: pointer;
|
||
}
|
||
.comment-folding.folded { background-image: url(../images/icons/folding-active.png); }
|
||
|
||
/* Информация */
|
||
.comment-info { padding: 0 70px 0 0; margin-bottom: 10px; margin-left: 33px; line-height: 17px; position: relative; overflow: hidden; zoom: 1; font-size: 11px; }
|
||
.comment-info li { float: left; height: 20px; margin-right: 13px; }
|
||
|
||
.comment-info .comment-author a { font-weight: bold; color: #727fa0; }
|
||
.comment-info .comment-author.comment-topic-author a { color: #4b5468; }
|
||
.comment-info .comment-author.comment-topic-author {
|
||
background: rgb(254,255,163);
|
||
background: -moz-linear-gradient(left, rgba(254,255,163,1) 0%, rgba(255,255,255,1) 100%);
|
||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(254,255,163,1)), color-stop(100%,rgba(255,255,255,1)));
|
||
background: -webkit-linear-gradient(left, rgba(254,255,163,1) 0%,rgba(255,255,255,1) 100%);
|
||
background: -o-linear-gradient(left, rgba(254,255,163,1) 0%,rgba(255,255,255,1) 100%);
|
||
background: -ms-linear-gradient(left, rgba(254,255,163,1) 0%,rgba(255,255,255,1) 100%);
|
||
background: linear-gradient(to right, rgba(254,255,163,1) 0%,rgba(255,255,255,1) 100%);
|
||
|
||
padding-left: 7px;
|
||
}
|
||
.comment-info .comment-date { color: #818189; }
|
||
.comment-info .comment-favourite { position: relative; top: 1px; }
|
||
.comment-info .comment-link { position: relative; top: 1px; }
|
||
.comment-info .comment-goto a { color: #a2b6cd; text-decoration: none; }
|
||
.comment-info .comment-goto-child { display: none; }
|
||
.comment-info .favourite-count { color: #a2b6cd; }
|
||
|
||
/* Голосование */
|
||
.comment-info .vote { position: absolute; top: 0; right: 0; margin: 0; }
|
||
.comment-info .vote .vote-count { float: left; color: #949aa1; font-weight: bold; line-height: 19px; margin-right: 6px; }
|
||
.comment-info .vote .vote-down { float: left; width: 20px; height: 20px; background: url(../images/icons/vote-comment-down.png) no-repeat; cursor: pointer; margin-left: 4px; }
|
||
.comment-info .vote .vote-down:hover { background-image: url(../images/icons/vote-comment-down-hover.png); }
|
||
.comment-info .vote .vote-up { float: left; width: 20px; height: 20px; background: url(../images/icons/vote-comment-up.png) no-repeat; cursor: pointer; margin-left: 4px; }
|
||
.comment-info .vote .vote-up:hover { background-image: url(../images/icons/vote-comment-up-hover.png); }
|
||
|
||
.comment-info .vote.vote-count-positive .vote-count { color: #51983c; }
|
||
.comment-info .vote.vote-count-negative .vote-count { color: #da4242; }
|
||
|
||
.comment-info .vote.voted-up .vote-down { display: none; }
|
||
.comment-info .vote.voted-up .vote-up { background-image: url(../images/icons/vote-comment-up-active.png); }
|
||
.comment-info .vote.voted-down .vote-down { background-image: url(../images/icons/vote-comment-down-active.png); }
|
||
.comment-info .vote.voted-down .vote-up { display: none; }
|
||
|
||
.comment-info .vote.vote-expired .vote-up,
|
||
.comment-info .vote.vote-expired .vote-down { display: none; }
|
||
|
||
/* Содержимое комментария */
|
||
.comment-content { margin-bottom: 5px; padding: 9px 10px 10px; border: 1px solid #e7ebed; border-radius: 3px; position: relative; }
|
||
|
||
.comment-content:after,
|
||
.comment-content:before { display: block; content: ""; position: absolute; top: -11px; left: 50px; width: 0; height: 0; border-width: 6px; }
|
||
.comment-content:after { border-color: transparent transparent #e7ebed; border-style: solid; top: -12px; }
|
||
.comment-content:before { border-color: transparent transparent #fff; border-style: solid; z-index: 10; }
|
||
|
||
/* Кнопки */
|
||
.comment-actions li { display: inline; margin-right: 10px; font-size: 11px; }
|
||
.comment-actions .link-dotted { color: #727a90; }
|
||
.comment-actions .link-dotted:hover { color: #f00; }
|
||
|
||
|
||
/**
|
||
* Типы комментариев
|
||
*
|
||
* deleted Удаленный комментарий
|
||
* self Ваш комментарий
|
||
* new Новый, непрочитанный комментарий
|
||
* current Активный комментарий, который выделяется при исползование кнопки обновления в тулбаре
|
||
*/
|
||
.comment { background: #fff; }
|
||
|
||
.comment.comment-deleted .comment-content { background: #c5c5c5; border-color: #C8A8A8; }
|
||
.comment.comment-deleted .comment-content:after { border-color: transparent transparent #C8A8A8; }
|
||
.comment.comment-deleted .comment-content:before { border-color: transparent transparent #c5c5c5; }
|
||
|
||
.comment.comment-self .comment-content { background: #fefef1; border-color: #e6e6bd; }
|
||
.comment.comment-self .comment-content:after { border-color: transparent transparent #e6e6bd; }
|
||
.comment.comment-self .comment-content:before { border-color: transparent transparent #fefef1; }
|
||
|
||
.comment.comment-new .comment-content { background: #fff; border-color: #dddb5c; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
|
||
.comment.comment-new .comment-content:after { border-color: transparent transparent #dddb5c; }
|
||
.comment.comment-new .comment-content:before { border-color: transparent transparent #fff; }
|
||
|
||
.comment.comment-current .comment-content { background: #cdf5a6; border-color: #bae48e; }
|
||
.comment.comment-current .comment-content:after { border-color: transparent transparent #bae48e; }
|
||
.comment.comment-current .comment-content:before { border-color: transparent transparent #cdf5a6; }
|
||
|
||
.comment.comment-bad .comment-content { opacity: 0.3; filter: alpha(opacity=30); }
|
||
.comment.comment-bad:hover .comment-content { opacity: 1; filter: alpha(opacity=100); }
|
||
|
||
.ls-user-role-not-admin .comment.comment-deleted { padding: 10px 15px; min-height: 0; background: #f7f7f7; color: #888; }
|
||
|
||
|
||
/**
|
||
* Форма комментирования
|
||
*
|
||
* @template comments/comment_tree.tpl
|
||
*/
|
||
.comment-reply-header { font-size: 20px; line-height: 1.3em; margin-bottom: 15px; }
|
||
|
||
.comment-reply { background: #f8fbfe; padding: 15px; border-radius: 5px; }
|
||
.comment-reply textarea { height: 150px; }
|
||
.comment-reply textarea.loading { background-image: url(../images/loader-circle.gif); }
|
||
|
||
.comment-wrapper .comment-reply { margin-left: 40px; }
|
||
|
||
|
||
/**
|
||
* Стили для списка комментариев
|
||
*
|
||
* @template comments/comment_list.tpl
|
||
*/
|
||
.comment.comment-list-item { margin-bottom: 20px; }
|
||
.comment.comment-list-item .vote .vote-up,
|
||
.comment.comment-list-item .vote .vote-down { display: none; }
|
||
|
||
.comment-path { font-size: 11px; color: #a2b6cd; }
|
||
.comment-path .comment-path-blog,
|
||
.comment-path .comment-path-comments { color: #000; }
|
||
.comment-path .comment-path-topic { color: #275ec2; }
|
||
|
||
|
||
/**
|
||
* Пагинация комментариев
|
||
*
|
||
* @template comments/comment_pagination.tpl
|
||
*/
|
||
.pagination.pagination-comments { margin-bottom: 20px; } |