/* static/apple.css — общий слой поверх страничных стилей. Подключается последним на каждой странице, поэтому его правила перекрывают частные, ничего в них не переписывая. Здесь живёт то, что должно вести себя одинаково везде и чего в проекте не было: отклик на нажатие, поведение при системных настройках доступности, сглаживание смены темы. Разбор по указаниям навыка apple-design (Designing Fluid Interfaces, WWDC 2018, и Principles of Great Design). Чего здесь НЕТ намеренно: пружин и инерции. Они нужны там, где палец тащит предмет — а в этом дашборде таких мест нет: карточки не перетаскиваются, шторок нет. Единственный жест — удержание кнопки поворота камеры, и он уже сделан на pointer-событиях. Ставить пружинную библиотеку ради оформления, которое человек не тянет пальцем, значит платить весом за то, чего никто не почувствует. */ /* ── 1. Отклик на нажатие ──────────────────────────────────────────── «Ощущение прямого управления обрывается в тот момент, когда появляется задержка». В проекте было 61 правило :hover и всего 13 :active — а на телефоне наведения не существует вовсе, и большинство нажатий не отзывалось ничем. Отклик даём на нажатие, а не на отпускание. */ /* Переход задаём только тем, у кого своего нет: `transition` — сокращённое свойство, и объявленное здесь стёрло бы чужие настройки целиком вместе с их transform и box-shadow. У .tile, .btn, .hdr-btn, .topnav-item, .sidebar-link, .cam-sw, .device-card переходы свои. */ .lang, .card, .panel, .wx, .cam-live-btn, .feeder-btn, .fl-btn, .power-btn, .theme-toggle-btn { /* Меньше порога заметности, но палец это чувствует */ transition: transform 110ms cubic-bezier(0.2, 0, 0.2, 1), background-color 160ms ease, border-color 160ms ease; } .btn:active, .btn-sm:active, .btn-primary:active, .btn-danger:active, .btn-outline-primary:active, .btn-outline-secondary:active, .btn-glass-blue:active, .btn-tuya:active, .btn-xiaomi:active, .hdr-btn:active, .topnav-item:active, .cam-sw:active, .feeder-btn:active, .fl-btn:active, .theme-toggle-btn:active, .sidebar-link:active, .lang:active, button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active { transform: scale(0.97); } /* Крупные поверхности от сжатия выглядят мятыми — им хватает лёгкого утапливания вглубь, оно же читается как «нажал» */ .tile:active { transform: translateY(-1px) scale(0.995); } /* Палец закрывает собой мелкую цель, поэтому область нажатия должна быть больше рисунка. Расширяем невидимой рамкой, не трогая раскладку. */ @media (pointer: coarse) { .lang, .hdr-btn, .cam-sw, .cam-dir { position: relative; } .lang::after, .hdr-btn::after, .cam-sw::after, .cam-dir::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; } } /* ── 2. Меньше прозрачности ────────────────────────────────────────── Системная настройка «уменьшить прозрачность» — про читаемость: стекло поверх пёстрых обоев тяжело читать. Мы на нём построили всё оформление, и до сих пор эту настройку не замечали вовсе (0 файлов из 9). Гасим размытие и делаем поверхности плотными: рисунок тот же, просто без стекла. */ @media (prefers-reduced-transparency: reduce) { :root { --lg-blur: 0px; --lg-blur-soft: 0px; --card-bg: #1c1c20; --card-bg-strong: #26262c; --dash-bg: #101014; --lg-bg: rgba(255, 255, 255, 0.10); --lg-bg-weak: rgba(255, 255, 255, 0.05); } :root[data-theme="light"] { --card-bg: #ffffff; --card-bg-strong: #ffffff; --dash-bg: #eef1f6; --lg-bg: rgba(0, 0, 0, 0.06); --lg-bg-weak: rgba(0, 0, 0, 0.03); } /* Обои под сплошными карточками только мешают: убираем и их */ body::before { background-image: none !important; } /* backdrop-filter задан по месту во многих правилах, переменная его не достаёт — гасим напрямую */ .tile, .card, .device-card, .panel, .shell, .page-shell, .wx, .alert, .pr-card, .pr-table, .cam-live-btn, .cam-live-tag { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ── 3. Больше контраста ───────────────────────────────────────────── Здесь мало сделать поверхность плотной: нужна ещё внятная граница, иначе карточки сливаются в одно поле. */ @media (prefers-contrast: more) { :root { --card-border: rgba(255, 255, 255, 0.55); --card-highlight: rgba(255, 255, 255, 0.30); } :root[data-theme="light"] { --card-border: rgba(0, 0, 0, 0.45); --card-highlight: rgba(0, 0, 0, 0.10); } .tile, .card, .device-card, .panel, .wx, .alert, .pr-card, .pr-table { border-width: 2px; } } /* ── 4. Меньше движения ────────────────────────────────────────────── «Уменьшить движение» не значит «убрать отклик»: остаётся то, что не двигает картинку — прозрачность и цвет. Уезжает то, что смещает и масштабирует. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; } .tile:hover, .tile:active, .device-card:hover, .btn:active, .hdr-btn:active, .cam-sw:active, .lang:active, button:active { transform: none !important; } /* Смысловые переходы цвета и прозрачности оставляем: они помогают понять, что изменилось, и не качают картинку перед глазами */ } /* ── 5. Смена темы без рывка ───────────────────────────────────────── Резкий скачок яркости в глаза бьёт заметнее, чем кажется. Переводим только цвета и только у крупных плоскостей: анимировать переменные у всего подряд дорого и незачем. */ /* Только фон страницы и оболочка: у карточек переходы свои, и переписывать их ради смены темы значит ломать наведение. Цвет фона меняется на самой большой плоскости — именно она бьёт по глазам. */ body, .shell, .page-shell { transition: background-color 260ms ease, color 260ms ease; } @media (prefers-reduced-motion: reduce) { body, .shell, .page-shell { transition-duration: 120ms !important; } } /* ── Атрибут hidden обязан прятать ─────────────────────────────────── Браузерное правило [hidden] { display: none } живёт в таблице агента, а она слабее любой авторской. Стоит написать .cam-thumb { display: block } — и элемент, которому JS поставил hidden, остаётся на экране. Так и вышло с эфиром камеры: снимок не прятался, занимал всю рамку и выдавливал