/* ===== БАЗОВЫЕ НАСТРОЙКИ ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: Arial, sans-serif;
background: #1a1a1a;
color: #fff;
line-height: 1.5;
margin: 0;
padding: 0;
padding-top: 60px;
display: flex;
justify-content: center;
}
a { text-decoration: none; color: #007bff; }
a:hover { text-decoration: underline; }
/* ===== ОБЩИЙ КОНТЕЙНЕР ===== */
.site-wrapper {
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
min-height: calc(100vh - 60px);
}
/* ===== ЛЕВОЕ МЕНЮ ===== */
.sidebar {
width: 250px;
background: #2a2a2a;
border-right: 1px solid #444;
position: sticky;
top: 60px;
height: calc(100vh - 60px);
display: flex;
flex-direction: column;
flex-shrink: 0;
z-index: 100;
padding: 10px;
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.sidebar-nav a { color: #aaa; padding: 12px 15px; font-size: 15px; transition: all 0.2s; display: block; border-radius: 8px; }
.sidebar-nav a:hover { background: #333; color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: #007bff; color: #fff; font-weight: bold; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); }
.sidebar-nav a.admin-link { color: #ff4757; margin-top: auto; border-top: 1px solid #444; padding-top: 20px; border-radius: 0; }
/* ===== ОСНОВНОЙ КОНТЕНТ ===== */
.main-area { flex: 1; display: flex; gap: 20px; padding: 20px; justify-content: center; background: #1a1a1a; }
.center-column { flex: 1; max-width: 700px; display: flex; flex-direction: column; }
.right-column { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
/* ===== ПРОФИЛЬ ===== */
.profile-header-new {
display: block !important;
position: relative !important;
background: #2a2a2a;
border-radius: 10px;
margin-bottom: 20px;
border: 1px solid #444;
overflow: visible !important;
}
.cover-wrapper {
display: block !important;
position: relative !important;
height: 250px !important;
background: #111 !important;
border-radius: 10px 10px 0 0;
border-bottom: 1px solid #444;
overflow: hidden;
}
.cover-wrapper img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: absolute !important;
top: 0;
left: 0;
}
.cover-actions { display: flex !important; position: absolute !important; top: 12px !important; right: 12px !important; gap: 8px !important; z-index: 100 !important; opacity: 1 !important; pointer-events: auto !important; }
.btn-steal { background: rgba(231, 76, 60, 0.8); border: 1px solid #e74c3c; color: #fff; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 14px; transition: all 0.3s ease; backdrop-filter: blur(5px); display: flex; align-items: center; gap: 5px; }
.btn-steal:hover { background: #e74c3c; transform: scale(1.05); box-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }
.profile-header-info {
display: flex !important;
padding: 0 20px 20px !important;
margin-top: -60px !important;
position: relative !important;
z-index: 10 !important;
align-items: flex-end !important;
gap: 20px !important;
}
.avatar-wrapper { position: relative !important; flex-shrink: 0 !important; }
.avatar-img {
display: block !important;
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
border: 4px solid #fff !important;
object-fit: cover !important;
cursor: pointer;
background: #1a1a1a !important;
transition: transform 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.8) !important;
z-index: 20 !important;
}
.avatar-img:hover { transform: scale(1.05); }
.avatar-upload-btn { position: absolute !important; bottom: 0; right: 0; background: #007bff; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; cursor: pointer; border: 2px solid #2a2a2a; z-index: 30 !important; }
.profile-main-data { flex: 1 !important; padding-bottom: 10px !important; }
.profile-main-data h1 { font-size: 24px; margin-bottom: 5px; color: #fff; }
.profile-status { color: #aaa; font-size: 14px; }
.profile-info-card { background: #2a2a2a; border-radius: 10px; padding: 20px; border: 1px solid #444; margin-bottom: 20px; }
.profile-info-card h3 { margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 10px; }
.info-row { margin-bottom: 10px; color: #ccc; }
.info-row strong { color: #fff; }
/* Выпадающее меню (три точки) */
.profile-actions-dropdown { position: absolute; top: 15px; right: 15px; z-index: 100; }
.dropdown-btn { background: rgba(0, 0, 0, 0.5); border: 1px solid #555; color: #fff; font-size: 20px; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.2s; }
.dropdown-btn:hover { background: #333; }
.dropdown-content { position: absolute; right: 0; top: 40px; background: #2a2a2a; border: 1px solid #444; border-radius: 5px; min-width: 180px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 100; display: flex; flex-direction: column; }
.dropdown-content a { color: #ccc; padding: 10px 15px; text-decoration: none; font-size: 14px; transition: background 0.2s; }
.dropdown-content a:hover { background: #333; color: #fff; text-decoration: none; }
/* Статистика профиля */
.profile-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.stat-card { background: #2a2a2a; border: 1px solid #444; border-radius: 10px; padding: 15px; text-align: center; transition: transform 0.2s, background 0.2s; }
.stat-card:hover { background: #333; transform: translateY(-2px); }
.stat-value { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 4px; }
.stat-label { font-size: 12px; color: #aaa; }
/* Сетка фотографий */
.profile-photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.profile-photos-grid img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform 0.2s, opacity 0.2s; }
.profile-photos-grid img:hover { transform: scale(1.02); opacity: 0.9; }
/* Стена (последние посты) */
.profile-wall-posts { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.profile-wall-post { background: #1a1a1a; padding: 12px 15px; border-radius: 8px; border-left: 3px solid #007bff; }
.profile-wall-post img { width: 100% !important; max-height: 200px !important; height: 200px !important; object-fit: cover !important; border-radius: 8px !important; margin-bottom: 8px; display: block; }
/* ===== ПРАВАЯ КОЛОНКА ===== */
.widget-card { background: #2a2a2a; border-radius: 10px; padding: 15px; border: 1px solid #444; }
.widget-card h3 { font-size: 16px; margin-bottom: 10px; border-bottom: 1px solid #444; padding-bottom: 10px; }
.widget-friends-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.widget-friend-item { text-align: center; cursor: pointer; }
.widget-friend-item img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 5px; }
.widget-friend-item span { font-size: 12px; color: #ccc; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== МОДАЛЬНОЕ ОКНО ===== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.modal-content { background: #2a2a2a; width: 98%; max-width: 1600px; height: 95vh; display: flex; flex-direction: column; border-radius: 10px; position: relative; overflow: hidden; }
.close-modal { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.6); border: 1px solid #555; color: #fff; width: 35px; height: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; z-index: 9999; transition: background 0.2s; }
.close-modal:hover { background: #ff4757; border-color: #ff4757; }
.modal-body { display: flex !important; flex-direction: row !important; height: 100% !important; width: 100% !important; }
.modal-image-container { flex: 1 !important; background: #000 !important; display: flex !important; justify-content: center !important; align-items: center !important; position: relative; overflow: hidden; }
.modal-image-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
/* ВАЖНО: без !important, иначе .modal-content.no-photo .modal-comments{width:100%} не сработает */
.modal-comments { width: 350px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); height: 100%; background: var(--surface); min-width: 0; }
.comments-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 15px 20px !important; border-bottom: 1px solid #444 !important; }
.comments-header h3 { margin: 0; font-size: 18px; }
.comments-list { flex: 1; overflow-y: auto; padding: 15px; }
.comment-item { display: flex; margin-bottom: 15px; gap: 10px; }
.comment-body { background: #1a1a1a; padding: 8px 12px; border-radius: 10px; font-size: 14px; flex: 1; }
.comment-body b { display: block; margin-bottom: 4px; color: #aaa; font-size: 12px; }
.comment-body img, .comment-body video { max-width: 100%; border-radius: 5px; margin-top: 5px; }
.comment-body audio { width: 100%; margin-top: 5px; }
/* Фон панели ввода = фон модалки (единый цвет, без «ступеньки») */
.comment-input-wrapper { display: flex; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); gap: 8px; width: 100%; }
.comment-input-wrapper input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); outline: none; }
.comment-input-wrapper button[onclick="sendComment()"] { background: var(--accent); border: none; color: #fff; width: 36px; height: 36px; border-radius: 9px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 16px; flex: 0 0 auto; padding: 0; }
.emoji-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 0; color: #aaa; transition: color 0.2s; flex-shrink: 0; }
.emoji-btn:hover { color: #fff; }
/* Смайлики */
.emoji-panel { position: absolute; bottom: 60px; left: 15px; background: #2a2a2a; border: 1px solid #444; border-radius: 8px; box-shadow: 0 -4px 10px rgba(0,0,0,0.5); width: 300px; z-index: 300; }
.emoji-content { display: flex; flex-wrap: wrap; padding: 10px; max-height: 200px; overflow-y: auto; gap: 5px; }
.emoji-item { font-size: 24px; cursor: pointer; transition: transform 0.1s; padding: 2px; }
.emoji-item:hover { transform: scale(1.2); }
/* ===== ЛЕНТА ===== */
.post-card { background: #2a2a2a; border-radius: 10px; overflow: hidden; margin-bottom: 20px; border: 1px solid #444; }
.post-image { width: 100%; display: block; cursor: pointer; max-height: 560px; object-fit: cover; background: #111; }
.post-actions { padding: 10px 15px; border-top: 1px solid #333; display: flex; gap: 20px; align-items: center; }
.like-btn, .comment-btn { background: none; border: none; color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color 0.2s; }
.like-btn:hover, .comment-btn:hover { color: #aaa; }
.like-btn.liked { color: #ff4757; }
.like-btn:active { transform: scale(0.95); }
/* ===== ФОРМА ВХОДА ===== */
.auth-container { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; position: absolute; top: 0; left: 0; z-index: 9999; background: #1a1a1a; }
.auth-card { background: #2a2a2a; padding: 30px; border-radius: 10px; border: 1px solid #444; width: 100%; max-width: 400px; }
.auth-card input { width: 100%; padding: 12px; margin-bottom: 10px; background: #1a1a1a; border: 1px solid #444; color: #fff; border-radius: 5px; font-size: 16px; }
.btn { background: #007bff; color: #fff; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; display: inline-block; text-align: center; transition: background 0.2s; }
.btn:hover { background: #0056b3; text-decoration: none; }
/* Модалка аватарки */
.avatar-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center; cursor: zoom-out; }
.avatar-modal img { max-width: 90%; max-height: 90%; border-radius: 10px; }
/* ===== СООБЩЕСТВА ===== */
.group-card { display: flex; align-items: center; gap: 15px; background: #2a2a2a; border: 1px solid #444; border-radius: 10px; padding: 15px; margin-bottom: 15px; cursor: pointer; transition: background 0.2s; }
.group-card:hover { background: #333; }
.group-avatar { width: 60px; height: 60px; border-radius: 10px; background: #007bff; color: white; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; flex-shrink: 0; }
.group-info { flex: 1; }
.group-info h3 { margin-bottom: 5px; color: #fff; }
.group-info p { color: #aaa; font-size: 14px; margin-bottom: 5px; }
.tab-btn { padding: 10px 20px; background: #2a2a2a; border: 1px solid #444; color: #aaa; border-radius: 5px; cursor: pointer; font-size: 14px; transition: background 0.2s; }
.tab-btn:hover { background: #333; color: #fff; }
.tab-btn.active { background: #007bff; color: white; border-color: #007bff; }
.group-tabs { display: flex; gap: 10px; margin-bottom: 15px; }
/* ===== СПИСОК ДИАЛОГОВ ===== */
.dialog-item { border-radius: 8px; }
.dialog-actions { opacity: 0; transition: opacity 0.2s; }
.dialog-item:hover .dialog-actions { opacity: 1; }
.dialog-actions .dropdown-btn { background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.dialog-actions .dropdown-btn:hover { background: #444; color: #fff; }
.dialog-actions .dropdown-content { position: absolute; background: #2a2a2a; border: 1px solid #444; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 100; display: none; flex-direction: column; }
.dialog-actions .dropdown-content a { padding: 10px 15px; color: #ccc; text-decoration: none; font-size: 14px; display: block; transition: background 0.2s; white-space: nowrap; }
.dialog-actions .dropdown-content a:hover { background: #333; color: #fff; }
/* ===== МЕНЮ ВЛОЖЕНИЙ (ПЛЮСИК) ===== */
.plus-btn:hover { background: #555 !important; }
.attach-menu { display: none; position: absolute; bottom: 50px; left: 0; background: #2a2a2a; border: 1px solid #444; border-radius: 8px; box-shadow: 0 -4px 10px rgba(0,0,0,0.5); width: 220px; z-index: 300; overflow: hidden; flex-direction: column; }
.attach-item { padding: 12px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #ccc; transition: background 0.2s; border-bottom: 1px solid #333; }
.attach-item:last-child { border-bottom: none; }
.attach-item:hover { background: #333; color: #fff; }
.attach-item.disabled { opacity: 0.5; cursor: not-allowed; }
.attach-item.disabled:hover { background: transparent; color: #ccc; }
.attach-item small { margin-left: auto; font-size: 10px; color: #888; }
/* ===== НОВАЯ ПАНЕЛЬ СМАЙЛИКОВ ===== */
.emoji-panel-new { position: absolute; bottom: 60px; left: 0; width: 320px; height: 250px; background: #2a2a2a; border: 1px solid #444; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.6); display: flex; flex-wrap: wrap; align-content: flex-start; padding: 10px; gap: 5px; overflow-y: auto; z-index: 1000; }
.emoji-panel-new::-webkit-scrollbar { width: 6px; }
.emoji-panel-new::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 10px; }
.emoji-panel-new::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
.emoji-panel-new::-webkit-scrollbar-thumb:hover { background: #777; }
.emoji-item-new { font-size: 24px; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.2s, transform 0.1s; }
.emoji-item-new:hover { background: #444; transform: scale(1.1); }
/* ===== ВЕРХНЯЯ ПАНЕЛЬ (ШАПКА) ===== */
.top-header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #1a1a1a; border-bottom: 1px solid #333; box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 1000; }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 20px; }
.header-logo { font-size: 20px; font-weight: bold; text-decoration: none; margin-right: 20px; }
.header-search input { background: #2a2a2a; border: 1px solid #444; color: #fff; padding: 8px 15px 8px 35px; border-radius: 20px; width: 300px; outline: none; transition: all 0.3s; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: 12px center; }
.header-search input:focus { border-color: #007bff; background-color: #333; box-shadow: 0 0 10px rgba(0,123,255,0.2); }
.header-icons { display: flex; align-items: center; gap: 15px; }
.header-icon-btn { background: none; border: none; color: #aaa; font-size: 22px; cursor: pointer; position: relative; transition: color 0.2s; }
.header-icon-btn:hover { color: #fff; }
.header-badge { position: absolute; top: -5px; right: -5px; background: #ff4757; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; }
.header-notif-wrapper, .header-music-wrapper, .header-user-wrapper { position: relative; }
.header-dropdown { display: none; position: absolute; top: 45px; right: 0; background: #2a2a2a; border: 1px solid #444; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.8); z-index: 1001; overflow: hidden; flex-direction: column; }
.header-avatar-btn { background: none; border: none; display: flex; align-items: center; cursor: pointer; }
.header-avatar-btn img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.user-menu-item { display: block; padding: 12px 20px; color: #ccc; text-decoration: none; font-size: 14px; transition: background 0.2s; border-bottom: 1px solid #333; }
.user-menu-item:hover { background: #333; color: #fff; }
.user-menu-item.disabled { opacity: 0.5; cursor: not-allowed; }
.user-menu-item small { float: right; font-size: 10px; color: #888; margin-top: 2px; }
/* ===== РАЗДЕЛ СООБЩЕНИЙ (КОНТЕЙНЕР) ===== */
.messages-container { display: flex; width: 100%; height: 100%; background: #1a1a1a; border-radius: 10px; overflow: hidden; border: 1px solid #333; margin: 0 auto; }
.dialogs-panel { width: 280px; min-width: 250px; border-right: 1px solid #333; display: flex; flex-direction: column; background: #2a2a2a; flex-shrink: 0; }
.dialogs-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #333; }
.dialogs-header h2 { margin: 0; font-size: 20px; }
.btn-new-chat { padding: 5px 12px; font-size: 20px; border-radius: 50%; }
.dialogs-search { padding: 10px 15px; border-bottom: 1px solid #333; }
.dialogs-search input { width: 100%; padding: 10px 15px; border-radius: 20px; border: none; background: #1a1a1a; color: #fff; outline: none; }
.dialogs-list { flex: 1; overflow-y: auto; }
.dialog-item { display: flex; align-items: center; gap: 12px; padding: 12px 15px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid #333; }
.dialog-item:hover { background: #333; }
.dialog-item.active { background: #007bff; }
.dialog-avatar img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.dialog-info { flex: 1; overflow: hidden; }
.dialog-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.dialog-name { color: #fff; font-size: 15px; }
.dialog-time { color: #888; font-size: 12px; }
.dialog-bottom { display: flex; justify-content: space-between; align-items: center; }
.dialog-last-msg { color: #aaa; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.unread-dot { width: 10px; height: 10px; background: #007bff; border-radius: 50%; display: inline-block; }
.dialog-item.active .unread-dot { background: #fff; }
.chat-panel { flex: 1; display: flex; flex-direction: column; background: #1a1a1a; position: relative; width: 100%; overflow: hidden; }
.chat-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: #fff; }
.chat-active { display: flex; flex-direction: column; height: 100%; }
.chat-header-active { display: flex; align-items: center; gap: 15px; padding: 15px; background: #2a2a2a; border-bottom: 1px solid #333; }
.chat-header-active img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.btn-back { display: none; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
/* Старые стили для совместимости (скрыты) */
.message-row, .message-bubble, .message-content { display: none !important; }
/* ===== ИДЕАЛЬНЫЙ ЧАТ (ВСЁ СЛЕВА) ===== */
#chat-messages {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding: 20px !important;
gap: 2px !important;
width: 100% !important;
text-align: left !important;
}
.vk-msg {
display: block !important;
width: 100% !important;
position: relative !important;
padding: 6px 0 6px 55px !important;
text-align: left !important;
box-sizing: border-box !important;
}
.vk-msg.mine {
padding-left: 55px !important;
}
.vk-msg-text {
font-size: 15px !important;
color: #e0e0e0 !important;
line-height: 1.4 !important;
text-align: left !important;
display: block !important;
width: 100% !important;
word-break: break-word !important;
}
.vk-msg-time {
font-size: 11px !important;
color: #888 !important;
margin-top: 2px !important;
text-align: left !important;
display: block !important;
}
.vk-check {
color: #007bff !important;
font-size: 13px !important;
margin-left: 5px !important;
}
.vk-msg-avatar {
position: absolute !important;
left: 0 !important;
top: 5px !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
overflow: hidden !important;
}
.vk-msg-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.vk-msg-author {
display: block !important;
font-size: 13px !important;
font-weight: bold !important;
color: #007bff !important;
margin-bottom: 2px !important;
text-align: left !important;
}
.vk-msg-actions {
position: absolute !important;
top: 10px !important;
right: 10px !important;
display: flex !important;
gap: 5px !important;
background: #2a2a2a !important;
border-radius: 8px !important;
padding: 3px 6px !important;
opacity: 0 !important;
transition: opacity 0.2s !important;
z-index: 10 !important;
}
.vk-msg:hover .vk-msg-actions {
opacity: 1 !important;
}
.vk-msg-actions button {
background: none !important;
border: none !important;
color: #ccc !important;
cursor: pointer !important;
font-size: 14px !important;
}
.vk-reply-quote {
border-left: 3px solid #007bff !important;
padding-left: 8px !important;
margin-bottom: 4px !important;
margin-top: 2px !important;
display: block !important;
}
.vk-reply-author {
font-size: 12px !important;
font-weight: bold !important;
color: #007bff !important;
}
.vk-reply-text {
font-size: 12px !important;
color: #aaa !important;
}
.chat-image {
max-width: 100% !important;
border-radius: 8px !important;
margin-top: 5px !important;
cursor: pointer !important;
}
/* ===== ФИКС ДЛЯ СООБЩЕНИЙ ===== */
body:has(.messages-container) { overflow: hidden; height: 100vh; }
body:has(.messages-container) .site-wrapper { height: calc(100vh - 60px); overflow: hidden; }
body:has(.messages-container) .main-area { height: 100%; overflow: hidden; }
/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 768px) {
.messages-container { flex-direction: column; height: 100%; border-radius: 0; }
.dialogs-panel { width: 100%; height: 100%; }
.chat-panel { display: none; width: 100%; height: 100%; }
.dialogs-panel.mobile-hide { display: none; }
.chat-panel { display: flex; }
.chat-panel:not(.mobile-show) { display: none; }
.btn-back { display: block; }
.msg-actions { opacity: 1; }
}
/* ===== КРАСИВАЯ ПРОКРУТКА В ЧАТЕ ===== */
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: #666; }
/* ===== ПЛЕЕР В ШАПКЕ ===== */
.music-panel-wide { width: 420px; max-width: 95vw; padding: 0; }
.music-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #444; font-weight: bold; color: #fff; font-size: 16px; }
.music-panel-link { font-size: 12px; color: #007bff; font-weight: normal; }
.music-panel-link:hover { text-decoration: underline; }
.music-panel-list { max-height: 340px; overflow-y: auto; padding: 5px 0; }
.music-panel-list::-webkit-scrollbar { width: 6px; }
.music-panel-list::-webkit-scrollbar-track { background: transparent; }
.music-panel-list::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
.hp-track { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; cursor: pointer; transition: background 0.2s; gap: 10px; }
.hp-track:hover { background: #333; }
.hp-track.playing { background: rgba(0, 123, 255, 0.15); border-left: 3px solid #007bff; padding-left: 17px; }
.hp-track-info { flex: 1; min-width: 0; overflow: hidden; }
.hp-track-info b { display: block; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-track-info small { display: block; color: #888; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-track-icon { color: #007bff; font-size: 14px; flex-shrink: 0; }
.music-page { gap: 20px; }
.music-upload-card { background: #2a2a2a; border-radius: 12px; padding: 20px; border: 1px solid #444; margin-bottom: 20px; }
.music-upload-card h3 { margin-bottom: 15px; font-size: 18px; }
.music-upload-form { display: flex; flex-direction: column; gap: 10px; }
.music-input { width: 100%; padding: 12px 15px; background: #1a1a1a; border: 1px solid #444; color: #fff; border-radius: 8px; font-size: 14px; outline: none; transition: border 0.2s; }
.music-input:focus { border-color: #007bff; }
.music-upload-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 5px; }
.music-file-btn { background: #333; color: #fff; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background 0.2s; border: 1px solid #555; }
.music-file-btn:hover { background: #444; }
.music-file-label { color: #888; font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-upload-btn { background: #007bff; padding: 10px 25px; border-radius: 8px; font-weight: bold; margin-left: auto; }
.music-upload-btn:hover { background: #0056b3; }
.music-tabs { display: flex; gap: 10px; margin-bottom: 15px; }
.music-tab { padding: 10px 20px; background: #2a2a2a; border: 1px solid #444; color: #aaa; border-radius: 25px; cursor: pointer; font-size: 14px; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.music-tab:hover { background: #333; color: #fff; }
.music-tab.active { background: #007bff; color: #fff; border-color: #007bff; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); }
.music-track-card { display: flex; align-items: center; gap: 15px; background: #2a2a2a; border-radius: 12px; padding: 12px 15px; margin-bottom: 10px; border: 1px solid #333; transition: all 0.2s; }
.music-track-card:hover { background: #333; border-color: #555; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.music-cover { width: 55px; height: 55px; border-radius: 8px; background: linear-gradient(135deg, #007bff, #0056b3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.music-cover-icon { font-size: 26px; }
.music-info { flex: 1; min-width: 0; }
.music-title { font-weight: bold; color: #fff; font-size: 15px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-artist { color: #888; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.music-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 5px; transition: transform 0.1s; opacity: 0.7; }
.music-btn:hover { transform: scale(1.2); opacity: 1; }
.music-btn.added { opacity: 1; }
.music-play-btn { background: #007bff; color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; padding-left: 3px; transition: all 0.2s; flex-shrink: 0; }
.music-play-btn:hover { background: #0056b3; transform: scale(1.1); box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); }
.music-empty { text-align: center; padding: 50px 20px; color: #888; font-size: 15px; background: #2a2a2a; border-radius: 12px; border: 1px dashed #444; }
/* ===== МОРФИНГ ИКОНКИ В ПЛЕЕР ===== */
.header-music-wrapper { position: relative; display: flex; align-items: center; }
.music-morph-container { position: relative; display: flex; align-items: center; }
.music-icon-btn { font-size: 22px; background: none; border: none; cursor: pointer; color: #aaa; transition: color 0.2s, transform 0.2s; display: block; }
.music-icon-btn:hover { color: #fff; transform: scale(1.1); }
.music-player-btn { display: none; align-items: center; gap: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 20px; padding: 4px 8px 4px 15px; animation: morphIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; transition: background 0.2s; }
.music-player-btn:hover { background: #333; }
@keyframes morphIn { from { opacity: 0; transform: scale(0.7); width: 30px; } to { opacity: 1; transform: scale(1); width: auto; } }
.hmp-info { display: flex; flex-direction: column; min-width: 90px; max-width: 120px; }
.hmp-title { color: #fff; font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmp-artist { color: #888; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmp-btn { background: #007bff; border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; padding-left: 2px; transition: background 0.2s, transform 0.1s; }
.hmp-btn:hover { background: #0056b3; transform: scale(1.1); }
.hmp-close-btn { background: none; border: none; color: #888; font-size: 14px; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s, color 0.2s; }
.hmp-close-btn:hover { background: rgba(255, 71, 87, 0.2); color: #ff4757; }
/* ===== АДАПТИВ ===== */
@media (max-width: 600px) {
.profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
.profile-photos-grid { grid-template-columns: repeat(2, 1fr); }
.music-upload-row { flex-direction: column; align-items: stretch; }
.music-file-label { text-align: center; margin: 5px 0; }
.music-upload-btn { margin-left: 0; width: 100%; }
.music-track-card { gap: 10px; padding: 10px; }
.music-cover { width: 45px; height: 45px; }
.music-cover-icon { font-size: 20px; }
.music-play-btn { width: 38px; height: 38px; }
}
/* ===== ФИКС ВЫПАДАЮЩЕГО МЕНЮ В ПРОФИЛЕ (ТРИ ТОЧКИ) ===== */
.profile-actions-dropdown {
position: absolute !important;
top: 15px !important;
right: 15px !important;
z-index: 1000 !important;
}
.dropdown-btn {
background: rgba(0, 0, 0, 0.6) !important;
border: 1px solid #555 !important;
color: #fff !important;
font-size: 20px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
cursor: pointer !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
transition: background 0.2s !important;
}
.dropdown-btn:hover {
background: #333 !important;
}
.dropdown-content {
position: absolute !important;
right: 0 !important;
top: 45px !important;
background: #2a2a2a !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
min-width: 200px !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.8) !important;
z-index: 1001 !important;
display: none;
flex-direction: column !important;
overflow: hidden !important;
}
.dropdown-content a {
color: #ccc !important;
padding: 12px 18px !important;
text-decoration: none !important;
font-size: 14px !important;
transition: background 0.2s !important;
display: block !important;
white-space: nowrap !important;
}
.dropdown-content a:hover {
background: #333 !important;
color: #fff !important;
text-decoration: none !important;
}
.dropdown-content a[style*="color: #ff4757"] {
color: #ff4757 !important;
}
.dropdown-content a[style*="color: #ff4757"]:hover {
background: rgba(255, 71, 87, 0.1) !important;
color: #ff4757 !important;
}
/* ===== КРАСИВЫЕ КОММЕНТАРИИ В МОДАЛКЕ ===== */
.comments-list {
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100%;
min-width: 0;
}
.comment-item {
display: flex !important;
gap: 9px !important;
align-items: flex-start !important;
margin-bottom: 0 !important;
width: 100%;
max-width: 100%;
margin-right: 0 !important;
padding-right: 0 !important;
}
.comment-item img {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
border: 2px solid var(--line) !important;
}
/* Карточка комментария: цвета из темы, растягивается на всю ширину */
.comment-body {
background: var(--surface-2) !important;
padding: 9px 12px !important;
border-radius: 10px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
margin-right: 0 !important;
border: 1px solid var(--line) !important;
position: relative !important;
}
.comment-body b {
color: var(--accent) !important;
font-size: 13px !important;
display: block !important;
margin-bottom: 4px !important;
cursor: pointer !important;
}
.comment-body p {
color: var(--text) !important;
font-size: 13.5px !important;
line-height: 1.45 !important;
margin: 4px 0 0 !important;
word-break: break-word !important;
}
.comment-body div[style*="background: rgba(0,0,0,0.2)"] {
background: rgba(0, 123, 255, 0.1) !important;
border-left: 3px solid #007bff !important;
padding: 6px 10px !important;
margin-bottom: 8px !important;
border-radius: 4px !important;
font-size: 12px !important;
color: #aaa !important;
}
.comment-body button {
background: none !important;
border: none !important;
color: #888 !important;
font-size: 12px !important;
cursor: pointer !important;
padding: 0 !important;
margin-top: 6px !important;
transition: color 0.2s !important;
display: inline-block !important;
}
.comment-body button:hover {
color: #007bff !important;
}
/* ===== ФИКС ПОЛЯ ВВОДА В ЧАТЕ ===== */
.chat-input-area {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
background: #2a2a2a;
border-top: 1px solid #333;
}
.chat-input-area input[type="text"] {
flex: 1;
padding: 12px 20px;
border-radius: 25px;
border: 1px solid #444;
background: #1a1a1a;
color: #fff;
outline: none;
font-size: 14px;
transition: border 0.2s;
}
.chat-input-area input[type="text"]:focus {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}
.chat-input-area input[type="text"]::placeholder {
color: #888;
}
/* Кнопки в поле ввода */
.btn-attach, .btn-emoji, .btn-send {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-attach {
background: #444;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
}
.btn-attach:hover {
background: #555;
}
.btn-emoji {
color: #aaa;
font-size: 22px;
}
.btn-emoji:hover {
color: #fff;
}
.btn-send {
background: #007bff;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 16px;
}
.btn-send:hover {
background: #0056b3;
}
/* ===== КРАСИВЫЙ ЧАТ (ДАТА, ВРЕМЯ СПРАВА, МЕНЮ) ===== */
.chat-date-divider {
text-align: center;
color: #888;
font-size: 12px;
margin: 15px 0;
padding: 5px;
}
.vk-msg {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
position: relative !important;
padding: 4px 40px 4px 0 !important;
text-align: left !important;
}
.vk-msg.with-header {
margin-top: 12px !important;
padding-left: 50px !important;
}
.vk-msg.no-header {
padding-left: 50px !important;
}
.vk-msg-avatar {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
overflow: hidden !important;
}
.vk-msg-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
}
.vk-msg-author {
font-size: 13px !important;
font-weight: bold !important;
color: #007bff !important;
margin-bottom: 2px !important;
text-align: left !important;
}
.vk-msg-body {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
}
.vk-msg-text {
font-size: 15px !important;
color: #e0e0e0 !important;
line-height: 1.4 !important;
text-align: left !important;
display: block !important;
width: 100% !important;
word-break: break-word !important;
}
/* Время и галочки — справа */
.vk-msg-time {
font-size: 11px !important;
color: #888 !important;
margin-top: 2px !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 5px !important;
width: 100% !important;
text-align: right !important;
}
.vk-check {
color: #007bff !important;
font-size: 13px !important;
margin-left: 5px !important;
}
/* Кнопка меню */
.vk-msg-actions {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
right: 0 !important;
opacity: 0 !important;
transition: opacity 0.2s !important;
z-index: 10 !important;
background: #2a2a2a !important;
border-radius: 50% !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.vk-msg:hover .vk-msg-actions {
opacity: 1 !important;
}
.vk-menu-btn {
background: none !important;
border: none !important;
color: #ccc !important;
font-size: 18px !important;
cursor: pointer !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vk-menu-btn:hover {
color: #fff !important;
}
/* Само выпадающее меню */
.vk-msg-dropdown {
background: #2a2a2a !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.8) !important;
min-width: 180px !important;
z-index: 9999 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.vk-msg-dropdown button {
background: none !important;
border: none !important;
color: #ccc !important;
padding: 10px 15px !important;
text-align: left !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background 0.2s !important;
display: block !important;
width: 100% !important;
}
.vk-msg-dropdown button:hover {
background: #333 !important;
color: #fff !important;
}
.vk-reply-quote {
border-left: 3px solid #007bff !important;
padding-left: 8px !important;
margin-bottom: 4px !important;
margin-top: 2px !important;
}
.vk-reply-author {
font-size: 12px !important;
font-weight: bold !important;
color: #007bff !important;
}
.vk-reply-text {
font-size: 12px !important;
color: #aaa !important;
}
.chat-image {
max-width: 100% !important;
border-radius: 8px !important;
margin-top: 5px !important;
cursor: pointer !important;
}
/* ===== СТИЛЬНОЕ МЕНЮ ДЕЙСТВИЙ (КАК В ВК) ===== */
.vk-msg {
position: relative !important;
}
/* Кнопки при наведении */
.vk-msg-actions {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
right: 10px !important;
display: flex !important;
gap: 5px !important;
background: #2a2a2a !important;
border-radius: 20px !important;
padding: 4px 8px !important;
opacity: 0 !important;
transition: opacity 0.2s !important;
z-index: 10 !important;
border: 1px solid #444 !important;
}
.vk-msg:hover .vk-msg-actions {
opacity: 1 !important;
}
.vk-action-btn {
background: none !important;
border: none !important;
color: #aaa !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
border-radius: 50% !important;
transition: color 0.2s, background 0.2s !important;
}
.vk-action-btn:hover {
color: #fff !important;
background: #444 !important;
}
/* Выпадающее меню */
.vk-msg-dropdown {
background: #2a2a2a !important;
border: 1px solid #444 !important;
border-radius: 10px !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.8) !important;
min-width: 200px !important;
z-index: 9999 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 5px !important;
}
.vk-msg-dropdown button {
background: none !important;
border: none !important;
color: #ccc !important;
padding: 10px 15px !important;
text-align: left !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background 0.2s !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
border-radius: 6px !important;
width: 100% !important;
}
.vk-msg-dropdown button:hover {
background: #333 !important;
color: #fff !important;
}
.vk-msg-dropdown button svg {
opacity: 0.7 !important;
}
.vk-msg-dropdown button:hover svg {
opacity: 1 !important;
}
/* Дата по центру */
.chat-date-divider {
text-align: center !important;
color: #888 !important;
font-size: 12px !important;
margin: 20px 0 10px 0 !important;
padding: 5px !important;
width: 100% !important;
}
/* Время и галочки справа */
.vk-msg-time {
font-size: 11px !important;
color: #888 !important;
margin-top: 2px !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 5px !important;
width: 100% !important;
text-align: right !important;
}
.vk-check {
color: #007bff !important;
font-size: 13px !important;
margin-left: 5px !important;
}
/* Круглые аватарки */
.vk-msg-avatar img {
border-radius: 50% !important;
}
/* ===== ИСПРАВЛЕНИЕ ПЛАШКИ ПРИ НАВЕДЕНИИ ===== */
.vk-msg-actions {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
right: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important; /* Расстояние между кнопками */
background: #2a2a2a !important;
border: 1px solid #444 !important;
border-radius: 20px !important; /* Закругленные углы (прямоугольник) */
padding: 5px 12px !important; /* Отступы внутри плашки */
opacity: 0 !important;
transition: opacity 0.2s !important;
z-index: 10 !important;
width: auto !important; /* Ширина по содержимому */
height: auto !important;
min-width: 70px !important; /* Чтобы не была слишком узкой */
}
.vk-msg:hover .vk-msg-actions {
opacity: 1 !important;
}
.vk-action-btn {
background: none !important;
border: none !important;
color: #aaa !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px !important;
border-radius: 50% !important;
transition: color 0.2s, background 0.2s !important;
width: 24px !important;
height: 24px !important;
}
.vk-action-btn:hover {
color: #fff !important;
background: #444 !important;
}
.vk-action-btn svg {
width: 16px !important;
height: 16px !important;
}
/* ===== ПЛАШКА ОТВЕТА (УПРАВЛЯЕТСЯ ЧЕРЕЗ JS) ===== */
#reply-preview {
display: none; /* По умолчанию скрыта (JS ставит flex при ответе) */
justify-content: space-between;
align-items: center;
background: #2a2a2a;
border-top: 1px solid #444;
border-left: 3px solid #007bff;
padding: 8px 15px;
margin: 0;
}
#reply-preview > div {
border-left: none;
padding-left: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
}
#reply-author {
color: #007bff;
font-weight: bold;
font-size: 13px;
margin-bottom: 2px;
}
#reply-text {
color: #aaa;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.btn-close-reply {
background: none;
border: none;
color: #888;
font-size: 18px;
cursor: pointer;
padding: 0 5px;
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.btn-close-reply:hover {
color: #ff4757;
}
/* ===== ФИКС ОТСТУПОВ В КОММЕНТАРИЯХ ===== */
.comments-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 10px !important;
width: 100%;
min-width: 0;
}
.comment-item {
display: flex !important;
gap: 10px !important;
align-items: flex-start !important;
width: 100%;
max-width: 100%;
}
.comment-body {
padding: 9px 12px !important;
border-radius: 10px !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
}
.comment-body b {
font-size: 12px !important;
margin-bottom: 2px !important;
display: inline-block !important;
}
.comment-body p {
font-size: 13px !important;
line-height: 1.4 !important;
margin: 2px 0 !important;
}
/* Цитата (ответ) */
.comment-body div[style*="background: rgba(0,123,255,0.1)"] {
padding: 4px 8px !important;
font-size: 11px !important;
margin-bottom: 4px !important;
border-radius: 4px !important;
}
/* Кнопки (Ответить, лайк, удалить) */
.comment-body button {
font-size: 11px !important;
padding: 0 !important;
}
.comment-body button:hover {
text-decoration: underline !important;
}
/* Счётчик лайков */
.comment-like-count {
font-size: 11px !important;
margin-left: 2px !important;
}
/* ===== ФИКС КАРТИНОК В КОММЕНТАРИЯХ ===== */
.comment-body img {
max-width: 100% !important;
max-height: 300px !important;
object-fit: cover !important;
border-radius: 8px !important; /* Прямоугольные с закруглением, а не круглые */
margin-top: 5px !important;
display: block !important;
cursor: pointer !important;
}
/* Превью прикрепленного файла в комментариях */
#attachment-preview {
padding: 10px 15px !important;
background: #2a2a2a !important;
border-top: 1px solid #444 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 13px !important;
color: #ccc !important;
}
#attachment-preview img {
width: 40px !important;
height: 40px !important;
object-fit: cover !important;
border-radius: 5px !important;
}
#attachment-preview .btn-remove {
color: #ff4757 !important;
cursor: pointer !important;
font-weight: bold !important;
margin-left: auto !important;
}
/* Превью прикрепленного файла в чате */
#attachment-preview-chat {
padding: 10px 15px !important;
background: #2a2a2a !important;
border-top: 1px solid #444 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 13px !important;
color: #ccc !important;
}
#attachment-preview-chat img {
width: 40px !important;
height: 40px !important;
object-fit: cover !important;
border-radius: 5px !important;
}
/* ============================================================
РАЗДЕЛ «МУЗЫКА» + ГЛОБАЛЬНЫЙ ПЛЕЕР
============================================================ */
.m-body { padding-bottom: 0; }
body.mp-dock-open { padding-bottom: 86px; }
.m-body .site-wrapper { max-width: 1460px; }
.m-center { max-width: 860px; }
@media (max-width: 1300px) {
.m-body .site-wrapper { max-width: 1200px; }
.m-rail { display: none; }
}
/* ---------- шапка страницы ---------- */
.m-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.m-head-text { min-width: 180px; }
.m-h1 { font-size: 28px; margin: 0 0 4px; line-height: 1.1; }
.m-sub { color: #888; font-size: 13px; }
.m-head-actions { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.m-search { display: flex; align-items: center; gap: 8px; background: #2a2a2a; border: 1px solid #444; border-radius: 10px; padding: 0 12px; height: 38px; width: 240px; transition: border-color .2s, width .2s; }
.m-search:focus-within { border-color: #007bff; }
.m-search-icon { font-size: 13px; opacity: .7; }
.m-search input { background: none; border: 0; outline: 0; color: #fff; font-size: 13.5px; width: 100%; }
.m-search input::placeholder { color: #777; }
.m-upload-open { height: 38px; padding: 0 16px; border-radius: 10px; }
/* ---------- промо-блок ---------- */
.m-hero {
position: relative; display: flex; align-items: center; gap: 18px;
padding: 18px 20px; margin-bottom: 20px; border-radius: 14px; overflow: hidden;
background: linear-gradient(120deg, #12305c 0%, #1b2233 55%, #1e1b33 100%);
border: 1px solid #2f3a52;
}
.m-hero::after {
content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px;
background: radial-gradient(circle, rgba(0, 123, 255, .45), transparent 65%);
pointer-events: none;
}
.m-hero-art {
width: 58px; height: 58px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center;
font-size: 26px; background: linear-gradient(135deg, #007bff, #6f42c1);
box-shadow: 0 8px 20px rgba(0, 123, 255, .35);
}
.m-hero-body { min-width: 0; flex: 1; position: relative; z-index: 1; }
.m-hero-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7aa9e0; margin-bottom: 3px; }
.m-hero-title { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.m-hero-sub { color: #9aa7bd; font-size: 12.5px; }
.m-hero-btn { position: relative; z-index: 1; flex: none; }
/* ---------- вкладки ---------- */
.m-tabs { flex-wrap: wrap; }
.m-tab-count { color: #7fb2ff; font-size: 12px; }
/* ---------- панель сортировки ---------- */
.m-toolbar { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.m-sort { display: flex; gap: 4px; background: #232323; border: 1px solid #3a3a3a; border-radius: 9px; padding: 3px; }
.m-sort-btn { background: none; border: 0; color: #999; font-size: 12.5px; padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: .15s; }
.m-sort-btn:hover { color: #fff; }
.m-sort-btn.active { background: #3a3a3a; color: #fff; }
.m-hint { color: #777; font-size: 12px; margin-left: auto; }
/* ---------- список треков ---------- */
.m-list { border: 1px solid #3a3a3a; border-radius: 12px; overflow: hidden; background: #242424; }
.m-row {
display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) 70px 46px 96px;
align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer;
border-bottom: 1px solid #303030; transition: background .12s;
}
.m-row:last-child { border-bottom: 0; }
.m-row:hover { background: #2d2d2d; }
.m-row.is-playing { background: linear-gradient(90deg, rgba(0, 123, 255, .16), rgba(0, 123, 255, 0) 60%); }
.m-row.is-playing .m-row-title { color: #8ec2ff; }
.m-row-play {
width: 30px; height: 30px; border-radius: 50%; border: 1px solid #4a4a4a; background: #2a2a2a;
color: #ccc; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: .15s; padding-left: 1px;
}
.m-row:hover .m-row-play { background: #007bff; border-color: #007bff; color: #fff; }
.m-row.is-playing .m-row-play { background: #007bff; border-color: #007bff; color: #fff; }
.m-cover {
width: 46px; height: 46px; border-radius: 9px; background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
border: 1px solid rgba(255, 255, 255, .06); flex: none;
}
.m-row-info { min-width: 0; }
.m-row-title { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-sub { font-size: 12px; color: #8d8d8d; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row-plays { color: #777; font-size: 11.5px; text-align: right; white-space: nowrap; }
.m-row-dur { color: #888; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.m-row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.m-act {
width: 30px; height: 30px; border: 0; background: none; color: #8a8a8a; border-radius: 8px;
cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: .15s;
}
.m-act:hover { background: #3a3a3a; color: #fff; }
.m-act.is-liked { color: #ff5c7a; }
.m-act.is-added { color: #38d39f; }
.m-act-add { font-size: 17px; font-weight: 700; }
/* ---------- пустое состояние ---------- */
.m-empty { text-align: center; padding: 46px 20px; background: #242424; border: 1px dashed #3d3d3d; border-radius: 12px; }
.m-empty-icon { font-size: 34px; margin-bottom: 10px; opacity: .9; }
.m-empty-title { color: #aaa; font-size: 14px; margin-bottom: 16px; }
/* ---------- плейлисты ---------- */
.m-pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.m-pl {
position: relative; display: flex; align-items: center; gap: 12px; padding: 12px;
background: #242424; border: 1px solid #3a3a3a; border-radius: 12px; cursor: pointer; transition: .18s;
}
.m-pl:hover { border-color: #4d5a6e; background: #2b2b2b; transform: translateY(-2px); }
.m-pl-art {
width: 46px; height: 46px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center;
font-size: 20px; background: linear-gradient(135deg, #2f6fd0, #6f42c1);
}
.m-pl-info { min-width: 0; }
.m-pl-title { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pl-sub { font-size: 11.5px; color: #888; margin-top: 2px; }
.m-pl-del {
position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 7px;
background: rgba(0, 0, 0, .35); color: #999; cursor: pointer; opacity: 0; transition: .15s; font-size: 12px;
}
.m-pl:hover .m-pl-del { opacity: 1; }
.m-pl-del:hover { background: #d64545; color: #fff; }
.m-pl-new {
flex-direction: column; justify-content: center; gap: 6px; text-align: center;
color: #888; border-style: dashed; min-height: 72px; font-size: 12.5px;
}
.m-pl-plus { font-size: 22px; line-height: 1; color: #bbb; }
/* ---------- просмотр плейлиста ---------- */
.m-view-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.m-back { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #444; background: #2a2a2a; color: #ccc; cursor: pointer; font-size: 16px; }
.m-back:hover { background: #333; color: #fff; }
.m-view-title { min-width: 0; flex: 1; }
.m-view-title h2 { margin: 0 0 2px; font-size: 20px; }
/* ---------- модалки ---------- */
.m-modal {
position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center;
background: rgba(5, 6, 8, .74); backdrop-filter: blur(3px); padding: 20px;
}
.m-modal.is-open { display: flex; }
.m-modal-card {
width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto;
background: #262626; border: 1px solid #3d3d3d; border-radius: 16px; padding: 20px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
}
.m-modal-small { width: 420px; }
.m-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.m-modal-head h3 { margin: 0; font-size: 17px; }
.m-modal-close { background: none; border: 0; color: #999; font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.m-modal-close:hover { background: #3a3a3a; color: #fff; }
.m-modal-sub { color: #888; font-size: 12.5px; margin: 0 0 14px; }
.m-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.m-btn-ghost { background: #333; border: 1px solid #4a4a4a; }
.m-btn-ghost:hover { background: #3d3d3d; }
.m-drop {
border: 1.5px dashed #4a4a4a; border-radius: 12px; padding: 22px 16px; text-align: center;
color: #999; font-size: 13px; cursor: pointer; margin-bottom: 12px; transition: .15s;
}
.m-drop:hover, .m-drop.is-drag { border-color: #007bff; color: #cfe2ff; background: rgba(0, 123, 255, .07); }
.m-drop-icon { font-size: 24px; margin-bottom: 6px; }
.m-drop-meta { color: #888; font-size: 11.5px; }
.m-form-row { display: flex; gap: 10px; margin-bottom: 10px; }
.m-input {
width: 100%; padding: 11px 13px; background: #1c1c1c; border: 1px solid #444; color: #fff;
border-radius: 9px; font-size: 13.5px; outline: none; transition: border-color .2s;
}
.m-input:focus { border-color: #007bff; }
.m-cover-btn {
flex: none; display: flex; align-items: center; justify-content: center; padding: 0 16px; cursor: pointer;
background: #333; border: 1px solid #4a4a4a; border-radius: 9px; font-size: 13px; color: #ccc; white-space: nowrap;
}
.m-cover-btn:hover { background: #3d3d3d; color: #fff; }
.m-progress { height: 4px; background: #333; border-radius: 4px; margin-top: 12px; overflow: hidden; opacity: 0; transition: opacity .2s; }
.m-progress.is-on { opacity: 1; }
.m-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #007bff, #5aa9ff); transition: width .15s; }
/* ---------- контекстное меню ---------- */
.m-menu {
position: fixed; z-index: 3500; display: none; flex-direction: column; min-width: 220px;
background: #2b2b2b; border: 1px solid #444; border-radius: 10px; padding: 5px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.m-menu.is-open { display: flex; }
.m-menu-item {
display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 0; background: none;
color: #ddd; font-size: 13px; text-align: left; border-radius: 7px; cursor: pointer;
}
.m-menu-item:hover { background: #3a3a3a; color: #fff; }
.m-menu-danger { color: #ff6b6b; }
/* ---------- выбор плейлиста ---------- */
.m-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.m-pick-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; background: #2f2f2f; border: 1px solid #3d3d3d; border-radius: 9px;
color: #eee; font-size: 13px; cursor: pointer; text-align: left;
}
.m-pick-item:hover { border-color: #007bff; background: #333; }
.m-pick-item small { color: #888; }
/* ---------- тост ---------- */
.m-toast {
position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 16px); z-index: 4000;
background: #2f3542; color: #fff; border: 1px solid #47536b; padding: 10px 16px; border-radius: 10px;
font-size: 13px; opacity: 0; pointer-events: none; transition: .22s;
}
.m-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.m-toast.is-bad { background: #4a2630; border-color: #7a3a47; }
/* ---------- правая колонка ---------- */
.m-rail .widget-card { padding: 14px; }
.m-widget-empty { color: #777; font-size: 12.5px; padding: 6px 0; }
.m-top-item { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
.m-top-item:hover .m-top-txt b { color: #8ec2ff; }
.m-top-num { width: 14px; color: #777; font-size: 11px; text-align: center; }
.m-top-cover { width: 34px; height: 34px; border-radius: 8px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.m-top-txt { min-width: 0; }
.m-top-txt b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-top-txt small { color: #888; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.m-artist { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
.m-artist:hover b { color: #8ec2ff; }
.m-artist-ava { width: 30px; height: 30px; border-radius: 50%; background: #333; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.m-artist-txt { min-width: 0; }
.m-artist-txt b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-artist-txt small { color: #888; font-size: 11px; }
/* ============================================================
ГЛОБАЛЬНЫЙ ПЛЕЕР (нижний док)
============================================================ */
.mp-dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
display: grid; grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.5fr) minmax(150px, 1fr);
align-items: center; gap: 18px; padding: 10px 18px;
background: rgba(28, 28, 28, .97); backdrop-filter: blur(14px);
border-top: 1px solid #3a3a3a; transform: translateY(105%); transition: transform .22s ease;
}
.mp-dock.is-open { transform: none; }
.mpd-track { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mpd-cover {
width: 46px; height: 46px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center;
font-size: 18px; color: #fff; background: linear-gradient(135deg, #007bff, #0056b3);
background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, .08);
}
.mpd-info { min-width: 0; }
.mpd-info b { display: block; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpd-info small { display: block; font-size: 11.5px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpd-icon {
width: 32px; height: 32px; border: 0; background: none; color: #bbb; border-radius: 8px;
cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: .15s;
}
.mpd-icon:hover { background: #333; color: #fff; }
.mpd-icon.is-on { color: #4da3ff; }
.mpd-like { margin-left: 2px; font-size: 15px; }
.mpd-like.is-liked { color: #ff5c7a; }
.mpd-mid { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mpd-buttons { display: flex; align-items: center; gap: 4px; }
.mpd-play {
width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #111;
cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
margin: 0 4px; transition: transform .12s;
}
.mpd-play:hover { transform: scale(1.06); }
.mpd-seek { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; }
.mpd-seek span { font-size: 10.5px; color: #999; font-variant-numeric: tabular-nums; width: 32px; }
.mpd-seek span:last-child { text-align: right; }
.mpd-bar { position: relative; flex: 1; height: 4px; background: #3d3d3d; border-radius: 99px; cursor: pointer; }
.mpd-bar:hover { background: #4a4a4a; }
.mpd-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #007bff, #5aa9ff); }
.mpd-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mpd-vol-icon { font-size: 13px; color: #999; }
.mpd-vol { width: 84px; height: 4px; background: #3d3d3d; border-radius: 99px; cursor: pointer; position: relative; }
.mpd-volfill { position: absolute; left: 0; top: 0; bottom: 0; width: 70%; background: #bbb; border-radius: 99px; }
.mpd-queue {
position: absolute; right: 16px; bottom: 70px; width: 340px; max-height: 320px; overflow-y: auto;
background: #262626; border: 1px solid #3d3d3d; border-radius: 12px; padding: 6px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .6); display: none;
}
.mpd-queue.is-open { display: block; }
.mpd-qitem { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.mpd-qitem:hover { background: #333; }
.mpd-qitem.is-current { background: rgba(0, 123, 255, .15); }
.mpd-qnum { width: 16px; color: #888; font-size: 11px; text-align: center; }
.mpd-qname { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpd-qartist { color: #888; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
/* ---------- адаптив ---------- */
@media (max-width: 900px) {
.m-row { grid-template-columns: 30px 44px minmax(0, 1fr) 44px 84px; gap: 9px; }
.m-row-plays { display: none; }
.m-toolbar { flex-wrap: wrap; }
}
@media (max-width: 980px) {
.m-center { max-width: 100%; }
.m-search { width: 190px; }
.mp-dock { grid-template-columns: minmax(0, 1fr) auto; }
.mpd-mid .mpd-seek { display: none; }
.mpd-right { display: none; }
}
@media (max-width: 700px) {
.m-head-actions { width: 100%; }
.m-search { flex: 1; width: auto; }
.m-hero { flex-wrap: wrap; }
.m-hero-btn { width: 100%; }
.m-row { grid-template-columns: 30px 44px minmax(0, 1fr) 44px 74px; gap: 9px; padding: 8px 10px; }
.m-row-plays { display: none; }
.m-row-actions .m-act-more { display: none; }
.m-hint { display: none; }
body.mp-dock-open { padding-bottom: 78px; }
.mp-dock { grid-template-columns: 1fr auto; gap: 10px; padding: 8px 10px; }
.mpd-buttons { gap: 0; }
.mpd-icon { width: 30px; height: 30px; }
.mpd-queue { width: calc(100vw - 24px); right: 12px; }
.m-form-row { flex-wrap: wrap; }
.m-pl-grid { grid-template-columns: 1fr 1fr; }
}
/* ===== ФОРМА ПОСТА ===== */
.post-compose-row { display: flex; align-items: center; gap: 12px; }
.post-attach {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
padding: 8px 14px; border-radius: 8px; background: #333; border: 1px solid #555;
color: #ccc; font-size: 13px; transition: .15s; white-space: nowrap;
}
.post-attach:hover { background: #3d3d3d; color: #fff; }
.post-attach.has-file { border-color: #007bff; color: #7fb2ff; }
.post-attach-name { color: #8ec2ff; font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-compose-row .btn { margin-left: auto; }
/* ===== ОШИБКИ В ФОРМЕ ВХОДА ===== */
.auth-error { color: #ff6b81; font-size: 13px; min-height: 18px; margin: 0 0 10px; line-height: 1.3; }
/* ===== ШАПКА НА СТРАНИЦЕ МУЗЫКИ (шире контент) ===== */
.m-body .header-inner { max-width: 1460px; }
@media (max-width: 1300px) { .m-body .header-inner { max-width: 1200px; } }
/* ============================================================
«ТИХИЙ» ДИЗАЙН — палитра, каркас, компоненты
Единая тема сайта: приглушённые цвета, тонкие линии, SVG-иконки
============================================================ */
:root {
/* фон и поверхности */
--bg: #0b0c0e;
--surface: #111316;
--surface-2: #17191d;
--surface-3: #1d2024;
--surface-hover: #1a1d21;
/* линии */
--line: #1e2126;
--line-2: #282c32;
/* текст */
--text: #c9cdd3;
--text-strong: #dfe2e6;
--muted: #7c828b;
--muted-2: #5f646c;
/* акценты */
--accent: #7d94b8;
--accent-soft: rgba(125, 148, 184, .14);
--accent-line: rgba(125, 148, 184, .30);
--danger: #9a6b6b;
--danger-soft: rgba(154, 107, 107, .14);
--ok: #6d8a76;
/* радиусы */
--r-sm: 7px;
--r: 10px;
--r-lg: 12px;
/* размеры каркаса */
--header-h: 58px;
--sidebar-w: 212px;
--dock-h: 62px;
}
/* ---------- базовые настройки ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Нативные элементы (календарь, скроллбары, селекты) — в тёмной теме */
html { color-scheme: dark; }
body {
background: var(--bg);
color: var(--text);
font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.55;
padding-top: var(--header-h);
display: block;
-webkit-font-smoothing: antialiased;
}
body.mp-dock-open { padding-bottom: calc(var(--dock-h) + 8px); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; color: var(--text-strong); }
::selection { background: rgba(125, 148, 184, .25); }
/* ---------- иконки ---------- */
.ic {
width: 18px; height: 18px; flex: none;
display: inline-block; vertical-align: -3px;
fill: none; stroke: currentColor;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ic.sm { width: 15px; height: 15px; stroke-width: 1.7; }
.ic.lg { width: 21px; height: 21px; }
.ic.fill { fill: currentColor; stroke: none; }
/* ============================================================
КАРКАС
============================================================ */
.site-wrapper {
display: flex;
width: 100%;
max-width: 1220px;
margin: 0 auto;
padding: 20px;
gap: 20px;
min-height: calc(100vh - var(--header-h));
}
.main-area {
flex: 1;
min-width: 0;
display: flex;
gap: 20px;
background: transparent;
padding: 0;
justify-content: flex-start;
}
.center-column {
flex: 1;
min-width: 0;
max-width: 640px;
display: flex;
flex-direction: column;
gap: 12px;
}
.right-column {
width: 272px;
flex: none;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ============================================================
ШАПКА
============================================================ */
.top-header {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--header-h);
background: var(--bg);
border-bottom: 1px solid var(--line);
z-index: 1000;
box-shadow: none;
}
.header-inner {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
max-width: 1220px;
height: 100%;
margin: 0 auto;
padding: 0 22px;
}
.header-logo {
font-weight: 600;
font-size: 16px;
letter-spacing: -.01em;
white-space: nowrap;
color: var(--text-strong);
}
.header-logo:hover { color: var(--text-strong); }
.header-logo .logo-mark { color: var(--muted); }
.header-search {
flex: 1;
max-width: 360px;
height: 34px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border-radius: 8px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--muted-2);
transition: border-color .15s;
}
.header-search:focus-within { border-color: var(--line-2); }
.header-search input {
flex: 1;
min-width: 0;
border: 0;
background: none;
outline: 0;
color: var(--text);
font-size: 13.5px;
padding: 0;
}
.header-search input::placeholder { color: var(--muted-2); }
.header-icons {
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
}
.header-icon-btn {
width: 34px; height: 34px;
border-radius: 8px;
border: 1px solid transparent;
background: none;
color: var(--muted);
display: grid;
place-items: center;
cursor: pointer;
position: relative;
transition: background .14s, color .14s;
}
.header-icon-btn:hover { background: var(--surface-2); color: var(--text-strong); }
.header-badge {
position: absolute;
top: 2px; right: 1px;
min-width: 15px; height: 15px;
padding: 0 4px;
border-radius: 8px;
background: var(--danger);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 15px;
text-align: center;
}
.header-avatar-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: var(--muted-2);
}
.header-avatar-btn img {
width: 32px; height: 32px;
border-radius: 8px;
object-fit: cover;
background: var(--surface-3);
border: 1px solid var(--line);
}
.header-caret { transition: transform .15s; }
.header-avatar-btn:hover { color: var(--text); }
/* выпадашки */
.header-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
display: none;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
overflow: hidden;
z-index: 1200;
}
.header-notif-wrapper,
.header-music-wrapper,
.header-user-wrapper { position: relative; }
.dropdown-head {
padding: 13px 16px;
border-bottom: 1px solid var(--line);
font-size: 13.5px;
font-weight: 600;
color: var(--text-strong);
}
.dropdown-body {
padding: 0;
color: var(--muted);
font-size: 13px;
}
.panel-loading {
color: var(--muted-2);
text-align: center;
padding: 20px;
font-size: 13px;
}
/* меню пользователя */
.user-menu-head {
text-align: center;
padding: 18px 16px;
border-bottom: 1px solid var(--line);
}
.user-menu-head img {
width: 64px; height: 64px;
border-radius: 16px;
object-fit: cover;
margin-bottom: 10px;
background: var(--surface-3);
border: 1px solid var(--line);
}
.user-menu-head b {
display: block;
font-size: 15px;
color: var(--text-strong);
font-weight: 600;
}
.user-menu-head span { color: var(--muted-2); font-size: 12px; }
.user-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
font-size: 13.5px;
color: var(--text);
border: 0;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
}
.user-menu-item .ic { color: var(--muted-2); }
.user-menu-item:hover { background: var(--surface-2); color: var(--text-strong); }
.user-menu-item:hover .ic { color: var(--text); }
.user-menu-item.disabled { color: var(--muted-2); cursor: default; }
.user-menu-item.disabled:hover { background: none; }
.user-menu-item small {
margin-left: auto;
font-size: 10.5px;
color: var(--muted-2);
border: 1px solid var(--line-2);
border-radius: 5px;
padding: 1px 5px;
}
.user-menu-balance {
background: var(--surface-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.user-menu-balance b { margin-left: auto; color: var(--text-strong); font-weight: 600; }
.user-menu-exit { color: var(--danger); border-top: 1px solid var(--line); }
.user-menu-exit .ic { color: var(--danger); }
.user-menu-exit:hover { background: var(--danger-soft); color: #c08b8b; }
/* ============================================================
ЛЕВОЕ МЕНЮ
============================================================ */
.sidebar {
width: var(--sidebar-w);
flex: none;
position: sticky;
top: calc(var(--header-h) + 20px);
align-self: flex-start;
height: auto;
background: transparent;
border: 0;
padding: 0;
z-index: 100;
}
.sidebar-group { margin-bottom: 20px; }
.sidebar-title {
margin: 0 0 6px 11px;
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted-2);
font-weight: 600;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 1px;
overflow: visible;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 11px;
border-radius: 8px;
color: var(--muted);
font-size: 14px;
transition: background .13s, color .13s;
border: 0;
}
.sidebar-nav a .ic { color: var(--muted-2); transition: color .13s; }
.sidebar-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar-nav a:hover .ic { color: var(--text); }
.sidebar-nav a.active {
background: var(--surface-2);
color: var(--text-strong);
font-weight: 600;
box-shadow: inset 2px 0 0 var(--accent);
}
.sidebar-nav a.active .ic { color: var(--accent); }
.sidebar-badge {
margin-left: auto;
min-width: 17px;
height: 17px;
padding: 0 5px;
border-radius: 9px;
background: var(--danger);
color: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 17px;
text-align: center;
}
.sidebar-nav a.admin-link { color: var(--danger); margin-top: 4px; }
.sidebar-nav a.admin-link .ic { color: var(--danger); }
.sidebar-nav a.admin-link:hover { background: var(--danger-soft); }
/* ============================================================
КАРТОЧКИ И ОБЩИЕ БЛОКИ
============================================================ */
.profile-info-card,
.widget-card,
.post-card,
.music-upload-card,
.stat-card,
.group-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 16px;
margin-bottom: 0;
}
.profile-info-card h3,
.widget-card h3 {
margin: 0 0 12px;
font-size: 13.5px;
font-weight: 600;
color: var(--text-strong);
border-bottom: 0;
padding-bottom: 0;
}
.empty {
color: var(--muted);
text-align: center;
padding: 28px 16px;
font-size: 13.5px;
}
/* ---------- кнопки ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--line-2);
border-radius: 8px;
padding: 7px 16px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
background: var(--surface-3);
color: var(--text);
cursor: pointer;
transition: background .14s, color .14s, border-color .14s;
}
.btn:hover { background: #23272c; color: var(--text-strong); }
.btn:active { transform: translateY(1px); }
.btn.primary,
.btn.btn-primary {
background: var(--accent-soft);
border-color: var(--accent-line);
color: #a9bcd8;
}
.btn.primary:hover { background: rgba(125, 148, 184, .2); color: #c3d2e6; }
.btn.danger { background: var(--danger-soft); border-color: rgba(154,107,107,.35); color: #c08b8b; }
/* ---------- формы ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"],
input[type="url"],
textarea,
select {
width: 100%;
box-sizing: border-box;
padding: 11px 13px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 9px;
color: var(--text);
font-family: inherit;
font-size: 14px;
line-height: 1.4;
outline: none;
transition: border-color .15s, background .15s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
border-color: var(--accent-line);
background: var(--surface-3);
}
input::placeholder,
textarea::placeholder { color: var(--muted-2); }
textarea { resize: vertical; min-height: 80px; }
select {
appearance: none;
-webkit-appearance: none;
padding-right: 32px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
}
select option { background: var(--surface-2); color: var(--text); }
input[type="checkbox"],
input[type="radio"] {
width: 17px;
height: 17px;
min-height: 0;
accent-color: var(--accent);
cursor: pointer;
flex: none;
}
/* Нативные календари и скроллбары — в тёмной теме */
input[type="date"] { color-scheme: dark; }
.m-input,
.music-input,
.auth-card input,
.field {
width: 100%;
padding: 10px 13px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--text);
font-size: 13.5px;
outline: none;
transition: border-color .15s;
margin-bottom: 10px;
}
.m-input:focus,
.music-input:focus,
.auth-card input:focus,
.field:focus { border-color: var(--line-2); }
/* ============================================================
ПРОФИЛЬ
============================================================ */
.profile-header-new {
display: block;
position: relative;
background: var(--surface);
border-radius: var(--r-lg);
margin-bottom: 0;
border: 1px solid var(--line);
overflow: hidden;
}
.cover-wrapper {
display: block;
position: relative;
height: 200px;
background: var(--surface-3);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.cover-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0; left: 0;
}
.cover-actions {
display: flex;
position: absolute;
top: 12px; right: 12px;
gap: 8px;
z-index: 100;
opacity: 1;
pointer-events: auto;
}
.btn-steal {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(20, 22, 26, .82);
border: 1px solid var(--line-2);
color: var(--text);
padding: 7px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 12.5px;
font-weight: 600;
backdrop-filter: blur(6px);
}
.btn-steal:hover { background: var(--surface-3); color: var(--text-strong); }
.profile-header-info {
display: flex;
padding: 0 18px 18px;
margin-top: -44px;
position: relative;
z-index: 10;
align-items: flex-end;
gap: 16px;
}
.avatar-wrapper { position: relative; flex-shrink: 0; }
.avatar-img {
display: block;
width: 96px; height: 96px;
border-radius: 20px;
border: 3px solid var(--surface);
object-fit: cover;
cursor: pointer;
background: var(--surface-3);
box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
z-index: 20;
}
.avatar-upload-btn {
position: absolute;
bottom: 0; right: 0;
background: var(--surface-3);
border: 1px solid var(--line-2);
color: var(--text);
width: 26px; height: 26px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 30;
}
.profile-main-data { flex: 1; padding-bottom: 4px; }
.profile-main-data h1 {
font-size: 21px;
margin: 0 0 4px;
color: var(--text-strong);
font-weight: 650;
letter-spacing: -.01em;
}
.profile-status { color: var(--muted); font-size: 13px; }
.info-row { margin-bottom: 8px; color: var(--muted); font-size: 13.5px; }
.info-row strong { color: var(--text); font-weight: 600; }
.profile-stats-grid { display: grid; gap: 8px; }
.profile-photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.profile-photos-grid img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--line);
cursor: pointer;
}
.profile-wall-post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 8px; }
.profile-wall-post img { max-width: 100%; border-radius: 8px; }
/* ============================================================
ПОСТЫ И ЛЕНТА
============================================================ */
.post-card {
padding: 0;
overflow: hidden;
border-radius: var(--r-lg);
}
.post-image {
width: 100%;
display: block;
max-height: 540px;
object-fit: cover;
background: var(--surface-3);
cursor: pointer;
}
.post-actions {
display: flex;
align-items: center;
gap: 2px;
padding: 8px 10px;
border-top: 1px solid var(--line);
}
.like-btn,
.comment-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 0;
border-radius: 7px;
background: none;
color: var(--muted);
font-size: 12.8px;
font-family: inherit;
cursor: pointer;
transition: background .13s, color .13s;
}
.like-btn:hover,
.comment-btn:hover { background: var(--surface-2); color: var(--text); }
.like-btn.liked { color: var(--danger); }
.like-btn.liked .ic { fill: currentColor; }
.post-compose-row { display: flex; align-items: center; gap: 12px; }
.post-attach {
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
padding: 7px 12px;
border-radius: 8px;
background: var(--surface-3);
border: 1px solid var(--line-2);
color: var(--muted);
font-size: 13px;
white-space: nowrap;
transition: background .14s, color .14s;
}
.post-attach:hover { background: #23272c; color: var(--text); }
.post-attach.has-file { border-color: var(--accent-line); color: #a9bcd8; }
.post-attach-name { color: #8fa6c4; font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-compose-row .btn { margin-left: auto; }
/* ============================================================
ВИДЖЕТЫ ПРАВОЙ КОЛОНКИ
============================================================ */
.widget-friends-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.widget-friend-item { text-align: center; cursor: pointer; }
.widget-friend-item img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--r);
background: var(--surface-3);
border: 1px solid var(--line);
display: block;
}
.widget-friend-item span {
display: block;
margin-top: 6px;
font-size: 11.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { color: var(--text); font-weight: 600; font-size: 13.5px; }
/* ============================================================
МОДАЛЬНЫЕ ОКНА
============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(5, 6, 8, .78);
backdrop-filter: blur(3px);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"] { display: flex !important; }
.modal-content {
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
overflow: hidden;
}
.modal-body { display: flex; }
.modal-image-container { background: #08090b; display: flex; align-items: center; justify-content: center; position: relative; }
.modal-image-container img { max-width: 100%; max-height: 100%; object-fit: contain; }
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: rgba(20, 22, 26, .75);
color: var(--text);
cursor: pointer;
display: grid;
place-items: center;
z-index: 5;
}
.carousel-arrow.left { left: 12px; }
.carousel-arrow.right { right: 12px; }
.modal-comments { display: flex; flex-direction: column; background: var(--surface); }
.comments-header {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.comments-header h3 { margin: 0; font-size: 14px; color: var(--text-strong); font-weight: 600; }
.comments-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.comment-item { display: flex; gap: 9px; }
.comment-item img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: var(--surface-3); }
.comment-body {
flex: 1;
background: var(--surface-2);
padding: 9px 12px;
border-radius: 10px;
border: 1px solid var(--line);
min-width: 0;
}
.comment-body b { color: var(--accent); font-size: 12.5px; font-weight: 600; }
.comment-body p { margin: 4px 0 0; color: var(--text); font-size: 13.5px; line-height: 1.45; }
.comment-body img,
.comment-body video { max-width: 100%; border-radius: 8px; }
.comment-body button {
background: none;
border: 0;
color: var(--muted);
font-size: 12px;
font-family: inherit;
cursor: pointer;
padding: 0;
}
.comment-body button:hover { color: var(--text); }
.comment-input-wrapper {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.comment-input-wrapper input {
flex: 1;
min-width: 0;
padding: 9px 13px;
border-radius: 9px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
font-size: 13.5px;
outline: none;
}
.comment-input-wrapper input:focus { border-color: var(--line-2); }
.comment-input-wrapper > button:last-child {
width: 34px; height: 34px;
border-radius: 9px;
border: 1px solid var(--line-2);
background: var(--surface-3);
color: var(--text);
cursor: pointer;
display: grid;
place-items: center;
}
.comment-input-wrapper > button:last-child:hover { background: #23272c; }
.emoji-btn {
width: 32px; height: 32px;
border: 0;
border-radius: 8px;
background: none;
color: var(--muted);
cursor: pointer;
display: grid;
place-items: center;
font-size: 17px;
}
.emoji-btn:hover { background: var(--surface-2); color: var(--text); }
.close-modal {
position: absolute;
top: 12px; right: 12px;
width: 30px; height: 30px;
border-radius: 8px;
border: 1px solid var(--line-2);
background: rgba(20, 22, 26, .8);
color: var(--text);
font-size: 15px;
cursor: pointer;
z-index: 10;
display: grid;
place-items: center;
}
.close-modal:hover { background: var(--surface-3); }
#attachment-preview {
padding: 8px 12px;
font-size: 12px;
color: var(--accent);
border-top: 1px solid var(--line);
display: flex;
align-items: center;
gap: 8px;
}
#attachment-preview img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
#attachment-preview .btn-remove { color: var(--danger); cursor: pointer; }
/* ============================================================
ВХОД / РЕГИСТРАЦИЯ
============================================================ */
.auth-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 24px;
}
.auth-card {
width: 380px;
max-width: 100%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 26px;
}
.auth-card h2 {
margin: 0 0 20px;
font-size: 19px;
font-weight: 650;
color: var(--text-strong);
text-align: center;
letter-spacing: -.01em;
}
.auth-card input {
width: 100%;
margin-bottom: 10px;
padding: 11px 13px;
font-size: 14px;
}
.auth-card .btn { width: 100%; padding: 10px; font-size: 13.5px; }
.auth-error { color: var(--danger); font-size: 12.5px; min-height: 17px; margin: 0 0 10px; }
/* ============================================================
АДАПТИВ
============================================================ */
@media (max-width: 1100px) {
.right-column { display: none; }
}
@media (max-width: 860px) {
.sidebar { display: none; }
.site-wrapper { padding: 14px; }
.center-column { max-width: 100%; }
.header-inner { padding: 0 14px; }
.header-search { max-width: none; }
}
/* ============================================================
ДОПОЛНЕНИЯ: уведомления, подарки, сообщества, сообщения
============================================================ */
/* ---------- уведомления ---------- */
.notif-head {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
text-align: right;
}
.notif-clear {
background: none;
border: 0;
color: var(--accent);
font-size: 12px;
font-family: inherit;
cursor: pointer;
padding: 2px 4px;
}
.notif-clear:hover { color: var(--text-strong); }
.notif-item {
display: flex;
gap: 10px;
padding: 11px 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background .13s;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-2); }
.notif-ava { position: relative; flex-shrink: 0; }
.notif-ava img {
width: 38px; height: 38px;
border-radius: 10px;
object-fit: cover;
background: var(--surface-3);
border: 1px solid var(--line);
}
.notif-type {
position: absolute;
bottom: -4px; right: -4px;
width: 19px; height: 19px;
border-radius: 50%;
background: var(--surface-3);
border: 1px solid var(--line-2);
display: grid;
place-items: center;
color: var(--muted);
}
.notif-type .ic { width: 11px; height: 11px; stroke-width: 2; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.notif-text b { color: var(--accent); font-weight: 600; }
.notif-time { font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.notif-actions { display: flex; gap: 6px; margin-top: 8px; }
.notif-btn {
padding: 4px 10px;
font-size: 12px;
font-family: inherit;
border-radius: 7px;
border: 1px solid var(--line-2);
background: var(--surface-3);
color: var(--text);
cursor: pointer;
}
.notif-btn.accept { border-color: rgba(109,138,118,.4); color: #9fc0a9; }
.notif-btn.reject { border-color: rgba(154,107,107,.4); color: #c08b8b; }
.notif-btn:hover { background: #23272c; }
.notif-empty {
color: var(--muted);
text-align: center;
padding: 26px 16px;
font-size: 13px;
}
/* ---------- подарки ---------- */
.gift-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 14px;
text-align: center;
}
.gift-image {
height: 110px;
display: grid;
place-items: center;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r);
margin-bottom: 12px;
overflow: hidden;
}
.gift-image img { width: 72px; height: 72px; object-fit: contain; }
.gift-ph { color: var(--muted-2); display: grid; place-items: center; }
.gift-card h3 { margin: 0 0 6px; font-size: 14px; color: var(--text-strong); font-weight: 600; }
.gift-price { color: var(--text); font-size: 13px; font-weight: 600; }
.gift-stock { color: var(--muted-2); font-size: 11.5px; margin-top: 3px; }
#gifts-list, #inventory-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
/* действия над подарком в инвентаре */
.gift-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.gift-actions .btn { flex: 1; }
.gift-from {
margin-top: 4px;
font-size: 11.5px;
color: var(--accent);
}
/* ---------- диалог дарения ---------- */
/* Класс .open ставит js/gifts.js — без этого правила окно не открывалось */
.modal-overlay.open { display: flex !important; }
.modal-box {
width: min(460px, 94vw);
max-height: min(78vh, 640px);
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
overflow: hidden;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
color: var(--text-strong);
font-size: 14.5px;
}
.modal-head b { font-weight: 600; }
.modal-close {
flex: none;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--surface-2);
color: var(--muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--surface-3); color: var(--text-strong); }
.modal-box > input[type="text"],
#give-search {
margin: 12px 16px 8px;
width: calc(100% - 32px);
height: 38px;
padding: 0 12px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
font-size: 13.5px;
font-family: inherit;
outline: 0;
}
#give-search:focus { border-color: var(--accent-line); }
#give-search::placeholder { color: var(--muted-2); }
.give-friends {
flex: 1;
min-height: 80px;
overflow-y: auto;
padding: 0 10px 12px;
}
.give-person {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 8px;
border-radius: var(--r-sm);
cursor: pointer;
transition: background .12s;
}
.give-person:hover { background: var(--surface-2); }
.give-person img,
.give-person .user-ava {
width: 36px;
height: 36px;
flex: none;
border-radius: 50%;
object-fit: cover;
background: var(--surface-2);
}
.give-person b { display: block; font-size: 13.5px; color: var(--text-strong); font-weight: 600; }
.give-person small { font-size: 12px; color: var(--muted-2); }
/* ---------- сообщества ---------- */
.group-card {
display: flex;
align-items: center;
gap: 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 14px;
margin-bottom: 10px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.group-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.group-avatar {
width: 52px; height: 52px;
flex: none;
border-radius: var(--r);
background: var(--surface-3);
color: var(--muted);
display: grid;
place-items: center;
font-size: 20px;
font-weight: 600;
border: 1px solid var(--line);
}
.group-info { flex: 1; min-width: 0; }
.group-info h3 { margin: 0 0 3px; font-size: 14.5px; color: var(--text-strong); font-weight: 600; }
.group-info p { margin: 0 0 3px; color: var(--muted); font-size: 12.5px; }
.group-info small { color: var(--muted-2); font-size: 11.5px; }
.group-info small .ic { width: 12px; height: 12px; }
/* ---------- вкладки ---------- */
.group-tabs, #m-tabs.music-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-btn, .music-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
font-size: 13px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
transition: .14s;
}
.tab-btn:hover, .music-tab:hover { background: var(--surface-3); color: var(--text); }
.tab-btn.active, .music-tab.active {
background: var(--surface-3);
border-color: var(--line-2);
color: var(--text-strong);
font-weight: 600;
}
/* ---------- сообщения ---------- */
.messages-container {
display: flex;
width: 100%;
height: calc(100vh - 150px);
min-height: 480px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.dialogs-panel {
width: 300px;
flex: none;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
background: var(--surface);
}
.dialogs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.dialogs-header h2 { margin: 0; font-size: 15px; color: var(--text-strong); font-weight: 600; }
.btn-new-chat {
width: 30px; height: 30px;
border-radius: 8px;
border: 1px solid var(--line-2);
background: var(--surface-3);
color: var(--text);
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
}
.dialogs-search { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dialogs-search input {
width: 100%;
padding: 8px 11px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
font-size: 13px;
outline: none;
}
.dialogs-list { flex: 1; overflow-y: auto; }
.dialog-item {
display: flex;
gap: 10px;
padding: 11px 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background .13s;
}
.dialog-item:hover { background: var(--surface-2); }
.dialog-item.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.dialog-avatar img {
width: 42px; height: 42px;
border-radius: 11px;
object-fit: cover;
background: var(--surface-3);
border: 1px solid var(--line);
}
.dialog-info { flex: 1; min-width: 0; }
.dialog-top { display: flex; justify-content: space-between; gap: 8px; }
.dialog-name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dialog-time { font-size: 11px; color: var(--muted-2); flex: none; }
.dialog-bottom { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; }
.dialog-last-msg { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread-badge {
min-width: 17px; height: 17px;
padding: 0 5px;
border-radius: 9px;
background: var(--danger);
color: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 17px;
text-align: center;
flex: none;
}
.chat-panel { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.chat-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--muted);
gap: 4px;
}
.chat-empty h3 { margin: 8px 0 0; color: var(--text); font-size: 16px; font-weight: 600; }
.chat-active { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-header-active {
display: flex;
align-items: center;
gap: 11px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.chat-header-active img {
width: 38px; height: 38px;
border-radius: 10px;
object-fit: cover;
background: var(--surface-3);
}
.chat-header-active b { display: block; font-size: 14px; color: var(--text-strong); }
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.vk-msg { display: flex; flex-direction: column; max-width: 72%; }
.vk-msg.mine { align-self: flex-end; align-items: flex-end; }
.vk-msg.theirs { align-self: flex-start; align-items: flex-start; }
.vk-msg-avatar img {
width: 28px; height: 28px;
border-radius: 8px;
object-fit: cover;
margin-bottom: 3px;
background: var(--surface-3);
}
.vk-msg-author { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.vk-msg-body { position: relative; }
.vk-msg-text {
padding: 9px 13px;
border-radius: 12px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text);
font-size: 13.8px;
line-height: 1.45;
word-wrap: break-word;
}
.vk-msg.mine .vk-msg-text { background: var(--accent-soft); border-color: var(--accent-line); }
.chat-image { max-width: 100%; border-radius: 8px; margin-top: 5px; }
.vk-msg-time { font-size: 10.5px; color: var(--muted-2); margin-top: 4px; text-align: right; }
.vk-check { color: var(--accent); display: inline-flex; vertical-align: -2px; }
.vk-msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .13s; margin-top: 2px; }
.vk-msg:hover .vk-msg-actions { opacity: 1; }
.vk-action-btn {
width: 26px; height: 26px;
border: 0;
border-radius: 7px;
background: none;
color: var(--muted-2);
cursor: pointer;
display: grid;
place-items: center;
}
.vk-action-btn:hover { background: var(--surface-2); color: var(--text); }
.vk-reply-quote {
border-left: 2px solid var(--accent);
padding: 3px 9px;
margin-bottom: 6px;
background: rgba(125,148,184,.08);
border-radius: 4px;
}
.vk-reply-author { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.vk-reply-text { font-size: 12px; color: var(--muted); }
.chat-input-area {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.chat-input-area input[type="text"] {
flex: 1;
min-width: 0;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
font-size: 13.8px;
outline: none;
}
.chat-input-area input[type="text"]:focus { border-color: var(--line-2); }
.btn-attach, .btn-emoji, .btn-send {
width: 34px; height: 34px;
flex: none;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--surface-2);
color: var(--muted);
cursor: pointer;
display: grid;
place-items: center;
font-size: 16px;
padding: 0;
}
.btn-attach:hover, .btn-emoji:hover { background: var(--surface-3); color: var(--text); }
.btn-send { background: var(--accent-soft); border-color: var(--accent-line); color: #a9bcd8; }
.btn-send:hover { background: rgba(125,148,184,.2); }
.btn-back {
width: 30px; height: 30px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
cursor: pointer;
display: none;
place-items: center;
padding: 0;
}
.attach-menu {
position: absolute;
bottom: 44px; left: 0;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 -8px 24px rgba(0,0,0,.5);
width: 190px;
display: none;
z-index: 50;
overflow: hidden;
}
.attach-menu[style*="block"] { display: block; }
.attach-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
color: var(--text);
font-size: 13px;
cursor: pointer;
}
.attach-item:hover { background: var(--surface-2); }
.attach-item.disabled { color: var(--muted-2); cursor: default; }
.attach-item.disabled:hover { background: none; }
.attach-item small { color: var(--muted-2); font-size: 10.5px; }
/* мобильная адаптация чата */
@media (max-width: 860px) {
.messages-container { height: calc(100vh - 120px); border-radius: 0; }
.dialogs-panel { width: 100%; }
.chat-panel { display: none; }
.chat-panel.mobile-show { display: flex; }
.dialogs-panel.mobile-hide { display: none; }
.btn-back { display: grid; }
}
/* ---------- прочее ---------- */
#attachment-preview-chat {
display: none;
padding: 8px 12px;
border-top: 1px solid var(--line);
background: var(--surface);
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--accent);
}
/* ============================================================
ФИНАЛЬНЫЕ ПЕРЕОПРЕДЕЛЕНИЯ (поверх старых стилей)
============================================================ */
/* композер поста */
.profile-info-card.composer { padding: 16px; }
.composer-textarea {
width: 100%;
min-height: 54px;
resize: vertical;
border: 0;
outline: 0;
background: none;
color: var(--text);
font-family: inherit;
font-size: 15px;
line-height: 1.5;
padding: 2px 0 10px;
}
.composer-textarea::placeholder { color: var(--muted-2); }
/* заголовок страницы */
.page-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.page-head h1 {
margin: 0;
font-size: 22px;
font-weight: 650;
color: var(--text-strong);
letter-spacing: -.02em;
}
.page-head .btn { margin-left: auto; }
/* активные вкладки — приглушённые */
.tab-btn.active,
.music-tab.active,
.m-sort-btn.active {
background: var(--surface-3) !important;
border-color: var(--line-2) !important;
color: var(--text-strong) !important;
box-shadow: none !important;
}
.tab-btn,
.music-tab {
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
color: var(--muted) !important;
}
.tab-btn:hover,
.music-tab:hover { background: var(--surface-3) !important; color: var(--text) !important; }
/* музыка: спокойный герой */
.m-hero {
background: linear-gradient(120deg, #191d24 0%, #171a20 55%, #1a1a20 100%) !important;
border-color: var(--line) !important;
}
.m-hero::after {
background: radial-gradient(circle, rgba(125, 148, 184, .16), transparent 65%) !important;
}
.m-hero-art {
background: var(--surface-3) !important;
color: var(--muted) !important;
box-shadow: none !important;
}
.m-hero-kicker { color: var(--muted) !important; }
.m-hero-title { color: var(--text-strong); }
.m-hero-sub { color: var(--muted) !important; }
/* музыка: обложки-заглушки */
.m-cover,
.m-top-cover {
border: 1px solid var(--line) !important;
color: var(--muted) !important;
}
.m-pl-art {
background: var(--surface-3) !important;
color: var(--muted) !important;
border: 1px solid var(--line);
}
.m-artist-ava {
background: var(--surface-3) !important;
color: var(--muted) !important;
border: 1px solid var(--line);
}
/* плеер */
.mp-dock {
background: rgba(17, 19, 22, .97) !important;
border-top: 1px solid var(--line) !important;
}
.mpd-cover { background: var(--surface-3) !important; color: var(--muted) !important; }
.mpd-bar i,
.dock .bar i { background: var(--muted) !important; }
/* лента: карточки постов */
.post-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
}
.post-content-wrapper { padding: 15px 16px !important; }
/* правые виджеты */
.widget-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-lg) !important;
box-shadow: none !important;
}
/* группы: карточка */
.group-card { border-radius: var(--r-lg) !important; }
.group-card .btn { margin-left: auto; flex: none; }
/* сообщения: панель чата чуть светлее */
.chat-panel { background: #0e1013; }
/* ссылки и кнопки внутри старых блоков */
a { color: var(--accent); }
.btn { box-shadow: none; }
/* скроллбары */
* { scrollbar-width: thin; scrollbar-color: #2b3037 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262b31; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #343a42; }
/* ============================================================
УНИФИКАЦИЯ: старые инлайновые цвета → тема
============================================================ */
/* текст */
[style*="color: #007bff"], [style*="color:#007bff"] { color: var(--accent) !important; }
[style*="color: #ff4757"], [style*="color:#ff4757"] { color: var(--danger) !important; }
[style*="color: #4caf50"], [style*="color:#4caf50"] { color: var(--ok) !important; }
[style*="color: #fff"], [style*="color:#fff"] { color: var(--text-strong) !important; }
[style*="color: #aaa"], [style*="color:#aaa"] { color: var(--muted) !important; }
[style*="color: #888"], [style*="color:#888"] { color: var(--muted-2) !important; }
[style*="color: #ccc"], [style*="color:#ccc"] { color: var(--text) !important; }
/* фоны */
[style*="background: #007bff"], [style*="background:#007bff"] {
background: var(--accent-soft) !important;
color: #a9bcd8 !important;
border-color: var(--accent-line) !important;
box-shadow: none !important;
}
[style*="background: #ff4757"], [style*="background:#ff4757"] {
background: var(--danger-soft) !important;
color: #c08b8b !important;
border-color: rgba(154,107,107,.35) !important;
}
[style*="background: #4caf50"], [style*="background:#4caf50"] {
background: rgba(109,138,118,.18) !important;
color: #9fc0a9 !important;
}
[style*="background: #2a2a2a"], [style*="background:#2a2a2a"],
[style*="background: #333"], [style*="background:#333"] {
background: var(--surface-2) !important;
}
/* кнопка входа */
.auth-card .btn {
background: var(--accent-soft);
border: 1px solid var(--accent-line);
color: #b7c8de;
}
.auth-card .btn:hover { background: rgba(125,148,184,.2); }
.auth-card input[type="checkbox"] {
accent-color: var(--accent);
width: 15px;
height: 15px;
}
/* аватар группы — квадрат, без белого кольца */
#group-avatar {
width: 96px !important;
height: 96px !important;
border-radius: 20px !important;
border: 3px solid var(--surface) !important;
background: var(--surface-3) !important;
color: var(--text-strong) !important;
box-shadow: none !important;
font-size: 34px !important;
font-weight: 600 !important;
cursor: default !important;
}
/* кнопка «Вступить в группу» компактнее */
#group-action-area .btn { width: auto !important; min-width: 180px; }
/* скрыть остатки старых «стильных» теней у карточек */
.profile-info-card, .widget-card, .post-card, .music-upload-card { box-shadow: none !important; }
/* group avatar centering */
#group-avatar { display:flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; padding:0 !important; }
/* ============================================================
МУЗЫКАЛЬНАЯ ПАНЕЛЬ В ШАПКЕ (вместо нижнего дока)
============================================================ */
/* старый док больше не используется */
.mp-dock { display: none !important; }
.music-panel-wide {
width: 380px !important;
max-width: 95vw;
padding: 0 !important;
}
.mpp { display: flex; flex-direction: column; }
.mpp-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.mpp-head-title {
display: flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 600;
color: var(--text-strong);
}
.mpp-head-title .ic { color: var(--accent); }
.music-panel-link { font-size: 12px; color: var(--accent); }
.music-panel-link:hover { color: var(--text-strong); }
.mpp-now {
display: flex;
align-items: center;
gap: 11px;
padding: 12px 14px 8px;
}
.mpp-now-cover {
width: 46px;
height: 46px;
flex: none;
border-radius: 9px;
border: 1px solid var(--line);
background: var(--surface-3);
background-size: cover;
background-position: center;
display: grid;
place-items: center;
color: var(--muted);
}
.mpp-now-meta { flex: 1; min-width: 0; }
.mpp-now-meta b {
display: block;
font-size: 13px;
color: var(--text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mpp-now-meta small {
display: block;
font-size: 11.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mpp-progress {
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px 10px;
}
.mpp-progress span {
width: 30px;
font-size: 10px;
color: var(--muted-2);
font-variant-numeric: tabular-nums;
}
.mpp-progress span:last-child { text-align: right; }
.mpp-bar {
flex: 1;
height: 4px;
border-radius: 99px;
background: var(--line-2);
cursor: pointer;
position: relative;
}
.mpp-bar i {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
border-radius: 99px;
background: var(--accent);
}
.mpp-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 12px 12px;
border-bottom: 1px solid var(--line);
}
.mpp-icon {
width: 30px;
height: 30px;
border: 0;
border-radius: 7px;
background: none;
color: var(--muted);
cursor: pointer;
display: grid;
place-items: center;
}
.mpp-icon:hover { background: var(--surface-2); color: var(--text); }
.mpp-icon.is-on { color: var(--accent); }
.mpp-play {
width: 36px;
height: 36px;
margin: 0 4px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--surface-3);
color: var(--text);
cursor: pointer;
display: grid;
place-items: center;
}
.mpp-play:hover { background: #23272c; }
.mpp-like.is-liked { color: var(--danger); }
.mpp-stop { color: var(--danger); }
.mpp-stop:hover { color: #c08b8b; background: var(--danger-soft); }
.mpp-list { max-height: 300px; overflow-y: auto; }
.mpp-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background .13s;
}
.mpp-row:last-child { border-bottom: 0; }
.mpp-row:hover { background: var(--surface-2); }
.mpp-row.is-playing { background: var(--accent-soft); }
.mpp-row-cover {
width: 34px;
height: 34px;
flex: none;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface-3);
background-size: cover;
background-position: center;
display: grid;
place-items: center;
color: var(--muted);
}
.mpp-row-info { flex: 1; min-width: 0; }
.mpp-row-info b {
display: block;
font-size: 12.5px;
color: var(--text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mpp-row-info small {
display: block;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mpp-row-btn {
width: 28px;
height: 28px;
border: 0;
border-radius: 6px;
background: none;
color: var(--muted);
cursor: pointer;
display: grid;
place-items: center;
}
.mpp-row-btn:hover { color: var(--text); background: var(--surface-3); }
/* индикатор на иконке музыки в шапке */
.music-icon-btn { position: relative; }
.music-icon-btn.is-playing { color: var(--accent); }
.music-icon-btn.is-playing::after {
content: "";
position: absolute;
bottom: 6px;
right: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
/* круглые аватарки в виджете «Друзья» */
.widget-friend-item img {
border-radius: 50% !important;
}
/* ============================================================
ЛЕНТА: вкладки, карточки постов, меню, редактор
============================================================ */
.feed-tabs {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.feed-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border-radius: 9px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
font-family: inherit;
font-size: 13.5px;
cursor: pointer;
transition: .14s;
}
.feed-tab:hover { background: var(--surface-3); color: var(--text); }
.feed-tab.active {
background: var(--surface-3);
border-color: var(--line-2);
color: var(--text-strong);
font-weight: 600;
}
.feed-refresh {
margin-left: auto;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 8px;
border: 1px solid var(--line);
background: none;
color: var(--muted);
cursor: pointer;
}
.feed-refresh:hover { background: var(--surface-2); color: var(--text); }
.feed-loading { color: var(--muted); text-align: center; padding: 26px; }
.post-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: visible;
margin-bottom: 12px;
transition: opacity .16s;
}
.post-card.is-removing { opacity: 0; }
.post-head {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
position: relative;
}
.post-avatar {
width: 42px;
height: 42px;
flex: none;
border-radius: 50% !important;
object-fit: cover;
background: var(--surface-3);
border: 1px solid var(--line);
cursor: pointer;
}
.post-meta { flex: 1; min-width: 0; }
.post-author {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-author:hover { color: var(--accent); }
.post-time {
display: block;
font-size: 11.5px;
color: var(--muted-2);
margin-top: 2px;
}
.post-menu-btn {
width: 30px;
height: 30px;
flex: none;
border: 0;
background: none;
border-radius: 8px;
color: var(--muted);
cursor: pointer;
display: grid;
place-items: center;
}
.post-menu-btn:hover { background: var(--surface-2); color: var(--text); }
.post-menu {
position: absolute;
top: 52px;
right: 12px;
z-index: 30;
min-width: 196px;
padding: 5px;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
display: none;
}
.post-menu.is-open { display: block; }
.post-menu-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: 7px;
background: none;
color: var(--text);
font-family: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.post-menu-item:hover { background: var(--surface-2); color: var(--text-strong); }
.post-menu-item.danger { color: var(--danger); }
.post-menu-item.danger:hover { background: var(--danger-soft); }
.post-body { padding: 0 16px 12px; }
.post-text {
font-size: 14.5px;
line-height: 1.6;
color: var(--text);
white-space: pre-wrap;
word-wrap: break-word;
}
.post-media {
position: relative;
margin: 0 16px 12px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--line);
cursor: pointer;
}
.post-media .post-image {
border-radius: 0;
max-height: 540px;
object-fit: cover;
transition: filter .15s;
}
.post-media:hover .post-image { filter: brightness(1.06); }
/* Счётчик фото на превью поста */
.post-media-count {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(10, 11, 13, .72);
border: 1px solid rgba(255, 255, 255, .14);
color: #fff;
font-size: 12px;
font-weight: 600;
pointer-events: none;
backdrop-filter: blur(3px);
}
.post-media-count .ic { width: 13px; height: 13px; }
/* Отклик сердечка при лайке */
.like-btn.like-anim .ic { animation: likePop .32s ease; }
@keyframes likePop {
0% { transform: scale(1); }
45% { transform: scale(1.35); }
100% { transform: scale(1); }
}
.post-actions {
display: flex;
align-items: center;
gap: 2px;
padding: 8px 10px;
border-top: 1px solid var(--line);
}
.post-editor { padding: 0 16px 12px; }
.post-editor-area {
width: 100%;
min-height: 80px;
padding: 10px 12px;
margin-bottom: 10px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--surface-2);
color: var(--text);
font-family: inherit;
font-size: 14px;
line-height: 1.5;
resize: vertical;
outline: none;
}
.post-editor-area:focus { border-color: var(--line-2); }
.post-editor-actions { display: flex; gap: 8px; }
/* ============================================================
ЛАЙТБОКС (просмотр фото)
============================================================ */
body.lb-open { overflow: hidden; }
.lightbox {
position: fixed;
inset: 0;
z-index: 4000;
display: none;
align-items: center;
justify-content: center;
padding: 40px;
background: rgba(6, 7, 9, .93);
backdrop-filter: blur(4px);
}
.lightbox.is-open { display: flex; }
.lb-img {
max-width: 100%;
max-height: calc(100vh - 110px);
object-fit: contain;
border-radius: 6px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
}
.lb-close {
position: absolute;
top: 18px;
right: 18px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: rgba(20, 22, 26, .82);
color: var(--text);
cursor: pointer;
display: grid;
place-items: center;
z-index: 2;
}
.lb-close:hover { background: var(--surface-3); }
.lb-caption {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
max-width: 80vw;
text-align: center;
color: var(--muted);
font-size: 12.5px;
}
/* Стрелки листания галереи */
.lb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: rgba(20, 22, 26, .82);
color: var(--text);
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
transition: background .15s, transform .15s;
}
.lb-nav:hover { background: var(--surface-3); }
.lb-nav:active { transform: translateY(-50%) scale(.94); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
/* Счётчик «3 / 7» */
.lb-counter {
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
padding: 4px 12px;
border-radius: 20px;
background: rgba(20, 22, 26, .82);
border: 1px solid var(--line-2);
color: var(--text);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
z-index: 3;
}
@media (max-width: 600px) {
.lightbox { padding: 14px; }
.lb-nav { width: 38px; height: 38px; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-img { max-height: calc(100vh - 90px); }
}
/* кнопки на обложке всегда видны (не пропадают при наведении) */
.cover-actions {
display: flex !important;
opacity: 1;
}
/* ============================================================
МОДАЛКА ПРОСМОТРА ФОТО + КОММЕНТАРИИ
============================================================ */
.modal-overlay { padding: 24px; }
.modal-content {
width: min(1180px, 96vw);
height: min(84vh, 820px);
max-height: 90vh;
display: flex;
}
.modal-body { display: flex; width: 100%; height: 100%; }
.modal-image-container {
flex: 1;
min-width: 0;
height: 100%;
background: #07080a;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.modal-image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.modal-comments {
width: 360px;
flex: none;
height: 100%;
display: flex;
flex-direction: column;
border-left: 1px solid var(--line);
background: var(--surface);
}
.comments-list { flex: 1; overflow-y: auto; }
.comment-input-wrapper { border-top: 1px solid var(--line); }
.close-modal { top: 10px; right: 10px; z-index: 20; }
@media (max-width: 900px) {
.modal-content { flex-direction: column; height: 92vh; }
.modal-image-container { height: 48%; flex: none; }
.modal-comments { width: 100%; height: 52%; border-left: 0; border-top: 1px solid var(--line); }
}
/* ============================================================
ПАКЕТ ПРАВОК ПО ТЗ
============================================================ */
/* 1. Сайдбар на «Сообщениях» */
body.page-messages .sidebar {
position: static !important;
}
/* 2. Круглые аватарки в блоке «Друзья» */
.widget-friend-item img {
border-radius: 50% !important;
object-fit: cover !important;
}
/* 3. Кнопки на обложке: всегда видны, верхний правый угол обложки */
.cover-actions {
position: absolute !important;
top: 12px !important;
right: 12px !important;
left: auto !important;
bottom: auto !important;
display: flex !important;
gap: 8px !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 50;
}
/* 4. Фото: вкладки и ограничение сетки */
.photos-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.photos-tabs { display: flex; gap: 6px; }
.photos-tab {
padding: 7px 14px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: .14s;
}
.photos-tab:hover { background: var(--surface-3); color: var(--text); }
.photos-tab.active {
background: var(--surface-3);
border-color: var(--line-2);
color: var(--text-strong);
font-weight: 600;
}
.profile-photos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.photo-cell {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 9px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface-3);
}
.photo-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
}
.photo-del {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: rgba(10, 11, 13, .82);
color: #fff;
display: none;
place-items: center;
cursor: pointer;
z-index: 2;
padding: 0;
}
.photo-cell:hover .photo-del { display: grid; }
.photo-del:hover { background: var(--danger); }
.photos-more {
margin-top: 10px;
padding: 4px 0;
border: 0;
background: none;
color: var(--accent);
font-family: inherit;
font-size: 12.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.photos-more:hover { color: var(--text-strong); }
.albums-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.album-card {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--surface-2);
cursor: pointer;
transition: border-color .15s;
}
.album-card:hover { border-color: var(--line-2); }
.album-cover { height: 104px; background-size: cover; background-position: center; }
.album-meta { padding: 8px 10px; }
.album-meta b { display: block; font-size: 13px; color: var(--text-strong); }
.album-meta small { color: var(--muted); font-size: 11.5px; }
.album-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.album-detail-head b { font-size: 14px; color: var(--text-strong); }
.photos-empty { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; padding: 16px 0; }
/* 5. Кликабельные плашки статистики */
a.stat-card {
display: block;
text-decoration: none;
color: inherit;
transition: background .15s, border-color .15s, transform .15s;
}
a.stat-card:hover {
background: var(--surface-2);
border-color: var(--line-2);
transform: translateY(-1px);
}
/* 7. Кошелёк: форма перевода */
#pin-setup-block input,
#transfer-block input {
width: 100%;
padding: 11px 13px;
margin-bottom: 10px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 9px;
color: var(--text);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color .15s;
}
#pin-setup-block input:focus,
#transfer-block input:focus { border-color: var(--line-2); }
#pin-setup-block .btn,
#transfer-block .btn { width: 100%; padding: 10px; }
#transfer-amount { -moz-appearance: textfield; }
#transfer-amount::-webkit-outer-spin-button,
#transfer-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.transaction-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-size: 13.5px;
}
.transaction-item:last-child { border-bottom: 0; }
.transaction-item .plus { color: var(--ok); font-weight: 600; }
.transaction-item .minus { color: var(--danger); font-weight: 600; }
/* 8. Поисковые строки */
#people-search,
#friend-search,
.search-icon-input {
width: 100%;
padding: 11px 14px 11px 40px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color .15s;
}
#search-dialogs,
#admin-search,
#groups-search,
.search-input { padding-left: 14px; }
#people-search:focus,
#friend-search:focus,
#search-dialogs:focus,
#groups-search:focus,
#admin-search:focus,
.search-input:focus { border-color: var(--line-2); }
#people-search::placeholder,
#friend-search::placeholder,
#search-dialogs::placeholder,
#groups-search::placeholder,
#admin-search::placeholder,
.search-input::placeholder { color: var(--muted-2); }
/* 9. Друзья: строки и меню */
.friend-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
margin-bottom: 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 11px;
}
.friend-main {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
cursor: pointer;
}
.friend-ava {
width: 48px;
height: 48px;
flex: none;
border-radius: 50%;
object-fit: cover;
background: var(--surface-3);
border: 1px solid var(--line);
}
.friend-info b { display: block; font-size: 14px; color: var(--text-strong); }
.friend-info small { color: var(--muted); font-size: 12px; }
.friend-actions { display: flex; align-items: center; gap: 6px; }
.friend-actions .btn.accept { border-color: rgba(109,138,118,.45); color: #9fc0a9; }
.friend-menu-wrap { position: relative; }
.friend-menu {
position: absolute;
right: 0;
top: 36px;
z-index: 40;
min-width: 190px;
padding: 5px;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 9px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
display: none;
}
.friend-menu.is-open { display: block; }
/* 10. Люди: фильтр и карточки */
.people-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.people-filter {
padding: 7px 16px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: .14s;
}
.people-filter:hover { background: var(--surface-3); color: var(--text); }
.people-filter.active {
background: var(--surface-3);
border-color: var(--line-2);
color: var(--text-strong);
font-weight: 600;
}
.user-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 4px;
border-bottom: 1px solid var(--line);
}
.user-card:last-child { border-bottom: 0; }
.user-card-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.user-ava-wrap { position: relative; flex: none; }
.user-ava {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
background: var(--surface-3);
border: 1px solid var(--line);
display: block;
}
.user-status {
position: absolute;
bottom: 0;
right: 0;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid var(--surface);
}
.user-info { min-width: 0; }
.user-info b { display: block; font-size: 14px; color: var(--text-strong); }
.user-info small { display: block; color: var(--muted); font-size: 12px; }
.user-info span { font-size: 12px; }
.user-actions { display: flex; gap: 8px; flex: none; }
/* 11. Кнопка «Информация» и модалка */
.info-btn {
width: 24px;
height: 24px;
margin-left: 8px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--surface-2);
color: var(--muted);
display: inline-grid;
place-items: center;
cursor: pointer;
vertical-align: -6px;
padding: 0;
transition: .14s;
}
.info-btn:hover { color: var(--text); border-color: var(--accent-line); }
.modal-content.info-modal {
width: min(520px, 94vw);
height: auto;
max-height: 80vh;
display: block;
padding: 22px;
position: relative;
overflow-y: auto;
}
.info-modal-title { margin: 0 0 14px; font-size: 17px; color: var(--text-strong); }
.info-modal .info-row { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.info-modal .info-row:last-child { border-bottom: 0; }
.info-modal .info-row strong { color: var(--text); }
/* 13. Модалка фото и комментарии */
.modal-content {
width: min(1240px, 97vw);
height: min(88vh, 920px);
}
.modal-image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
.modal-comments { width: 340px; }
.modal-content.no-photo {
width: min(560px, 94vw);
height: auto;
max-height: min(72vh, 680px);
}
.modal-content.no-photo .modal-image-container { display: none !important; }
.modal-content.no-photo .modal-comments {
width: 100%;
border-left: 0;
height: auto;
max-height: min(72vh, 680px);
}
/* аватарки в комментариях круглые, вложения крупнее */
.comment-item > div:first-child img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.comment-body img {
max-width: 240px;
max-height: 240px;
width: auto;
height: auto;
border-radius: 8px;
object-fit: contain;
cursor: pointer;
display: block;
margin-top: 5px;
}
/* ============================================================
ГЛОБАЛЬНЫЙ ПОИСК (шапка + страница search.php)
============================================================ */
.header-search-global { position: relative; }
#search-results-dropdown {
position: absolute;
top: calc(100% + 6px);
left: -1px;
right: -1px;
z-index: 1500;
min-width: 300px;
max-height: 420px;
overflow-y: auto;
padding: 6px;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--r-md, 10px);
box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
display: none;
}
.search-head {
padding: 8px 10px 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted-2);
}
.search-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
color: var(--text);
text-decoration: none;
transition: background .12s;
}
.search-row:hover { background: var(--surface-2); }
.search-ava {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
flex: none;
background: var(--surface-2);
}
.search-row-text { min-width: 0; display: flex; flex-direction: column; }
.search-row-text b {
font-size: 13.5px;
font-weight: 600;
color: var(--text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-row-text small {
font-size: 12px;
color: var(--muted-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-empty {
padding: 12px 10px;
font-size: 13px;
color: var(--muted-2);
text-align: center;
}
.search-all {
display: block;
margin-top: 4px;
padding: 9px 10px;
text-align: center;
font-size: 13px;
font-weight: 600;
color: var(--accent, #4c8dff);
text-decoration: none;
border-top: 1px solid var(--line);
}
.search-all:hover { background: var(--surface-2); border-radius: 8px; }
/* Поле поиска на странице результатов */
.page-search-wrap {
position: relative;
display: flex;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 14px;
margin-bottom: 18px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--muted-2);
}
.page-search-wrap:focus-within { border-color: var(--line-2); }
.page-search-wrap input {
flex: 1;
min-width: 0;
border: 0;
background: none;
outline: 0;
color: var(--text);
font-size: 14px;
}
.search-section { margin-top: 20px; }
.search-section-title {
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
color: var(--text-strong);
}
@media (max-width: 720px) {
#search-results-dropdown { min-width: 0; }
}
/* ============================================================
АДМИН-ПАНЕЛЬ
============================================================ */
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-count {
display: inline-block;
min-width: 18px;
margin-left: 5px;
padding: 1px 6px;
border-radius: 9px;
background: var(--surface-3);
color: var(--muted);
font-size: 11px;
font-weight: 600;
text-align: center;
vertical-align: middle;
}
.admin-count.alert { background: var(--danger-soft); color: #c98b8b; }
.admin-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.admin-input {
flex: 1 1 180px;
min-width: 0;
height: 36px;
padding: 0 12px;
border-radius: var(--r-sm);
border: 1px solid var(--line-2);
background: var(--surface-2);
color: var(--text);
font-size: 13.5px;
font-family: inherit;
outline: 0;
transition: border-color .15s;
}
.admin-input:focus { border-color: var(--accent-line); }
.admin-input::placeholder { color: var(--muted-2); }
/* Селект самодостаточен: работает и один, и вместе с .admin-input */
.admin-select {
flex: 0 0 auto;
min-width: 140px;
height: 36px;
padding: 0 30px 0 12px;
border-radius: var(--r-sm);
border: 1px solid var(--line-2);
background-color: var(--surface-2);
color: var(--text);
font-size: 13.5px;
font-family: inherit;
outline: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color .15s;
}
.admin-select:focus { border-color: var(--accent-line); }
/* Тёмные пункты списка (в некоторых браузерах используется системная тема) */
.admin-select option {
background: var(--surface-2);
color: var(--text);
}
.admin-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
}
.admin-table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
font-size: 13.5px;
}
.admin-table thead th {
position: sticky;
top: 0;
z-index: 1;
padding: 11px 14px;
background: var(--surface-2);
border-bottom: 1px solid var(--line-2);
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
.admin-table tbody td {
padding: 11px 14px;
border-bottom: 1px solid var(--line);
color: var(--text);
vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--surface-hover); }
.admin-table img { display: block; }
.admin-empty {
padding: 26px 14px;
color: var(--muted-2);
font-size: 13.5px;
text-align: center;
}
.admin-more { margin-top: 12px; text-align: center; }
.btn-sm {
display: inline-block;
padding: 6px 12px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
font-size: 12.5px;
font-family: inherit;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
white-space: nowrap;
transition: background .15s, border-color .15s, color .15s;
}
.btn-sm:hover { background: var(--surface-3); border-color: var(--accent-line); }
.btn-sm.btn-primary { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text-strong); }
.btn-sm.btn-success { border-color: rgba(109, 138, 118, .45); background: rgba(109, 138, 118, .16); color: #a9c4b1; }
.btn-sm.btn-danger { border-color: rgba(154, 107, 107, .45); background: var(--danger-soft); color: #c98b8b; }
.btn-sm.btn-danger:hover { background: rgba(154, 107, 107, .24); }
.btn-sm.ghost { background: transparent; }
.btn-sm.danger { border-color: rgba(154, 107, 107, .45); color: #c98b8b; }
.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 11.5px;
font-weight: 600;
text-transform: lowercase;
}
.badge.pending { background: rgba(154, 138, 107, .18); color: #c4b48b; }
.badge.resolved { background: rgba(109, 138, 118, .18); color: #a9c4b1; }
.badge.rejected { background: var(--danger-soft); color: #c98b8b; }
/* ============================================================
АДАПТИВНОСТЬ (мобильные)
============================================================ */
/* Планшет: прячем правую колонку */
@media (max-width: 1100px) {
.right-column { display: none; }
}
@media (max-width: 900px) {
.page-head { flex-wrap: wrap; gap: 10px; }
.page-head .btn { margin-left: 0; width: 100%; }
.admin-toolbar { flex-direction: column; }
.admin-input, .admin-select { flex: 1 1 auto; width: 100%; min-width: 0; }
}
/* Телефон: узкий сайдбар-режим */
@media (max-width: 860px) {
.sidebar { display: none; }
.site-wrapper { padding: 12px; gap: 0; }
.center-column { max-width: 100%; }
.header-inner { padding: 0 12px; gap: 8px; }
/* Поиск в шапке: сжимается, но остаётся доступным */
.header-search { max-width: none; flex: 1 1 auto; min-width: 0; }
.header-search input { font-size: 13px; }
#search-results-dropdown { left: -8px; right: -8px; min-width: 0; }
/* Крупные тач-цели */
.btn, .btn-sm { min-height: 36px; }
/* Сетки карточек в одну колонку */
#gifts-list, #inventory-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* Табы прокручиваются по горизонтали вместо переноса */
.group-tabs, .tabs-row {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.group-tabs::-webkit-scrollbar, .tabs-row::-webkit-scrollbar { display: none; }
.group-tabs .tab-btn, .tabs-row .tab-btn { flex: 0 0 auto; }
}
@media (max-width: 600px) {
.site-wrapper { padding: 10px; }
h1, .page-title { font-size: 20px; }
h2 { font-size: 17px; }
.profile-info-card { padding: 14px; }
/* Модалка просмотра поста — вертикально */
.modal-overlay { padding: 10px; }
.modal-content { width: 100%; }
/* Кнопки в строках — на всю ширину */
.people-filters { flex-wrap: wrap; }
/* Поиск: компактнее */
.page-search-wrap { height: 40px; padding: 0 12px; }
.search-row { padding: 8px; }
}
/* ============================================================
ФИНАЛЬНЫЕ ГАРАНТИИ: модалка «Комментарии»
Идут последними, чтобы перебить прежние конфликтующие правила.
============================================================ */
/* Комментарии занимают всю ширину модалки и в режиме «без фото» */
.modal-comments {
width: 350px;
min-width: 0;
background: var(--surface);
}
.modal-content.no-photo .modal-comments {
width: 100%;
border-left: 0;
}
/* Список и карточка комментария — на всю ширину, без пустого отступа справа */
.comments-list {
width: 100%;
min-width: 0;
}
.comment-item {
width: 100%;
max-width: 100%;
margin-right: 0;
padding-right: 0;
}
.comment-body {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
margin-right: 0;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 9px 12px;
}
.comment-body b { color: var(--accent); font-size: 13px; }
.comment-body p { color: var(--text); font-size: 13.5px; line-height: 1.45; margin: 4px 0 0; }
/* Нижняя панель: единый фон с модалкой, инпут тянется, кнопка справа */
.comment-input-wrapper {
width: 100%;
background: var(--surface);
border-top: 1px solid var(--line);
}
.comment-input-wrapper input,
.comment-input-wrapper input[type="text"] {
flex: 1 1 auto;
min-width: 0;
}
.comment-input-wrapper > button:last-child,
.comment-input-wrapper button[onclick="sendComment()"] {
flex: 0 0 auto;
}
/* ============================================================
КОММЕНТАРИИ: ДЕРЕВО ОТВЕТОВ (как в ВК)
Идут последними и перебивают прежние наследие-правила.
============================================================ */
.comment-thread {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Вложенные ответы — с отступом и вертикальной линией */
.comment-replies {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
margin-left: 46px;
padding-left: 10px;
border-left: 2px solid var(--line);
}
.comment-replies:empty { display: none; }
.comment-ava {
flex: 0 0 auto;
display: block;
line-height: 0;
}
.comment-ava img {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block;
border: 0 !important;
}
.comment-author {
display: block;
margin-bottom: 2px;
font-size: 13px;
font-weight: 600;
color: var(--accent) !important;
text-decoration: none;
}
.comment-author:hover { text-decoration: underline; }
/* Цитата родительского комментария внутри ответа */
.comment-quote {
margin: 4px 0 6px;
padding: 5px 9px;
border-left: 3px solid var(--accent-line);
border-radius: 4px;
background: var(--accent-soft);
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
}
.comment-quote b {
margin-right: 4px;
color: var(--accent) !important;
font-weight: 600;
}
.comment-body .comment-text {
margin: 2px 0 0 !important;
color: var(--text) !important;
font-size: 13.5px !important;
line-height: 1.45 !important;
word-break: break-word;
}
/* Ряд действий под комментарием */
.comment-actions {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 6px;
}
.comment-actions .comment-act {
display: inline-flex !important;
align-items: center;
gap: 4px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
color: var(--muted) !important;
font-size: 12px !important;
font-family: inherit;
cursor: pointer;
text-decoration: none !important;
transition: color .13s;
}
.comment-actions .comment-act:hover { color: var(--text) !important; }
.comment-actions .comment-act.liked { color: #e06c75 !important; }
.comment-actions .comment-act.liked .ic { fill: currentColor; }
.comment-actions .comment-act.danger:hover { color: #e06c75 !important; }
.comment-actions .comment-like-count { font-size: 12px !important; margin-left: 0 !important; }
/* Вложение в комментарии */
.comment-attach {
display: block;
max-width: min(240px, 100%);
max-height: 240px;
width: auto;
height: auto;
object-fit: cover;
border-radius: 8px;
margin-top: 6px;
cursor: pointer;
}
.comment-file {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
color: var(--accent);
font-size: 13px;
text-decoration: none;
}
/* Форма ответа, раскрывающаяся под комментарием */
.comment-reply-form {
margin-top: 8px;
padding: 9px 11px;
border: 1px solid var(--line-2);
border-radius: 9px;
background: var(--surface-2);
}
.crf-head {
margin-bottom: 7px;
font-size: 12px;
color: var(--muted);
}
.crf-head b { color: var(--accent); font-weight: 600; }
.crf-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.crf-input {
flex: 1 1 160px;
min-width: 0;
height: 34px;
padding: 0 11px;
border: 1px solid var(--line-2);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: 13.5px;
font-family: inherit;
outline: 0;
}
.crf-input:focus { border-color: var(--accent-line); }
.crf-input::placeholder { color: var(--muted-2); }
.crf-send,
.crf-cancel {
flex: 0 0 auto;
height: 34px;
padding: 0 13px;
border: 1px solid var(--line-2);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
transition: background .13s, border-color .13s;
}
.crf-send {
border-color: var(--accent-line);
background: var(--accent-soft);
color: var(--text-strong);
}
.crf-send:hover { background: var(--accent-line); }
.crf-cancel:hover { background: var(--surface-3); }
.comments-loading,
.comments-empty {
padding: 18px 10px;
text-align: center;
color: var(--muted-2);
font-size: 13px;
}
.comments-empty.error { color: #e06c75; }
@media (max-width: 600px) {
.comment-replies { margin-left: 28px; padding-left: 8px; }
.comment-actions { gap: 11px; }
}
/* ============================================================
МЕССЕНДЖЕР: вложения, пересылка, цитаты (как в ВК)
============================================================ */
/* Поле ввода: инпут тянется, кнопка отправки прижата вправо */
.chat-input-area { flex-wrap: nowrap; }
.chat-input-area input[type="text"] { flex: 1 1 auto; min-width: 0; }
.chat-input-area .btn-send { flex: 0 0 auto; margin-left: auto; }
/* Превью вложений над полем ввода */
.attachment-preview-box {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-top: 1px solid var(--line);
background: var(--surface);
flex-wrap: wrap;
}
.attach-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 30px 6px 8px;
border: 1px solid var(--line-2);
border-radius: 9px;
background: var(--surface-2);
}
.attach-chip img {
max-height: 56px;
max-width: 110px;
border-radius: 6px;
object-fit: cover;
display: block;
}
.attach-doc {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 240px;
font-size: 13px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attach-remove {
position: absolute;
top: -7px;
right: -7px;
width: 20px;
height: 20px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: #c0605f;
color: #fff;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.attach-remove:hover { background: #d06f6e; }
.attach-loading { color: var(--muted); font-size: 13px; }
/* Меню вложений */
.attach-menu { min-width: 200px; }
.attach-item .ic { flex: none; }
/* Пометка «Переслано» */
.vk-forwarded {
margin-bottom: 6px;
padding: 6px 9px;
border-left: 3px solid var(--accent-line);
border-radius: 4px;
background: rgba(125, 148, 184, .10);
}
.vk-forwarded-label {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
color: var(--accent);
}
.vk-forwarded-text {
margin-top: 3px;
font-size: 12.5px;
color: var(--muted);
word-break: break-word;
}
/* Документ в сообщении */
.vk-file {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 7px 11px;
border: 1px solid var(--line-2);
border-radius: 8px;
background: var(--surface-2);
color: var(--text);
font-size: 13px;
text-decoration: none;
max-width: 100%;
}
.vk-file:hover { background: var(--surface-3); }
.vk-file .ic { flex: none; color: var(--accent); }
.vk-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-msg-content { white-space: pre-wrap; word-break: break-word; }
.vk-edited { margin-right: 5px; font-style: italic; opacity: .8; }
.chat-image { display: block; max-width: min(320px, 100%); max-height: 300px; object-fit: cover; border-radius: 8px; margin-top: 5px; cursor: pointer; }
.chat-empty-msg,
.dialogs-empty {
padding: 20px;
text-align: center;
color: var(--muted-2);
font-size: 13px;
}
/* Меню действий сообщения */
.vk-msg-dropdown .vd-item { display: flex; align-items: center; width: 100%; }
.vk-msg-dropdown .vd-item.danger { color: #e06c75; }
/* Список выбора чата для пересылки */
.forward-list {
flex: 1;
min-height: 90px;
max-height: 46vh;
overflow-y: auto;
padding: 0 10px 12px;
}
.forward-person {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 8px;
border-radius: 8px;
cursor: pointer;
transition: background .12s;
}
.forward-person:hover { background: var(--surface-2); }
.forward-person img {
width: 38px;
height: 38px;
flex: none;
border-radius: 50%;
object-fit: cover;
background: var(--surface-2);
}
.forward-person b { display: block; font-size: 13.5px; color: var(--text-strong); font-weight: 600; }
.forward-person small { font-size: 12px; color: var(--muted-2); }
/* Всплывающее уведомление чата */
.chat-toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
padding: 11px 18px;
border-radius: 9px;
background: var(--surface-3);
border: 1px solid var(--line-2);
color: var(--text-strong);
font-size: 13.5px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
@media (max-width: 600px) {
.chat-toast { left: 14px; right: 14px; bottom: 14px; text-align: center; }
.attach-chip img { max-height: 44px; max-width: 80px; }
}
/* ============================================================
СТЕНА ПРОФИЛЯ: пост с лайками и комментариями
============================================================ */
.wall-post-text {
font-size: 14px;
color: var(--text);
margin-bottom: 8px;
word-break: break-word;
}
.wall-post-media {
position: relative;
margin-bottom: 8px;
}
.wall-post-media img { cursor: zoom-in; }
.wall-post-media .post-media-count {
position: absolute;
top: 10px;
right: 10px;
margin: 0;
}
.wall-post-date {
font-size: 11.5px;
color: var(--muted-2);
}
/* Панель действий внутри поста на стене — без верхней границы */
.profile-wall-post .post-actions {
padding: 6px 0 0;
margin-top: 8px;
border-top: 0;
}
/* ============================================================
РОЛИ: визуальные привилегии (текст + иконки)
Идут в конце файла, чтобы перебить наследие с !important.
============================================================ */
/* --- Цвет текста контента по роли автора --- */
.role-text.role-text-creator,
.role-text.role-text-creator p { color: #6ea8ff !important; }
.role-text.role-text-admin,
.role-text.role-text-admin p { color: #4fc3f7 !important; }
.role-text.role-text-moderator,
.role-text.role-text-moderator p { color: #ff7b7b !important; }
/* --- Бейдж-иконка перед именем --- */
.role-badge {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: -2px;
margin-right: 5px;
line-height: 1;
flex: none;
}
.role-badge .ic {
width: 15px;
height: 15px;
stroke-width: 1.9;
}
/* Создатель — золотая корона */
.role-badge-creator .ic {
color: #f0c05a;
fill: rgba(240, 192, 90, .28);
stroke: #f0c05a;
}
/* Администратор — серебряная корона */
.role-badge-admin .ic {
color: #c9d2dc;
fill: rgba(201, 210, 220, .20);
stroke: #c9d2dc;
}
/* Модератор — щит */
.role-badge-moderator .ic {
color: #e06c75;
fill: rgba(224, 108, 117, .18);
stroke: #e06c75;
}
/* --- Метка роли в профиле --- */
.role-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 8px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .02em;
vertical-align: middle;
border: 1px solid transparent;
}
.role-tag .ic { width: 13px; height: 13px; }
.role-tag-creator {
color: #f5cf7d;
background: rgba(240, 192, 90, .14);
border-color: rgba(240, 192, 90, .38);
}
.role-tag-admin {
color: #d7dee6;
background: rgba(201, 210, 220, .12);
border-color: rgba(201, 210, 220, .32);
}
.role-tag-moderator {
color: #f08a92;
background: rgba(224, 108, 117, .13);
border-color: rgba(224, 108, 117, .34);
}
/* ============================================================
МОДЕРАЦИЯ: кнопки удаления, метки, журнал, кошельки
============================================================ */
/* --- Метка роли в профиле (наследует базовые стили .role-tag) --- */
.profile-role-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 6px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .02em;
border: 1px solid transparent;
}
.profile-role-tag .ic { width: 13px; height: 13px; }
/* --- Автор на стене профиля --- */
.wall-post-author {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 8px;
}
.wall-post-author-name {
font-weight: 600;
font-size: 14px;
color: var(--text-strong);
text-decoration: none;
}
.wall-post-author-name:hover { color: var(--accent); }
/* --- Кнопка модератора «Удалить» --- */
.mod-del-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
margin-left: auto;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--muted-2);
cursor: pointer;
position: relative;
z-index: 20;
pointer-events: auto;
flex: none;
transition: background .15s, color .15s, border-color .15s;
}
.mod-del-btn svg { pointer-events: none; }
.mod-del-btn .ic { width: 15px; height: 15px; }
.mod-del-btn:hover {
background: rgba(224, 108, 117, .14);
border-color: rgba(224, 108, 117, .45);
color: #e06c75;
}
/* --- Модальное окно причины удаления --- */
.mod-reason-box {
width: min(460px, 94vw);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 0;
overflow: hidden;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
}
.modal-head b { font-size: 15px; color: var(--text-strong); }
.modal-close {
background: transparent;
border: 0;
color: var(--muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.modal-close:hover { color: var(--text); }
.mod-reason-body { padding: 16px 18px; }
.mod-reason-target {
margin: 0 0 12px;
font-size: 13px;
color: var(--muted);
word-break: break-word;
}
.mod-reason-label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: var(--text);
}
.mod-reason-label .req { color: #e06c75; }
.mod-reason-input {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 74px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font: inherit;
font-size: 13.5px;
}
.mod-reason-input:focus { outline: none; border-color: var(--accent-line); }
.mod-reason-error { min-height: 16px; margin-top: 6px; font-size: 12.5px; color: #e06c75; }
.mod-reason-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 18px 16px;
border-top: 1px solid var(--line);
}
/* --- Плавное исчезновение удалённого --- */
.is-removing { opacity: 0; transform: scale(.98); transition: opacity .16s ease, transform .16s ease; }
/* ============================================================
АДМИН-ПАНЕЛЬ: статусы, действия, журнал, кошельки
============================================================ */
.admin-muted { color: var(--muted-2); font-size: 11.5px; }
/* Ширины колонок таблицы пользователей */
.admin-table .col-id { width: 64px; }
.admin-table .col-user { min-width: 190px; }
.admin-table .col-email { min-width: 170px; }
.admin-table .col-role { width: 150px; }
.admin-table .col-status { width: 130px; }
.admin-table .col-actions { min-width: 230px; }
.admin-table .col-date { width: 120px; }
.admin-row-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
/* Статусы пользователя */
.admin-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 600;
border: 1px solid transparent;
white-space: nowrap;
}
.admin-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.admin-status-active { color: #7bd88f; background: rgba(123, 216, 143, .12); border-color: rgba(123, 216, 143, .30); }
.admin-status-muted { color: #f0c05a; background: rgba(240, 192, 90, .13); border-color: rgba(240, 192, 90, .34); }
.admin-status-banned { color: #e06c75; background: rgba(224, 108, 117, .13); border-color: rgba(224, 108, 117, .36); }
.admin-status-frozen { color: #6ea8ff; background: rgba(110, 168, 255, .13); border-color: rgba(110, 168, 255, .34); }
/* Метки действий в журнале */
.admin-action-tag {
display: inline-block;
padding: 3px 9px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text);
}
.admin-action-delete_post,
.admin-action-delete_comment,
.admin-action-delete_photo,
.admin-action-ban,
.admin-action-delete_profile {
color: #f08a92;
background: rgba(224, 108, 117, .12);
border-color: rgba(224, 108, 117, .32);
}
.admin-action-mute,
.admin-action-freeze_wallet {
color: #f0c05a;
background: rgba(240, 192, 90, .12);
border-color: rgba(240, 192, 90, .32);
}
.admin-action-unmute,
.admin-action-unban,
.admin-action-unfreeze_wallet {
color: #7bd88f;
background: rgba(123, 216, 143, .12);
border-color: rgba(123, 216, 143, .30);
}
.admin-reason { max-width: 280px; word-break: break-word; color: var(--muted); font-size: 12.5px; }
.admin-account { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--muted); }
.admin-balance { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
/* Итоги по кошелькам */
.admin-wallets-totals {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 12px;
}
.admin-wallet-total {
padding: 8px 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
font-size: 12.5px;
color: var(--muted);
}
.admin-wallet-total b { color: var(--text-strong); font-size: 13.5px; }
/* Прокрутка длинных таблиц на узких экранах */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table td, .admin-table th { vertical-align: middle; }
@media (max-width: 900px) {
.admin-table .col-email { display: none; }
}
@media (max-width: 700px) {
.admin-table .col-status { display: none; }
.admin-row-actions { gap: 4px; }
}
/* ============================================================
САНКЦИИ: причины, разделы, сроки
============================================================ */
.mod-select {
display: block;
width: 100%;
height: 36px;
margin-bottom: 12px;
padding: 0 30px 0 12px;
border-radius: var(--r-sm);
border: 1px solid var(--line-2);
background-color: var(--surface-2);
color: var(--text);
font-size: 13.5px;
font-family: inherit;
outline: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.mod-select:focus { border-color: var(--accent-line); }
.mod-select option { background: var(--surface-2); color: var(--text); }
/* Чекбоксы разделов */
.mod-scopes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.mod-scope {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface-2);
color: var(--text);
font-size: 12.5px;
cursor: pointer;
user-select: none;
transition: border-color .13s, background .13s;
}
.mod-scope:hover { border-color: var(--line-2); }
.mod-scope input { margin: 0; cursor: pointer; }
.mod-scope:has(input:checked) {
border-color: var(--accent-line);
background: var(--accent-soft);
color: var(--text-strong);
}
.mod-hint { color: var(--muted-2); font-weight: 400; }
.mod-forever {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.mod-forever input { margin: 0; cursor: pointer; }
/* Высокая модалка санкции — со скроллом */
.mod-sanction-box {
max-height: 92vh;
overflow-y: auto;
}
.mod-sanction-box .mod-reason-body { padding-bottom: 8px; }
/* Вторая строка статуса в таблице админки */
.admin-status + .admin-muted { display: block; margin-top: 3px; }
/* ============================================================
АДМИНКА: модули журнала, состав команды, карточка пользователя
============================================================ */
.admin-section-hint {
margin: 0 0 14px;
font-size: 12.5px;
color: var(--muted);
}
/* Карточки модулей журнала */
.admin-logs-modules {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.admin-module-card {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.admin-module-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.admin-module-card .ic { color: var(--accent); flex: none; }
.admin-module-name { font-weight: 600; }
.admin-module-count {
padding: 1px 8px;
border-radius: 10px;
background: var(--surface-3);
color: var(--text-strong);
font-size: 12px;
font-weight: 700;
}
.admin-module-last { color: var(--muted-2); font-size: 11.5px; }
.admin-module-total {
display: inline-flex;
align-items: center;
padding: 10px 14px;
font-size: 12.5px;
color: var(--muted);
}
/* Состав команды */
.admin-staff-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
}
.admin-staff-card {
display: flex;
gap: 12px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
}
.admin-staff-ava {
width: 52px;
height: 52px;
flex: none;
border-radius: 50%;
object-fit: cover;
background: var(--surface-2);
}
.admin-staff-info { flex: 1; min-width: 0; }
.admin-staff-name {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 600;
}
.admin-staff-name a { color: var(--text-strong); text-decoration: none; }
.admin-staff-name a:hover { color: var(--accent); }
.admin-online {
width: 8px; height: 8px;
border-radius: 50%;
background: #7bd88f;
flex: none;
}
.admin-staff-role {
display: inline-block;
margin: 5px 0 7px;
padding: 2px 9px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
border: 1px solid transparent;
}
.admin-staff-stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 11.5px;
color: var(--muted);
}
.admin-staff-status { margin-top: 5px; font-size: 11.5px; color: var(--muted-2); }
.admin-staff-actions { display: flex; align-items: flex-start; }
/* Карточка пользователя: история входов и связи */
.admin-user-box {
width: min(620px, 95vw);
max-height: 88vh;
display: flex;
flex-direction: column;
}
.admin-user-body {
flex: 1;
overflow-y: auto;
padding: 14px 18px 18px;
}
.aum-h {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-strong);
}
.aum-h:not(:first-child) { margin-top: 18px; }
.aum-list {
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden;
}
.aum-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-bottom: 1px solid var(--line);
font-size: 12.5px;
}
.aum-row:last-child { border-bottom: 0; }
.aum-row:nth-child(odd) { background: var(--surface-2); }
.aum-date { color: var(--muted); min-width: 118px; font-variant-numeric: tabular-nums; }
.aum-ip { font-family: ui-monospace, monospace; color: var(--text); flex: 1; }
.aum-method { color: var(--muted-2); }
.aum-hits { color: var(--accent); font-weight: 600; }
.aum-row a { color: var(--text-strong); text-decoration: none; flex: 1; }
.aum-row a:hover { color: var(--accent); }
/* Форма переавторизации в админке */
.reauth-card {
max-width: 400px;
margin: 60px auto;
padding: 26px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
}
.reauth-hint {
margin: 0 0 16px;
color: var(--muted);
font-size: 13px;
text-align: center;
line-height: 1.5;
}
.reauth-card input {
width: 100%;
box-sizing: border-box;
margin-bottom: 12px;
padding: 11px 14px;
border-radius: 9px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
font: inherit;
font-size: 14px;
}
.reauth-card input:focus { outline: none; border-color: var(--accent-line); }
.reauth-card a { color: var(--accent); text-decoration: none; }
.reauth-card a:hover { text-decoration: underline; }
/* ============================================================
СОЦФИЧИ: закладки, подписки, гости, настройки уведомлений
============================================================ */
/* Кнопка закладки в ленте */
.bookmark-btn {
background: none;
border: 0;
padding: 6px 10px;
color: var(--muted-2);
cursor: pointer;
display: inline-flex;
align-items: center;
margin-left: auto;
border-radius: 8px;
transition: color .13s, background .13s;
}
.bookmark-btn:hover { color: var(--text); background: var(--surface-2); }
.bookmark-btn.active { color: #f0c05a; }
.bookmark-btn.active .ic { fill: currentColor; }
/* Кнопка «Следить за обсуждением» в шапке комментариев */
.comments-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sub-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--line-2);
border-radius: 20px;
background: var(--surface-2);
color: var(--muted);
font-family: inherit;
font-size: 12px;
cursor: pointer;
transition: color .13s, border-color .13s, background .13s;
}
.sub-btn:hover { color: var(--text); border-color: var(--line-2); }
.sub-btn.active {
color: var(--accent);
border-color: var(--accent-line);
background: var(--accent-soft);
}
.sub-btn.active .ic { fill: currentColor; }
/* --- Страница закладок --- */
#bookmarks-list { display: flex; flex-direction: column; gap: 12px; }
.bm-card {
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
}
.bm-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
font-size: 13.5px;
color: var(--text-strong);
}
.bm-date { margin-left: auto; font-size: 11.5px; color: var(--muted-2); }
.bm-text {
font-size: 13.5px;
color: var(--text);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.bm-cover {
display: block;
max-height: 220px;
max-width: 100%;
margin-top: 8px;
border-radius: 8px;
object-fit: cover;
cursor: pointer;
}
.bm-open {
display: inline-block;
margin-top: 8px;
font-size: 12.5px;
color: var(--accent);
text-decoration: none;
}
.bm-open:hover { text-decoration: underline; }
.bm-card.bm-photo { padding: 0; overflow: hidden; }
.bm-card.bm-photo img {
display: block;
width: 100%;
max-height: 320px;
object-fit: cover;
cursor: pointer;
}
.bm-photo-meta { padding: 9px 14px; font-size: 12px; color: var(--muted); }
.bm-card.bm-user { display: flex; align-items: center; gap: 12px; }
.bm-ava {
width: 44px;
height: 44px;
flex: none;
border-radius: 50%;
object-fit: cover;
background: var(--surface-2);
}
.bm-user-info { flex: 1; min-width: 0; }
.bm-user-info a { color: var(--text-strong); text-decoration: none; font-size: 14px; }
.bm-user-info a:hover { color: var(--accent); }
.bm-user-info small { display: block; color: var(--muted-2); font-size: 12px; }
/* --- Гости профиля --- */
.guests-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.guest-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 68px;
padding: 8px 4px;
border-radius: 10px;
text-decoration: none;
transition: background .13s;
}
.guest-item:hover { background: var(--surface-2); }
.guest-item img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
background: var(--surface-2);
}
.guest-name {
max-width: 64px;
font-size: 11px;
color: var(--text);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guest-visits {
position: absolute;
top: 4px;
right: 8px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--surface-3);
border: 1px solid var(--line-2);
color: var(--text-strong);
font-size: 10px;
line-height: 15px;
text-align: center;
}
.guest-item .role-badge { position: absolute; top: 2px; left: 6px; }
.guest-item .role-badge .ic { width: 12px; height: 12px; }
/* --- Настройки уведомлений --- */
.notify-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 2px;
border-bottom: 1px solid var(--line);
font-size: 13.5px;
color: var(--text);
cursor: pointer;
}
.notify-row:last-of-type { border-bottom: 0; }
.notify-row input { margin: 0; cursor: pointer; }
/* ============================================================
АДМИНКА: компактные действия в таблице пользователей
============================================================ */
.admin-users-search { flex: 1 1 220px; min-width: 0; }
.admin-toolbar .admin-select { flex: 0 0 auto; min-width: 150px; }
.admin-reset-btn { flex: 0 0 auto; height: 36px; }
.admin-row-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
flex-wrap: nowrap;
}
.admin-icon-btn {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--surface-2);
color: var(--muted);
cursor: pointer;
text-decoration: none;
flex: none;
transition: background .13s, color .13s, border-color .13s;
}
.admin-icon-btn .ic { width: 15px; height: 15px; }
.admin-icon-btn:hover {
background: var(--surface-3);
color: var(--text);
border-color: var(--line-2);
}
.admin-icon-btn-menu:hover { color: var(--accent); border-color: var(--accent-line); }
/* Выпадающее меню действий */
.admin-actions-menu {
min-width: 238px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--r);
box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
animation: aamIn .12s ease;
}
@keyframes aamIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.aam-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--text);
font-family: inherit;
font-size: 13px;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background .12s, color .12s;
}
.aam-item:hover { background: var(--surface-2); color: var(--text-strong); }
.aam-item .ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.aam-item:hover .ic { color: var(--accent); }
.aam-danger { color: #e06c75; }
.aam-danger .ic { color: #e06c75; }
.aam-danger:hover { background: rgba(224, 108, 117, .12); color: #f08a92; }
.aam-danger:hover .ic { color: #f08a92; }
.aam-sep { height: 1px; margin: 5px 6px; background: var(--line); }
/* ============================================================
АДМИНКА: без правой колонки — на всю ширину
============================================================ */
.main-area.admin-layout {
justify-content: stretch;
gap: 0;
}
.center-column.admin-center {
max-width: none;
width: 100%;
}
/* На широких экранах таблицы не растягиваем бесконечно */
@media (min-width: 1600px) {
.center-column.admin-center { max-width: 1480px; margin: 0 auto; }
}
/* Компактнее таблица пользователей */
.admin-table .col-actions { width: 118px; min-width: 118px; }
.admin-table .col-id { width: 58px; }
/* ============================================================
АДМИНКА: статусы жалоб
============================================================ */
.admin-status-pending { background: rgba(240, 192, 90, .16); color: #f0c05a; border-color: rgba(240, 192, 90, .4); }
.admin-status-resolved { background: rgba(123, 216, 143, .16); color: #7bd88f; border-color: rgba(123, 216, 143, .4); }
.admin-status-rejected { background: rgba(124, 130, 139, .16); color: var(--muted); border-color: var(--line-2); }
/* Ссылки внутри ячеек админки */
.admin-table td a { color: var(--accent); text-decoration: none; }
.admin-table td a:hover { text-decoration: underline; }
/* Блок «Показать ещё» под таблицами админки */
.admin-more { margin-top: 12px; text-align: center; }
/* Кнопка обновления в тулбаре */
.admin-toolbar .btn-sm { flex: 0 0 auto; height: 36px; }
/* ============================================================
PIN-ДОСТУП В АДМИНКУ
============================================================ */
.pin-card {
max-width: 400px;
margin: 60px auto;
padding: 26px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
}
.pin-title { text-align: center; margin: 0 0 12px; font-size: 18px; }
.pin-hint {
margin: 0 0 16px;
color: var(--muted);
font-size: 13px;
text-align: center;
line-height: 1.5;
}
.pin-label {
display: block;
margin-bottom: 6px;
font-size: 12.5px;
color: var(--muted);
}
.pin-note {
margin: 12px 0 0;
color: var(--muted-2);
font-size: 11.5px;
text-align: center;
line-height: 1.45;
}
.pin-notice {
margin: 0 0 16px;
padding: 11px 13px;
border-radius: 9px;
background: rgba(106, 168, 255, .1);
border: 1px solid rgba(106, 168, 255, .3);
color: var(--text);
font-size: 12.5px;
line-height: 1.5;
}
.pin-notice b { color: #6ea8ff; }
.pin-error {
margin-bottom: 14px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(224, 108, 117, .14);
border: 1px solid rgba(224, 108, 117, .35);
color: #f08a92;
font-size: 12.5px;
text-align: center;
}
.pin-input {
width: 100%;
box-sizing: border-box;
margin-bottom: 12px;
padding: 14px;
border-radius: 10px;
border: 1px solid var(--line-2);
background: var(--surface-2);
color: var(--text-strong);
font-family: ui-monospace, monospace;
font-size: 26px;
letter-spacing: 14px;
text-align: center;
text-indent: 14px;
outline: 0;
transition: border-color .15s;
}
.pin-input:focus { border-color: var(--accent-line); }
.pin-input::placeholder { color: var(--muted-2); letter-spacing: 10px; }
.pin-card #apm-pin { font-size: 22px; }
/* Шапка админки: роль и таймер сессии */
.admin-page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.admin-page-head .page-title { margin: 0; }
.admin-session {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.admin-session-role {
padding: 3px 10px;
border-radius: 20px;
border: 1px solid var(--line-2);
background: var(--surface-2);
font-weight: 600;
}
.admin-session-timer {
padding: 3px 10px;
border-radius: 20px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.admin-session-timer.warn { color: #f0c05a; border-color: rgba(240, 192, 90, .35); }
.admin-session-timer.expired { color: #e06c75; border-color: rgba(224, 108, 117, .35); }
/* Состояние PIN в карточке сотрудника */
.admin-staff-pin { display: flex;
align-items: center;
gap: 5px;
margin-top: 5px;
font-size: 11.5px;
color: var(--muted-2);
}
.admin-staff-pin .ic { width: 12px; height: 12px; color: #7bd88f; }
.admin-staff-actions {
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
}
.admin-staff-actions .btn-sm { white-space: nowrap; }
/* ============================================================
НАСТРОЙКИ: вкладки, строки формы, переключатели
============================================================ */
/* Панели вкладок — показываем только активную */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* Контейнер вкладок */
.tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
padding-bottom: 2px;
}
/* Строки формы */
.form-row { margin-bottom: 14px; }
.form-row > label {
display: block;
margin-bottom: 6px;
font-size: 12.5px;
color: var(--muted);
font-weight: 500;
}
/* Чекбокс-строка в форме */
.form-check {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 14px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--surface-2);
font-size: 13.5px;
color: var(--text);
cursor: pointer;
}
.form-check input { margin: 0; }
.form-check:hover { border-color: var(--line-2); }
/* Подсказка под полем */
.form-hint {
margin: 5px 0 0;
font-size: 11.5px;
color: var(--muted-2);
line-height: 1.45;
}
/* ============================================================
УВЕДОМЛЕНИЯ: понятные переключатели
============================================================ */
.settings-hint {
margin: 0 0 16px;
font-size: 12.5px;
color: var(--muted);
line-height: 1.5;
}
.notify-item {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 2px;
border-bottom: 1px solid var(--line);
}
.notify-item:last-of-type { border-bottom: 0; }
.notify-text { flex: 1; min-width: 0; }
.notify-text b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--text-strong);
margin-bottom: 3px;
}
.notify-text small {
display: block;
font-size: 11.5px;
color: var(--muted-2);
line-height: 1.4;
}
/* Тумблер */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 25px;
flex: none;
cursor: pointer;
}
.switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch-track {
position: absolute;
inset: 0;
border-radius: 13px;
background: var(--surface-3);
border: 1px solid var(--line-2);
transition: background .18s, border-color .18s;
}
.switch-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 19px;
height: 19px;
border-radius: 50%;
background: var(--muted);
transition: transform .18s, background .18s;
}
.switch input:checked + .switch-track {
background: var(--accent-soft);
border-color: var(--accent-line);
}
.switch input:checked + .switch-track::after {
transform: translateX(19px);
background: var(--accent);
}
.switch input:focus-visible + .switch-track {
outline: 2px solid var(--accent-line);
outline-offset: 2px;
}
.notify-actions {
display: flex;
gap: 8px;
margin-top: 18px;
}
/* ============================================================
ПРИВАТНОСТЬ ПРОФИЛЯ
============================================================ */
.privacy-locked {
text-align: center;
padding: 34px 22px;
}
.privacy-lock-icon {
display: inline-grid;
place-items: center;
width: 62px;
height: 62px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--line-2);
}
.privacy-lock-icon .ic { width: 28px; height: 28px; color: var(--muted); }
.privacy-locked h3 { margin: 0 0 8px; font-size: 16px; color: var(--text-strong); }
.privacy-locked p { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Сообщение о сохранении настроек — под тёмную тему */
.settings-msg {
display: none;
padding: 12px 14px;
border-radius: 10px;
margin: 12px 0;
font-size: 13px;
line-height: 1.4;
border: 1px solid transparent;
}
.settings-msg.is-success {
display: block;
background: rgba(123, 216, 143, .14);
border-color: rgba(123, 216, 143, .38);
color: #7bd88f;
}
.settings-msg.is-error {
display: block;
background: rgba(224, 108, 117, .14);
border-color: rgba(224, 108, 117, .38);
color: #f08a92;
}
/* ============================================================
АНТИСПАМ
============================================================ */
.admin-settings-box {
margin-bottom: 16px;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
padding: 12px 14px;
}
.admin-settings-box summary {
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--text-strong);
outline: none;
}
.admin-settings-box summary::marker { color: var(--accent); }
.admin-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
margin: 14px 0;
}
.admin-settings-grid label {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 12px;
color: var(--muted);
}
.admin-settings-grid label span { line-height: 1.3; }
.admin-settings-grid input[type="number"],
.admin-settings-grid input[type="text"] { padding: 8px 10px; }
.admin-settings-grid label:has(input[type="checkbox"]) {
flex-direction: row;
align-items: center;
gap: 9px;
}
.admin-blocks-note {
margin: 0 0 8px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
}
.admin-block-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
margin-bottom: 6px;
border: 1px solid rgba(224, 108, 117, .3);
background: rgba(224, 108, 117, .08);
border-radius: 9px;
font-size: 12.5px;
}
.admin-block-row .btn-sm { margin-left: auto; }
/* Действие модерации */
.notif-item-moderation {
background: rgba(224, 108, 117, .07);
}
.notif-item-moderation:hover { background: rgba(224, 108, 117, .12); }
.notif-moderation-text {
font-size: 13px;
line-height: 1.45;
color: var(--text);
}
.notif-item-moderation .notif-ico {
color: #e06c75;
border-color: rgba(224, 108, 117, .4);
}
/* ============================================================
УВЕДОМЛЕНИЯ В ШАПКЕ
============================================================ */
#notif-panel { padding: 0; }
.notif-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
font-size: 13px;
font-weight: 600;
color: var(--text-strong);
position: sticky;
top: 0;
background: var(--surface);
z-index: 1;
}
.notif-clear {
border: 0;
background: none;
color: var(--accent);
font-family: inherit;
font-size: 12px;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
}
.notif-clear:hover { background: var(--surface-2); }
.notif-empty {
padding: 26px 16px;
text-align: center;
font-size: 13px;
color: var(--muted-2);
}
.notif-item {
display: flex;
gap: 11px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background .13s;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-2); }
.notif-ava {
position: relative;
flex: none;
width: 40px;
height: 40px;
}
.notif-ava img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background: var(--surface-2);
}
.notif-ico {
position: absolute;
right: -3px;
bottom: -3px;
display: grid;
place-items: center;
width: 19px;
height: 19px;
border-radius: 50%;
background: var(--surface-3);
border: 1px solid var(--line-2);
color: var(--accent);
}
.notif-ico .ic { width: 11px; height: 11px; }
.notif-body { flex: 1; min-width: 0; }
.notif-text {
font-size: 13px;
line-height: 1.35;
color: var(--text);
word-break: break-word;
}
.notif-text b {
color: var(--text-strong);
font-weight: 600;
}
.notif-time {
margin-top: 4px;
font-size: 11px;
color: var(--muted-2);
}
/* Превью контента в уведомлении */
.notif-preview {
margin-top: 6px;
padding: 7px 9px;
border-radius: 8px;
background: var(--surface-2);
border-left: 2px solid var(--accent-line);
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
.notif-preview-label {
display: inline-block;
margin-right: 6px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--accent);
}
.notif-preview-text {
color: var(--text);
word-break: break-word;
}
/* Подсветка поста, к которому пришло уведомление */
.post-card.is-highlighted,
.comment-thread.is-highlighted {
animation: postHighlight 1.8s ease;
}
@keyframes postHighlight {
0%, 30% { box-shadow: 0 0 0 2px var(--accent-line) inset; }
100% { box-shadow: none; }
}
.notif-btns { display: flex; gap: 6px; margin-top: 8px; }
.notif-btn {
padding: 5px 12px;
border-radius: 7px;
border: 1px solid transparent;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.notif-btn.accept {
background: rgba(123, 216, 143, .16);
border-color: rgba(123, 216, 143, .4);
color: #7bd88f;
}
.notif-btn.accept:hover { background: rgba(123, 216, 143, .26); }
.notif-btn.reject {
background: rgba(224, 108, 117, .14);
border-color: rgba(224, 108, 117, .38);
color: #f08a92;
}
.notif-btn.reject:hover { background: rgba(224, 108, 117, .24); }
/* ============================================================
АДМИНКА: сортировка по клику на заголовок
============================================================ */
.th-sort {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
cursor: pointer;
white-space: nowrap;
transition: color .14s;
}
.th-sort:hover { color: var(--text-strong); }
.th-sort.is-sorted { color: var(--accent); }
.th-arrow {
font-size: 9px;
line-height: 1;
min-width: 9px;
opacity: .9;
}
.admin-table th { user-select: none; }
/* ============================================================
ДРУЗЬЯ: страница и правая панель
============================================================ */
/* Шапка страницы друзей */
.friends-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.friends-title {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
font-size: 22px;
color: var(--text-strong);
}
.friends-total {
font-size: 15px;
font-weight: 600;
color: var(--muted);
}
.friends-sub {
display: flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 12.5px;
color: var(--muted);
}
.friends-sub b { color: var(--text-strong); }
.friends-head .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
/* Поиск */
.friends-search {
position: relative;
margin-bottom: 14px;
}
.friends-search .ic {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--muted-2);
pointer-events: none;
}
.friends-search input {
width: 100%;
padding-left: 38px;
margin: 0;
}
/* --- Правая панель: друзья --- */
.widget-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 9px;
border-bottom: 1px solid var(--line);
}
.widget-head h3 {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-strong);
}
.widget-count {
min-width: 24px;
padding: 2px 8px;
border-radius: 20px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: color .14s, border-color .14s;
}
.widget-count:hover { color: var(--text-strong); border-color: var(--line-2); }
.widget-count.online { color: #7bd88f; border-color: rgba(123, 216, 143, .38); }
.ws-friends-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 8px;
}
.ws-friend {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-decoration: none;
min-width: 0;
}
.ws-friend-ava {
position: relative;
display: block;
width: 56px;
height: 56px;
flex: none;
}
.ws-friend-ava img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
background: var(--surface-2);
border: 1px solid var(--line);
display: block;
transition: border-color .15s, transform .15s;
}
.ws-friend:hover .ws-friend-ava img {
border-color: var(--accent-line);
transform: scale(1.04);
}
.ws-friend-name {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
max-width: 74px;
font-size: 11.5px;
color: var(--text);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-friend-name .role-badge { flex: none; }
.ws-friend:hover .ws-friend-name { color: var(--accent); }
/* Индикатор «в сети» */
.ws-online-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #7bd88f;
box-shadow: 0 0 6px rgba(123, 216, 143, .7);
flex: none;
}
.ws-friend-ava .ws-online-dot {
position: absolute;
right: 1px;
bottom: 1px;
width: 11px;
height: 11px;
border: 2px solid var(--surface);
}
.widget-more {
display: block;
margin-top: 11px;
font-size: 12px;
color: var(--accent);
text-decoration: none;
text-align: center;
}
.widget-more:hover { text-decoration: underline; }
.widget-empty {
padding: 8px 0 4px;
font-size: 12.5px;
color: var(--muted-2);
text-align: center;
line-height: 1.45;
}
/* ============================================================
УКРАШЕНИЯ ПРОФИЛЯ: рамки аватара, эффекты обложки, лайки
============================================================ */
/* --- Лайки аватара и обложки --- */
.obj-like-wrap { position: absolute; z-index: 60; }
.cover-like-wrap {
right: 12px;
bottom: 12px;
}
.avatar-like-wrap {
left: 50%;
bottom: -10px;
transform: translateX(-50%);
}
.obj-like {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(10, 11, 13, .62);
backdrop-filter: blur(6px);
color: #fff;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.obj-like:hover { background: rgba(10, 11, 13, .82); border-color: rgba(255, 255, 255, .3); }
.obj-like .ic { width: 14px; height: 14px; transition: fill .15s, transform .15s; }
.obj-like.is-active {
color: #ff6b81;
border-color: rgba(255, 107, 129, .5);
background: rgba(255, 107, 129, .16);
}
.obj-like.is-active .ic { fill: currentColor; }
.obj-like.pop .ic { animation: likePop .32s ease; }
@keyframes likePop {
0% { transform: scale(1); }
45% { transform: scale(1.38); }
100% { transform: scale(1); }
}
.obj-like-sm { padding: 3px 9px; font-size: 11.5px; gap: 4px; }
.obj-like-sm .ic { width: 12px; height: 12px; }
/* --- Рамки аватара ---
Аватар круглый и задан через !important, поэтому рамку тоже
рисуем box-shadow с !important, иначе она не видна. */
.avatar-frame-gold .avatar-img {
box-shadow: 0 0 0 4px #f7d774, 0 0 22px 3px rgba(247, 215, 116, .6), 0 4px 15px rgba(0, 0, 0, .8) !important;
}
.avatar-frame-neon .avatar-img {
box-shadow: 0 0 0 4px #38e8ff, 0 0 26px 4px rgba(56, 232, 255, .7), 0 4px 15px rgba(0, 0, 0, .8) !important;
}
.avatar-frame-fire .avatar-img {
box-shadow: 0 0 0 4px #ff7a18, 0 0 26px 4px rgba(255, 122, 24, .7), 0 4px 15px rgba(0, 0, 0, .8) !important;
}
.avatar-frame-aurora .avatar-img {
box-shadow: 0 0 0 4px #7b5cff, 0 0 28px 5px rgba(46, 213, 180, .65), 0 4px 15px rgba(0, 0, 0, .8) !important;
}
.avatar-frame-rainbow .avatar-img {
box-shadow: 0 0 0 4px #ff4d6d, 0 0 26px 5px rgba(123, 92, 255, .7), 0 4px 15px rgba(0, 0, 0, .8) !important;
}
.avatar-frame-emerald .avatar-img {
box-shadow: 0 0 0 4px #2fbf71, 0 0 24px 3px rgba(47, 191, 113, .65), 0 4px 15px rgba(0, 0, 0, .8) !important;
}
/* --- Эффекты обложки --- */
.cover-wrapper { overflow: hidden; }
.cover-effect-dark img { filter: brightness(.62); }
.cover-effect-blur img { filter: blur(4px) brightness(.9); transform: scale(1.06); }
.cover-effect-warm img { filter: sepia(.28) saturate(1.25) brightness(1.05); }
.cover-effect-vignette::after,
.cover-effect-gradient::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
.cover-effect-vignette::after {
background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, .78) 100%);
}
.cover-effect-gradient::after {
background: linear-gradient(160deg, rgba(123, 92, 255, .34), transparent 45%, rgba(255, 77, 109, .3));
}
/* Кнопка «Украсить» на аватаре */
.avatar-decor-btn {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
height: 24px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--line-2);
background: rgba(10, 11, 13, .8);
color: #f7d774;
cursor: pointer;
z-index: 40;
transition: background .15s, transform .15s;
}
.avatar-decor-btn:hover { background: rgba(247, 215, 116, .22); transform: scale(1.08); }
.avatar-decor-btn .ic { width: 12px; height: 12px; fill: currentColor; }
/* --- Панель украшений --- */
.decor-box { width: min(520px, 94vw); }
.decor-body { padding: 16px 18px; }
.decor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 10px;
}
.decor-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px 8px;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--surface-2);
cursor: pointer;
font-family: inherit;
transition: border-color .15s, background .15s;
}
.decor-option:hover { border-color: var(--line-2); background: var(--surface-3); }
.decor-option.is-active { border-color: var(--accent-line); background: var(--accent-soft); }
.decor-option-name { font-size: 11.5px; color: var(--text); }
.decor-swatch {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 10px;
background: var(--surface-3);
overflow: hidden;
}
/* Превью аватара круглое — как сам аватар */
.decor-swatch.is-avatar { border-radius: 50%; }
.decor-swatch.is-cover { border-radius: 8px; }
.decor-swatch-ava {
display: block;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #4a5568, #2d3748);
}
.decor-swatch-cover {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3b4252, #2e3440);
}
/* Превью рамок */
.decor-swatch.avatar-frame-gold { box-shadow: inset 0 0 0 4px #f7d774; }
.decor-swatch.avatar-frame-neon { box-shadow: inset 0 0 0 4px #38e8ff; }
.decor-swatch.avatar-frame-fire { box-shadow: inset 0 0 0 4px #ff7a18; }
.decor-swatch.avatar-frame-aurora { box-shadow: inset 0 0 0 4px #7b5cff; }
.decor-swatch.avatar-frame-rainbow { box-shadow: inset 0 0 0 4px #ff4d6d; }
.decor-swatch.avatar-frame-emerald { box-shadow: inset 0 0 0 4px #2fbf71; }
/* Превью эффектов */
.decor-swatch.cover-effect-dark .decor-swatch-cover { filter: brightness(.58); }
.decor-swatch.cover-effect-blur .decor-swatch-cover { filter: blur(2px); }
.decor-swatch.cover-effect-warm .decor-swatch-cover { filter: sepia(.5) saturate(1.3); }
.decor-swatch.cover-effect-vignette .decor-swatch-cover { background: radial-gradient(ellipse at center, #3b4252 30%, #11151c 100%); }
.decor-swatch.cover-effect-gradient .decor-swatch-cover { background: linear-gradient(140deg, #7b5cff, #3b4252 50%, #ff4d6d); }
/* ============================================================
ФОТОГРАФИИ И АЛЬБОМЫ (в стиле ВК)
============================================================ */
.photos-card { padding: 16px; }
.photos-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.photos-actions .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
/* Сетка фотографий */
.photo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-top: 4px;
}
.photo-cell {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 7px;
overflow: hidden;
background: var(--surface-3);
cursor: pointer;
border: 0;
padding: 0;
}
.photo-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .18s, opacity .18s;
cursor: pointer;
}
.photo-cell:hover img { transform: scale(1.04); opacity: .88; }
/* Подпись поверх фото */
.photo-cell-title {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 18px 8px 7px;
background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
color: #fff;
font-size: 11.5px;
line-height: 1.3;
opacity: 0;
transition: opacity .18s;
pointer-events: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.photo-cell:hover .photo-cell-title { opacity: 1; }
/* Кнопки поверх фото */
.photo-cell-overlay {
position: absolute;
top: 6px;
right: 6px;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity .18s;
z-index: 2;
}
.photo-cell:hover .photo-cell-overlay { opacity: 1; }
.photo-cell-btn {
width: 26px;
height: 26px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(10, 11, 13, .78);
color: #fff;
cursor: pointer;
transition: background .14s;
}
.photo-cell-btn:hover { background: rgba(224, 108, 117, .85); }
.photo-cell-btn.cover:hover { background: rgba(74, 158, 255, .85); }
.photo-cell-btn .ic { width: 13px; height: 13px; }
/* Сетка альбомов */
.album-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 12px;
margin-top: 4px;
}
.album-card {
border-radius: 10px;
overflow: hidden;
background: var(--surface-2);
border: 1px solid var(--line);
cursor: pointer;
transition: border-color .15s, transform .15s;
display: flex;
flex-direction: column;
}
.album-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.album-card-cover {
position: relative;
aspect-ratio: 1 / 1;
background: var(--surface-3);
}
.album-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.album-card-empty {
width: 100%;
height: 100%;
display: grid;
place-items: center;
color: var(--muted-2);
}
.album-card-empty .ic { width: 30px; height: 30px; }
.album-card-del {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(10, 11, 13, .78);
color: #fff;
cursor: pointer;
opacity: 0;
transition: opacity .15s, background .15s;
}
.album-card:hover .album-card-del { opacity: 1; }
.album-card-del:hover { background: rgba(224, 108, 117, .9); }
.album-card-del .ic { width: 13px; height: 13px; }
.album-card-meta { padding: 9px 11px; }
.album-card-meta b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.album-card-meta small {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: var(--muted-2);
}
/* Шапка открытого альбома */
.album-detail-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.album-detail-title { flex: 1; min-width: 140px; }
.album-detail-title b {
display: block;
font-size: 15px;
color: var(--text-strong);
}
.album-detail-title small { font-size: 12px; color: var(--muted-2); }
.album-detail-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Модалки фото */
.photo-modal-box { width: min(440px, 94vw); }
.album-modal-body { padding: 16px 18px; }
.album-modal-body .mg-label { margin-top: 12px; }
.album-modal-body .mg-label:first-child { margin-top: 0; }
.album-modal-body .field { margin-top: 5px; }
.modal-foot {
display: flex;
gap: 8px;
justify-content: flex-end;
padding: 12px 18px 16px;
border-top: 1px solid var(--line);
}
/* Адаптив */
@media (max-width: 900px) {
.photo-grid { grid-template-columns: repeat(3, 1fr); }
.album-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
.photos-card { padding: 12px; }
.photos-actions { width: 100%; }
.photos-actions .btn-sm { flex: 1 1 auto; justify-content: center; }
.album-detail-actions { width: 100%; }
.album-detail-actions .btn-sm { flex: 1 1 auto; }
}
@media (max-width: 420px) {
.photo-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
.album-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
МОБИЛЬНАЯ ВЕРСИЯ (в стиле ВК)
============================================================ */
.mobile-nav,
.mobile-sheet-overlay { display: none; }
@media (max-width: 900px) {
html, body { overflow-x: hidden; }
/* --- Боковые колонки убираем, вместо них нижняя панель --- */
.sidebar,
.right-column { display: none !important; }
.site-wrapper {
display: block;
max-width: 100%;
padding: 10px 10px calc(66px + env(safe-area-inset-bottom, 0px));
gap: 0;
min-height: auto;
}
.main-area { display: block; padding: 0; gap: 0; }
.center-column,
.center-column.admin-center {
max-width: 100%;
width: 100%;
gap: 10px;
}
/* --- Шапка компактнее --- */
.header-inner { padding: 0 10px; gap: 8px; }
.header-logo { font-size: 16px; }
.header-logo .logo-mark { display: none; }
.header-search-global { display: none; }
.header-icon-btn { width: 38px; height: 38px; }
.header-avatar-btn img { width: 34px; height: 34px; }
/* --- Нижняя навигация --- */
.mobile-nav {
display: flex;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1500;
background: var(--surface);
border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mn-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 56px;
padding: 6px 2px;
border: 0;
background: none;
color: var(--muted);
font-family: inherit;
font-size: 10.5px;
line-height: 1;
text-decoration: none;
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mn-item .ic { width: 22px; height: 22px; }
.mn-item.active { color: var(--accent); }
.mn-badge {
position: absolute;
top: 6px;
left: 50%;
margin-left: 5px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: #e06c75;
color: #fff;
font-size: 10px;
line-height: 17px;
text-align: center;
font-weight: 700;
}
/* --- Шторка «Ещё» --- */
.mobile-sheet-overlay {
display: block;
position: fixed;
inset: 0;
z-index: 4000;
background: rgba(0, 0, 0, .62);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.mobile-sheet-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-sheet {
position: absolute;
left: 0; right: 0; bottom: 0;
max-height: 86vh;
overflow-y: auto;
background: var(--surface);
border-radius: 18px 18px 0 0;
padding: 8px 14px calc(20px + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.mobile-sheet-overlay.open .mobile-sheet { transform: translateY(0); }
.mobile-sheet-handle {
width: 40px; height: 4px;
margin: 6px auto 14px;
border-radius: 2px;
background: var(--line-2);
}
body.sheet-locked { overflow: hidden; }
.ms-user {
display: flex;
align-items: center;
gap: 12px;
padding: 0 0 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 14px;
}
.ms-user img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.ms-user b { display: block; font-size: 15px; color: var(--text-strong); }
.ms-user span { font-size: 12.5px; color: var(--muted); }
.ms-balance {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
border-radius: 20px;
background: var(--surface-2);
color: var(--accent);
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ms-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 84px;
padding: 12px 6px;
border-radius: 12px;
background: var(--surface-2);
color: var(--text);
font-size: 12px;
text-decoration: none;
text-align: center;
}
.ms-tile .ic { width: 24px; height: 24px; color: var(--accent); }
.ms-tile-admin .ic { color: #e06c75; }
.ms-exit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
padding: 14px;
border-radius: 12px;
background: rgba(224, 108, 117, .12);
color: #e06c75;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
/* --- Модалки: снизу на всю ширину --- */
.modal-overlay { padding: 0; align-items: flex-end; }
.modal-content,
.modal-box,
.mod-reason-box,
.admin-user-box,
.reauth-card,
.pin-card {
width: 100% !important;
max-width: 100% !important;
max-height: 94vh !important;
margin: 0 !important;
border-radius: 18px 18px 0 0 !important;
}
.modal-overlay { border-radius: 0; }
/* Пост-модалка: фото над комментариями */
.modal-content { flex-direction: column !important; }
.modal-photo,
.modal-photo img { max-height: 42vh !important; width: 100% !important; }
.modal-comments,
.modal-comments-body { width: 100% !important; }
/* --- Посты: на всю ширину экрана, как в ВК --- */
.post-card,
.wall-post,
.profile-info-card {
border-radius: 0;
margin-left: -10px;
margin-right: -10px;
border-left: 0;
border-right: 0;
}
.post-card { padding: 12px 12px 8px; }
.post-body { padding-left: 0; padding-right: 0; }
/* --- Вкладки: горизонтальный скролл --- */
.tabs-row,
#admin-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.tabs-row::-webkit-scrollbar,
#admin-tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex: 0 0 auto; white-space: nowrap; }
/* --- Админка на телефоне --- */
.admin-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
.admin-toolbar .admin-input,
.admin-toolbar .admin-select,
.admin-toolbar .btn-sm,
.admin-toolbar .admin-reset-btn { width: 100%; min-width: 0; flex: 1 1 auto; }
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { min-width: 560px; font-size: 12.5px; }
.admin-table .col-email { display: none; }
.admin-page-head { flex-direction: column; align-items: stretch; gap: 8px; }
.admin-session { justify-content: space-between; }
.admin-staff-grid { grid-template-columns: 1fr; }
.admin-actions-menu { min-width: 230px; }
.admin-section-hint { margin-bottom: 10px; }
/* --- Профиль --- */
.profile-header-card { border-radius: 0; margin-left: -10px; margin-right: -10px; }
.profile-cover { height: 130px; }
.profile-stats,
.profile-actions { flex-wrap: wrap; gap: 8px; }
/* --- Сообщения: список, чат поверх --- */
.messages-container {
height: calc(100vh - var(--header-h) - 76px);
border-radius: 0;
}
.dialogs-panel { width: 100% !important; max-width: 100% !important; }
.chat-panel:not(.mobile-show) { display: none; }
.btn-back { display: grid !important; }
body.chat-open .chat-panel {
display: flex;
position: fixed;
top: var(--header-h);
left: 0; right: 0; bottom: 0;
z-index: 1400;
background: var(--bg);
flex-direction: column;
height: auto;
}
body.chat-open .chat-panel .chat-messages { flex: 1; overflow-y: auto; }
.chat-input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* --- Формы: крупные поля под палец --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
font-size: 16px; /* iOS не зумит при фокусе */
min-height: 44px;
}
.btn, .btn-sm { min-height: 42px; }
/* --- Мелочи --- */
h1.page-title { font-size: 20px; }
.profile-info-card { padding: 14px; }
.guests-grid { gap: 6px; }
.guest-item { width: 62px; }
}
/* Очень узкие экраны */
@media (max-width: 380px) {
.ms-grid { grid-template-columns: repeat(2, 1fr); }
.mn-item span { font-size: 9.5px; }
.post-card { padding: 10px 10px 6px; }
}
/* ============================================================
КАЗНА САЙТА
============================================================ */
.treasury-stats {
margin-bottom: 12px;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: 8px;
}
.treasury-stats .admin-stat { padding: 8px 11px; gap: 2px; border-radius: 9px; }
.treasury-stats .admin-stat span { font-size: 10px; }
.treasury-stats .admin-stat b { font-size: 15px; }
.treasury-panel {
display: grid;
grid-template-columns: minmax(210px, 0.85fr) minmax(250px, 1.15fr);
gap: 14px;
padding: 13px 14px;
margin-bottom: 14px;
border-radius: 11px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.treasury-pick,
.treasury-opts {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.treasury-pick .me-row,
.treasury-opts .me-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.treasury-panel label { font-size: 11px; color: var(--muted); }
/* В вертикальных строках поле не должно растягиваться по высоте.
У .admin-input задан flex-basis 180px — в колонке это раздувает высоту. */
.treasury-panel .admin-input,
.treasury-panel .admin-select,
.admin-form-row .admin-input,
.admin-form-row .admin-select,
.market-edit-grid .admin-input,
.market-edit-grid .admin-select {
flex: 0 0 auto;
width: 100%;
height: 34px;
box-sizing: border-box;
}
.treasury-panel .admin-input,
.treasury-panel .admin-select {
padding: 0 10px;
font-size: 12.5px;
}
.treasury-panel select[size] {
height: auto;
min-height: 88px;
padding: 3px;
}
.treasury-panel select[size] option { padding: 4px 8px; border-radius: 5px; }
.treasury-panel select[size] option:checked {
background: var(--accent-soft);
color: var(--text-strong);
}
.treasury-panel .me-hint { font-size: 10.5px; }
.treasury-submit-row { margin-top: auto; }
.treasury-submit-row .btn-sm { width: 100%; }
.treasury-quick {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
}
.treasury-chip {
padding: 2px 9px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--surface-3);
color: var(--muted);
font-family: inherit;
font-size: 11px;
cursor: pointer;
transition: .14s;
}
.treasury-chip:hover { background: var(--surface-2); color: var(--text-strong); border-color: var(--line-2); }
.treasury-in { color: #7bd88f; font-weight: 700; }
.treasury-out { color: #e0a45c; font-weight: 700; }
.admin-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 14px;
}
.admin-pager-info { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
.treasury-panel { grid-template-columns: 1fr; }
.treasury-panel select[size] { min-height: 120px; }
}
/* --- Компактная таблица маркета --- */
.admin-table.is-compact {
width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 12.5px;
}
.admin-table.is-compact th,
.admin-table.is-compact td {
padding: 7px 9px;
vertical-align: middle;
}
.admin-table.is-compact th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--muted-2);
font-weight: 600;
}
.admin-table.is-compact th:nth-child(1) { width: auto; }
.admin-table.is-compact th:nth-child(2) { width: 94px; }
.admin-table.is-compact th:nth-child(3) { width: 68px; }
.admin-table.is-compact th:nth-child(4) { width: 86px; }
.admin-table.is-compact th:nth-child(5) { width: 80px; }
.admin-table.is-compact th:nth-child(6) { width: 104px; }
.admin-table .col-c { text-align: center; }
.admin-table .col-act { text-align: right; }
.admin-table.is-compact .market-cell { gap: 9px; }
.admin-table.is-compact .market-cell-body { min-width: 0; }
.admin-table.is-compact .market-cell-body strong {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-table.is-compact .market-cell-body small {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10.5px;
}
/* Кнопки-иконки в строке */
.row-actions {
display: inline-flex;
gap: 4px;
justify-content: flex-end;
}
.icon-btn {
width: 28px;
height: 28px;
padding: 0;
display: grid;
place-items: center;
border-radius: 7px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
cursor: pointer;
transition: background .14s, color .14s, border-color .14s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--line-2); }
.icon-btn.danger:hover { background: rgba(224, 108, 117, .16); border-color: rgba(224, 108, 117, .45); color: #e06c75; }
.icon-btn .ic { width: 15px; height: 15px; }
/* Метки состояния товара */
.mtag {
display: inline-block;
margin-top: 3px;
padding: 1px 7px;
border-radius: 20px;
font-size: 10px;
font-weight: 600;
}
.mtag-hidden { background: rgba(150, 150, 150, .16); color: #98a0ad; }
.mtag-out { background: rgba(224, 108, 117, .16); color: #e06c75; }
.mtag-low { background: rgba(224, 164, 92, .16); color: #e0a45c; }
/* --- Форма изменения товара --- */
.market-edit-box { width: min(560px, 95vw); }
.market-edit-body { padding: 16px 18px; }
.market-edit-preview {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 14px;
margin-bottom: 16px;
border-radius: 11px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.market-edit-cat { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.market-edit-stats { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.market-edit-stats b { color: var(--text-strong); }
.market-edit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
}
.me-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.me-row.me-wide { grid-column: 1 / -1; }
.me-row label { font-size: 11.5px; color: var(--muted); }
.me-row .field { width: 100%; margin: 0; }
.me-hint { font-size: 10.5px; color: var(--muted-2); }
.me-row.me-check { grid-column: 1 / -1; }
.me-toggle {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
border-radius: 9px;
background: var(--surface-2);
border: 1px solid var(--line);
cursor: pointer;
font-size: 12.5px;
color: var(--text);
}
.me-toggle input { width: auto; margin: 0; flex: none; }
.me-error {
margin-top: 13px;
padding: 9px 12px;
border-radius: 8px;
background: rgba(224, 108, 117, .14);
border: 1px solid rgba(224, 108, 117, .38);
color: #f08a92;
font-size: 12.5px;
}
@media (max-width: 700px) {
.market-edit-grid { grid-template-columns: 1fr; }
.admin-table.is-compact th,
.admin-table.is-compact td { padding: 6px 7px; }
.admin-table.is-compact th:nth-child(2),
.admin-table.is-compact td:nth-child(2) { display: none; }
.admin-table.is-compact th:nth-child(5),
.admin-table.is-compact td:nth-child(5) { display: none; }
.admin-table.is-compact th:nth-child(1) { width: auto; }
.admin-table.is-compact th:nth-child(3) { width: 52px; }
.admin-table.is-compact th:nth-child(4) { width: 68px; }
.admin-table.is-compact th:nth-child(6) { width: 92px; }
.admin-table.is-compact .market-cell { gap: 7px; }
.icon-btn { width: 26px; height: 26px; }
.icon-btn .ic { width: 14px; height: 14px; }
}
@media (max-width: 480px) {
.admin-table.is-compact th:nth-child(4),
.admin-table.is-compact td:nth-child(4) { display: none; }
.admin-table.is-compact th:nth-child(3) { width: 48px; }
.admin-table.is-compact th:nth-child(6) { width: 88px; }
.market-thumb-sm { width: 30px; height: 30px; }
}
/* ============================================================
ПЕРЕПИСКА: ВСЕ СООБЩЕНИЯ СЛЕВА, АВАТАРКА И ИМЯ У КАЖДОГО
============================================================ */
.chat-messages {
gap: 0 !important;
padding: 16px 18px 18px !important;
background: var(--bg) !important;
}
/* Все сообщения — слева, одинаково */
.vk-msg {
position: relative !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
max-width: 78% !important;
margin: 12px 0 0 0 !important;
align-self: flex-start !important;
padding: 0 !important;
}
.vk-msg.mine,
.vk-msg.theirs { align-self: flex-start !important; }
.vk-msg.first:first-child { margin-top: 0 !important; }
/* Аватарка — у каждого сообщения */
.vk-msg-avatar {
position: static !important;
flex: 0 0 auto !important;
margin: 0 !important;
z-index: 1;
}
.vk-msg-avatar img {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
border: 1px solid var(--line) !important;
object-fit: cover !important;
cursor: pointer;
background: var(--surface-3) !important;
display: block;
}
.vk-msg-body {
position: relative !important;
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100%;
}
/* Имя и фамилия над сообщением */
.vk-msg-author {
display: flex !important;
align-items: center;
gap: 5px;
margin: 0 0 4px 0 !important;
font-size: 13px !important;
font-weight: 600;
color: var(--text-strong) !important;
line-height: 1.2;
}
.vk-msg.mine .vk-msg-author { color: #a3b4cd !important; }
/* Пузырь — сжимается по содержимому */
.vk-msg-text {
position: relative !important;
display: inline-block !important;
width: auto !important;
max-width: 100% !important;
overflow: hidden;
padding: 7px 12px 6px !important;
border-radius: 10px !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
box-shadow: none !important;
color: var(--text) !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-align: left !important;
word-wrap: break-word;
}
.vk-msg.mine .vk-msg-text {
background: #1e2734 !important;
border-color: rgba(125, 148, 184, .34) !important;
color: var(--text-strong) !important;
}
/* Только фото — пузырь ровно под картинку */
.vk-msg-text.only-image { padding: 3px !important; }
.vk-msg-content {
font-size: 14px !important;
line-height: 1.45 !important;
white-space: pre-wrap;
word-break: break-word;
}
/* Время и статус — в конце сообщения, справа */
.vk-msg-time {
float: right !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
width: auto !important;
margin: 6px -4px -1px 12px !important;
padding: 0 !important;
font-size: 11px !important;
line-height: 1 !important;
color: var(--muted-2) !important;
white-space: nowrap;
user-select: none;
}
.vk-msg.mine .vk-msg-time { color: #8fa0b8 !important; }
.vk-msg-time.with-attach { margin-top: 5px !important; }
.vk-edited { color: inherit !important; opacity: .75; margin-right: 2px !important; font-size: 10px !important; }
/* Статус «отправлено» / «прочитано» */
.vk-status {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
font-size: 10.5px !important;
color: var(--muted-2) !important;
letter-spacing: 0 !important;
}
.vk-status-icon { font-size: 11px; letter-spacing: -2px; line-height: 1; }
.vk-status.is-read { color: var(--accent) !important; }
.vk-msg.mine .vk-status { color: #8fa0b8 !important; }
.vk-msg.mine .vk-status.is-read { color: #9db6db !important; }
/* Если только фото — время плашкой поверх снимка */
.vk-msg-text.only-image .vk-msg-time {
position: absolute !important;
right: 8px !important;
bottom: 8px !important;
top: auto !important;
left: auto !important;
float: none !important;
margin: 0 !important;
padding: 3px 8px !important;
border-radius: 10px !important;
background: rgba(0, 0, 0, .58) !important;
color: #fff !important;
}
.vk-msg-text.only-image .vk-status { color: rgba(255, 255, 255, .8) !important; }
.vk-msg-text.only-image .vk-status.is-read { color: #cfe0f7 !important; }
/* Действия — справа от сообщения, при наведении */
.vk-msg .vk-msg-actions {
position: absolute !important;
top: 24px !important;
left: calc(100% + 8px) !important;
right: auto !important;
transform: none !important;
display: flex !important;
flex-direction: row !important;
gap: 2px !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
opacity: 0 !important;
transition: opacity .13s !important;
z-index: 3;
}
.vk-msg:hover .vk-msg-actions { opacity: 1 !important; }
.vk-action-btn {
width: 26px !important;
height: 26px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 1px solid var(--line) !important;
border-radius: 50% !important;
background: var(--surface-2) !important;
color: var(--muted) !important;
cursor: pointer !important;
transition: .14s;
}
.vk-action-btn:hover { background: var(--surface-3) !important; color: var(--text-strong) !important; border-color: var(--line-2) !important; }
/* Цитата ответа */
.vk-reply-quote {
border-left: 2px solid var(--accent) !important;
padding: 1px 0 1px 8px !important;
margin: -2px 0 5px !important;
background: none !important;
border-radius: 0 !important;
cursor: pointer;
}
.vk-reply-author { font-size: 12px !important; color: var(--accent) !important; font-weight: 600; }
.vk-reply-text { font-size: 12px !important; color: var(--muted) !important; }
.vk-msg.mine .vk-reply-author { color: #a8bcd8 !important; }
.vk-msg.mine .vk-reply-text { color: rgba(163, 180, 205, .78) !important; }
/* Пересланное */
.vk-forwarded {
border-left: 2px solid var(--line-2) !important;
padding: 1px 0 1px 8px !important;
margin: -2px 0 5px !important;
background: none !important;
border-radius: 0 !important;
}
.vk-forwarded-label {
font-size: 12px !important;
color: var(--muted) !important;
display: flex; align-items: center; gap: 4px;
}
.vk-forwarded-text { font-size: 12.5px !important; color: var(--text) !important; margin-top: 1px; }
/* ============================================================
ФОТО В СООБЩЕНИИ — ЦЕЛИКОМ, БЕЗ ОБРЕЗКИ
============================================================ */
.chat-image {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 380px !important;
max-height: 460px !important;
object-fit: contain !important;
border-radius: 8px !important;
border: 0 !important;
margin: 3px 0 1px !important;
cursor: pointer;
background: var(--surface-3);
}
.vk-msg-text.only-image .chat-image {
min-width: 180px !important;
max-width: 380px !important;
max-height: 460px !important;
margin: 0 !important;
}
@media (max-width: 900px) {
.chat-image,
.vk-msg-text.only-image .chat-image { max-width: 290px !important; max-height: 380px !important; }
.vk-msg { max-width: 88% !important; }
}
@media (max-width: 640px) {
.chat-image,
.vk-msg-text.only-image .chat-image { max-width: 210px !important; max-height: 300px !important; min-width: 120px !important; }
.vk-msg-avatar img { width: 34px !important; height: 34px !important; }
.vk-msg-author { font-size: 12px !important; }
.vk-msg { gap: 8px !important; max-width: 100% !important; }
}
.vk-file {
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 7px 10px;
margin: 3px 0 1px;
border-radius: 8px;
background: var(--surface-3);
color: inherit;
text-decoration: none;
font-size: 13px;
}
.vk-file:hover { background: var(--surface-hover); }
/* Плашка с датой — раз в день, по центру */
.chat-date-divider {
align-self: center !important;
width: auto !important;
max-width: 100%;
padding: 5px 14px !important;
margin: 18px auto 14px !important;
border-radius: 14px !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
color: var(--muted) !important;
font-size: 12px !important;
font-weight: 500;
letter-spacing: .01em !important;
text-align: center !important;
}
.chat-date-divider:first-child { margin-top: 0 !important; }
/* Поле ввода и кнопки */
.chat-input-area {
gap: 6px !important;
padding: 9px 12px !important;
border-top: 1px solid var(--line) !important;
background: var(--surface) !important;
}
.chat-input-area input[type="text"] {
border-radius: 8px !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
color: var(--text) !important;
font-size: 14px !important;
padding: 9px 12px !important;
}
.chat-input-area input[type="text"]:focus { border-color: var(--line-2) !important; background: var(--surface-3) !important; }
.chat-input-area input[type="text"]::placeholder { color: var(--muted-2) !important; }
.btn-attach, .btn-emoji {
width: 36px !important;
height: 36px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 1px solid var(--line) !important;
border-radius: 50% !important;
background: var(--surface-2) !important;
color: var(--muted) !important;
cursor: pointer;
transition: .14s;
}
.btn-attach:hover, .btn-emoji:hover { background: var(--surface-3) !important; color: var(--text-strong) !important; border-color: var(--line-2) !important; }
.btn-send {
width: 38px !important;
height: 38px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 1px solid var(--accent-line) !important;
border-radius: 50% !important;
background: var(--accent-soft) !important;
color: var(--accent) !important;
cursor: pointer;
transition: .14s;
}
.btn-send:hover { background: rgba(125, 148, 184, .24) !important; color: var(--text-strong) !important; }
/* ============================================================
ОТСТУПЫ МЕЖДУ СООБЩЕНИЯМИ
============================================================ */
.vk-msg.first { margin-top: 18px !important; }
.vk-msg.first:first-child { margin-top: 0 !important; }
.vk-msg.mid { margin-top: 3px !important; }
/* Пустая аватарка держит отступ у продолжений серии */
.vk-msg-avatar.is-empty {
width: 40px !important;
height: 40px !important;
visibility: hidden !important;
}
/* ============================================================
ПАНЕЛЬ ВЛОЖЕНИЙ — видна только когда есть что показать
============================================================ */
#attachment-preview-chat {
display: none !important;
align-items: center !important;
gap: 8px !important;
padding: 9px 12px !important;
background: var(--surface) !important;
border-top: 1px solid var(--line) !important;
color: var(--text) !important;
font-size: 12.5px !important;
}
#attachment-preview-chat.is-visible {
display: flex !important;
flex-wrap: wrap !important;
}
.attach-loading { font-size: 12.5px; color: var(--muted); }
.attach-strip {
display: flex;
gap: 6px;
flex-wrap: wrap;
width: 100%;
}
.attach-chip {
position: relative;
width: 62px;
height: 62px;
flex: none;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface-2);
}
.attach-chip.is-image { cursor: zoom-in; }
.attach-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-chip .attach-doc { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); }
.attach-remove {
position: absolute;
top: 2px;
right: 2px;
width: 19px;
height: 19px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .72);
color: #fff;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.attach-remove:hover { background: #e06c75; }
.attach-meta {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
font-size: 11.5px;
color: var(--muted-2);
}
.attach-meta b { color: var(--text-strong); }
.attach-hint-text { color: var(--muted); }
.attach-clear {
margin-left: auto;
padding: 3px 10px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
font-family: inherit;
font-size: 11px;
cursor: pointer;
transition: .14s;
}
.attach-clear:hover { color: #e06c75; border-color: rgba(224, 108, 117, .4); }
/* ============================================================
СЕТКА ФОТОГРАФИЙ В СООБЩЕНИИ
============================================================ */
.chat-photos {
display: grid;
gap: 3px;
margin: 4px 0 1px;
max-width: 380px;
width: 100%;
}
.chat-photos.n2,
.chat-photos.n3,
.chat-photos.n4 { grid-template-columns: 1fr 1fr; }
.chat-photo {
position: relative;
padding: 0;
border: 0;
border-radius: 6px;
overflow: hidden;
background: var(--surface-3);
cursor: zoom-in;
aspect-ratio: 1 / 1;
display: block;
}
.chat-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity .15s;
}
.chat-photo:hover img { opacity: .87; }
.chat-photos-more {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(0, 0, 0, .55);
color: #fff;
font-size: 17px;
font-weight: 600;
}
/* При трёх фото первое — на всю ширину */
.chat-photos.n3 .chat-photo:first-child {
grid-column: 1 / -1;
aspect-ratio: 2 / 1;
}
@media (max-width: 640px) {
.chat-photos { max-width: 240px; }
.chat-photos.n3 .chat-photo:first-child { aspect-ratio: 3 / 2; }
.attach-chip { width: 54px; height: 54px; }
}
/* ============================================================
ПАНЕЛЬ СМАЙЛИКОВ: обычные + купленные в маркете
============================================================ */
.emoji-panel-v2 {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: 344px;
max-width: calc(100vw - 28px);
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .58);
overflow: hidden;
z-index: 1300;
}
.emoji-tabs {
display: flex;
flex: none;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
}
.emoji-tab {
flex: 1;
padding: 9px 6px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--muted);
font-family: inherit;
font-size: 12px;
cursor: pointer;
transition: .14s;
white-space: nowrap;
}
.emoji-tab:hover { background: var(--surface-3); color: var(--text); }
.emoji-tab.active {
color: var(--text-strong);
border-bottom-color: var(--accent);
font-weight: 600;
}
.emoji-body {
height: 236px;
overflow-y: auto;
padding: 8px;
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
}
.emoji-cell {
aspect-ratio: 1 / 1;
padding: 0;
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 5px;
background: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.emoji-cell:hover { background: var(--surface-3); border-color: var(--line); }
.emoji-cell.emoji-owned { font-size: 22px; }
.emoji-cell.em-rare { border-color: rgba(74, 158, 255, .35); }
.emoji-cell.em-epic { border-color: rgba(169, 123, 255, .35); }
.emoji-cell.em-legendary { border-color: rgba(247, 215, 116, .45); }
.emoji-gif-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.emoji-gif {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface-2);
cursor: pointer;
font-family: inherit;
transition: .14s;
}
.emoji-gif:hover { border-color: var(--line-2); background: var(--surface-3); }
.emoji-gif img { width: 100%; height: 58px; object-fit: contain; display: block; }
.emoji-gif span {
font-size: 10.5px;
color: var(--muted);
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.emoji-gif.em-rare { border-top: 2px solid #4a9eff; }
.emoji-gif.em-epic { border-top: 2px solid #a97bff; }
.emoji-gif.em-legendary { border-top: 2px solid #f7d774; }
.emoji-empty {
padding: 28px 16px;
text-align: center;
font-size: 12.5px;
color: var(--muted-2);
line-height: 1.6;
}
.emoji-empty a { color: var(--accent); }
@media (max-width: 900px) {
.emoji-panel-v2 { width: calc(100vw - 24px); left: -4px; }
.emoji-body { height: 210px; }
.emoji-grid { grid-template-columns: repeat(7, 1fr); }
.vk-msg { max-width: 82%; }
}
/* Счётчик в кнопке раздела */
.market-section .ms-num {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 20px;
background: rgba(255, 255, 255, .08);
font-size: 10.5px;
font-weight: 600;
vertical-align: 1px;
}
.market-section.active .ms-num { background: rgba(255, 255, 255, .16); }
.market-section .ms-num:empty { display: none; }
/* Разделы в управлении */
.admin-sections { margin-bottom: 14px; }
/* --- Миниатюры товаров (таблицы админки и маркета) --- */
.market-thumb {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
flex: none;
border-radius: 10px;
background: var(--surface-3);
border: 1px solid var(--line);
overflow: hidden;
vertical-align: middle;
}
.market-thumb-sm { width: 34px; height: 34px; border-radius: 8px; }
.market-thumb-md { width: 52px; height: 52px; }
.market-thumb-lg { width: 68px; height: 68px; border-radius: 12px; }
.market-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Рамка: кружок с цветным кольцом */
.market-thumb-frame {
border: 0;
background: transparent;
overflow: visible;
border-radius: 50%;
}
.market-frame-ring {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, #4a5568, #2d3748);
}
.market-frame-ring.avatar-frame-gold { box-shadow: inset 0 0 0 3px #f7d774, 0 0 8px rgba(247, 215, 116, .55); }
.market-frame-ring.avatar-frame-neon { box-shadow: inset 0 0 0 3px #38e8ff, 0 0 8px rgba(56, 232, 255, .6); }
.market-frame-ring.avatar-frame-fire { box-shadow: inset 0 0 0 3px #ff7a18, 0 0 8px rgba(255, 122, 24, .6); }
.market-frame-ring.avatar-frame-aurora { box-shadow: inset 0 0 0 3px #7b5cff, 0 0 8px rgba(46, 213, 180, .55); }
.market-frame-ring.avatar-frame-rainbow { box-shadow: inset 0 0 0 3px #ff4d6d, 0 0 8px rgba(123, 92, 255, .6); }
.market-frame-ring.avatar-frame-emerald { box-shadow: inset 0 0 0 3px #2fbf71, 0 0 8px rgba(47, 191, 113, .55); }
.market-thumb-emoji { font-size: 22px; line-height: 1; }
.market-thumb-empty { color: var(--muted-2); }
.market-thumb-empty .ic { width: 20px; height: 20px; }
/* Ячейка «товар» в таблице: миниатюра + название */
.market-cell {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.market-cell-body { min-width: 0; }
.market-cell-body strong {
display: block;
font-size: 13.5px;
color: var(--text-strong);
line-height: 1.3;
}
.market-cell-body small {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--muted-2);
line-height: 1.35;
}
/* ============================================================
АДМИНКА: маркет
============================================================ */
.admin-market-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.admin-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 11px 13px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.admin-stat span { font-size: 11px; color: var(--muted-2); }
.admin-stat b { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.admin-stat.warn b { color: #e0a45c; }
.admin-stat.good b { color: #7bd88f; }
.admin-market-new {
margin-bottom: 16px;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--surface-2);
overflow: hidden;
}
.admin-market-new > summary {
padding: 12px 15px;
cursor: pointer;
font-size: 13.5px;
font-weight: 600;
color: var(--text-strong);
list-style: none;
user-select: none;
}
.admin-market-new > summary::-webkit-details-marker { display: none; }
.admin-market-new > summary::before {
content: '+';
display: inline-block;
width: 16px;
color: var(--accent);
font-weight: 700;
}
.admin-market-new[open] > summary::before { content: '−'; }
.admin-market-new[open] > summary { border-bottom: 1px solid var(--line); }
.admin-market-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 11px 13px;
padding: 15px;
}
.admin-form-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.admin-form-row label { font-size: 11.5px; color: var(--muted); }
.admin-form-row .admin-input,
.admin-form-row .admin-select { width: 100%; }
.admin-cell-actions { white-space: nowrap; }
.admin-cell-actions .btn-sm + .btn-sm { margin-left: 4px; }
.admin-table td small { font-size: 11px; }
@media (max-width: 900px) {
.admin-market-stats { grid-template-columns: repeat(3, 1fr); }
.admin-stat b { font-size: 15px; }
.admin-market-form { grid-template-columns: 1fr; }
}
/* ============================================================
МАРКЕТ
============================================================ */
.market-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.market-head .page-title { margin: 0; }
.market-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.market-balance {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text);
text-decoration: none;
font-size: 12.5px;
transition: border-color .15s, color .15s;
}
.market-balance:hover { border-color: var(--accent-line); color: var(--text-strong); }
.market-balance b { font-size: 15px; color: #f7d774; }
.market-balance span { color: var(--muted); }
.market-balance .ic { color: var(--muted); }
/* Разделы */
.market-sections {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.market-section {
padding: 7px 15px;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--muted);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: .14s;
}
.market-section:hover { background: var(--surface-3); color: var(--text); }
.market-section.active {
background: var(--accent-soft);
border-color: var(--accent-line);
color: var(--text-strong);
font-weight: 600;
}
/* Сетка товаров */
.market-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
gap: 14px;
}
.market-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 13px;
background: var(--surface-2);
border: 1px solid var(--line);
overflow: hidden;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
.market-card:hover {
transform: translateY(-2px);
border-color: var(--line-2);
box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
}
.market-card.is-sold-out { opacity: .62; }
.market-card.is-sold-out:hover { transform: none; box-shadow: none; }
.market-card.is-equipped { border-color: var(--accent-line); }
/* Обводка по редкости */
.rarity-border-common { border-top: 3px solid #59606d; }
.rarity-border-rare { border-top: 3px solid #4a9eff; }
.rarity-border-epic { border-top: 3px solid #a97bff; }
.rarity-border-legendary { border-top: 3px solid #f7d774; }
.market-visual {
height: 132px;
display: grid;
place-items: center;
background: var(--surface-3);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.market-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-visual .decor-swatch { width: 76px; height: 76px; background: none; }
.market-visual .decor-swatch-ava { width: 60px; height: 60px; }
.market-visual-emoji { font-size: 52px; line-height: 1; }
.market-visual-empty { color: var(--muted-2); }
.market-visual-empty .ic { width: 44px; height: 44px; }
.market-card-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 13px 14px;
flex: 1;
}
.market-card-top { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.market-card h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-strong);
line-height: 1.3;
}
.market-desc {
font-size: 11.5px;
color: var(--muted-2);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.market-price {
font-size: 16px;
font-weight: 700;
color: #f7d774;
margin-top: auto;
}
.market-price span { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.market-stock {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 11.5px;
color: var(--muted);
}
.market-stock b { color: var(--text-strong); }
.market-stock.is-out { color: #e06c75; font-weight: 600; }
.market-bar {
display: block;
height: 4px;
border-radius: 3px;
background: var(--surface-3);
overflow: hidden;
}
.market-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.market-buy { width: 100%; margin-top: 4px; }
.market-buy[disabled] { opacity: .6; cursor: not-allowed; }
.market-soldout-tag {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
padding: 4px 10px;
border-radius: 20px;
background: rgba(224, 108, 117, .92);
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
/* Метки редкости */
.rarity-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 600;
border: 1px solid transparent;
}
.rarity-common { color: #98a0ad; background: rgba(89, 96, 109, .18); border-color: rgba(89, 96, 109, .5); }
.rarity-rare { color: #6fb4ff; background: rgba(74, 158, 255, .14); border-color: rgba(74, 158, 255, .45); }
.rarity-epic { color: #bda3ff; background: rgba(169, 123, 255, .15); border-color: rgba(169, 123, 255, .48); }
.rarity-legendary { color: #f7d774; background: rgba(247, 215, 116, .14); border-color: rgba(247, 215, 116, .5); }
/* Рюкзак */
.market-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
margin-top: 4px;
}
.market-actions .btn { flex: 1 1 auto; white-space: nowrap; }
.market-worn {
padding: 3px 9px;
border-radius: 20px;
background: rgba(47, 191, 113, .15);
border: 1px solid rgba(47, 191, 113, .45);
color: #7bd88f;
font-size: 11px;
font-weight: 600;
}
.market-from { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
/* Таблица в управлении */
.admin-table-wrap { overflow-x: auto; }
.admin-table .row-muted { opacity: .55; }
.admin-table .rarity-badge { white-space: nowrap; }
@media (max-width: 900px) {
.market-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.market-visual { height: 108px; }
.market-visual .decor-swatch { width: 62px; height: 62px; }
.market-visual .decor-swatch-ava { width: 48px; height: 48px; }
.market-balance { width: 100%; justify-content: center; }
.market-sections { gap: 5px; }
.market-section { padding: 6px 12px; font-size: 12.5px; }
}
@media (max-width: 420px) {
.market-grid { grid-template-columns: repeat(2, 1fr); }
.market-card h3 { font-size: 13px; }
.market-price { font-size: 15px; }
}
/* ============================================================
ПОЛЕ ПОИСКА В ШАПКЕ — не должно наследовать общие стили форм
(общий блок input[type=...] идёт ниже по файлу и при равной
специфичности перебивал оформление плашки)
============================================================ */
.header-search input,
.header-search input[type="text"],
.header-search input[type="search"] {
flex: 1;
min-width: 0;
width: auto;
height: auto;
max-height: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--text);
font-family: inherit;
font-size: 13.5px;
line-height: 1.2;
outline: none;
transition: none;
}
.header-search input:focus,
.header-search input[type="text"]:focus,
.header-search input[type="search"]:focus {
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
outline: none;
}
.header-search input::placeholder { color: var(--muted-2); }
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* ============================================================
ФИНАЛЬНЫЕ ПРАВИЛА ШАПКИ ПРОФИЛЯ
(перекрывают устаревшие правила выше)
============================================================ */
/* Кнопки на обложке скрыты, пока не наведёшь мышку */
.cover-wrapper .cover-actions {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease;
}
.cover-wrapper:hover .cover-actions,
.cover-wrapper:focus-within .cover-actions {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0);
}
/* На тач-устройствах наведения нет — кнопки видны всегда */
@media (hover: none) {
.cover-wrapper .cover-actions {
opacity: 1 !important;
pointer-events: auto !important;
transform: none;
}
}
/* Лайк аватара — в левом верхнем углу, чтобы не мешать загрузке и украшению */
.avatar-like-wrap {
left: 4px;
top: 4px;
bottom: auto;
transform: none;
}
/* Кнопки аватара: рамка-рамкой, но без наложений */
.avatar-decor-btn { top: 4px; right: 4px; }
.avatar-upload-btn { bottom: 4px; right: 4px; }
/* Компактнее, чтобы влезало на 96px */
.avatar-like-wrap .obj-like {
padding: 2px 7px;
font-size: 11px;
gap: 4px;
}
.avatar-like-wrap .obj-like .ic { width: 11px; height: 11px; }
/* Кнопки на обложке не должны перекрывать лайк */
.cover-like-wrap {
right: auto;
left: 12px;
top: 12px;
bottom: auto;
z-index: 70;
}
.cover-wrapper .cover-actions { z-index: 80; }
/* Своя обложка: кнопки тоже по наведению, но чуть заметнее */
.cover-wrapper:hover #cover-actions { opacity: 1; }
/* На мобильных шапка: лайк аватара не выезжает за границы */
@media (max-width: 900px) {
.avatar-like-wrap { left: 2px; top: 2px; }
.avatar-decor-btn { width: 22px; height: 22px; }
.obj-like-sm { padding: 2px 6px; font-size: 10.5px; }
}
/* ============================================================
УСТАНОВКА ПРИЛОЖЕНИЯ (PWA)
============================================================ */
.pwa-install {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 4000;
width: min(560px, calc(100vw - 24px));
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: var(--surface-2);
border: 1px solid var(--line-2);
box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
animation: pwa-in .28s ease;
}
@keyframes pwa-in {
from { opacity: 0; transform: translate(-50%, 14px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.pwa-install-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; display: block; }
.pwa-install-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-install-text b { font-size: 13.5px; color: var(--text-strong); }
.pwa-install-text span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.pwa-install-yes {
flex: none;
padding: 9px 16px;
border-radius: 8px;
border: 1px solid var(--accent-line);
background: var(--accent-soft);
color: var(--accent);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: .14s;
}
.pwa-install-yes:hover { background: rgba(125, 148, 184, .24); color: var(--text-strong); }
.pwa-install-no {
flex: none;
width: 28px;
height: 28px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: none;
color: var(--muted-2);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.pwa-install-no:hover { background: var(--surface-3); color: var(--text); }
@media (max-width: 900px) {
.pwa-install { bottom: calc(var(--dock-h) + 12px); padding: 10px 12px; }
.pwa-install-text span { display: none; }
}
/* Подсказка по установке на iPhone */
.pwa-install-ios { align-items: flex-start; }
.pwa-ios-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pwa-ios-step {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--muted);
line-height: 1.35;
}
.pwa-ios-step i {
flex: none;
width: 15px;
height: 15px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
font-size: 9.5px;
font-style: normal;
font-weight: 700;
}
.pwa-ios-share { width: 13px; height: 13px; flex: none; color: var(--accent); }
@media (max-width: 900px) {
.pwa-install-text span { display: block; }
.pwa-ios-step { font-size: 11px; }
}
/* ============================================================
МОБИЛЬНАЯ УДОБСТВО: крупные зоны касания
============================================================
Замер показал: на телефоне 81 элемент мельче 40px.
Пальцем в такую цель попасть трудно. Увеличиваем до 44px —
это рекомендованный минимум для касания (Apple и Google).
============================================================ */
@media (max-width: 900px) {
/* --- Кнопки в шапке --- */
.header-icon-btn {
width: 44px !important;
height: 44px !important;
}
.header-avatar-btn {
min-width: 46px !important;
min-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.header-avatar-btn img {
width: 36px !important;
height: 36px !important;
}
/* Логотип — выше, чтобы легко попасть */
.header-logo {
display: inline-flex !important;
align-items: center !important;
min-height: 44px !important;
padding: 0 8px !important;
margin-left: -8px !important;
}
/* --- Вкладки: лента, маркет, закладки, сообщества --- */
.feed-tab,
.tab-btn,
.market-section,
.bm-tab {
min-height: 44px !important;
padding-top: 11px !important;
padding-bottom: 11px !important;
}
/* --- Кнопки под постами и фото --- */
.obj-like,
.obj-action,
.post-action,
.icon-btn {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* --- Кнопки, которые были узкими --- */
.btn-new-chat {
min-width: 44px !important;
min-height: 44px !important;
}
/* --- Строки списков: друзья, диалоги, гости --- */
.ms-item,
.dialog-item,
.friend-row,
.guest-row,
.notif-row {
min-height: 52px !important;
}
/* --- Нижнее меню: подписи чуть крупнее, зона на всю высоту --- */
.mn-item {
min-height: 58px !important;
padding: 4px 0 !important;
}
.mn-item span,
.mn-label {
font-size: 11px !important;
line-height: 1.2 !important;
}
.mn-item svg,
.mn-item .ic {
width: 22px !important;
height: 22px !important;
}
/* --- Отзывчивость нажатий --- */
a, button, [onclick], select, input[type="checkbox"] {
-webkit-tap-highlight-color: rgba(125, 148, 184, .18);
touch-action: manipulation;
}
/* --- Поля ввода удобнее для пальца --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
min-height: 44px;
font-size: 16px !important; /* меньше 16px — телефон зумит при фокусе */
}
/* --- Читаемость мелкого текста --- */
.vk-msg-time,
.chat-date-divider,
.attach-meta,
.empty {
font-size: 11px !important;
}
}
/* ============================================================
МОБИЛЬНАЯ УДОБСТВО: добиваем оставшиеся мелкие кнопки
============================================================ */
@media (max-width: 900px) {
/* Обновить ленту */
.feed-refresh {
min-width: 44px !important;
min-height: 44px !important;
}
/* Кнопки на профиле: украшение аватара, инфо, меню */
.avatar-decor-btn,
.info-btn,
.dropdown-btn,
.cover-like-wrap button,
.profile-action-btn {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Вкладки фотографий на профиле */
.photos-tab {
min-height: 44px !important;
padding-top: 11px !important;
padding-bottom: 11px !important;
}
/* Лайк под записью на стене */
.like-btn,
.wall-like,
.wall-action {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Имя автора записи — ссылка, но попадать должно быть легко */
.wall-post-author-name,
.post-author-name,
.author-link {
display: inline-flex !important;
align-items: center !important;
min-height: 34px !important;
}
/* Вкладки и сортировка в музыке */
.music-tab {
min-height: 44px !important;
padding-top: 11px !important;
padding-bottom: 11px !important;
}
.m-sort-btn {
min-height: 40px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Баланс в панели «Ещё» */
.ms-balance,
.ms-item {
min-height: 50px !important;
display: flex !important;
align-items: center !important;
}
/* Ссылки в тексте — увеличиваем зону нажатия по вертикали */
.profile-info-card a,
.admin-center a {
display: inline-flex !important;
align-items: center !important;
min-height: 32px !important;
}
}
/* ============================================================
ЧАТ НА ТЕЛЕФОНЕ: пишем без помех
============================================================
Было: нижнее меню висит поверх экрана и закрывало поле ввода —
написать сообщение было невозможно. Теперь при открытом чате
меню убирается, а переписка занимает весь экран.
============================================================ */
@media (max-width: 900px) {
/* Чат открыт — нижнее меню и его отступ убираем совсем */
body.chat-open .mobile-nav { display: none !important; }
body.chat-open .site-wrapper { padding-bottom: 0 !important; }
body.chat-open { padding-bottom: 0 !important; overflow: hidden; }
/* Чат занимает всю высоту экрана под шапкой */
body.chat-open #chat-active {
display: flex !important;
flex-direction: column !important;
height: calc(100dvh - var(--header-h)) !important;
max-height: calc(100dvh - var(--header-h)) !important;
overflow: hidden !important;
}
/* Переписка — прокручивается, занимает всё свободное место */
body.chat-open #chat-active #chat-messages {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Поле ввода — всегда внизу, поверх переписки */
body.chat-open .chat-input-area {
flex: 0 0 auto !important;
position: sticky;
bottom: 0;
z-index: 30;
background: var(--surface) !important;
border-top: 1px solid var(--line) !important;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
gap: 6px !important;
}
/* Поле ввода растягивается, кнопки не сжимаются */
body.chat-open #message-input {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
}
body.chat-open .chat-input-area .btn-send,
body.chat-open .chat-input-area .btn-emoji,
body.chat-open .chat-input-area .btn-attach {
flex: 0 0 auto !important;
}
/* Когда чат открыт — список диалогов убираем, он не нужен */
body.chat-open .dialogs-panel,
body.chat-open .chat-sidebar,
body.chat-open .chat-list {
display: none !important;
}
/* Сама страница чата без лишней прокрутки */
body.chat-open .center-column { height: auto !important; }
/* Подсказка свайпом закрыть чат */
body.chat-open #chat-header { flex: 0 0 auto !important; }
}
/* ============================================================
ТЕЛЕФОН: ЗАПРЕЩАЕМ СЛУЧАЙНЫЙ ЗУМ И СДВИГ
============================================================
Было: пытаешься прокрутить переписку, а телефон решает,
что это жест «увеличить» — чат приближался и уезжал.
Теперь страница не масштабируется, а прокрутка идёт
только вверх-вниз.
============================================================ */
@media (max-width: 900px) {
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
/* Двойное касание не увеличивает страницу */
touch-action: manipulation;
/* Прокрутка не «проваливается» дальше страницы */
overscroll-behavior-y: none;
}
/* Переписка: только вертикальная прокрутка, без зума и сдвига вбок */
.chat-messages,
#chat-messages,
#chat-active,
.dialogs-list,
.chat-list {
touch-action: pan-y;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Список диалогов и лента — тоже только вверх-вниз */
.feed-container,
.profile-posts,
.admin-table-wrap,
.music-list {
touch-action: pan-y;
}
/* Длинные таблицы в админке можно двигать вбок — им разрешаем */
.admin-table-wrap {
touch-action: pan-x pan-y;
}
}
/* ============================================================
ПЛЕЕР: ПОЛЗУНОК ГРОМКОСТИ И АККУРАТНОСТЬ
============================================================ */
.mpp-volume {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-top: 1px solid var(--line);
background: var(--surface-2);
}
/* Ползунок громкости */
.mpp-vol {
flex: 1 1 auto;
min-width: 0;
height: 4px;
margin: 0;
padding: 0;
border-radius: 3px;
background: var(--surface-3);
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.mpp-vol::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border: 2px solid var(--surface);
border-radius: 50%;
background: var(--accent);
cursor: pointer;
transition: transform .13s, background .13s;
}
.mpp-vol::-webkit-slider-thumb:hover { transform: scale(1.2); background: #a3b4cd; }
.mpp-vol::-moz-range-thumb {
width: 13px;
height: 13px;
border: 2px solid var(--surface);
border-radius: 50%;
background: var(--accent);
cursor: pointer;
}
.mpp-vol::-moz-range-track {
height: 4px;
border-radius: 3px;
background: var(--surface-3);
}
.mpp-vol-num {
flex: 0 0 auto;
min-width: 24px;
text-align: right;
font-size: 11.5px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Выключенный звук */
.mpp-icon.is-off { color: var(--muted-2); opacity: .65; }
/* --- Небольшая аккуратность в панели плеера --- */
/* Обложка чуть крупнее, ровные углы */
.mpp-now { gap: 12px; }
.mpp-now-cover { border-radius: 10px; }
/* Кнопки управления ровнее */
.mpp-controls { gap: 6px; padding: 4px 14px 10px; }
.mpp-icon { border-radius: 50%; transition: background .14s, color .14s; }
.mpp-icon:hover { background: var(--surface-3); color: var(--text-strong); }
/* Полоса прогресса заметнее */
.mpp-bar { height: 4px; border-radius: 3px; background: var(--surface-3); cursor: pointer; }
.mpp-bar:hover { height: 6px; }
.mpp-bar i { background: var(--accent); border-radius: 3px; transition: width .12s linear; }
/* Строки списка треков ровнее */
.mpp-row { border-radius: 8px; }
.mpp-row:hover { background: var(--surface-3); }
/* ============================================================
ОБЪЯВЛЕНИЕ О ПЕРЕЕЗДЕ (только на старом домене)
============================================================ */
.moved-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1100;
height: 64px;
display: flex;
align-items: center;
background: linear-gradient(135deg, #24334b 0%, #1a2634 100%);
border-bottom: 1px solid rgba(125, 148, 184, .34);
box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
padding: 0 16px;
}
.moved-inner {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 14px;
}
.moved-truck { font-size: 24px; flex: none; line-height: 1; }
.moved-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.moved-title {
font-size: 14.5px;
color: #e6ecf5;
letter-spacing: .01em;
}
.moved-new {
font-size: 13px;
color: #c3ccd8;
}
.moved-link {
color: #a8c6ee;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.moved-link:hover { color: #ffffff; }
.moved-soon {
font-size: 12px;
color: #8b96a5;
}
.moved-soon b { color: #a8bcda; }
/* Сдвигаем шапку и страницу вниз, чтобы объявление ничего не закрывало */
body:has(.moved-bar) .top-header { top: 64px !important; }
body:has(.moved-bar) { padding-top: calc(var(--header-h) + 64px) !important; }
@media (max-width: 900px) {
.moved-bar { height: 58px; padding: 0 12px; }
.moved-inner { gap: 10px; }
.moved-truck { font-size: 19px; }
.moved-title { font-size: 13px; }
.moved-new { font-size: 12px; }
.moved-soon { font-size: 11px; }
body:has(.moved-bar) .top-header { top: 58px !important; }
body:has(.moved-bar) { padding-top: calc(var(--header-h) + 58px) !important; }
}
/* ============================================================
ПОИСК В МУЗЫКЕ — ПРИВЕДЁН К ОБЩЕМУ СТИЛЮ
============================================================
Было: старые цвета из прежней версии сайта, а на телефоне
поле ввода (44px) вылезало из коробки (38px).
============================================================ */
.m-search {
display: flex !important;
align-items: center !important;
gap: 8px !important;
height: 38px !important;
width: 240px !important;
padding: 0 12px !important;
background: var(--surface-2) !important;
border: 1px solid var(--line) !important;
border-radius: 9px !important;
transition: border-color .16s, background .16s !important;
}
.m-search:hover { border-color: var(--line-2) !important; }
.m-search:focus-within {
border-color: var(--accent-line) !important;
background: var(--surface-3) !important;
}
.m-search-icon { flex: none; color: var(--muted-2) !important; opacity: 1 !important; }
.m-search:focus-within .m-search-icon { color: var(--accent) !important; }
.m-search input,
.m-search input[type="text"] {
flex: 1 1 auto !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
outline: 0 !important;
color: var(--text) !important;
font-size: 13.5px !important;
}
.m-search input::placeholder { color: var(--muted-2) !important; }
/* Кнопка «Загрузить» рядом — по высоте поиска */
.m-head-actions .m-upload-open { height: 38px; }
@media (max-width: 900px) {
/* Коробка той же высоты, что и поле внутри — ничего не вылезает */
.m-search { width: auto !important; flex: 1 1 auto !important; height: 42px !important; }
.m-search input,
.m-search input[type="text"] { height: 40px !important; font-size: 15px !important; }
.m-head-actions { flex-wrap: wrap; gap: 8px; }
.m-head-actions .m-upload-open { height: 42px; }
}
/* ============================================================
ВИДЖЕТ ПЛЕЕРА — поверх сайта, как в Spotify и ВК
============================================================
Никаких отдельных окон браузера. Закреплён внизу справа,
сворачивается в полоску, разворачивается на весь экран,
таскается мышкой за заголовок.
============================================================ */
.nyw {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1400;
width: 340px;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 14px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .62);
overflow: hidden;
animation: nyw-in .22s ease;
}
@keyframes nyw-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.nyw.is-hidden { display: none !important; }
.nyw.is-drag { cursor: grabbing; user-select: none; }
/* --- заголовок (за него таскаем) --- */
.nyw-head {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px 9px 12px;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
cursor: grab;
}
.nyw-dots { color: var(--muted-2); font-size: 13px; letter-spacing: -1px; }
.nyw-head-title {
flex: 1 1 auto;
font-size: 11.5px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
}
.nyw-hbtn {
width: 24px; height: 24px; padding: 0;
display: grid; place-items: center;
border: 0; border-radius: 6px;
background: none; color: var(--muted-2);
font-size: 14px; line-height: 1; cursor: pointer;
transition: .14s;
}
.nyw-hbtn:hover { background: var(--surface-3); color: var(--text-strong); }
/* --- обложка и название --- */
.nyw-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px 8px; }
.nyw-cover {
width: 54px; height: 54px; flex: none;
display: grid; place-items: center;
border-radius: 10px; overflow: hidden;
background: var(--surface-3);
color: var(--muted); font-size: 22px;
cursor: pointer;
}
.nyw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nyw-meta { min-width: 0; flex: 1 1 auto; }
.nyw-meta b {
display: block; font-size: 13.5px; color: var(--text-strong);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nyw-meta small {
display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* --- прогресс --- */
.nyw-prog { display: flex; align-items: center; gap: 8px; padding: 4px 14px 8px; }
.nyw-prog span { flex: none; font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.nyw-bar { flex: 1 1 auto; height: 4px; border-radius: 3px; background: var(--surface-3); cursor: pointer; }
.nyw-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); }
/* --- кнопки --- */
.nyw-ctrl { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 12px 10px; }
.nyw-btn {
width: 34px; height: 34px; padding: 0;
display: grid; place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface-2);
color: var(--muted);
font-size: 14px; line-height: 1; cursor: pointer;
transition: .14s;
}
.nyw-btn:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--line-2); }
.nyw-btn.on { color: var(--accent); border-color: var(--accent-line); }
.nyw-play {
width: 42px; height: 42px; font-size: 16px;
background: rgba(125, 148, 184, .14);
border-color: rgba(125, 148, 184, .32);
color: var(--accent);
}
.nyw-play:hover { background: rgba(125, 148, 184, .24); color: #fff; }
/* --- громкость --- */
.nyw-vol { display: flex; align-items: center; gap: 9px; padding: 0 14px 12px; }
.nyw-vicon { font-size: 12px; }
.nyw-vol input {
flex: 1 1 auto; min-width: 0; height: 4px; margin: 0;
-webkit-appearance: none; appearance: none;
border-radius: 3px; background: var(--surface-3);
outline: none; cursor: pointer;
}
.nyw-vol input::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 13px; height: 13px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}
.nyw-vol input::-moz-range-thumb {
width: 11px; height: 11px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}
.nyw-vol span { flex: none; min-width: 22px; text-align: right; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* --- список: только в развёрнутом виде --- */
.nyw-list { display: none; max-height: 200px; overflow-y: auto; border-top: 1px solid var(--line); }
.nyw.is-open .nyw-list { display: block; }
.nyw-row {
display: flex; align-items: center; gap: 8px;
padding: 7px 14px; cursor: pointer;
border-bottom: 1px solid rgba(30, 33, 38, .55);
}
.nyw-row:hover { background: var(--surface-2); }
.nyw-row.on { background: rgba(125, 148, 184, .10); }
.nyw-rnum { flex: none; width: 16px; font-size: 11px; color: var(--muted-2); text-align: center; }
.nyw-row.on .nyw-rnum { color: var(--accent); }
.nyw-rtitle {
flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nyw-rart {
flex: none; max-width: 40%; font-size: 11px; color: var(--muted-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nyw-empty { padding: 20px 14px; text-align: center; font-size: 12px; color: var(--muted-2); }
/* ============================================================
СВЁРНУТЫЙ ВИД — тонкая полоска, не мешает навигации
============================================================ */
.nyw.is-mini { width: 300px; border-radius: 10px; }
.nyw.is-mini .nyw-head { display: none; }
.nyw.is-mini .nyw-body { padding: 8px 10px; gap: 9px; }
.nyw.is-mini .nyw-cover { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; }
.nyw.is-mini .nyw-meta b { font-size: 12.5px; }
.nyw.is-mini .nyw-meta small { font-size: 10.5px; }
.nyw.is-mini .nyw-prog,
.nyw.is-mini .nyw-vol,
.nyw.is-mini .nyw-list { display: none; }
.nyw.is-mini .nyw-ctrl { padding: 0 10px 8px; gap: 5px; }
.nyw.is-mini .nyw-btn { width: 28px; height: 28px; font-size: 12px; }
.nyw.is-mini .nyw-play { width: 32px; height: 32px; font-size: 13px; }
.nyw.is-mini #nyw-shuffle,
.nyw.is-mini #nyw-repeat { display: none; }
/* На телефоне — во всю ширину над нижним меню */
@media (max-width: 900px) {
.nyw {
left: 10px !important;
right: 10px !important;
bottom: calc(var(--dock-h) + 10px) !important;
top: auto !important;
width: auto !important;
}
.nyw.is-mini { width: auto; }
.nyw-head { cursor: default; }
.nyw-btn { width: 36px; height: 36px; }
.nyw-play { width: 44px; height: 44px; }
.nyw-list { max-height: 160px; }
}
/* ============================================================
КНОПКА ЗАКРЫТИЯ ВИДЖЕТА ПЛЕЕРА
============================================================
В свёрнутом виде заголовок скрыт, поэтому кнопка закрытия
должна быть прямо в полоске — иначе плеер не закрыть.
============================================================ */
.nyw-x {
flex: none;
width: 26px;
height: 26px;
padding: 0;
display: none; /* видна только в свёрнутом виде */
place-items: center;
border: 0;
border-radius: 50%;
background: none;
color: var(--muted-2);
font-size: 13px;
line-height: 1;
cursor: pointer;
transition: .14s;
}
.nyw-x:hover { background: rgba(220, 90, 90, .16); color: #e08585; }
.nyw.is-mini .nyw-x { display: grid; }
/* Чуть плотнее полоска, чтобы всё влезло */
.nyw.is-mini .nyw-meta { padding-right: 2px; }