/* STAR BODY — темы клиента (пасхалка: тап по логотипу в шапке листает темы).
Палитры перенесены из админки: '' тёмная (дефолт), day дневная,
mono монохром, paper бумага. Тема = data-theme на ,
хранится в localStorage('sb-theme'), применяется до первой отрисовки. */
html[data-theme="day"] {
--bg-body: #E9EEEB;
--surface-card: #FFFFFF;
--surface-field: #F2F6F4;
--brand-green: #3D7A58;
--brand-accent: #3D7A58;
--brand-dark: #DCE8E1;
--text-main: #20302A;
--text-sub: #5E7267;
--border-soft: #CBD9D0;
}
html[data-theme="mono"] {
--bg-body: #ECECEC;
--surface-card: #FFFFFF;
--surface-field: #F4F4F4;
--brand-green: #222222;
--brand-accent: #222222;
--brand-dark: #E4E4E4;
--text-main: #1E1E1E;
--text-sub: #5F5F5F;
--border-soft: #CFCFCF;
}
html[data-theme="paper"] {
--bg-body: #F1ECE2;
--surface-card: #FFFCF6;
--surface-field: #F7F2E8;
--brand-green: #557D63;
--brand-accent: #557D63;
--brand-dark: #EBE2D2;
--text-main: #2C2620;
--text-sub: #7A6F5E;
--border-soft: #DDD2BF;
}
/* ===== переопределения литеральных цветов (тёмная база не тронута) ===== */
/* шапка и нижнее меню — тёмные панели → карточная поверхность темы.
Зона статус-бара — в цвет фона темы (фон, на котором висят окна),
не чёрной полосой: значки времени/Wi-Fi сознательно жертвуем. */
html[data-theme] .main-header {
background: linear-gradient(to bottom,
var(--bg-body) 0,
var(--bg-body) max(env(safe-area-inset-top, 0px), var(--sa-top, 0px)),
var(--surface-card) max(env(safe-area-inset-top, 0px), var(--sa-top, 0px)));
}
/* линия на границе статус-бар/шапка — зеркало нижней линии шапки */
html[data-theme] .main-header::before {
content: ''; position: absolute; left: 0; right: 0;
top: max(env(safe-area-inset-top, 0px), var(--sa-top, 0px));
height: 1px; background: var(--border-soft); pointer-events: none;
}
html[data-theme] .nav-bar { background: var(--surface-card); border-top-color: var(--border-soft); }
/* нижняя кромка за пределами viewport (зона индикатора «домой»):
туда не доходит ни один элемент — рисуется ТОЛЬКО фон body
(webview-bottom-edge.mdc). Поэтому фон двухслойный: сама страница —
в цвете темы, зона ниже её края — в цвет меню: бар у кромки + полоса
под ним читаются единой конструкцией до низа экрана (iPhone и Android). */
html[data-theme] body {
background-color: var(--surface-card);
background-image: linear-gradient(var(--bg-body), var(--bg-body));
background-repeat: no-repeat;
background-size: 100% 100%;
}
html[data-theme] .nav-item.active { color: var(--surface-card); }
html[data-theme] .nav-item.active span { background: var(--text-sub); }
/* логотип и имя вкладки — светлые PNG → затемняем под светлый фон */
html[data-theme] .header-logo img,
html[data-theme] .header-tab-img { filter: brightness(0.26); }
/* заставка: логотип перекрашивается в цвет темы (маска поверх HD-альфы) */
html[data-theme] #loadingScreen {
background: radial-gradient(110% 80% at 50% 40%, var(--surface-card) 0%, var(--bg-body) 46%, var(--bg-body) 100%);
}
html[data-theme] #loadingScreen::after {
box-shadow: inset 0 0 130px 40px rgba(120,100,70,.20);
}
/* тёмное пятно за лого — графит, зеркало светлого спотлайта тёмной заставки */
html[data-theme] #loadingScreen .load-halo {
background: radial-gradient(circle,
rgba(42,42,48,0.38) 0%,
rgba(70,70,78,0.20) 42%,
transparent 78%);
}
html[data-theme] #loadingScreen .load-logo {
background: var(--text-main);
filter: drop-shadow(0 22px 42px rgba(92,74,50,.38))
drop-shadow(0 4px 9px rgba(92,74,50,.24))
drop-shadow(0 1px 0 rgba(255,255,255,.70));
}
/* фраза в шапке */
html[data-theme] .header-phrase { color: var(--text-sub); }
/* основной текст (был #fff/#ffffff на тёмном) */
html[data-theme] .home-date-line,
html[data-theme] .home-hero,
html[data-theme] .home-week-row,
html[data-theme] .home-news,
html[data-theme] .intake-q,
html[data-theme] .home-train input,
html[data-theme] .page-title,
html[data-theme] .photo-caption,
html[data-theme] .option-card,
html[data-theme] .freq-line,
html[data-theme] .subhead,
html[data-theme] .train-row,
html[data-theme] .train-row input,
html[data-theme] .stats,
html[data-theme] .win-text,
html[data-theme] .chat-msg,
html[data-theme] .chat-input,
html[data-theme] .method-line,
html[data-theme] .care-k,
html[data-theme] .care-warn,
html[data-theme] .week-label,
html[data-theme] .monday-confirm label,
html[data-theme] .slot-title,
html[data-theme] .section-title,
html[data-theme] .field-label,
html[data-theme] .question-label,
html[data-theme] .photo-fold-head,
html[data-theme] .compare-viewer-cap,
html[data-theme] .metric-name,
html[data-theme] .week-title,
html[data-theme] .plan-label,
html[data-theme] .status-banner,
html[data-theme] .input-text,
html[data-theme] .select-box,
html[data-theme] textarea { color: var(--text-main); }
/* плейсхолдеры */
html[data-theme] .input-text::placeholder,
html[data-theme] textarea::placeholder,
html[data-theme] .cyc-dateface.empty { color: var(--text-sub); }
/* тёмные подложки → поверхность темы */
html[data-theme] .item-container.freq-group,
html[data-theme] .option-card,
html[data-theme] .sub-group-hidden,
html[data-theme] .consent-box,
html[data-theme] .monday-confirm,
html[data-theme] .video-ph,
html[data-theme] .week-btn,
html[data-theme] .day-box,
html[data-theme] #homeNewsCard.is-read .home-read-btn { background: var(--surface-field); }
/* locked-анкета: в тёмной теме выбранные пункты — чистый текст
(home.css: .locked-form { background: transparent }). Темное правило
выше по специфичности — возвращало серые подложки на светлых темах
и строки выглядели «пустыми полями». Возвращаем прозрачность. */
html[data-theme] .locked-form .option-card,
html[data-theme] .locked-form .sub-group-hidden { background: transparent; }
/* цикл — тёмные ячейки/селекты */
html[data-theme] .cycle-container input[type="date"].input-text,
html[data-theme] .cyc-select-face,
html[data-theme] .cyc-dateface,
html[data-theme] .cyc-cell,
html[data-theme] .cyc-chip { background: var(--surface-field); color: var(--text-main); }
/* чат */
html[data-theme] .chat-box { background: var(--surface-field); }
html[data-theme] .chat-msg-in { background: var(--surface-card); border: 1px solid var(--border-soft); }
/* акцентные кнопки (была тёмно-зелёная заливка + белый текст) */
html[data-theme] .btn-submit,
html[data-theme] .chat-send,
html[data-theme] .home-msg-btn.primary {
background: var(--brand-green); color: #fff; border-color: var(--brand-accent);
}
html[data-theme] .btn-submit.is-off { background: var(--surface-field); color: var(--text-sub); border-color: var(--border-soft); }
/* активная вкладка-пилюля (была заливка text-sub + тёмный текст) */
html[data-theme] .tab-btn.active { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
/* баннер ожидания — тонированный зелёный */
html[data-theme] .status-banner { color: var(--text-main); }
/* цикл — семантика */
html[data-theme] .cycle-tab-name,
html[data-theme] .cyc-opt.sel,
html[data-theme] .cyc-tip,
html[data-theme] .cyc-saved { color: var(--brand-green); }
html[data-theme] .cyc-cell.c-today { box-shadow: inset 0 0 0 2px var(--brand-green); }
html[data-theme] .cyc-cell.c-log::after { background: var(--brand-green); }
/* семантика ячеек календаря на светлых темах — ПАСТЕЛЬНЫЕ заливки
(образец из референса основателя: различимы с первого взгляда).
Прогноз = та же «розовая» семья, что и месячные, но светлее + рамка —
без тонкого пунктира (не читается на телефоне). */
html[data-theme] .cyc-cell.c-period { background: #F4D2CE; color: #8C3A34; font-weight: 700; }
html[data-theme] .cyc-cell.c-pred { background: #FAE7E4; color: #B0524A; border: 2px solid #D98880; }
html[data-theme] .cyc-cell.c-fert { background: #D8EBD8; color: #3E6B45; }
html[data-theme] .cyc-cell.c-pms { background: #F3E4C6; color: #8A6527; }
/* геройская карточка прогноза на светлых темах — пастельная розовая */
html[data-theme] .cyc-hero { background: #FAE7E4; border-color: #D98880; }
html[data-theme] .stat-btn { background: #FAE7E4; border-color: #D98880; color: #B0524A; }
html[data-theme] .cyc-hero-big { color: #B0524A; }
/* легенда в тон ячеек */
html[data-theme] .cyc-legend .lg-period::before { background: #F4D2CE; border: 1px solid #D98880; }
html[data-theme] .cyc-legend .lg-pred::before { background: #FAE7E4; border: 2px solid #D98880; }
html[data-theme] .cyc-legend .lg-fert::before { background: #D8EBD8; border: 1px solid #A8CCA6; }
html[data-theme] .cyc-legend .lg-ovul::before { background: radial-gradient(circle, #3E6B45 2.5px, #D8EBD8 3.5px); border: 1px solid #A8CCA6; }
html[data-theme] .cyc-legend .lg-pms::before { background: #F3E4C6; border: 1px solid #D9BC85; }
/* плашки статистики — те же пастельные тона, что и ячейки календаря */
html[data-theme] .st-per { background: #F4D2CE; color: #8C3A34; }
html[data-theme] .st-ov { background: #D8EBD8; color: #3E6B45; }
/* лента цикла на светлых — спокойный = поле темы, фазы = пастель ячеек */
html[data-theme] .st-range { --st-fert: #D8EBD8; --st-per: #F4D2CE; color: var(--text-main); text-shadow: none; }
/* выбранный чип дневника — зелёная заливка в цвет темы */
html[data-theme] .cyc-chip.sel { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
/* кнопки сообщений на Главной — белый текст на светлом поле невидим */
html[data-theme] .home-msg-btn { color: var(--text-main); }
html[data-theme] .home-msg-btn.primary { color: #fff; }
/* стакан воды — ободок на светлом, заметный (SVG stroke) */
html[data-theme] .home-glass .glass-rim { stroke: var(--text-sub); }
html[data-theme] .home-glass .glass-shine { stroke: rgba(0, 0, 0, 0.18); }
/* ползунки отёков — только заливка по теме, насечки (background-image) сохраняются */
html[data-theme] #m-turgor::-webkit-slider-thumb,
html[data-theme] #m-edema::-webkit-slider-thumb { background-color: var(--surface-card); }
html[data-theme] #m-turgor::-moz-range-thumb,
html[data-theme] #m-edema::-moz-range-thumb { background-color: var(--surface-card); }
/* сравнение фото — полупрозрачная подложка */
html[data-theme] .compare-viewer { background: rgba(0, 0, 0, 0.25); }
/* рамки миниатюр/плейсхолдеров фото — сплошные, цвет как в админке по темам */
html[data-theme="day"] .photo-slot,
html[data-theme="day"] .video-ph { border-color: #7E9A8B; }
html[data-theme="mono"] .photo-slot,
html[data-theme="mono"] .video-ph { border-color: #8A8A8A; }
html[data-theme="paper"] .photo-slot,
html[data-theme="paper"] .video-ph { border-color: #A89B84; }
/* желаемое поле — зелёная рамка */
html[data-theme] .input-desired { border-color: var(--brand-green); }
/* кастомные чекбоксы «тренировка» (Главная/Вода): тёмная галочка на тёмном
акценте невидима в mono — на светлых темах галочка белая, рамка у пустого */
html[data-theme] .home-train input:checked,
html[data-theme] .train-row input:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4 L6.6 11.6 L12.8 4.4'/%3E%3C/svg%3E");
}
html[data-theme] .home-train input,
html[data-theme] .train-row input { border: 1px solid var(--border-soft); }
/* круглый бейдж-галочка в Отчёте: был чёрный значок на зелёном → белый */
html[data-theme] .check-badge { color: #fff; }
/* стрелка нативного селекта в Цикле — приглушённая мята → тон темы */
html[data-theme] .cyc-select-face {
background-image: url("data:image/svg+xml;utf8,");
}
html[data-theme="mono"] .cyc-select-face {
background-image: url("data:image/svg+xml;utf8,");
}
html[data-theme="paper"] .cyc-select-face {
background-image: url("data:image/svg+xml;utf8,");
}
/* ===== плавный переход палитры ===== */
/* между светлыми темами — 1с */
html.theme-xfade,
html.theme-xfade * { transition: background-color 1s ease, color 1s ease,
border-color 1s ease, box-shadow 1s ease, filter 1s ease !important; }
/* из тёмной в светлую и обратно — медленнее, 2с: большой скачок яркости */
html.theme-xfade-slow,
html.theme-xfade-slow * { transition: background-color 2s ease, color 2s ease,
border-color 2s ease, box-shadow 2s ease, filter 2s ease !important; }
/* баннер «анкета на анализе» — общий стиль для вкладок без home.css
(на Главной свой #waitingBanner с тем же классом — правила совпадают) */
.status-banner { position: fixed; top: calc(72px + max(env(safe-area-inset-top, 0px), var(--sa-top, 0px))); left: 16px; right: 16px; background: rgba(46, 204, 113, 0.15); border: 1px solid rgba(46, 204, 113, 0.3); backdrop-filter: blur(8px); border-radius: 12px; padding: 12px 16px; text-align: center; font-size: 13px; color: #fff; z-index: 90; display: none; box-sizing: border-box; }
.status-banner.active { display: block; }
html[data-theme] .status-banner { color: var(--text-main); background: rgba(61, 122, 88, 0.12); border-color: rgba(61, 122, 88, 0.3); }