/* ============================================= * ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И ТЕМЫ * ============================================= */ /* Базовые настройки (светлая тема по умолчанию) */ :root { /* Вторичный цвет — примесь черного с прозрачностью */ --color-secondary: color-mix(in srgb, var(--color-black) 7%, transparent); } /* Темная тема — переопределение переменных */ :root[theme=dark] { --modal-bg: #121212; /* Фон модальных окон */ --form-bg: #121212; /* Фон форм */ --main-body-bg: #202020; /* Основной фон тела */ --context-menu-bg: #202020; /* Фон контекстного меню */ --color-black: #161616; /* Базовый черный цвет */ --form-overlay-bg: #121212aa; --form-header-bg: #202020aa; /* Оверлей формы (с прозрачностью) */ --context-menu-overlay-bg: #121212aa; /* Оверлей контекстного меню */ /* Вторичный цвет для темной темы — примесь белого */ --color-secondary: color-mix(in srgb, var(--color-white) 10%, transparent); /* Градиент для обертки сообщений */ --message-wrap-bg: linear-gradient(115deg, color-mix(in srgb, var(--color-white) 2%, var(--color-black)) 0%, color-mix(in srgb, var(--color-primary) 7%, var(--color-black)) 50%, color-mix(in srgb, var(--color-white) 1%, var(--color-black)) 100% ); } /* ============================================= * КОМПОНЕНТ: ВКЛАДКИ (TABS) * ============================================= */ /* Контейнер вкладок с кастомным оформлением */ .cdm-tabs-container { > .cdm-tabs { padding: .5rem; /* Внутренний отступ */ gap: .3rem; /* Расстояние между вкладками */ > li { border-radius: 10rem; /* Полностью скругленные края */ background: none; padding: .5rem 1rem; border: none; /* Ховер-эффект для вкладок */ &:hover { background: var(--button-bg-base-hover); } /* Активная вкладка — с основным цветом темы */ &.active { background: var(--color-primary); color: var(--button-text-inverted); } } } } /* Стандартный контейнер вкладок */ .tab-container { padding-bottom: 0; /* Убираем нижний отступ */ > .tab { /* Отступы: сверху/снизу xs, слева/справа md */ padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md) var(--radius-md) 0 0; /* Скругление только сверху */ gap: var(--spacing-md); } } /* ============================================= * КОМПОНЕНТ: ФУТЕР * ============================================= */ /* Обертка футера */ .wrap-footer { align-items: center; border-radius: calc(var(--spacing-sm) * 4); /* 4x от маленького отступа */ padding: var(--spacing-xs); } /* ============================================= * КОМПОНЕНТ: СООБЩЕНИЯ (MESSAGES) * ============================================= */ /* Стили для обычных сообщений (свои) */ .cdm-form.messages > .content [data-list] > .item > .block > .presentation > .wrap-content > .wrap { border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); /* Скругление: верхний-правый, нижний-правый, нижний-левый */ } /* Стили для исходящих сообщений (чужие) */ .cdm-form.messages > .content [data-list] > .item > .block > .presentation.is-out > .wrap-content > .wrap { border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md); /* Скругление: все, кроме нижнего-правого */ } /* ============================================= * КОМПОНЕНТ: ДОМАШНЯЯ ФОРМА (HOME) * ============================================= */ /* Настройка списка в левой части домашней формы */ .cdm-form-wrap > .cdm-form.home .left .cdm-form.main > .content [data-list] { gap: var(--spacing-xs); /* Маленький отступ между элементами */ } /* Стиль для отметки "Это вы" */ .cdm-form-wrap > .cdm-form.home .left .cdm-form.main > .content [data-list] .item [data-its-you] span { color: var(--text-primary); font-weight: bold; } /* ============================================= * ЭФФЕКТЫ: РАЗМЫТИЕ (BLUR) * ============================================= */ /* Размытие для оверлеев контекстного меню и модальных окон */ .cdm-context-menu-overlay, .cdm-modal-wrap > .cdm-modal-overlay { backdrop-filter: blur(5px); /* Эффект стекла */ } /* ============================================= * КОМПОНЕНТ: ПОЛЕ ВВОДА СООБЩЕНИЙ * ============================================= */ /* Автоматическая высота textarea при пустом значении */ .cdm-form.messages > .footer .wrap-footer textarea:placeholder-shown { height: 100% !important; } /* Маркер непрочитанных сообщений — липкий элемент */ .cdm-form.messages > .content [data-list] [data-unread-marker] { padding: .2rem 1em; font-size: var(--font-size-md); font-weight: 600; position: sticky; /* Прилипает при скролле */ } /* ========== АДАПТИВ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (до 600px) ========== */ @media only screen and (max-width: 600px) { /* Убираем дополнительный отступ на мобильных */ .footer:has(.wrap-footer [action-voice-recorder]:not(.hidden)) { padding-right: unset; } /* Возвращаем стандартное позиционирование кнопок */ .wrap-footer [action-create-message]:hover, .wrap-footer [action-create-message], .wrap-footer [action-voice-recorder]:hover, .wrap-footer [action-voice-recorder] { position: unset; right: unset; background: unset; unset: !important; /* Сброс всех кастомных свойств */ } } /* ============================================= * КОМПОНЕНТ: УВЕДОМЛЕНИЯ (TOAST) * ============================================= */ /* Базовый стиль уведомления */ .cdm-toast { border-left: 2px solid var(--color-primary); /* Левая граница основным цветом */ /* Успешное уведомление */ &.success { background: unset; border-left: 2px solid var(--color-success); } /* Уведомление об ошибке */ &.error { background: var(--toast-bg); border-left: 2px solid var(--color-error); } /* Предупреждение */ &.warning { background: var(--toast-bg); border-left: 2px solid var(--color-warning); } /* Контент уведомления */ .cdm-toast-content { display: flex; flex-direction: column; color: var(--text-light); /* Добавляем заголовок "Уведомление" перед содержимым */ &::before { content: 'Уведомление'; font-weight: bold; color: var(--text-base); } } } /* ============================================= * КОМПОНЕНТ: СТРИМЫ (BROADCASTS) * ============================================= */ .cdm-form .broadcasts { [data-list] { .item { position: relative; /* Для позиционирования дочернего оверлея */ [data-name] { color: var(--text-white); } [data-creator] { color: var(--text-light); } /* Оверлей с градиентом внизу карточки стрима */ > div:nth-child(2) { position: absolute; bottom: 0; left: 0; right: 0; /* Градиент от черного к прозрачному для плавного затемнения */ background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent); } /* Стили для информации о просмотрах и времени */ [data-wrap-watching], [data-wrap-timing] { padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-xl); /* Сильно скругленные углы */ } } } } /* ============================================= * КОМПОНЕНТ: КОНФЕРЕНЦИИ (MEETS) * ============================================= */ .cdm-form .meets { [data-list] { .item { position: relative; /* Для позиционирования дочернего оверлея */ [data-name] { color: var(--text-white); } [data-creator] { color: var(--text-light); } /* Аналогичный оверлей с градиентом, как у стримов */ > div:nth-child(2) { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent); } } } }