/* ============================================================ theme-apple.css — интеграция нового дизайна (Apple-style) в «Тортугу». === ЗАЧЕМ ЭТОТ ФАЙЛ И ПОЧЕМУ ОН ПОСЛЕДНИЙ === Новый дизайн построен на CSS-токенах: --bg, --panel, --border, --accent… Существующий интерфейс (midnight.css, nightfall.css) построен на ДРУГИХ именах: --canvas, --surface, --line, --primary… плюс содержит сотни жёстко прописанных цветов вида #191b20. Поэтому простого «добавить тему» недостаточно. Этот файл делает две вещи: 1. МОСТ ТОКЕНОВ — старые имена переопределяются через новые. Одна правка (--surface: var(--panel)) мгновенно перекрашивает все правила midnight.css, которые писались через var(--surface). 2. ТОЧЕЧНЫЕ ПЕРЕОПРЕДЕЛЕНИЯ — те места, где цвет зашит литералом, перебиваем явно. Все они собраны здесь, сгруппированы по зонам интерфейса, чтобы их можно было править без поиска по трём файлам. === ПОЧЕМУ НЕ ПОДКЛЮЧАЕМ base.css ИЗ ДИЗАЙН-ПАПКИ НАПРЯМУЮ === base.css описывает ДРУГУЮ разметку (.entry-card, .app-nav, .queue li, .room) — это превью-макет, а не реальный DOM приложения. Подключив его, мы получили бы конфликтующие правила и `* { margin:0 }`, ломающий layout.css. Поэтому оттуда взяты ТОЛЬКО токены и визуальные решения, а селекторы здесь — реальные (#roomList, .room-choice, .playlist li…). === КАК ВКЛЮЧАЕТСЯ === Файл работает только когда на есть класс apple-ui + theme-*. Ставит их theme-switcher.js. Без них интерфейс выглядит ровно как раньше (тема «Ночь» = прежний nightfall, этот файл не применяется вовсе). ============================================================ */ /* ============================================================ 1. ТОКЕНЫ ТЕМ Каждая тема задаёт палитру на body. Значения взяты из themes/light.css, dark.css, glass.css дизайн-макета. ============================================================ */ /* --- Тема A · «Дневной сеанс»: светлый, как apple.com --- */ body.theme-light { --bg: #f5f5f7; --bg-accent: radial-gradient(900px 500px at 85% -5%, rgba(0,113,227,.06), transparent 60%); --panel: #ffffff; --panel-raised: #ffffff; --field: #ffffff; --border: #d2d2d7; --border-soft: rgba(0,0,0,.07); --text: #1d1d1f; --muted: #6e6e73; --faint: #86868b; --accent: #0071e3; --accent-text: #ffffff; --accent-soft: rgba(0,113,227,.10); --accent-hover: #0077ed; --green: #34c759; --red: #ff3b30; --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 10px 34px rgba(0,0,0,.07); --shadow-float: 0 18px 60px rgba(0,0,0,.16); --blur: none; /* Стрелка --- Качество/пресет/звук/провайдер субтитров. appearance:none убирает системную стрелку, чтобы во всех темах и ОС она была одинаковой; свою рисуем data-URI (цвет — токен --chevron). */ body.apple-ui select, body.apple-ui #qualitySelect, body.apple-ui #screenPreset, body.apple-ui #screenAudioMode, body.apple-ui #subtitleProviderSelect, body.apple-ui .subtitle-settings select, body.apple-ui .host-pane select { appearance: none; -webkit-appearance: none; background-color: var(--field); background-image: var(--chevron-bg); /* своя стрелка, цвет задаёт тема */ background-repeat: no-repeat; background-position: right 13px center; border: 1px solid var(--border); border-radius: var(--radius-m); color: var(--text); font-family: var(--font); font-size: 13px; padding: 9px 36px 9px 14px; /* справа запас под стрелку */ cursor: pointer; transition: border-color .15s, box-shadow .15s; } body.apple-ui select:hover { border-color: var(--accent); } body.apple-ui select:focus { outline: none; border-color: var(--accent); /* Кольцо фокуса — фирменный приём макета: 3.5px полупрозрачного акцента */ box-shadow: 0 0 0 3.5px var(--accent-soft); } /* Сама всплывающая панель опций рисуется операционной системой и полностью не стилизуется. Но color-scheme (задан в токенах темы) заставляет ОС рисовать её тёмной в тёмных темах и светлой в светлой — поэтому список больше не «белый на тёмном». */ body.apple-ui select option { background-color: var(--panel); color: var(--text); } /* --- 4.2.

— раскрывающиеся секции --- «Инструменты демонстрации», «Диагностика плеера», «Настройки субтитров», «Библиотека сервера», «История просмотра», «В разговоре», «Настройки звука», «Закрепить сообщение», «Какие ссылки подойдут?». */ body.apple-ui details, body.apple-ui .screen-tools, body.apple-ui .player-diagnostics, body.apple-ui .subtitle-settings, body.apple-ui #voiceRoster, body.apple-ui #voiceSettings, body.apple-ui .source-help, body.apple-ui .library-disclosure, body.apple-ui .room-form { background: color-mix(in srgb, var(--muted) 5%, transparent); border: 1px solid var(--border-soft); border-radius: var(--radius-m); backdrop-filter: var(--blur); } body.apple-ui summary { cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 11px 14px; border-radius: var(--radius-m); list-style: none; /* убираем системный треугольник */ display: flex; align-items: center; gap: 8px; transition: color .15s, background .15s; } body.apple-ui summary::-webkit-details-marker { display: none; } body.apple-ui summary:hover { color: var(--text); background: var(--accent-soft); } /* Своя стрелка вместо системной: вращается при раскрытии. */ body.apple-ui summary::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); /* свёрнуто → смотрит вправо */ transition: transform .2s cubic-bezier(.32,.72,0,1); margin-right: 2px; } body.apple-ui details[open] > summary::before { transform: rotate(45deg); } body.apple-ui details[open] > summary { color: var(--text); } /* --- 4.3. Диалоги (