88 lines
4.5 KiB
CSS
88 lines
4.5 KiB
CSS
/* ====================================================================
|
||
ОБЩИЕ СТИЛИ КОММЕНТАРИЕВ И АВАТАРОВ (НОВЫЕ И ОБНОВЛЕННЫЕ)
|
||
==================================================================== */
|
||
|
||
/* 1. Общие настройки для блока комментария */
|
||
.mod_comment_comment {
|
||
/* Можно добавить небольшой отступ снизу, если стандартный mb-3 недостаточен */
|
||
/* margin-bottom: 1.5rem !important; */
|
||
}
|
||
|
||
/* 2. Контейнер аватара */
|
||
.mod_comment_avatar {
|
||
/* Фиксируем размер и убедимся, что аватар не "съедет" */
|
||
width: 48px;
|
||
height: 48px;
|
||
margin-right: 20px !important;
|
||
|
||
/* Убедимся, что аватар имеет правильный отступ от метаданных/текста */
|
||
/* margin-right: 15px; */ /* Если вы используете me-3 в HTML, этот CSS не нужен */
|
||
}
|
||
|
||
/* 3. Стиль изображения аватара */
|
||
.mod_comment_avatar img {
|
||
/* Если rounded-circle не работает или его нет в Bootstrap */
|
||
border-radius: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* Гарантирует, что изображение не исказится */
|
||
}
|
||
|
||
/* 4. Стиль метаданных (Автор, Дата, IP) */
|
||
.mod_comment_meta {
|
||
/* Делаем блок метаданных компактнее и выравниваем по верхнему краю */
|
||
line-height: 1.2;
|
||
margin-bottom: 5px !important; /* Чуть меньше отступ от текста */
|
||
}
|
||
|
||
/* 5. Стили текста комментария */
|
||
.mod_comment_text {
|
||
/* Увеличиваем межстрочный интервал для лучшей читабельности */
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 6. Стили панели действий (Редактировать, Удалить, Ответить) */
|
||
.mod_comment_actions a {
|
||
text-decoration: none;
|
||
font-size: 0.9em;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
|
||
/* ====================================================================
|
||
СТИЛИ ДЛЯ ДРЕВОВИДНОГО ОТОБРАЖЕНИЯ КОММЕНТАРИЕВ (Replies) - ВАШ КОД
|
||
==================================================================== */
|
||
|
||
/* 1. Общий контейнер ответа, который находится внутри .mod_comment_comment
|
||
и имеет отступ ms-4 */
|
||
.mod_comment_comment .mod_comment_comment.ms-4 {
|
||
/* Добавляем вертикальную линию слева */
|
||
border-left: 3px solid #dee2e6; /* Легкая граница */
|
||
|
||
/* Уменьшаем margin-left, который дает ms-4, чтобы освободить место
|
||
для линии и при этом не уходить слишком далеко вправо на каждом уровне. */
|
||
margin-left: 20px !important; /* Принудительно уменьшаем отступ */
|
||
padding-left: 15px; /* Отступ между линией и контентом ответа */
|
||
|
||
/* Опционально: немного отличающийся фон */
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
/* 2. Отдельно стилизуем рамку для вложенных карточек, чтобы они не выглядели
|
||
громоздко внутри родителя */
|
||
.mod_comment_comment .mod_comment_comment.ms-4 > .mod_comment_box {
|
||
border: none !important; /* Убираем стандартную рамку карточки, чтобы осталась только наша вертикальная линия */
|
||
}
|
||
|
||
/* 3. Убираем рамки у вложенных заголовков, чтобы линия была чистой */
|
||
.mod_comment_comment .mod_comment_comment.ms-4 > .mod_comment_box > .card-header {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/* 4. Более глубокий уровень вложенности (если ответов много) */
|
||
/* Если ответ на ответ имеет дополнительный ms-4, стилизуем его дальше */
|
||
.mod_comment_comment .mod_comment_comment.ms-4 .mod_comment_comment.ms-4 {
|
||
border-color: #adb5bd; /* Чуть темнее линия для следующего уровня */
|
||
background-color: #fff; /* Возвращаем белый фон для контраста */
|
||
} |