/* ════════════════════════════════════════════ SEBERD CHAT — chat.css v3 Зависит от CSS-переменных style.css сайта: --bg, --bg-input, --bg-card, --text, --text-head, --text-sec, --text-muted, --accent, --accent-lt, --accent-dk, --border, --border-m, --border-f, --font, --mono, --r-xs, --r-sm, --r-md, --r-lg, --r-xl, --ease ════════════════════════════════════════════ */ /* Корневой контейнер чата (шаблон page-chat.php) — изоляция от верстки темы */ .seberd-chat-root { contain: layout style; } /* ────────────────────────────────────────── СБРОС КОНТЕЙНЕРОВ GENERATEPRESS Убираем padding/margin которые GP добавляет к .inside-article и .entry-content. Селекторы охватывают оба варианта именования шаблона (по имени шаблона и по page-id). ────────────────────────────────────────── */ .page-template-page-chat .inside-article, .page-template-page-chat .entry-content, .page-template-page-chat .page-content, .page-template-page-chat .post-padding, .page-template-page-chat .entry-header { padding: 0 !important; margin: 0 !important; } /* Запрещаем скролл страницы — чат должен занимать весь экран */ .page-template-page-chat html, .page-template-page-chat body { overflow: hidden !important; } /* ────────────────────────────────────────── КОРНЕВАЯ ОБЁРТКА position:fixed — полностью игнорирует всех родителей GP (entry-content, inside-article и т.д.) и занимает весь экран ниже шапки. JS (ResizeObserver на #masthead) измеряет реальную высоту шапки сайта и пишет в --sc-top. Fallback — 57px. WordPress добавляет .admin-bar на при видимой Admin Bar (32px / 46px моб). ────────────────────────────────────────── */ .sc-wrap { --sc-top : 57px; /* JS перезапишет реальным значением */ --sc-side : 24px; --sc-radius : 10px; position : fixed; top : var(--sc-top); left : 0; right : 0; bottom : 0; z-index : 100; display : flex; flex-direction: column; overflow : hidden; font-family: var(--font); color : var(--text); background : var(--bg); } /* Admin Bar добавляет 32px сверху на десктопе */ .admin-bar .sc-wrap { --sc-top: 89px; /* 57 + 32 */ } @media screen and (max-width: 782px) { /* Admin Bar на мобайле — 46px */ .admin-bar .sc-wrap { --sc-top: 103px; /* 57 + 46 */ } .sc-wrap { --sc-side: 12px; } } /* ══════════════════════════════════════════ ШАПКА ЧАТА ══════════════════════════════════════════ */ .sc-header { display : flex; align-items: center; gap : 10px; padding : 11px var(--sc-side); flex-shrink: 0; background : rgba(44, 20, 30, 0.72); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); position: relative; z-index : 2; } /* Декоративная линия снизу шапки */ .sc-header::after { content : ''; position: absolute; bottom : 0; left: 6%; right: 6%; height : 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255,102,0,.26) 20%, rgba(255,180,60,.46) 50%, rgba(255,102,0,.26) 80%, transparent 100% ); pointer-events: none; } /* Зелёная точка онлайн */ .sc-header-dot { width : 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 38% 38%, #4ade80, #16a34a); box-shadow: 0 0 0 2px rgba(34,197,94,.18), 0 0 9px rgba(34,197,94,.50); animation: sc-dot 3s ease-in-out infinite; } @keyframes sc-dot { 0%,100% { box-shadow: 0 0 0 2px rgba(34,197,94,.18), 0 0 9px rgba(34,197,94,.50); } 50% { box-shadow: 0 0 0 4px rgba(34,197,94,.06), 0 0 4px rgba(34,197,94,.22); } } .sc-header-title { font-size : 15px !important; font-weight : 700 !important; color : var(--text-head) !important; margin : 0 !important; line-height : 1 !important; letter-spacing: .025em !important; /* Перебиваем градиентный логотип темы */ background : none !important; -webkit-text-fill-color: var(--text-head) !important; filter : none !important; } .sc-online { font-size : 11px; font-family: var(--mono); color : var(--text-muted); padding : 2px 8px; background : rgba(255,200,180,.04); border : 1px solid var(--border); border-radius: 20px; white-space: nowrap; cursor : default; transition : border-color .2s; } .sc-online:hover { border-color: var(--border-m); } .sc-online-count { color: #4ade80; font-weight: 600; } .sc-header-spacer { flex: 1 1 0; min-width: 0; } .sc-header-rules { font-size : 10.5px; font-family : var(--mono); color : var(--text-muted); padding : 3px 9px; border : 1px solid var(--border); border-radius: var(--r-sm); cursor : default; opacity : .55; white-space : nowrap; transition : opacity .18s, border-color .18s; } .sc-header-rules:hover { opacity: 1; border-color: var(--border-m); } /* ══════════════════════════════════════════ ЛЕНТА СООБЩЕНИЙ ══════════════════════════════════════════ */ .sc-feed { flex : 1 1 auto; overflow-y : auto; overflow-x : hidden; padding : 12px var(--sc-side) 6px; display : flex; flex-direction: column; gap : 1px; overscroll-behavior: contain; /* тонкий скроллбар в стиле сайта */ scrollbar-width: thin; scrollbar-color: rgba(255,102,0,.14) transparent; } .sc-feed::-webkit-scrollbar { width: 4px; } .sc-feed::-webkit-scrollbar-track { background: transparent; } .sc-feed::-webkit-scrollbar-thumb { background : rgba(255,102,0,.14); border-radius: 4px; } .sc-feed::-webkit-scrollbar-thumb:hover { background: rgba(255,102,0,.30); } /* ── Пустое состояние / загрузка ── */ .sc-empty { flex : 1; display : flex; flex-direction : column; align-items : center; justify-content: center; gap : 10px; color : var(--text-muted); font-size : 13px; opacity : .42; pointer-events : none; user-select : none; } .sc-empty-icon { font-size : 30px; animation : sc-float 3.8s ease-in-out infinite; } @keyframes sc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ── Разделитель даты ── */ .sc-date-sep { display : flex; align-items : center; gap : 10px; padding : 14px 0 8px; font-size : 10px; font-family : var(--mono); color : var(--text-muted); letter-spacing : .10em; text-transform : uppercase; opacity : .38; flex-shrink : 0; user-select : none; } .sc-date-sep::before, .sc-date-sep::after { content : ''; flex : 1; height : 1px; background: var(--border); } /* ── Сообщение ── */ .sc-msg { display : flex; gap : 9px; padding : 5px 8px; border-radius: var(--r-md); transition : background .12s ease; animation : sc-in .24s cubic-bezier(.22,1,.36,1) both; position : relative; } @keyframes sc-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .sc-msg:hover { background: rgba(255,200,180,.028); } .sc-msg--me { background: rgba(255,102,0,.040); } .sc-msg--me:hover { background: rgba(255,102,0,.065); } /* Группировка: убираем аватар и meta у цепочки */ .sc-msg--grouped { padding-top: 1px; padding-bottom: 1px; } .sc-msg--grouped .sc-avatar { visibility: hidden; } .sc-msg--grouped .sc-meta { display: none !important; } /* Оптимистичная отправка — ждём подтверждения сервера */ .sc-msg--pending { opacity: .55; } .sc-msg--pending .sc-time::after { content : ' ·'; animation: sc-blink 1s ease-in-out infinite; } @keyframes sc-blink { 0%,100%{opacity:.4} 50%{opacity:1} } /* ── Аватар ── */ .sc-avatar { width : 32px; height : 32px; border-radius: var(--sc-radius); flex-shrink : 0; display : flex; align-items : center; justify-content: center; font-size : 11px; font-weight : 700; color : #fff; letter-spacing: .03em; box-shadow : 0 1px 5px rgba(0,0,0,.22); align-self : flex-start; position : relative; overflow : hidden; cursor : default; } /* Блик сверху аватара */ .sc-avatar::after { content : ''; position : absolute; top: 0; left: 0; right: 0; height: 48%; background: rgba(255,255,255,.09); pointer-events: none; } /* ── Тело сообщения ── */ .sc-body { flex: 1; min-width: 0; } .sc-meta { display : flex; align-items: baseline; gap : 7px; margin-bottom: 2px; line-height: 1; } .sc-name { font-size : 12.5px; font-weight: 600; cursor : default; transition : filter .14s; } .sc-name:hover { filter: brightness(1.2); } .sc-time { font-size : 10px; font-family: var(--mono); color : var(--text-muted); opacity : .48; } /* Кнопка удаления (видна при hover, только для admin) */ .sc-del { display : none; margin-left : auto; background : none; border : none; color : var(--text-muted); font-size : 14px; line-height : 1; padding : 1px 5px; border-radius: var(--r-xs); cursor : pointer; opacity : .45; transition : color .14s, background .14s, opacity .14s; } .sc-msg:hover .sc-del { display: inline-block; } .sc-del:hover { color: #f87171; background: rgba(248,113,113,.10); opacity: 1; } /* ── Текст сообщения ── */ .sc-text { font-size : 14px; line-height: 1.65; color : var(--text); word-break : break-word; white-space: pre-wrap; } .sc-text code { font-family : var(--mono); font-size : 12.5px; background : rgba(255,102,0,.09); color : #ffaa66; padding : 1px 5px; border-radius: var(--r-xs); border : 1px solid rgba(255,102,0,.15); } .sc-text strong { color: var(--text-head); } .sc-text a { color : var(--accent-lt); text-decoration: none; border-bottom : 1px solid rgba(255,136,51,.26); transition : color .14s, border-color .14s; } .sc-text a:hover { color: #ffcc66; border-bottom-color: rgba(255,204,102,.50); } /* ══════════════════════════════════════════ ИНДИКАТОР НАБОРА ТЕКСТА ══════════════════════════════════════════ */ .sc-typing-bar { flex-shrink: 0; height : 0; overflow : hidden; padding : 0 var(--sc-side); display : flex; align-items: center; gap : 7px; font-size : 11.5px; font-family: var(--mono); color : var(--text-muted); opacity : 0; transition : height .22s ease, opacity .22s ease, padding .22s ease; pointer-events: none; } .sc-typing-bar--on { height : 24px; opacity : .60; padding-top: 2px; padding-bottom: 2px; } .sc-typing-dots { display : inline-flex; gap : 3px; align-items: center; } .sc-typing-dots span { width : 4px; height : 4px; border-radius: 50%; background : var(--accent-lt); opacity : .38; animation : sc-bounce 1.3s ease-in-out infinite; } .sc-typing-dots span:nth-child(2) { animation-delay: .18s; } .sc-typing-dots span:nth-child(3) { animation-delay: .36s; } @keyframes sc-bounce { 0%,80%,100% { transform: translateY(0); opacity: .38; } 40% { transform: translateY(-4px); opacity: 1; } } /* ══════════════════════════════════════════ КНОПКА «ПРОКРУТИТЬ ВНИЗ» ══════════════════════════════════════════ */ .sc-scroll-btn { position : absolute; bottom : 76px; right : var(--sc-side); width : 36px; height : 36px; border-radius : 50%; background : rgba(52,26,37,.96); border : 1px solid var(--border-m); color : var(--text-sec); display : flex; align-items : center; justify-content: center; cursor : pointer; box-shadow : 0 4px 16px rgba(0,0,0,.30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition : opacity .22s, transform .22s cubic-bezier(.22,1,.36,1), background .18s, border-color .18s; z-index : 5; /* скрыт по умолчанию */ opacity : 0; pointer-events: none; transform : translateY(10px) scale(.88); } .sc-scroll-btn--show { opacity : 1; pointer-events: auto; transform : translateY(0) scale(1); } .sc-scroll-btn:hover { background : rgba(70,36,52,.98); border-color: rgba(255,102,0,.28); color : var(--accent-lt); } .sc-scroll-btn:active { transform: scale(.92); } .sc-scroll-btn svg { width: 14px; height: 14px; } /* Бейдж непрочитанных */ .sc-unread-badge { position : absolute; top : -6px; right : -6px; min-width : 18px; height : 18px; padding : 0 4px; background : var(--accent); border-radius: 9px; font-size : 9px; font-weight : 700; color : #fff; font-family : var(--mono); line-height : 1; display : none; align-items : center; justify-content: center; box-shadow : 0 2px 6px rgba(255,102,0,.38); letter-spacing: 0; } .sc-unread-badge--show { display: flex; } /* ══════════════════════════════════════════ ПАНЕЛЬ ВВОДА ══════════════════════════════════════════ */ .sc-input-wrap { flex-shrink : 0; display : flex; align-items : flex-end; gap : 8px; padding : 10px var(--sc-side); border-top : 1px solid var(--border); background : rgba(38,18,26,.70); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position : relative; z-index : 2; } /* Подсказка для гостей: одно сообщение без входа */ .sc-guest-hint { margin : 0 0 8px 0; font-size: 12px; color : var(--text-sec); } /* Декоративная линия сверху панели */ .sc-input-wrap::before { content : ''; position : absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,102,0,.11) 35%, rgba(255,102,0,.11) 65%, transparent ); pointer-events: none; } /* Textarea */ .sc-input-box { flex: 1; position: relative; } .sc-input { display : block; width : 100%; min-height : 40px; max-height : 120px; padding : 9px 46px 9px 14px; background : var(--bg-input); border : 1px solid var(--border-m); border-radius: var(--r-lg); color : var(--text); font-family : var(--font); font-size : 14px; line-height : 1.5; resize : none; outline : none; overflow-y : hidden; /* auto-resize управляется через JS */ transition : border-color .2s, box-shadow .2s; scrollbar-width: thin; } .sc-input::placeholder { color: var(--text-muted); opacity: .38; } .sc-input:focus { border-color: rgba(255,102,0,.42); box-shadow : 0 0 0 3px rgba(255,102,0,.07), inset 0 1px 0 rgba(255,200,180,.03); } /* Счётчик символов */ .sc-counter { position : absolute; bottom : 6px; right : 10px; font-size : 9.5px; font-family : var(--mono); color : var(--text-muted); opacity : .32; pointer-events: none; line-height : 1; transition : color .18s, opacity .18s; } .sc-counter--warn { color: #f87171 !important; opacity: .78 !important; } /* Кнопка отправки */ .sc-send { width : 40px; height : 40px; flex-shrink : 0; border : none; border-radius: var(--r-md); background : linear-gradient(145deg, var(--accent), var(--accent-dk)); color : #fff; cursor : pointer; display : flex; align-items : center; justify-content: center; box-shadow : 0 2px 10px rgba(255,102,0,.26), inset 0 1px 0 rgba(255,200,100,.12); transition : background .18s, transform .12s, box-shadow .18s; position : relative; overflow : hidden; } /* Блик кнопки */ .sc-send::before { content : ''; position : absolute; top: 0; left: 0; right: 0; height: 50%; background: rgba(255,255,255,.07); pointer-events: none; } .sc-send:hover:not(:disabled) { background: linear-gradient(145deg, var(--accent-lt), var(--accent)); transform : translateY(-1px); box-shadow: 0 5px 16px rgba(255,102,0,.34), inset 0 1px 0 rgba(255,200,100,.16); } .sc-send:active:not(:disabled) { transform : scale(.94); box-shadow: 0 1px 6px rgba(255,102,0,.20); } .sc-send:disabled { opacity: .26; cursor: not-allowed; } .sc-send svg { width: 16px; height: 16px; position : relative; z-index: 1; transition: transform .14s; } .sc-send:not(:disabled):hover svg { transform: translate(1px,-1px); } /* ══════════════════════════════════════════ БЛОК АВТОРИЗАЦИИ (для гостей) ══════════════════════════════════════════ */ .sc-auth { flex-shrink : 0; display : flex; flex-direction: column; align-items : center; gap : 12px; padding : 18px var(--sc-side); border-top : 1px solid var(--border); background : rgba(38,18,26,.70); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align : center; } /* Скрыт до тех пор, пока гость не отправит первое сообщение */ .sc-auth--hidden { display: none !important; } .sc-input-wrap.sc-input-wrap--hidden { display: none !important; } .sc-auth-text { margin : 0; font-size: 13px; color : var(--text-sec); } .sc-auth-actions { display : flex; gap : 10px; flex-wrap : wrap; justify-content: center; } .sc-auth-btn { display : inline-flex; align-items : center; padding : 9px 20px; border-radius: var(--r-md); font-size : 13px; font-weight : 600; text-decoration: none !important; border-bottom: none !important; transition : transform .18s, box-shadow .18s, background .18s; } .sc-auth-btn--login { background: linear-gradient(145deg, var(--accent), var(--accent-dk)); color : #fff !important; box-shadow: 0 2px 10px rgba(255,102,0,.26); } .sc-auth-btn--login:hover { transform : translateY(-1px); box-shadow: 0 5px 18px rgba(255,102,0,.36); color : #fff !important; } .sc-auth-btn--register { background: rgba(255,200,180,.04); color : var(--text-sec) !important; border : 1px solid var(--border-m) !important; } .sc-auth-btn--register:hover { background : rgba(255,102,0,.06); border-color: rgba(255,102,0,.28) !important; color : var(--text-head) !important; transform : translateY(-1px); } /* ══════════════════════════════════════════ ТОСТ-УВЕДОМЛЕНИЕ ══════════════════════════════════════════ */ .sc-toast { position : fixed; bottom : 28px; left : 50%; transform : translateX(-50%); padding : 9px 18px; background : rgba(52,26,37,.97); border : 1px solid rgba(255,102,0,.18); border-radius: var(--r-md); color : var(--text); font-size : 13px; font-family : var(--font); box-shadow : 0 8px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,200,180,.04); z-index : 9999; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation : sc-toast-in .26s cubic-bezier(.22,1,.36,1) both; white-space : nowrap; pointer-events: none; } @keyframes sc-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .sc-toast--error { border-color: rgba(248,113,113,.40) !important; } .sc-toast--success { border-color: rgba(74,222,128,.32) !important; } .sc-toast--warning { border-color: rgba(251,191,36,.34) !important; } /* ══════════════════════════════════════════ ACCESSIBILITY: REDUCED MOTION ══════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .sc-header-dot, .sc-empty-icon, .sc-typing-dots span, .sc-msg--pending .sc-time::after { animation: none !important; } .sc-msg { animation: none !important; } .sc-send, .sc-auth-btn { transition: none !important; } .sc-scroll-btn { transition: opacity .1s linear !important; } } /* ══════════════════════════════════════════ МОБАЙЛ ≤480px ══════════════════════════════════════════ */ @media (max-width: 480px) { .sc-header-rules { display: none; } .sc-header-title { font-size: 14px !important; } .sc-avatar { width: 28px; height: 28px; font-size: 10px; } .sc-text { font-size: 14px; } .sc-input { font-size: 16px; } /* Prevent iOS zoom */ .sc-msg { padding: 4px 6px; gap: 7px; } .sc-scroll-btn { bottom: 68px; } }