/* ============================================================ LUMINA — фирменный стиль ============================================================ Устройство тем: все цвета заданы CSS-переменными (--имя). На висит атрибут data-theme="aurora" или "sakura", и в зависимости от него подставляется свой набор переменных. Компоненты пишутся ОДИН раз и перекрашиваются автоматически. Правило производительности (для слабых ПК): - градиент только на акцентах (логотип, главные кнопки, свои сообщения, аватары, активные элементы); - фоны — сплошные цвета, без blur и тяжёлых теней; - все анимации построены на transform/opacity — их браузер выполняет на видеокарте, не перерисовывая страницу. ============================================================ */ /* ---------- Тема "aurora" (тёмная, по умолчанию) ---------- */ :root, :root[data-theme="aurora"] { /* три цвета акцентного градиента (по отдельности нужны для SVG-волн и логотипа) */ --grad-1: #7f77dd; --grad-2: #5dcaa5; --grad-3: #ed93b1; --accent-gradient: linear-gradient(120deg, var(--grad-1), var(--grad-2), var(--grad-3)); --accent: var(--grad-1); /* сплошной акцент: рамки фокуса и т.п. */ --text-on-accent: #14102b; /* текст ПОВЕРХ градиента: на пастельном фоне тёмный читается лучше белого */ --bg-page: #14102b; /* фон страницы */ --bg-panel: #1a1538; /* фон панели чата (пригодится на этапе чатов) */ --bg-sidebar: #14102b; /* фон сайдбара (пригодится на этапе чатов) */ --bg-card: #241d47; /* карточки и чужие сообщения */ --bg-input: #1a1538; /* поля ввода: чуть темнее карточки */ --border: #2a2350; --text: #e8e4ff; /* основной текст */ --text-secondary: #a8a2cc; /* вторичный: подписи полей */ --text-muted: #6c6499; /* приглушённый: подсказки */ --online: #5dcaa5; /* индикатор "в сети" */ --danger: #e0566b; /* опасные действия: выйти, удалить */ /* плашка статуса: успех / ошибка */ --ok-bg: rgba(93, 202, 165, 0.14); --ok-text: #7ee0bd; --err-bg: rgba(237, 147, 177, 0.14); --err-text: #ff9db0; /* прозрачность фоновых волн: в тёмной теме чуть заметнее */ --wave-opacity: 0.10; } /* ---------- Тема "sakura" (светлая) ---------- */ :root[data-theme="sakura"] { /* в ТЗ градиент из двух цветов; средняя точка #c66fab — их точная смесь, поэтому визуально это тот же градиент #d4537e -> #b98cd8, а волнам и логотипу всегда нужны три опорных цвета */ --grad-1: #d4537e; --grad-2: #c66fab; --grad-3: #b98cd8; --accent-gradient: linear-gradient(120deg, var(--grad-1), var(--grad-2), var(--grad-3)); --accent: var(--grad-1); --text-on-accent: #ffffff; /* на насыщенном розовом лучше белый */ --bg-page: #fffafc; --bg-panel: #ffffff; --bg-sidebar: #fdf3f6; --bg-card: #fbeaf0; --bg-input: #ffffff; --border: #f0dce4; --text: #7a2244; --text-secondary: #a86c86; --text-muted: #c99bb0; --online: #1d9e75; --danger: #c22f56; --ok-bg: rgba(29, 158, 117, 0.10); --ok-text: #17805f; --err-bg: rgba(212, 83, 126, 0.10); --err-text: #c22f56; --wave-opacity: 0.14; } /* ---------- Сброс и база ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { /* 'Lumina UI' — составное семейство из fonts.css: латиница = Outfit, кириллица = Onest */ font-family: 'Lumina UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-page); color: var(--text); min-height: 100vh; } /* Плавная перекраска при смене темы (только цвета — это дёшево) */ body, .card, .input, .btn-secondary, .btn-danger, .theme-toggle, .link-btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s; } /* ============================================================ ФОНОВЫЕ ВОЛНЫ ============================================================ Слой прибит к низу экрана. Каждая волна — группа в SVG, которую CSS бесконечно двигает по горизонтали. Сдвиг ровно на одну ширину волны (1200 единиц SVG) + одинаковый наклон пути в начале и в конце = бесшовная петля. Двигаем ТОЛЬКО transform: браузер считает это на видеокарте, процессор почти не занят — безопасно для слабых машин. ============================================================ */ .waves { position: fixed; /* волны на месте даже при прокрутке */ bottom: 0; left: 0; width: 100%; height: min(34vh, 300px); z-index: 0; /* под всем содержимым */ pointer-events: none; /* клики проходят "сквозь" волны */ } .wave { opacity: var(--wave-opacity); will-change: transform; /* подсказка браузеру: этот слой будет двигаться */ } /* Цвета слоёв — из акцентной палитры текущей темы */ .wave-1 { fill: var(--grad-1); animation: wave-drift 42s linear infinite; } .wave-2 { fill: var(--grad-2); animation: wave-drift 28s linear infinite reverse; } .wave-3 { fill: var(--grad-3); animation: wave-drift 19s linear infinite; } /* Один цикл = сдвиг на ширину одной волны. Внутри SVG "px" равен единице системы координат viewBox, поэтому -1200px = ровно один повтор формы — петля смыкается незаметно. */ @keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-1200px); } } /* ============================================================ ЭКРАН АВТОРИЗАЦИИ: сетка из двух колонок ============================================================ */ .auth-layout { display: grid; grid-template-columns: 1fr 1fr; /* две равные колонки */ min-height: 100vh; position: relative; z-index: 1; /* содержимое — над волнами */ } /* Страховка от "распирания" сетки: по умолчанию грид-колонка не может стать уже своего содержимого (min-width: auto) — если внутри окажется что-то широкое (крупный логотип), колонка растянет всю страницу и появится горизонтальная прокрутка. min-width: 0 это отключает. */ .auth-left, .auth-right { min-width: 0; } /* Левая колонка: карточка формы по центру своей половины */ .auth-left { display: flex; align-items: center; justify-content: center; padding: 32px 24px; } .auth-card { width: min(380px, 100%); /* мягкое появление карточки при загрузке страницы */ animation: rise 0.45s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Правая колонка: крупный логотип по центру */ .auth-right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 24px; } .tagline { color: var(--text-secondary); font-size: 16px; } /* --- Узкие экраны: колонки складываются в одну. Логотип уходит наверх (order: -1), форма — под ним. --- */ @media (max-width: 880px) { .auth-layout { grid-template-columns: 1fr; /* одна колонка */ align-content: start; row-gap: 8px; } .auth-right { order: -1; /* логотип первым */ padding: 56px 24px 8px; } .auth-left { align-items: start; padding-bottom: 48px; } } /* ---------- Логотип ---------- */ .logo { display: flex; align-items: center; gap: 10px; } .logo-text { font-family: 'Syne', sans-serif; /* фирменный шрифт; кириллицы в нём нет — только для слова "Lumina" */ font-weight: 800; letter-spacing: -0.02em; /* Градиент на самом тексте: фон обрезается по контуру букв, а буквы прозрачные — фон "просвечивает" сквозь них */ background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Цвета стопов SVG-градиента волны — из переменных темы */ .logo-wave .stop-1 { stop-color: var(--grad-1); } .logo-wave .stop-2 { stop-color: var(--grad-2); } .logo-wave .stop-3 { stop-color: var(--grad-3); } /* Крупная версия логотипа для правой колонки. clamp(мин, желаемое, макс) — размер тянется за шириной окна, но не выходит за разумные пределы. Нюанс: Syne — очень ШИРОКИЙ шрифт (слово "Lumina" занимает почти 6 своих кеглей), поэтому минимум подобран так, чтобы логотип влезал даже в экран 375px. */ .logo-hero .logo-text { font-size: clamp(40px, 6.5vw, 88px); } .logo-hero .logo-wave { width: clamp(40px, 6.5vw, 88px); height: auto; } /* "Эквалайзер": полоски логотипа мягко пульсируют по высоте. transform-box: fill-box заставляет масштабирование считаться от центра САМОЙ полоски, а не от угла всего SVG. */ .logo-hero .bar { transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-in-out infinite alternate; } /* Полоски качаются не в такт — задержки разные, как настоящий эквалайзер */ .logo-hero .bar-1 { animation-delay: 0s; } .logo-hero .bar-2 { animation-delay: 0.35s; } .logo-hero .bar-3 { animation-delay: 0.7s; } .logo-hero .bar-4 { animation-delay: 1.05s; } .logo-hero .bar-5 { animation-delay: 1.4s; } @keyframes pulse { from { transform: scaleY(1); } to { transform: scaleY(0.5); } } /* ============================================================ ПЕРЕИСПОЛЬЗУЕМЫЕ КОМПОНЕНТЫ (пригодятся на этапах друзей и чатов) ============================================================ */ /* ---------- Карточка / панель ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; } /* ---------- Кнопки ---------- */ .btn { display: block; width: 100%; padding: 11px 16px; border: none; border-radius: 10px; font: 600 15px 'Lumina UI', sans-serif; /* кнопки не наследуют шрифт — задаём явно */ cursor: pointer; } /* Главная кнопка — единственная с градиентом (правило акцентов) */ .btn-primary { background: var(--accent-gradient); color: var(--text-on-accent); margin-top: 6px; } .btn-primary:hover { filter: brightness(1.07); /* лёгкая подсветка вместо второго градиента */ } /* Второстепенная кнопка — прозрачная с рамкой */ .btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-secondary:hover { border-color: var(--accent); } /* Опасное действие — контурная красная, заливается при наведении */ .btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } /* Кнопка-ссылка: переключение вход <-> регистрация */ .link-btn { display: block; width: 100%; margin-top: 18px; background: none; border: none; font: 400 14px 'Lumina UI', sans-serif; color: var(--text-secondary); cursor: pointer; text-align: center; } .link-btn b { color: var(--accent); font-weight: 600; } .link-btn:hover b { text-decoration: underline; } /* ---------- Поля ввода ---------- */ .field { margin-bottom: 14px; } label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); } .input { display: block; width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); color: var(--text); font: 400 15px 'Lumina UI', sans-serif; } .input::placeholder { color: var(--text-muted); } .input:focus { outline: 2px solid var(--accent); /* заметная рамка фокуса без теней */ outline-offset: 1px; border-color: var(--accent); } /* Обёртка для поля с "глазком": кнопка позиционируется относительно неё, поверх правого края поля */ .input-wrap { position: relative; } .input-wrap .input { padding-right: 42px; /* место под глазок, чтобы текст не залезал */ } .eye-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: var(--text-muted); cursor: pointer; } .eye-btn:hover { color: var(--text); } /* Какую иконку показывать: обычно "глаз", после включения — "глаз зачёркнут". Классом .eye-open управляет auth-view.js */ .eye-btn .icon-eye-off { display: none; } .eye-btn.eye-open .icon-eye { display: none; } .eye-btn.eye-open .icon-eye-off { display: block; } /* ---------- Аватар-заглушка ---------- */ .avatar { position: relative; /* чтобы спозиционировать точку "в сети" */ flex: none; /* не сжимать в flex-строке */ width: 44px; height: 44px; border-radius: 50%; background: var(--accent-gradient); /* акцент — градиент разрешён */ color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; } /* Точка "в сети" — на краю аватара, с обводкой в цвет карточки */ .online-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--online); border: 2px solid var(--bg-card); } /* ---------- Пузырь сообщения (заготовка для этапа чатов) ---------- */ .bubble { max-width: 72%; width: fit-content; padding: 9px 13px; border-radius: 12px; background: var(--bg-card); /* чужое сообщение — цвет карточки */ border: 1px solid var(--border); color: var(--text); font-size: 15px; line-height: 1.45; overflow-wrap: break-word; /* длинные слова/ссылки не ломают макет */ } /* Своё сообщение: градиент + один "острый" угол снизу справа */ .bubble-own { background: var(--accent-gradient); border: none; color: var(--text-on-accent); border-bottom-right-radius: 4px; margin-left: auto; /* прижать к правому краю */ } /* Активный элемент списка (заготовка: выбранный чат/друг в сайдбаре) */ .list-item-active { background: var(--accent-gradient); color: var(--text-on-accent); border-radius: 10px; } /* ---------- Плашка статуса ("тост" поверх страницы) ---------- Один элемент #status обслуживает и экран входа, и экран сессии, поэтому он закреплён вверху по центру и виден из любого экрана. */ .status { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(440px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px; font-size: 14px; white-space: pre-wrap; /* переносы строк \n из JS отображаются как есть */ word-break: break-word; /* два фоновых слоя: снизу сплошной цвет карточки (чтобы тост не просвечивал над волнами), сверху — цветная тонировка успеха/ошибки */ background-color: var(--bg-card); border: 1px solid var(--border); animation: toast-in 0.3s ease both; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } .status.ok { background-image: linear-gradient(var(--ok-bg), var(--ok-bg)); color: var(--ok-text); } .status.error { background-image: linear-gradient(var(--err-bg), var(--err-bg)); color: var(--err-text); } /* ---------- Формы: заголовки и переключение панелей ---------- */ h2 { font-size: 22px; font-weight: 600; color: var(--text); } .subtitle { margin: 4px 0 18px; font-size: 14px; color: var(--text-muted); } /* Панель формы плавно появляется при переключении вход <-> регистрация. Анимация срабатывает каждый раз, когда панель показывается заново (снятие display: none перезапускает CSS-анимацию). */ .form-panel { animation: panel-in 0.25s ease both; } @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hint { margin-top: 8px; font-size: 13px; color: var(--text-muted); } /* Подсветка живой подсказки "Твой логин будет: ..." */ .hint b { color: var(--text-secondary); font-weight: 600; } /* ---------- Блок сессии (после входа) ---------- */ .session-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; position: relative; z-index: 1; } .session-center .card { width: min(400px, 100%); animation: rise 0.45s ease both; } .session-head { display: flex; align-items: center; gap: 12px; } .session-user { font-size: 15px; font-weight: 500; } .btn-row { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } /* ---------- Переключатель темы ---------- */ .theme-toggle { position: fixed; /* всегда в правом верхнем углу */ top: 16px; right: 16px; z-index: 50; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } /* В тёмной теме — солнце (клик => светлая), в светлой — луна */ :root[data-theme="aurora"] .icon-moon { display: none; } :root[data-theme="sakura"] .icon-sun { display: none; } /* ============================================================ ЭКРАН ПРИЛОЖЕНИЯ: шапка и раздел "Друзья" ============================================================ */ .app { height: 100vh; /* ровно высота окна: прокручивается только лента сообщений и сайдбар, а не вся страница */ display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; /* содержимое — над фоновыми волнами */ } /* --- Шапка --- */ .app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .logo-small .logo-text { font-size: 24px; } .logo-small .logo-wave { width: 24px; height: 16px; } /* Профиль в шапке: аватар + ник#тег + кнопка выхода */ .user-chip { display: flex; align-items: center; gap: 10px; /* отступ справа, чтобы не залезать под круглый переключатель темы */ margin-right: 56px; } /* Кнопка-иконка (выход, обновить списки) */ .icon-btn { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); cursor: pointer; } .icon-btn:hover { color: var(--text); border-color: var(--accent); } /* Индикатор "переподключение…" в шапке */ .conn-status { font-size: 12px; color: var(--err-text); background: var(--err-bg); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } /* --- Двухпанельная раскладка: сайдбар + чат --- */ .chat-layout { flex: 1; /* занять всё под шапкой */ display: grid; grid-template-columns: 280px 1fr; /* фиксированный сайдбар + резиновый чат */ min-height: 0; /* ВАЖНО: без этого flex/grid не даёт внутренним спискам прокручиваться */ } .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); overflow-y: auto; /* прокручивается сам сайдбар */ padding: 12px; min-width: 0; } /* Заголовки секций сайдбара */ .side-title { display: flex; align-items: center; gap: 6px; margin: 16px 4px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; /* КАПСОМ */ letter-spacing: 0.06em; /* с лёгкой разрядкой — читается как ярлык */ color: var(--text-muted); } /* Совсем маленькая кнопка-иконка (обновить списки) */ .icon-btn-xs { width: 22px; height: 22px; border-radius: 6px; margin-left: auto; } /* Форма добавления друга: поле + компактная кнопка "+" */ .add-friend-form { display: flex; gap: 8px; } .add-friend-form .input { flex: 1; min-width: 0; margin-top: 0; } /* Кнопка "в строку" — не на всю ширину, в отличие от .btn по умолчанию */ .btn-inline { display: inline-block; width: auto; margin-top: 0; flex: none; } /* --- Панель чата --- */ .chat-panel { background: var(--bg-panel); /* наконец пригодилась переменная из Этапа 1! */ display: flex; flex-direction: column; min-width: 0; min-height: 0; } /* Заглушка "выбери друга" */ .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); font-size: 15px; padding: 24px; text-align: center; } .chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* Шапка чата: с кем говорим и в сети ли он */ .chat-header { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); } .chat-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .chat-presence { font-size: 12px; color: var(--text-muted); } .chat-presence.online { color: var(--online); } /* Кнопка "назад" видна только на узких экранах (см. media-query ниже) */ .chat-back { display: none; } /* Лента сообщений — единственное, что прокручивается в чате */ .chat-messages { flex: 1; overflow-y: auto; min-height: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; } /* Строка с одним сообщением: свои прижаты вправо, чужие влево */ .msg { display: flex; flex-direction: column; align-items: flex-start; } .msg.own { align-items: flex-end; } .msg-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; padding: 0 4px; } /* Поле ввода внизу чата */ .chat-form { flex: none; display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); } .chat-form .input { flex: 1; min-width: 0; margin-top: 0; } /* --- Узкие экраны: одна панель за раз --- */ @media (max-width: 880px) { .chat-layout { grid-template-columns: 1fr; /* сайдбар на всю ширину */ } .chat-panel { display: none; /* по умолчанию виден список друзей */ } /* Открыли чат (класс ставит chat.js) — меняем панели местами */ .chat-layout.chat-open .chat-panel { display: flex; } .chat-layout.chat-open .sidebar { display: none; } .chat-back { display: flex; /* кнопка "назад к списку" */ } } /* Счётчик рядом с заголовком — акцентный градиент разрешён (это акцент) */ .badge { background: var(--accent-gradient); color: var(--text-on-accent); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; } /* Серый чип "ожидает" у исходящих заявок */ .chip { font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } /* --- Списки --- */ .friend-list { list-style: none; /* убираем маркеры-точки у
  • */ } /* Строка в сайдбаре: заявка или друг */ .friend-row { display: flex; align-items: center; flex-wrap: wrap; /* если кнопкам тесно — они переносятся на строку ниже, а не сжимают ник до нуля */ gap: 6px 8px; padding: 8px; border-radius: 10px; } /* Друзья кликабельны — открывают чат */ .friend-row.clickable { cursor: pointer; } .friend-row.clickable:hover { background: var(--bg-card); } /* Выбранный друг — активный элемент с акцентным градиентом. Текст и точка перекрашиваются, чтобы читаться на градиенте. */ .friend-row.list-item-active .friend-name, .friend-row.list-item-active .friend-tag { color: var(--text-on-accent); } .friend-row.list-item-active:hover { background: var(--accent-gradient); } /* Серая точка у тех, кто не в сети */ .online-dot.offline { background: var(--text-muted); } .friend-name { font-weight: 500; min-width: 60px; /* ник не должен исчезать совсем */ overflow: hidden; text-overflow: ellipsis; /* длинный ник обрежется многоточием */ white-space: nowrap; } .friend-tag { color: var(--text-muted); flex: none; } /* Кнопки действия — прижаты к правому краю строки */ .friend-actions { margin-left: auto; display: flex; gap: 6px; flex: none; } /* Уменьшенная версия аватара для списков и шапки */ .avatar-sm { width: 32px; height: 32px; font-size: 14px; font-weight: 600; } .avatar-sm .online-dot { width: 10px; height: 10px; } /* Маленькие кнопки в строках списков */ .btn-sm { display: inline-block; width: auto; margin-top: 0; padding: 6px 10px; font-size: 13px; } /* Совсем компактная кнопка "✕" (удалить из друзей) */ .btn-icon { padding: 4px 8px; } /* Пустой список */ .empty { color: var(--text-muted); font-size: 14px; padding: 10px 0; } /* ============================================================ ГРУППОВЫЕ ЧАТЫ ============================================================ */ /* Строка группы в сайдбаре: колонка "название + превью" */ .row-col { flex: 1; min-width: 0; /* без этого превью не даст себя обрезать */ display: flex; flex-direction: column; gap: 1px; } /* Превью последнего сообщения — обрезается многоточием */ .row-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Системное сообщение: по центру ленты, приглушённо, без пузыря */ .msg-system { align-self: center; max-width: 90%; text-align: center; font-size: 12.5px; color: var(--text-muted); padding: 2px 10px; } /* Подпись автора над чужим сообщением в группе */ .msg-author { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 4px 2px; } /* Строка "X печатает…" под шапкой чата */ .typing-line { padding: 4px 16px 0; font-size: 12px; font-style: italic; color: var(--text-muted); } /* ---------- Модалка "Создать группу" ---------- */ /* Тёмная подложка на весь экран; клик по ней закрывает модалку */ .modal-overlay { position: fixed; inset: 0; /* растянуть на все четыре стороны */ background: rgba(0, 0, 0, 0.55); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal { width: min(420px, 100%); max-height: 85vh; overflow-y: auto; } .modal h2 { margin-bottom: 14px; } /* Список друзей с чекбоксами */ .invite-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); padding: 8px; } /* label-строка: клик по имени тоже ставит галочку */ .invite-item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 4px; font-size: 14px; font-weight: 400; color: var(--text); border-radius: 6px; cursor: pointer; } .invite-item:hover { background: var(--bg-card); } .invite-item input { accent-color: var(--accent); /* галочка в цвет темы */ } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; } /* ---------- Панель участников ---------- */ .members-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 100%); background: var(--bg-sidebar); border-left: 1px solid var(--border); z-index: 35; /* ниже тоста (40) и переключателя темы (50) */ padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .members-head { display: flex; align-items: center; gap: 8px; } .members-head h3 { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } /* Кнопки "выйти"/"удалить группу" — прижаты к низу панели */ .members-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } /* ============================================================ ГОЛОСОВОЙ ЗВОНОК ============================================================ */ /* Плашка звонка: закреплена вверху по центру, под тостом статуса */ .call-bar { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 38; /* под тостом (40), над панелью участников (35) */ display: flex; align-items: center; gap: 12px; width: min(420px, calc(100vw - 32px)); padding: 12px 16px; } .call-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; } .call-status { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; /* цифры таймера одной ширины — не "дёргаются" */ } .call-actions { display: flex; gap: 6px; flex: none; } /* Пока звонок "звенит" (входящий или исходящий) — аватар мягко пульсирует. Анимируется только transform — дёшево для процессора. */ .call-bar.ringing .avatar { animation: call-pulse 1s ease-in-out infinite alternate; } @keyframes call-pulse { from { transform: scale(1); } to { transform: scale(1.15); } } /* ============================================================ УВАЖЕНИЕ К НАСТРОЙКАМ ПОЛЬЗОВАТЕЛЯ: prefers-reduced-motion ============================================================ Если в системе включено "уменьшить движение" (macOS: Настройки -> Универсальный доступ -> Движение), браузер сообщает это через media-запрос prefers-reduced-motion: reduce — и мы выключаем ВСЕ анимации: волны замирают, панели и тосты появляются мгновенно. Людям с вестибулярной чувствительностью движение может быть физически неприятно, поэтому это правило — обязательное. ============================================================ */ @media (prefers-reduced-motion: reduce) { .wave, .logo-hero .bar, .form-panel, .auth-card, .session-center .card, .status, .call-bar.ringing .avatar { animation: none; } } /* ---------- Служебное ---------- */ /* держим .hidden в самом конце файла: при равной "весомости" селекторов побеждает тот, что объявлен позже — так display:none гарантированно перекрывает display:grid/flex у скрываемых блоков */ .hidden { display: none; }