301 lines
8.2 KiB
CSS
301 lines
8.2 KiB
CSS
/* ====================================================================
|
||
ОБЩИЕ СТИЛИ КОММЕНТАРИЕВ И АВАТАРОВ
|
||
==================================================================== */
|
||
|
||
/* 1. Общие настройки для блока комментария */
|
||
.mod_comment_comment {
|
||
/* Резерв для кастомных отступов */
|
||
}
|
||
|
||
/* 2. Контейнер аватара */
|
||
.mod_comment_avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
margin-right: 1rem !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 3. Стиль изображения аватара */
|
||
.mod_comment_avatar img {
|
||
border-radius: 50% !important;
|
||
width: 48px !important;
|
||
height: 48px !important;
|
||
object-fit: cover !important;
|
||
}
|
||
|
||
/* 4. Стиль метаданных (Автор, Дата, IP) */
|
||
.mod_comment_meta {
|
||
line-height: 1.2;
|
||
margin-bottom: 0.5rem !important;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 5px 15px; /* Удобный отступ между элементами */
|
||
}
|
||
|
||
/* 5. Стили текста комментария */
|
||
.mod_comment_text {
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* 6. Прикрепленные изображения */
|
||
.mod_comment_attached_image img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
max-height: 300px;
|
||
}
|
||
|
||
/* 7. СТИЛИ ДЛЯ БУКВЕННЫХ АВАТАРОВ */
|
||
.mod_comment_avatar_letter {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
font-size: 1.2rem;
|
||
text-transform: uppercase;
|
||
user-select: none;
|
||
box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* Цветовая палитра для аватаров */
|
||
.av-c1 { background-color: #6c5ce7; }
|
||
.av-c2 { background-color: #2ecc71; }
|
||
.av-c3 { background-color: #e67e22; }
|
||
.av-c4 { background-color: #e91e63; }
|
||
.av-c5 { background-color: #00cec9; }
|
||
.av-c6 { background-color: #0984e3; }
|
||
.av-c7 { background-color: #d63031; }
|
||
.av-c8 { background-color: #636e72; }
|
||
.av-c9 { background-color: #fdcb6e; }
|
||
.av-c10 { background-color: #fd79a8; }
|
||
.av-c11 { background-color: #a29bfe; }
|
||
.av-c12 { background-color: #273c75; }
|
||
|
||
/* ====================================================================
|
||
СТИЛИ ДЛЯ ДРЕВОВИДНОГО ОТОБРАЖЕНИЯ (Replies)
|
||
==================================================================== */
|
||
|
||
.mod_comment_comment .mod_comment_comment.ms-4 {
|
||
border-left: 3px solid #dee2e6;
|
||
margin-left: 20px !important;
|
||
padding-left: 15px;
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.mod_comment_comment .mod_comment_comment.ms-4 > .mod_comment_box {
|
||
border: none !important;
|
||
}
|
||
|
||
/* ====================================================================
|
||
СТИЛИ ДЛЯ ПАГИНАЦИИ
|
||
==================================================================== */
|
||
|
||
.page_navigation_box {
|
||
padding: 15px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.page_navigation_box ul.page_nav {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.page_navigation_box a.page_nav,
|
||
.page_navigation_box span.active {
|
||
display: block;
|
||
min-width: 36px;
|
||
padding: 6px 10px;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
text-decoration: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.page_navigation_box span.active {
|
||
background-color: #0d6efd;
|
||
border-color: #0d6efd;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* ====================================================================
|
||
ФУТЕР КОММЕНТАРИЯ (РЕЙТИНГИ, КНОПКИ, ТАЙМЕР)
|
||
==================================================================== */
|
||
|
||
/* Основной контейнер футера */
|
||
.card-footer {
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
justify-content: space-between !important;
|
||
align-items: center !important;
|
||
gap: 10px !important;
|
||
padding: 0.5rem 1rem !important;
|
||
background-color: #ffffff !important; /* Белый фон для чистоты */
|
||
border-top: 1px solid #dee2e6 !important;
|
||
min-height: 48px;
|
||
}
|
||
|
||
/* Настраиваемая плашка "Оценка автора" */
|
||
.rating-author-badge {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
gap: 8px;
|
||
padding: 4px 12px !important;
|
||
border-radius: 6px !important;
|
||
height: 32px;
|
||
background-color: #ffc107 !important;
|
||
color: #212529 !important;
|
||
border: 1px solid rgba(0,0,0,0.05) !important;
|
||
font-size: 0.8rem !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.rating-author-stars {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
line-height: 1 !important;
|
||
}
|
||
|
||
.rating-author-stars i {
|
||
font-size: 0.75rem !important; /* Чуть уменьшил для баланса */
|
||
margin: 0 1px;
|
||
}
|
||
|
||
/* Контейнер лайков/звезд рейтинга комментария */
|
||
.comment-rating-container {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
gap: 4px;
|
||
height: 32px;
|
||
padding: 0 10px !important;
|
||
}
|
||
|
||
.comment-stars,
|
||
.comment-like {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
line-height: 1 !important;
|
||
}
|
||
|
||
/* Иконки звезд и сердец в рейтинге */
|
||
.comment-rating-container .bi-star-fill,
|
||
.comment-rating-container .bi-star,
|
||
.comment-rating-container .bi-heart-fill {
|
||
font-size: 1rem !important;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Текст количества голосов */
|
||
.comment-rating-container span {
|
||
line-height: 1;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
/* Кнопки действий в правой части */
|
||
.actions-buttons .btn-link {
|
||
text-decoration: none !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Таймер */
|
||
[id^="timer_container_"] {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
height: 32px;
|
||
}
|
||
|
||
|
||
.comment-image-item .card-link-wrapper {
|
||
transition: all 0.2s ease-in-out;
|
||
display: block;
|
||
border-radius: 8px;
|
||
}
|
||
.comment-image-item .card-link-wrapper:hover {
|
||
transform: translateY(-2px); /* Легкий подъем вверх */
|
||
}
|
||
.comment-image-item .card-link-wrapper:hover img,
|
||
.comment-image-item .card-link-wrapper:hover .file-box {
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
|
||
border-color: #0d6efd !important; /* Цвет границы при наведении (синий) */
|
||
}
|
||
|
||
/*стили при переходе с блока последние коммента*/
|
||
/* Плавная прокрутка */
|
||
html {
|
||
scroll-behavior: smooth !important;
|
||
}
|
||
|
||
/* Отступ от фиксированного меню */
|
||
[id^="comment_wrapper_"] {
|
||
scroll-margin-top: 100px !important;
|
||
}
|
||
|
||
/* Эффект подсветки */
|
||
[id^="comment_wrapper_"]:target {
|
||
animation: highlight-fade 3s ease-in-out !important;
|
||
outline: 2px solid #ffc107 !important;
|
||
border-radius: 0.375rem;
|
||
}
|
||
|
||
@keyframes highlight-fade {
|
||
0% { background-color: #fff9c4 !important; }
|
||
100% { background-color: transparent; }
|
||
}
|
||
|
||
/* Геометрия аватаров для виджета */
|
||
.lc-avatar-wrapper {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin-right: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.lc-avatar-wrapper img {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.lc-letter-circle {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 1.1rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.lc-reply-label {
|
||
font-size: 0.8rem;
|
||
color: #6c757d;
|
||
font-weight: normal;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* Стиль для кнопки удаления всей ветки */
|
||
.ico_delete_all {
|
||
background-position: -48px -48px; /* Используем стандартную иконку крестика, но... */
|
||
filter: hue-rotate(140deg) saturate(3); /* ...меняем её цвет на фиолетово-бордовый */
|
||
opacity: 0.8;
|
||
}
|
||
.ico_delete_all:hover { opacity: 1; transform: scale(1.1); }
|