/* Основний CSS застосунку — ВЕСЬ, крім tokens.css (токени) і fonts.css. Жив інлайном у base.html (~161 КБ у КОЖНІЙ відповіді, техборг №8): Cloudflare стискав це до ~50 КБ на дроті, але браузер парсив усе заново на кожній навігації, і кешувати між сторінками було нічого. Тут — файл зі content-хешем у ?v= (static_url), тобто кеш браузера + едж Cloudflare, а інвалідація приходить сама з новим хешем після деплою. Правити стилі тепер ТУТ. Порядок підключення в base.html незмінний: fonts → tokens → app.css — легасі-палітра нагорі цього файла аліасить семантичні токени, і зміна порядку зламала б темізацію. */ /* Legacy palette — now ALIASED to the theme-aware semantic tokens instead of hardcoded dark hex, so every not-yet-migrated surface follows light/dark automatically. Per-surface migration still replaces these with the right --color-* directly; this is what lets the theme toggle work before that's done. color-scheme comes from tokens.css (light dark). */ :root { --bg: var(--color-bg-canvas); --card: var(--color-bg-surface); --text: var(--color-text-primary); --muted: var(--color-text-muted); --accent: var(--color-bg-accent); --border: var(--color-border-default); } * { box-sizing: border-box; } /* Атрибут `hidden` мусить ховати. Браузерне правило — `[hidden]{display:none}` у стилі АГЕНТА, а будь-який наш клас із `display:` сильніший за нього просто за походженням: `.chat-attach-chip { display:inline-flex }` і порожній чип стоїть на екрані, хоча в розмітці `hidden`. Це не теорія: так на сторінці рецепта весь час висів оверлей «Готуємо копію із заміною», а в чаті — ряд порожніх чипів вкладень. Обидва ховались `hidden` і обидва мали клас із `display`. Ловити це по одному класу означає чекати наступного; `!important` тут — рівно те, що робить normalize.css, і рівно з цієї причини. */ [hidden] { display: none !important; } /* Смуга прокрутки — ЗАВЖДИ, а не «коли є що гортати». `scrollbar-gutter` тут недостатньо: він резервує місце лише для вмісту документа, а position:fixed-елементи (нижня навігація, верхня панель) міряються від вьюпорта, який звужується рівно тоді, коли зʼявляється смуга, — і навігація зʼїжджала на її ширину між короткими й довгими сторінками. Постійний трек тримає і вміст, і fixed-панелі на місці; на телефонах смуги накладні (overlay), тож там це нічого не змінює. */ html { overflow-y: scroll; scrollbar-gutter: stable; } /* На мобільній ширині смуги прокрутки немає ЗОВСІМ. Причини дві. По-перше, нижня навігація тут `position:fixed`, і смуга документа — завжди на всю висоту вікна — малювалась просто поверх неї: вкоротити її «до навігації» не можна, бо це смуга ДОКУМЕНТА, а не блока. По-друге, стрічка безшовна: далекі партії згортаються в спейсери й повертаються (див. initFeedScroll), тож висота сторінки синтетична, і повзунок на ній показував не те місце, де людина насправді є. На справжньому телефоні смуги й так накладні, тож видимої втрати немає; на десктопі (≥768) смуга лишається — там нею КЕРУЮТЬ мишею, а навігація там sticky зверху й під смугу не потрапляє. Обидві властивості потрібні: `scrollbar-width` — стандарт (Firefox, свіжий Chrome), `::-webkit-scrollbar` — старіші WebKit/Blink. */ @media (max-width: 767px) { html { scrollbar-width: none; } html::-webkit-scrollbar { width: 0; height: 0; } } body { margin:0; font-family: var(--font-ui); background: var(--bg); color: var(--text); line-height: 1.5; } header { border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: 0; z-index: 40; } .bar { max-width: var(--page-max); margin: 0 auto; padding: 14px 24px 0; display: flex; align-items: flex-end; justify-content: space-between; } .logo { font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; } .tab-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 8px; text-decoration: none; white-space: nowrap; color: var(--muted); font-weight: 600; font-size: 14px; border: 1px solid var(--border); background: transparent; position: relative; } .tabs { display: flex; gap: 8px; } .tabs .tab-link { min-width: 112px; } /* Нижня навігація — з'являється лише на мобільному (див. @media 767). */ .bottom-nav { display: none; } .bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--color-text-muted); font: var(--text-label-s); letter-spacing: var(--tracking-label-s); padding: 6px 0; min-width: 0; } .bnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bnav-item .icon { width: 22px; height: 22px; } .bnav-item.active { color: var(--color-text-primary); } .bnav-item.active .icon { color: var(--color-text-accent); } /* Десктоп: та сама 5-слотова навігація, що й на мобільному, але зверху (замість старого хедера лого+вкладки+аватар). Іконки+підписи, горизонтально. Йде ПІСЛЯ базових .bnav-item, щоб перекрити flex/column. */ .bnav-brand, .bnav-slot { display: none; } .bnav-inner { display: flex; width: 100%; } /* Плавні переходи між сторінками (MPA view transitions). Кожен тап у навігації — повне перезавантаження документа, і без цього вся розмітка перемальовується з нуля: в Android-застосунку це виглядає як «стрибок» усіх кнопок на кадр. З опт-іном браузер сам знімає стару сторінку і перетікає в нову, а панелі з власним view-transition-name у знімках ідентичні — тож стоять нерухомо, як у SPA. Браузери без підтримки правило просто ігнорують. */ @media not (prefers-reduced-motion: reduce) { @view-transition { navigation: auto; } ::view-transition-group(root) { animation-duration: .18s; } } header { view-transition-name: topbar; } .bottom-nav { view-transition-name: bnav; } @media (min-width: 768px) { header { display: none; } .bottom-nav { display: block; position: sticky; top: 0; z-index: 40; padding: var(--space-sm) var(--space-base); background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default); } /* Вміст панелі стоїть у тій самій колонці, що й контент сторінки — інакше навігація й сітка під нею починались би з різних місць. */ /* Висота рядка ФІКСОВАНА, бо його вміст різний: на стрічці сюди переїжджають поле пошуку (44px) і кнопка «Новий рецепт», а на решті сторінок слот порожній. Без цього панель була то 44, то 38 — і вся сторінка сіпалась на кожному переході між розділами. */ .bnav-inner { max-width: var(--page-max); margin: 0 auto; align-items: center; min-height: 44px; gap: var(--space-xs); padding: 0 var(--space-xl); } .bnav-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-text-primary); font: var(--text-heading-m); letter-spacing: var(--tracking-heading-m); margin-right: var(--space-lg); } .bnav-item { flex: none; flex-direction: row; gap: var(--space-sm); padding: var(--space-sm) var(--space-base); min-width: 0; border-radius: var(--radius-full); } .bnav-item span { font: var(--text-label-m); } .bnav-item.active { background: var(--color-bg-subtle); } .bnav-item .notif-badge { position: static; margin-left: var(--space-2xs); } /* Правий слот: притискаємо до правого краю, пошук тягнеться, кнопка ні. */ .bnav-slot { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; min-width: 0; flex: 1 1 auto; justify-content: flex-end; } /* min-width не косметика: без нього поле стискалось у кружок ~40px і переставало бути полем. Якщо навіть цього не влазить — значить ми в тому ярусі, де підписи вже прибрані. */ .bnav-slot .feed-search-input { flex: 1 1 auto; min-width: 260px; max-width: 420px; } } .tab-link.active { background: var(--bg); color: var(--text); border-color: var(--border); border-bottom-color: var(--bg); border-radius: 10px 10px 0 0; margin-bottom: -1px; z-index: 1; } .logo.tab-link { border: none; background: none; padding: 9px 4px; } .logo.tab-link.active { border: 1px solid var(--border); border-bottom-color: var(--bg); background: var(--bg); padding: 9px 16px; border-radius: 10px 10px 0 0; margin-bottom: -1px; } .btn.secondary.avatar-link { padding: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; position: relative; } /* ОДНА ширина полотна на весь застосунок. Раніше вона залежала від ВМІСТУ сторінки — `main:has(.recipe-grid)`, `:has(#shopping-items)` і т.д., — тож порожня стрічка (сітки немає) ставала вужчою за повну, а покупки — вужчими за стрічку. Ширина стрибала при кожному переході, і це неможливо було передбачити з розмітки. Тепер ширину задає лише ширина ЕКРАНА: одна змінна, один контейнер, усі сторінки в одну лінію. Скільки колонок у сітці — окреме питання, і воно контейнера більше не рухає. */ :root { --page-max: 760px; } main { max-width: var(--page-max); margin: 0 auto; padding: 24px; } /* Посилання беруть СЕМАНТИЧНИЙ токен, а не легасі `--accent`: той глобально аліасований у лайм, і в світлій темі лаймовий текст на кремовому тлі майже не читається. `--color-text-accent` уже має правильні значення для обох тем — форест у світлій, лайм у темній. */ a { color: var(--color-text-accent); } .btn { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-sm); background: var(--accent); color: var(--color-text-on-accent); padding: 9px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; border: none; cursor: pointer; font-size: 15px; } .btn .icon { width:16px; height:16px; flex:none; } .btn.secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); } .btn.danger { background: transparent; color: #ef5350; border: 1px solid #ef5350; } .grid { display: grid; gap: 14px; } /* Елемент ґріду за замовчуванням має `min-width: auto`, тобто НЕ може стати вужчим за свій найширший нерозривний вміст. Через це колонка 1fr роздувалась, щойно в картці з'являвся довгий рядок (список «бракує» у фільтрі «можу приготувати») — колонки ставали різної ширини, а сітка вилазила за межі. `min-width: 0` повертає їм рівність. */ .grid > * { min-width: 0; } .recipe-card-missing { overflow-wrap: anywhere; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; text-decoration: none; color: var(--text); display: block; } .card:hover { border-color: var(--color-border-strong); } /* Match the .swipe-wrap radius (--radius-lg) so the wrap's overflow:hidden clip and the card's own hover/selected border share the same corner — otherwise the 16px clip slices the 12px border square at each corner. */ .recipe-card { padding: 0; overflow: hidden; border-radius: var(--radius-lg); /* Пропуск рендеру офскрін-карток: браузер не малює те, чого не видно, а contain-intrinsic-size тримає приблизну висоту, щоб скролбар не сіпався. Пара до віконного вивантаження партій у base.html. */ content-visibility: auto; contain-intrinsic-size: auto 340px; } /* Спейсер на місці вивантаженої партії стрічки (див. initFeedScroll): тримає рівно ту саму висоту, щоб скрол не стрибав. */ .feed-batch-spacer { grid-column: 1 / -1; } .recipe-card-photo { position: relative; min-height: 230px; height: 100%; box-sizing: border-box; display: flex; align-items: flex-end; } @media (min-width: 768px) { .recipe-grid { grid-template-columns: 1fr 1fr; } .recipe-grid .recipe-card-photo { aspect-ratio: 1 / 1; min-height: 0; } } /* Desktop feed — ширший полотно + 3 колонки. Прив'язано до сторінок, де реально є сітка рецептів (стрічка/профіль/пошук) через :has(), щоб сторінки для читання (рецепт, форми) лишались вузькими й зручними. */ /* Верхня навігація має однакову ширину на ВСІХ сторінках (не стрибає між вкладками). Ширшає лише контент стрічки/профілю (де є сітка). */ /* M1 — бейдж наявності інгредієнтів на плитці страви (сигнальні кольори — дозволене для інвентаря використання). */ .mp-stock { display:inline-flex; align-items:center; gap:3px; flex:none; white-space:nowrap; font: var(--text-label-s); letter-spacing: var(--tracking-label-s); border-radius: var(--radius-full); padding:1px 8px; background: var(--color-bg-subtle); } .mp-stock.ok { color: var(--color-signal-good); } .mp-stock.warn { color: var(--color-signal-moderate); cursor:pointer; } .mp-stock .icon { width:12px; height:12px; } /* Значок запасів — сам по собі лише сигнал; число «скільки бракує» це подробиця, за якою треба навести чи тапнути. Текст поруч із назвою з'їдав ширину й ламав заголовок на одну літеру в рядок. */ .mp-stock-text { display:none; } .mp-stock:hover .mp-stock-text, .mp-stock:focus .mp-stock-text, .mp-stock.is-open .mp-stock-text { display:inline; } /* M1 — рядок страви: назва, під нею мета (запаси · БЖВ). */ .mp-entry-body { display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .mp-entry-meta { display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-sm); } .mp-entry-meta .qty { white-space:normal; } /* M4 — рядок пікера рецепта: назва + мета (час · складність). */ .rp-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .rp-item .rp-item-title { font: var(--text-body-m); font-weight:600; } .rp-item .rp-item-meta { font: var(--text-body-s); color: var(--color-text-muted); display:flex; align-items:center; gap: var(--space-md); flex-wrap:wrap; } /* Складність — крапка І слово (правило дизайн-системи): сама крапка нічого не каже тому, хто не знає легенди. */ .rp-item-meta .rp-diff { display:inline-flex; align-items:center; gap:6px; } .rp-item-meta .rp-diff::before { content:""; width:8px; height:8px; flex:none; border-radius: var(--radius-full); background: var(--color-text-muted); } .rp-item-meta .rp-diff.is-easy::before { background: var(--color-signal-good); } .rp-item-meta .rp-diff.is-medium::before { background: var(--color-signal-moderate); } .rp-item-meta .rp-diff.is-hard::before { background: var(--color-signal-poor); } /* Пікер рецепта (`_recipe_picker.html`). Кнопка-тригер живе там, де раніше стояв з усіма рецептами: на телефоні це список на пів екрана без пошуку. Тепер кнопка відкриває аркуш із пошуком, тож і виглядати має кнопкою. */ .step-recipe-link { flex-shrink:0; width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:transparent; color: var(--color-text-secondary); cursor:pointer; } .step-photo-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* Коли фото вже є — показуємо його прев'ю ПРЯМО в кнопці, а іконку камери лишаємо поверх: інакше кнопка перестає виглядати кнопкою й незрозуміло, що по ній можна клікнути ще раз. Підкладка під іконкою світла, а сама іконка темна — щоб її було видно на будь-якому фото. */ .step-photo-btn .step-photo-icon { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; } .step-photo-btn.has-file .step-photo-icon { color:#14140F; background:rgba(255,255,255,.72); border-radius:50%; width:24px; height:24px; } .step-photo-btn.has-file .step-photo-icon .icon { width:14px; height:14px; } .step-photo-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:100; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; } .step-photo-lightbox.open { display:flex; } .step-photo-lightbox img { max-width:100%; max-height:100%; border-radius:8px; } /* Сканер штрихкоду відкривається ПОВЕРХ шита додавання (той має z-index 120 і заввишки буває до 88vh), тому дві речі обов'язкові: бути вище за шит і не залазити під нього. Вільну зону рахує JS — він знає реальну висоту шита, а вона залежить від того, скільки полів у формі. */ #barcode-scanner-modal { z-index:130; align-items:flex-start; padding:16px; padding-bottom: calc(var(--scanner-reserved, 0px) + 16px); } #barcode-scanner-modal > div { max-height:100%; overflow-y:auto; } #barcode-video { max-height: 42vh; object-fit: cover; } .mp-day-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; align-items:center; justify-content:center; padding:24px; } .mp-day-modal-overlay.open { display:flex; } .mp-day-modal { background: var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; width:100%; max-width:360px; max-height:80vh; overflow-y:auto; } /* Recipe action sheet — long-press / "More". A bottom sheet that slides up. */ .sheet-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:120; align-items:flex-end; justify-content:center; } .sheet-overlay.open { display:flex; } .sheet { background: var(--color-bg-surface); width:100%; max-width:520px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; overflow-y:auto; max-height:88vh; padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-base)); transform: translateY(100%); transition: transform .22s ease; } .sheet-overlay.open .sheet { transform: translateY(0); } /* На широкому екрані bottom-sheet читається дивно: він приліплений до низу вікна, далеко від того, що ти щойно натиснув угорі. Там це звичайна модалка по центру — з усіма заокругленими кутами й без «ручки», бо тягнути пальцем нема чого. */ /* 768, а не 1024: це та сама межа, на якій застосунок скрізь стає «десктопним» (верхня панель, сітка). На 800px аркуш усе ще приліплювався до низу вікна — далеко від кнопки, яку щойно натиснули вгорі. */ @media (min-width: 768px) { .sheet-overlay { align-items: center; } .sheet { border-radius: var(--radius-2xl); max-height: 82vh; padding-bottom: var(--space-base); transform: translateY(10px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease; } .sheet-overlay.open .sheet { transform: none; opacity: 1; } .sheet-handle { display: none; } } /* is-centered — аркуш, що поводиться модалкою по центру на ВСІХ ширинах (не лише ≥768): для вікон, які стосуються елемента вгорі екрана (вибір обкладинки в редакторі), а не дій над списком унизу. Той самий вигляд і анімація, що в десктопних аркушів. Специфічність вища за media-правила вище, тож порядок тут не грає. */ .sheet-overlay.is-centered { align-items:center; padding: var(--space-xl); } .sheet-overlay.is-centered .sheet { border-radius: var(--radius-2xl); max-height:82vh; padding-bottom: var(--space-base); transform: translateY(10px) scale(.98); opacity:0; transition: transform .18s ease, opacity .18s ease; } .sheet-overlay.is-centered.open .sheet { transform:none; opacity:1; } .sheet-overlay.is-centered .sheet-handle { display:none; } /* Перегляд фото на весь екран. Підкладка — `--color-bg-scrim`, той самий токен, що й під текстом на медіа: під шаром чуже фото, а не наша поверхня, тож і хрестик бере кольори з `on-media`, а не з теми. */ .photo-viewer { position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding: var(--space-base); background: var(--color-bg-scrim); opacity:0; transition: opacity .18s ease; } .photo-viewer.open { display:flex; opacity:1; } .photo-viewer img { max-width:100%; max-height:100%; border-radius: var(--radius-lg); object-fit:contain; display:block; } /* Рамка — тільки коли під фото є дії. Без них це порожня коробка навколо кадру, а перегляд фото має показувати фото, а не нашу поверхню. */ .photo-viewer-frame { display:flex; flex-direction:column; gap: var(--space-md); min-width:0; max-width:100%; max-height:100%; } .photo-viewer-frame.has-actions { padding: var(--space-md); background: var(--color-bg-surface); border:1px solid var(--color-border-default); border-radius: var(--radius-2xl); } /* Висота кадру рахується від рамки, інакше фото плюс смуга дій разом вилазять за екран: 100% у дитини міряється від висоти БАТЬКА, а не від того, скільки місця лишилось. */ .photo-viewer-frame.has-actions img { max-height: calc(100vh - 180px); } .photo-viewer-actions { display:flex; gap: var(--space-sm); flex-wrap:wrap; justify-content:flex-end; } .photo-viewer-actions .btn { flex:1 1 auto; justify-content:center; } .photo-viewer-close { position:absolute; top: var(--space-base); right: var(--space-base); width:40px; height:40px; border:none; border-radius: var(--radius-full); background: var(--color-bg-on-media-chip); color: var(--color-text-on-media); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } /* Курсор — єдина підказка, що фото клікабельне. Рамки чи іконки поверх кадру тут зайві: вони псують саме те, на що прийшли дивитись. */ img.zoomable { cursor: zoom-in; } .sheet-handle { width:40px; height:4px; border-radius: var(--radius-full); background: var(--color-border-strong); margin: var(--space-sm) auto var(--space-sm); } .sheet-head { padding: var(--space-xs) var(--space-xl) var(--space-sm); display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-md); } /* Аркуші З ПОЛЯМИ (редактор інгредієнта, кроку, чіпи) — рівні поля з усіх чотирьох боків, як у звичайної модалки: 24px, той самий `--space-xl`, що вже стоїть ліворуч і праворуч. Було асиметрично й помітно оком: зверху 4px (заголовок притискався до краю), знизу 24px від тіла ПЛЮС 16px від самого аркуша — тобто 40px порожнечі під кнопкою. Через `:has` правило чіпає лише аркуші з формою; списки дій (`.sheet-item`) і їхній нижній відступ лишаються як були — там 40px унизу читаються нормально, бо останній пункт — це рядок, а не кнопка. `env(safe-area-inset-bottom)` лишається: на телефоні під аркушем ще індикатор home, і без нього кнопка тулилась би до нього впритул. */ .sheet:has(.chip-sheet-body) .sheet-head { padding-top: var(--space-xl); } .sheet:has(.chip-sheet-body) { padding-bottom: env(safe-area-inset-bottom); } /* На десктопі й у центрованих модалках безпечної зони немає взагалі. */ @media (min-width: 768px) { .sheet:has(.chip-sheet-body) { padding-bottom: 0; } } .sheet-overlay.is-centered .sheet:has(.chip-sheet-body) { padding-bottom: 0; } /* Ручка (яку тягнуть пальцем) сама займає місце зверху, тож там, де вона ВИДНА, заголовку вистачає половини відступу — інакше виходило б 24px плюс сама ручка. Правило свідомо в media-запиті, а не на сусідстві `.sheet-handle + .sheet-head`: ручка лишається в розмітці й на десктопі (просто `display:none`), і сусідство скорочувало б відступ там, де компенсувати нічого — саме це й дало 12px замість 24. */ @media (max-width: 767px) { .sheet-overlay:not(.is-centered) .sheet:has(.chip-sheet-body) .sheet-head { padding-top: var(--space-md); } } /* Підзаголовок — продовження заголовка, а не сусід праворуч. Базове правило розводить дітей по краях (там праворуч буває «Скинути»), і в аркушах із `.sheet-sub` через це «Додати фото» стискалось у вузьку колонку й ламалось на два рядки. */ .sheet-head:has(.sheet-sub) { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); } /* Другорядна дія в шапці шита («Сканувати» в R4) — текстом, не кнопкою: у шита вже є одна головна дія внизу. */ .sheet-head-link { background:none; border:none; padding:0; cursor:pointer; flex:none; font: var(--text-label-m); font-weight:600; color: var(--color-text-accent); } .sheet-title { font: var(--text-editorial-h2); letter-spacing: var(--tracking-editorial-h2); color: var(--color-text-primary); } .sheet-sub { font: var(--text-body-s); color: var(--color-text-muted); margin-top:2px; } .sheet-label { font: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform:uppercase; color: var(--color-text-muted); padding: var(--space-md) var(--space-xl) var(--space-2xs); } /* Працює і для