360 lines
6.6 KiB
CSS
360 lines
6.6 KiB
CSS
/**
|
|
* Message Selection Mode - стили для режима выделения сообщений
|
|
*/
|
|
|
|
/* Режим выделения активен */
|
|
.selection-mode .msg {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
position: relative;
|
|
padding-left: 40px !important; /* Место для чекбокса слева */
|
|
}
|
|
|
|
.selection-mode .msg.justify-content-end {
|
|
padding-left: 0 !important;
|
|
padding-right: 40px !important; /* Место для чекбокса справа */
|
|
}
|
|
|
|
.selection-mode .msg:hover {
|
|
background-color: rgba(0, 123, 255, 0.05);
|
|
}
|
|
|
|
/* Чекбокс выделения */
|
|
.msg-select-checkbox {
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid #dee2e6;
|
|
border-radius: 50%;
|
|
background: white;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
z-index: 10;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.selection-mode .msg-select-checkbox {
|
|
display: flex;
|
|
}
|
|
|
|
.msg-select-checkbox:hover {
|
|
border-color: #007bff;
|
|
background: rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
.msg-select-checkbox.selected {
|
|
background: #007bff;
|
|
border-color: #007bff;
|
|
}
|
|
|
|
.msg-select-checkbox.selected::after {
|
|
content: '✓';
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Для сообщений справа (свои) чекбокс справа */
|
|
.msg.justify-content-end .msg-select-checkbox {
|
|
left: auto;
|
|
right: 8px;
|
|
}
|
|
|
|
/* Выделенное сообщение */
|
|
.msg.selected {
|
|
background-color: rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
/* Панель действий внизу */
|
|
.selection-actions-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border-top: 2px solid #007bff;
|
|
padding: 12px 20px;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 1050;
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
.selection-actions-bar.active {
|
|
display: flex;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.selection-count {
|
|
font-weight: 600;
|
|
color: #007bff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.selection-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.selection-actions .btn {
|
|
padding: 8px 20px;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.selection-actions .btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Модальное окно выбора чата */
|
|
.chat-forward-modal .modal-dialog {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.chat-list-item {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.chat-list-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.chat-list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.chat-list-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: #e9ecef;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
color: #6c757d;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-list-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.chat-list-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chat-list-name {
|
|
font-weight: 600;
|
|
color: #212529;
|
|
margin-bottom: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.chat-list-subtitle {
|
|
font-size: 13px;
|
|
color: #6c757d;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Загрузка */
|
|
.chat-list-loading {
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Пустой список */
|
|
.chat-list-empty {
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Поисковая строка */
|
|
.chat-forward-search {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.chat-forward-search input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.chat-forward-search input:focus {
|
|
outline: none;
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
/* Переслаанное сообщение (визуальная метка) */
|
|
.forwarded-indicator {
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
margin-bottom: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.forwarded-indicator i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Адаптив */
|
|
@media (max-width: 768px) {
|
|
.selection-actions-bar {
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.selection-count {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.selection-actions .btn {
|
|
padding: 6px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.msg-select-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
left: 5px;
|
|
}
|
|
|
|
.msg.justify-content-end .msg-select-checkbox {
|
|
right: 5px;
|
|
}
|
|
|
|
.selection-mode .msg {
|
|
padding-left: 32px !important;
|
|
}
|
|
|
|
.selection-mode .msg.justify-content-end {
|
|
padding-left: 0 !important;
|
|
padding-right: 32px !important;
|
|
}
|
|
}
|
|
|
|
/* Dark theme support */
|
|
[data-bs-theme="dark"] .selection-actions-bar {
|
|
background: #2b2d31;
|
|
border-top-color: #0d6efd;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .msg-select-checkbox {
|
|
background: #1e1f22;
|
|
border-color: #4e5058;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .msg-select-checkbox:hover {
|
|
border-color: #0d6efd;
|
|
background: rgba(13, 110, 253, 0.1);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .selection-mode .msg:hover {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .msg.selected {
|
|
background-color: rgba(13, 110, 253, 0.15);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-forward-modal .modal-content {
|
|
background-color: #2b2d31;
|
|
color: #dbdee1;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-forward-modal .modal-header {
|
|
border-bottom-color: #4e5058;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-forward-search {
|
|
border-bottom-color: #4e5058;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-forward-search input {
|
|
background-color: #1e1f22;
|
|
border-color: #4e5058;
|
|
color: #dbdee1;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-forward-search input::placeholder {
|
|
color: #87898c;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-list-item {
|
|
border-bottom-color: #4e5058;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-list-item:hover {
|
|
background-color: #35373c;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-list-avatar {
|
|
background: #35373c;
|
|
color: #87898c;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-list-avatar img {
|
|
border: 1px solid #4e5058;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-list-name {
|
|
color: #f2f3f5;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-list-subtitle {
|
|
color: #87898c;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .chat-list-empty,
|
|
[data-bs-theme="dark"] .chat-list-loading {
|
|
color: #87898c;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .forwarded-indicator {
|
|
color: #87898c;
|
|
}
|