/* theme-light — светлая тема Флоу: индиго-оправа и краски индикаторов. Роман 17.09.2026: «тёмная тема у нас отличная, а светлая — никакая. Большинство будет использовать светлую тему… верхняя панель должна быть не белой точно — на всех разделах без исключений… цветные индикаторы что-то совсем не подходят к светлой теме». Из двух концептов, снятых на боевом (лавандовая шапка и индиго-оправа), выбрана оправа — с условием: «чтобы боковое меню и шапка различались по цвету». Отдельным файлом, а не правкой `app.css`: над оформлением работают в несколько рук, а здесь собрано всё, что делает светлую тему собой, — открыл один файл и видишь её целиком. Подключается последним в index.html: правила тут перебивают общие того же веса. Тёмную тему файл не трогает. Всё, что касается только светлой, стоит под `[data-theme="light"]` — атрибут ставится в `` до первой отрисовки (index.html), так что пустого кадра без него не бывает. */ /* ---------- оправа ---------- Две краски, а не одна. Меню — глубокий индиго, почти ночь: оно самое крупное тёмное пятно на экране, и чем оно глуше, тем спокойнее рядом с ним белый лист. Шапка — светлая плашка (разбор у «верхних панелей»): глаз различает, где навигация по разделам, а где действия текущего раздела. Меню раньше было стеклом `rgba(31, 32, 43, .78)`, и на светлой странице выходило не #1F202B, а серым #4B4B57 — «графит», которого никто не выбирал. Теперь стекло почти глухое: краска та, что задумана, а за раскрытой поверх текста панелью по-прежнему ничего не читается. */ [data-theme="light"] { --frame-side: #1B1936; --frame-top: #F6F5FB; --frame-top-line: #D9D6EA; --frame-top-shadow: 0 1px 2px rgba(40, 36, 96, .05), 0 4px 16px rgba(40, 36, 96, .06); --sidebar: var(--frame-side); --sidebar-glass: rgba(27, 25, 54, .96); --sidebar-2: #2C2A4D; --sidebar-line: #2A2849; --sidebar-text: #ABA9CC; --sidebar-text-strong: #FFFFFF; --sidebar-accent: #8480F0; /* Лист под оправой: на полтона лавандовее прежнего графита, чтобы белые карточки лежали на нём с краем, а не растворялись. */ --bg: #ECEBF5; --border: #E0DEEE; --border-strong: #CBC8DF; --text: #16152A; --text-soft: #555470; --text-faint: #72718C; /* ---------- краски индикаторов ---------- Главная болезнь светлой темы. `--red`, `--green`, `--amber` притемнены под **текст** на белом (контраст 4,5), и ими же заливали полосы, точки и сегменты. Притемнённая краска площадью — это кирпич, болото и коричневый: `--amber` #9C5E00 точкой возле дела выходил бурым пятном, полоса «Сегодня» — сплошным кирпичом. Заливке контраст текста не нужен, ей нужен чистый цвет. Отсюда пара: `--x` — для букв, `--x-fill` — для площади. В тёмной теме они совпадают (там краски и так светлые), в светлой заливка — чистый спектральный тон. */ --green-fill: #2FA36B; --red-fill: #E5484D; --amber-fill: #F2A33A; } [data-theme="dark"] { --green-fill: var(--green); --red-fill: var(--red); --amber-fill: var(--amber); } /* ---------- верхние панели ---------- «На всех разделах без исключений» — значит не только `.topbar`. В Почте и Чате своей шапки у раздела нет, её роль играют полосы над колонками: `.mail-top` над списком писем, `.chat__search` над списком разговоров, `.chat__head` над перепиской и `.chat__side-head` над «О чате»; на телефоне к ним добавляется заголовок «Флоу.Чат» (`.chat__list-head`) и строка ящика в Почте (ниже, отдельным правилом). Все красятся одной краской — по верху экрана идёт одна лента. **Плашка светлая, но не белая.** Первый заход (17.09.2026, `8657c5a`) красил шапки индиго #34307A. Роман в тот же день: «плашка сливается с кнопками… верни светлый оттенок, типа белый, только не такой яркий, чтобы плашка выделялась на фоне рабочего стола и рабочих окон». Индиго съедало фиолетовые «+ Клиент» / «+ Сделка» — у кнопок и полосы одна семья цвета. Отсюда условие на тон: плашка обязана отличаться **в обе стороны** — и от лавандового листа `--bg` под карточками, и от белых карточек и окон. Белая сливается с окнами, цвета листа — с листом. Тон `--frame-top` стоит между ними, а отделяют плашку не только краской: снизу волосок `--frame-top-line` и мягкая тень — лента лежит над работой, а не нарисована на ней. Токены содержимого не переопределяются: плашка светлая, и всё внутри (поиск, колокол, плашка рабочего дня, кнопки) рисуется обычными красками листа. Выпадашкам из шапки возвращать нечего. Мини-чат исключён: его шапка — заголовок окна поверх работы, а не лента по верху экрана. */ [data-theme="light"] :is(.topbar, .mail-top, .chat__search, .chat__head, .chat__side-head, .chat__list-head):not(.minichat *) { background: var(--frame-top); border-bottom: 1px solid var(--frame-top-line); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Тень — только у общей шапки: она стоит поверх прокручиваемого раздела, и текст уходит под неё. Полосы Почты и Чата стоят в потоке над своими колонками, и тень легла бы на первую строку списка. */ [data-theme="light"] .topbar { box-shadow: var(--frame-top-shadow); } /* Колонка ящиков в Почте стоит рядом с `.mail-top` и своей шапки не имеет — сверху в ней «Написать». Без полосы над ней лента обрывалась бы на краю колонки. Рисуем ту же краску фоном на высоту шапки, и волосок под ней — вровень с волоском `.mail-top`. */ [data-theme="light"] .mail__rail { background-image: linear-gradient(var(--frame-top-line), var(--frame-top-line)), linear-gradient(var(--frame-top), var(--frame-top)); background-size: 100% 1px, 100% var(--mail-top-h); background-position: 0 var(--mail-top-h), 0 0; background-repeat: no-repeat; } /* На телефоне колонка ящиков — не колонка, а строка «Все ящики · Входящие» над шапкой Почты, и под вырезом камеры стоит именно она. Красим строку целиком: вместе с `.mail-top` под ней выходит одна плашка. */ @media (max-width: 820px) { [data-theme="light"] .mail__rail { background: var(--frame-top); border-color: transparent; } } /* Меню и лента встык: тень меню на светлой теме рисовала между ними серую ступень. Тень выдвинутой панели (`--shadow-rail`) остаётся. */ [data-theme="light"] .sidebar.is-collapsed { box-shadow: none; } /* ---------- цвет стадии и ящика ---------- Было: `color-mix(… 78%, #000)` — притемнение примесью чёрного. Чёрный гасит не только светлоту, но и насыщенность: жёлтая стадия уходила в оливу, оранжевая в коричневый, розовая в пыльно-бурый (колонки доски «КП отправлено», «Договор заключён»). Стало: относительный цвет в oklch. Светлота прижимается к порогу читаемости, **насыщенность и тон остаются своими** — жёлтая стадия темнеет в янтарь, а не в болото. Подложка колонки — не полупрозрачная примесь, а своя пастель того же тона: чистая, без серого налёта. */ @supports (color: oklch(from red l c h)) { [data-theme="light"] .stage-tone { --stage-ink: oklch(from var(--stage, var(--accent)) min(l, .54) max(c, .09) h); --stage-tint: oklch(from var(--stage, var(--accent)) .955 calc(c * .32) h); } /* Ящик: полоска в списке писем, точка в колонке, метка на столе. Цвета ящиков тёмные (#1D4990, #A6273F), и притемнённые ещё раз они давали почти чёрные штрихи. Здесь светлота поднимается в рабочую полосу. */ [data-theme="light"] :is(.mail-row, .dash-mail__row, .mail__box, .mail__box-dot, .mail__view, .mail-head) { --box-ink: oklch(from var(--box, var(--accent)) clamp(.5, l, .6) max(c, .12) h); } } /* ---------- заливки статусов ---------- */ /* Полоса «Сегодня» на столе. */ [data-theme="light"] .today__fill { background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(90deg, #38B27A, var(--green-fill)); box-shadow: 0 0 14px rgba(47, 163, 107, .28); } [data-theme="light"] .today__over { background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(90deg, #F07A5A, var(--red-fill)); } [data-theme="light"] .today__now { background: var(--frame-side); opacity: .7; } /* Точки, полоски и сегменты — площадь, а не буквы. */ [data-theme="light"] :is(.trow__dot, .call__dot.is-connecting, .call__dot.is-live.is-silent, .devices-legend__dot.is-silent, .netdot.is-syncing .netdot__eye, .cal__strip.is-today) { background: var(--amber-fill); } [data-theme="light"] :is(.call__dot.is-live, .devices-legend__dot.is-on, .day-bar__seg--done, .wt-legend__item.is-mine::before, .kb-share__fill.is-full, .cal__strip.is-done) { background: var(--green-fill); } [data-theme="light"] :is(.call__dot.is-lost, .netdot.is-offline .netdot__eye, .day-bar__seg--over, .cal__strip.is-over) { background: var(--red-fill); }