:root { --bg: #14161a; --bg-elevated: #1e2126; --bg-input: #24282f; --border: #33373f; --text: #eef0f3; --text-dim: #9aa2ad; /* Акцент — розово-фиолетовый. --accent используется как есть на бордерах, ссылках, активных вкладках и заливке кнопок. --accent-hover светлее — для текста/бордеров на тёмном фоне (там светлее только читается лучше), а не для заливки кнопок: на белом тексте контраст бы просел. --accent-active темнее — годится и для заливки тоже, с белым текстом контраст только растёт (проверено, см. заметку у .btn-primary). */ --accent: #a855f7; --accent-hover: #c084fc; --accent-active: #9333ea; --accent-text: #ffffff; --urgent: #ef4444; --green: #22c55e; --orange: #f59e0b; --purple: #a855f7; --gray: #6b7280; /* Скругления: --radius — карточки/панели (базовый, умеренно увеличен — 14→18px, чтобы не превращались в овалы), --radius-input — поля форм (text-input, select, вкладки — тоже увеличен, 12→16px), --radius-sm — элементы поменьше (тулбары, мини-кнопки), --radius-xs — миниатюрные (превью фото, мелкие иконки-кнопки), --radius-pill — капсулы (статус-бейджи). --btn-radius/-sm — отдельно для кнопок, см. ниже. */ --radius: 18px; --radius-input: 16px; --radius-sm: 10px; --radius-xs: 6px; --radius-pill: 999px; /* Кнопки — "пилюли": border-radius больше половины высоты кнопки автоматически схлопывается до полукруглых торцов (браузер сам клэмпит 999px до geometрически возможного), поэтому не считаем высоту руками. У мелких кнопок (.btn-sm) — помягче, не полная капсула. */ --btn-radius: var(--radius-pill); --btn-radius-sm: 16px; /* Отступы между блоками: --space-md — стандартный (между карточками, секциями формы), --space-lg — крупный (между секциями страницы, hero-блоки на витрине). */ --space-md: 16px; --space-lg: 24px; /* Заголовки — единственные два уровня во всём приложении: .page-title (h1 страницы) и .section-heading (подзаголовок секции внутри неё). */ --font-size-page-title: 22px; --font-size-section-heading: 17px; /* Стандартный размер кнопки (.btn) — совпадает с большинством прежних разрозненных .xxx-btn, которые дублировали одни и те же числа. -sm — компактные инлайновые кнопки (очистить дату, скрыть сотрудника и т.п.), -lg — крупная CTA-кнопка на всю ширину (.btn-big). */ --btn-font-size: 14px; --btn-font-size-sm: 12px; --btn-font-size-lg: 17px; --btn-padding-y: 10px; --btn-padding-x: 16px; --btn-padding-y-sm: 6px; --btn-padding-x-sm: 10px; --btn-padding-lg: 16px; /* Фирменный градиент, 135deg: в основном синий (0–70% длины), фиолетовый только на самом конце, без розового. Единая переменная --accent-gradient для всех "фирменных" интерактивных поверхностей: заливка основных кнопок, градиентная рамка у кнопок с обводкой, активные вкладки/пилюли, градиент на тексте ссылок/названия в шапке/активного пункта меню, кольца на витрине, приветствие. Контраст с белым текстом кнопок по стопам: 2563eb — 5.17:1, 3b82f6 — 3.68:1, 6366f1 — 4.47:1, 8b5cf6 — 4.23:1. Средние два чуть ниже 4.5:1 (тот же уровень, что был у самого первого синего акцента этого приложения) — оставлены как заданы: это не самый край градиента, а текст обычно по центру кнопки, где реальный цвет — блендинг соседних стопов, контраст там выше, чем в опорных точках. */ --accent-grad-from: #2563eb; --accent-grad-mid: #3b82f6; --accent-grad-mid2: #6366f1; --accent-grad-to: #8b5cf6; --accent-gradient: linear-gradient(135deg, var(--accent-grad-from) 0%, var(--accent-grad-mid) 45%, var(--accent-grad-mid2) 70%, var(--accent-grad-to) 100%); /* Объём — не буквальный 3D, а мягкая многослойная тень (близкий плотный слой + дальний размытый) плюс еле заметная inset-окантовка сверху/снизу на карточках (создаёт ощущение приподнятости, как будто на них падает свет сверху). Всё приглушённо (низкая непрозрачность) специально — эффект должен читаться боковым зрением, а не бросаться в глаза. Все значения — здесь, чтобы менять глубину по всему приложению в одном месте. */ --shadow-near: rgba(0, 0, 0, 0.26); --shadow-far: rgba(0, 0, 0, 0.16); --edge-light: rgba(255, 255, 255, 0.05); --edge-dark: rgba(0, 0, 0, 0.16); /* .card рисует box-shadow, но живёт с overflow: hidden (чтобы миниатюры скруглялись вместе с карточкой) — обычный (не inset) box-shadow в этом случае обрежется той же overflow-клипой. inset-тени не обрезаются (рисуются внутри рамки), поэтому окантовка — box-shadow, а внешняя глубина — filter: drop-shadow(), которая рендерится уже поверх обрезанного контента и overflow её не трогает. */ --card-edge: inset 0 1px 0 var(--edge-light), inset 0 -1px 0 var(--edge-dark); --card-depth: drop-shadow(0 1px 2px var(--shadow-near)) drop-shadow(0 6px 16px var(--shadow-far)); --card-depth-hover: drop-shadow(0 3px 6px var(--shadow-near)) drop-shadow(0 14px 32px var(--shadow-far)); --card-depth-active: drop-shadow(0 1px 3px var(--shadow-near)); --lift-hover: -3px; --lift-active: -1px; --lift-transition: 220ms ease-out; /* Кнопки без overflow: hidden — им обычный box-shadow ничего не обрезает, inset-блик сверху и внешние слои можно объединить в одном свойстве. При нажатии заливка гасится инсет-тенью вместо блика — ощущение вдавливания вместе с translateY(--btn-press). */ --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px var(--shadow-near), 0 4px 10px var(--shadow-far); --shadow-btn-active: inset 0 1px 4px rgba(0, 0, 0, 0.35); --btn-press: 1px; } :root[data-theme="light"] { --bg: #f5f6f8; --bg-elevated: #ffffff; --bg-input: #edeff2; --border: #d3d7dd; --text: #12141a; --text-dim: #4b5262; } /* Говорит браузеру, какая тема у страницы реально активна (в отрыве от системной light/dark) — без этого форм-контролы, скроллбары и area растяжения на "резиновом" скролле (мобильный overscroll/bounce) красятся браузером по СИСТЕМНОЙ теме: на светлой системе это белый, даже когда весь остальной фон страницы тёмный — отсюда "белая полоса снизу/сбоку" именно при светлой системной теме. */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* min-height, а не только background: у короткой страницы box body по умолчанию высотой ровно в контент — ниже него, если контента меньше вьюпорта, красится уже не наш фон, а дефолтный (белый) канвас браузера. */ min-height: 100%; /* Не плоская заливка, а очень мягкий вертикальный градиент (чуть светлее сверху, темнее снизу) — привязан к вьюпорту (background-attachment: fixed), чтобы не "ехал" вместе с прокруткой длинных страниц. */ background: linear-gradient(180deg, color-mix(in srgb, var(--bg), white 8%) 0%, var(--bg) 100%); background-attachment: fixed; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; -webkit-tap-highlight-color: transparent; /* Раньше было только в @media (max-width: 899px) — вынесено сюда без условия: это чистая защита от горизонтального скролла всей страницы (не мешает внутреннему overflow-x: auto у .journal-table-wrap и подобных — они скроллятся сами по себе, независимо от html/body). */ max-width: 100vw; overflow-x: hidden; } @media (max-width: 899px) { /* На узких экранах подпись убираем совсем — в самом лого уже есть название, а место в шапке ограничено. */ .logo-text { display: none; } .logo-img { height: 16px; } } a { color: inherit; text-decoration: none; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; /* iOS (Safari и standalone-режим "На экран Домой" с apple-mobile-web-app- status-bar-style: black-translucent) рисует шапку под чёлкой/статус-баром, раз position: sticky/top: 0 держит её у самого верха вьюпорта — без этого отступа контент и меню оказываются в недоступной зоне. env() с фоллбэком 0px, чтобы на Android/десктопе, где safe-area нет, паддинг остался прежним (14px из строки выше). */ padding-top: calc(14px + env(safe-area-inset-top, 0px)); background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .logo { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; overflow: hidden; cursor: pointer; /* Только затемнение/высветление, без сдвигов — "мягкая подсветка". */ transition: filter 200ms ease-out; } .logo:hover, .logo:focus-visible { filter: brightness(1.18); } .logo-img { height: 20px; width: auto; display: block; flex-shrink: 0; } /* Тёмная тема (по умолчанию — без [data-theme], либо явный "dark"): у официального лого умеренный контраст к почти чёрному фону (синие тона, не чёрный силуэт) — вместо перекраски самого файла или инверсии (которая исказила бы фирменные цвета) поднимаем читаемость мягкой светлой подложкой. content-box, чтобы паддинг не сжимал сам логотип внутрь фиксированной высоты (глобально box-sizing: border-box). */ :root:not([data-theme="light"]) .logo-img { box-sizing: content-box; background: rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 4px 7px; } /* В самом SVG уже есть название — рядом не повторяем его, а даём мелкую приглушённую подпись без градиента: лого крупное и главное, текст — подпись сбоку, а не второй заголовок. */ .logo-text { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; /* Сплошной приглушённый — запасной вариант, если background-clip: text не поддержится (см. @supports ниже). */ color: var(--text-dim); } @supports (background-clip: text) or (-webkit-background-clip: text) { .logo-text { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } @media (prefers-reduced-motion: reduce) { .logo { transition: none !important; } } .logo-preview { height: 48px; width: auto; border-radius: var(--radius-xs); display: block; margin-bottom: var(--space-md); background: var(--bg-input); } .admin-nav { display: flex; align-items: center; gap: 8px; /* Само не скроллится — скроллится только .admin-nav-scroll внутри (см. ниже). Раньше overflow-x:auto стоял прямо здесь, но .nav-menu (гамбургер + выпадающее меню) — тоже потомок .admin-nav: overflow-x без явного overflow-y на любом предке автоматически даёт эффективный overflow-y: auto (правило CSS Overflow — "visible" на одной оси при не-"visible" на другой считается как "auto"), а auto обрезает всё, что выходит за границы блока по высоте. Абсолютно спозиционированная .nav-menu-dropdown как раз выходит за пределы узкой строки иконок — и обрезалась целиком, поэтому меню открывалось на вид "никак". */ flex-shrink: 1; min-width: 0; } .admin-nav-scroll { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .admin-nav-scroll::-webkit-scrollbar { display: none; } .weather-widget { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; flex-shrink: 0; } .weather-widget-main { font-size: 13px; color: var(--text-dim); white-space: nowrap; } /* Совет по погоде — мелко, приглушённо, в одну строку под температурой. */ .weather-advice { font-size: 10px; color: var(--text-dim); opacity: 0.75; white-space: nowrap; } @media (max-width: 899px) { /* На телефоне при нехватке места первым уходит необязательный совет (сейчас это только "Сильный ветер") — дождь/снег/жара/мороз остаются. */ .weather-advice-optional { display: none; } } .icon-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text); display: flex; align-items: center; justify-content: center; } .theme-toggle { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .nav-menu { position: relative; flex-shrink: 0; } .nav-menu-toggle { position: relative; z-index: 26; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .nav-menu-backdrop { position: fixed; inset: 0; background: rgba(8, 9, 11, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; z-index: 25; transition: opacity 160ms ease-out; } .nav-menu-backdrop.nav-menu-backdrop-open { opacity: 1; transition: opacity 260ms cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-menu-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; /* Двойной background (padding-box + border-box) — стандартный способ дать рамке градиент вместе со скруглением, раз обычный border градиент не умеет. color-mix() поверх --bg-elevated/--bg — лёгкий тёмный градиент, который остаётся полупрозрачным, чтобы backdrop-filter под ним был заметен, и при этом сам подстраивается под тему (в светлой — светлый). Блюр раньше сознательно не ставили на панель (пересчёт каждый кадр transform мог "гасить" пружину на слабом железе) — теперь он нужен по дизайну; анимация короткая (260ms) и с will-change, так что оставляем. */ background: linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated) 90%, transparent), color-mix(in srgb, var(--bg) 85%, transparent)) padding-box, var(--accent-gradient) border-box; border: 1px solid transparent; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.22), 0 0 32px rgba(139, 92, 246, 0.14); padding: 6px; z-index: 30; transform-origin: top right; opacity: 0; transform: scale(0.92) translateY(-8px); pointer-events: none; will-change: opacity, transform; } /* @keyframes вместо transition: анимация с явным from/to надёжно стартует даже на элементе, который только что перестал быть display:none — ей не нужно "подсматривать" предыдущее состояние, в отличие от transition. */ .nav-menu-dropdown.nav-menu-dropdown-open { animation: nav-menu-dropdown-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; pointer-events: auto; } .nav-menu-dropdown.nav-menu-dropdown-closing { animation: nav-menu-dropdown-out 160ms ease-out forwards; pointer-events: none; } @keyframes nav-menu-dropdown-in { from { opacity: 0; transform: scale(0.92) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes nav-menu-dropdown-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.92) translateY(-8px); } } .nav-menu-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); opacity: 0; transform: translateY(-6px); } .nav-menu-item-icon { flex-shrink: 0; color: var(--text-dim); transition: color 160ms ease-out; } .nav-menu-item-text { display: flex; flex-direction: column; min-width: 0; } .nav-menu-dropdown-open .nav-menu-item { animation: nav-menu-item-in 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Каскад через animation-delay. Первый пункт стартует сразу (0ms). Длительность (180ms) короче суммарного разброса задержек (0–200ms), чтобы пункты не перекрывались почти полностью и появление читалось как последовательность. */ .nav-menu-dropdown-open .nav-menu-item:nth-child(1) { animation-delay: 0ms; } .nav-menu-dropdown-open .nav-menu-item:nth-child(2) { animation-delay: 40ms; } .nav-menu-dropdown-open .nav-menu-item:nth-child(3) { animation-delay: 80ms; } .nav-menu-dropdown-open .nav-menu-item:nth-child(4) { animation-delay: 120ms; } .nav-menu-dropdown-open .nav-menu-item:nth-child(5) { animation-delay: 160ms; } .nav-menu-dropdown-open .nav-menu-item:nth-child(6) { animation-delay: 200ms; } /* При закрытии — без каскада, разом (селектор один на всех, без nth-child). */ .nav-menu-dropdown-closing .nav-menu-item { animation: nav-menu-item-out 120ms ease-out forwards; } @keyframes nav-menu-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes nav-menu-item-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } /* Активный пункт — не сплошная заливка, а еле заметный фон плюс тонкая градиентная полоска слева (псевдоэлемент, т.к. border-градиент по одной стороне так просто не сделать). */ .nav-menu-dropdown-open .nav-menu-item.active { background: rgba(139, 92, 246, 0.08); } .nav-menu-dropdown-open .nav-menu-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent-gradient); } .nav-menu-dropdown-open .nav-menu-item:hover { background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(139, 92, 246, 0.07)); /* animation-fill-mode: forwards держит transform с приоритетом выше обычных author-правил (transition > !important > animation > обычные правила) — без !important наведение не смогло бы перебить активную анимацию входа. */ transform: translateX(2px) !important; transition: background 160ms ease-out, transform 160ms ease-out; } .nav-menu-dropdown-open .nav-menu-item:hover .nav-menu-item-icon, .nav-menu-dropdown-open .nav-menu-item.active .nav-menu-item-icon { color: var(--text); } .nav-menu-item-title { display: block; font-weight: 700; font-size: 15px; color: var(--text); } .nav-menu-dropdown-open .nav-menu-item.active .nav-menu-item-title { color: var(--accent-grad-to); } @supports (background-clip: text) or (-webkit-background-clip: text) { .nav-menu-dropdown-open .nav-menu-item.active .nav-menu-item-title { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .nav-menu-item-desc { display: block; font-size: 11px; color: var(--text-dim); opacity: 0.8; margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .nav-menu-dropdown, .nav-menu-backdrop, .nav-menu-item { transition: none !important; animation: none !important; } /* animation: none убирает саму анимацию входа — без этого явного конечного состояния меню осталось бы невидимым (opacity: 0 из базового правила). */ .nav-menu-dropdown.nav-menu-dropdown-open { opacity: 1; transform: none; } .nav-menu-backdrop.nav-menu-backdrop-open { opacity: 1; } .nav-menu-dropdown-open .nav-menu-item { opacity: 1; transform: none; } } .container { max-width: 720px; margin: 0 auto; padding: 16px 16px 96px; /* vh на мобильных считается по высоте экрана БЕЗ учёта адресной строки — даёт просвет снизу, когда она видна. dvh учитывает её; vh идёт первым как фолбэк для браузеров без поддержки dvh (invalid-value просто игнорируется, второе объявление тогда не применяется). */ min-height: 100vh; min-height: 100dvh; } .page-title { font-size: var(--font-size-page-title); margin: 8px 0 var(--space-md); } .section-heading { font-size: var(--font-size-section-heading); font-weight: 700; margin: var(--space-lg) 0 4px; } .back-link { display: inline-block; color: var(--text-dim); margin-bottom: 8px; padding: 6px 0; } .empty { color: var(--text-dim); text-align: center; margin-top: 40px; } .section-disabled-card { text-align: center; padding: 40px 20px; margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .section-disabled-icon { font-size: 40px; } .section-disabled-text { color: var(--text-dim); max-width: 420px; margin: 0 0 6px; } /* Tabs */ .toolbar-row { display: none; } .scale-toggle { display: none; } .scale-toggle-btn { padding: 8px 12px; border-radius: var(--radius-pill); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .scale-toggle-btn.active { background: var(--accent-gradient); color: var(--accent-text); border-color: transparent; } .zoom-toggle { display: none; } .zoom-toggle-btn { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim); font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .zoom-toggle-value { font-size: 13px; font-weight: 600; color: var(--text-dim); min-width: 42px; text-align: center; } .tabs { display: flex; gap: 8px; margin-bottom: var(--space-md); } .journal-summary-line { color: var(--text-dim); font-size: 13px; margin: 0 0 var(--space-md); } .journal-machine-filter { margin-bottom: var(--space-md); } .journal-machine-filter select { width: 100%; min-width: 0; box-sizing: border-box; padding-right: 40px; border: 1px solid var(--border); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } /* Нативная стрелка select теряется/обрезается в некоторых мобильных WebView вместе с боковыми рамками — appearance: none выше отключает отрисовку системного виджета целиком, так что наши border и стрелка (SVG-фон) гарантированно видны на всех четырёх сторонах. Цвет стрелки зашит в data URI (var() внутри background-image не работает), поэтому под светлую тему нужен отдельный SVG. */ :root[data-theme="light"] .journal-machine-filter select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5262' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } /* Карточка приветствия — общая для /journal и / (landing.html). */ .card.greeting-card { flex-direction: column; gap: 16px; padding: 18px 20px; margin-bottom: var(--space-md); background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(139, 92, 246, 0.08)), var(--bg-elevated); } .greeting-row { display: flex; align-items: center; gap: 14px; } .greeting-icon { flex-shrink: 0; display: block; } .greeting-title { font-size: 26px; font-weight: 700; line-height: 1.15; margin: 0; /* Запасной сплошной цвет, если background-clip: text не поддержится. */ color: var(--text-dim); } .greeting-stats { display: flex; gap: 28px; flex-wrap: wrap; } .greeting-stat { display: flex; flex-direction: column; } .greeting-stat-value { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text-dim); } .greeting-stat-label { font-size: 11px; color: var(--text-dim); margin-top: 3px; } /* Тот же фирменный градиент, что у названия в шапке (.logo-text) — единый акцент бренда на приветствии и на его цифрах. */ @supports (background-clip: text) or (-webkit-background-clip: text) { .greeting-title, .greeting-stat-value { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .card.journal-card { flex-direction: column; padding: 8px; } .journal-card-link { display: block; } .journal-card-top { color: var(--text-dim); font-size: 12px; margin-bottom: 2px; } .journal-card-title { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; } .journal-card-meta { color: var(--text-dim); font-size: 13px; } .journal-card-comment { color: var(--text-dim); font-size: 12px; font-style: italic; margin-top: 2px; } .journal-tabs { position: relative; z-index: 1; margin-bottom: 12px; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .journal-tabs::-webkit-scrollbar { display: none; } .journal-tabs .tab { flex: 0 0 auto; width: max-content; min-width: max-content; white-space: nowrap; padding: 6px 10px; font-size: 13px; } .tab { flex: 1; text-align: center; padding: 12px 8px; border-radius: var(--radius-input); background: var(--bg-elevated); border: 1px solid var(--border); font-weight: 600; color: var(--text-dim); } .tab.active { background: var(--accent-gradient); color: var(--accent-text); border-color: transparent; } .admin-new-count { margin: 0 0 16px; font-weight: 600; } .admin-new-count strong { color: var(--accent); } .status-filter-row { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin-bottom: var(--space-md); } .status-filter-row::-webkit-scrollbar { display: none; } .status-filter-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .status-filter-btn.active { background: var(--accent-gradient); color: var(--accent-text); border-color: transparent; } .search-input { display: block; width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-input); padding: 14px; font-size: 16px; font-family: inherit; margin-bottom: var(--space-md); } .search-input:focus { outline: 2px solid var(--accent); } /* Cards */ .card-list { display: flex; flex-direction: column; gap: 12px; } #request-list { padding-bottom: 70px; } #journal-list { padding-bottom: 100px; gap: 8px; } .card { display: flex; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; padding: 10px; box-shadow: var(--card-edge); filter: var(--card-depth); } /* Приподнятость при наведении — только у кликабельных карточек (, список заявок); статичные
подъём не получают, чтобы не намекать на кликабельность, которой нет. */ a.card { transition: filter var(--lift-transition), transform var(--lift-transition); } a.card:hover, a.card:focus-visible { transform: translateY(var(--lift-hover)); filter: var(--card-depth-hover); } a.card:active { transform: translateY(var(--lift-active)); filter: var(--card-depth-active); } @media (prefers-reduced-motion: reduce) { a.card { transition: none !important; } a.card:hover, a.card:focus-visible, a.card:active { transform: none; } } /* Подсветка карточки/строки при возврате к списку (см. initScrollRestore() в app.js) — фон через background-image, а не background целиком: у чётных строк .journal-table цвет задан через background-color, background-image его не трогает. Тень — inset: у .card overflow: hidden, обычная внешняя тень обрезалась бы (см. заметку у --card-edge выше); inset ничего не двигает и не меняет размер карточки. */ @keyframes scroll-highlight-flash { 0%, 100% { background-image: none; box-shadow: none; } 15% { background-image: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(99, 102, 241, 0.26), rgba(139, 92, 246, 0.24)); box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.55), inset 0 0 26px rgba(139, 92, 246, 0.4); } } .scroll-highlight { animation: scroll-highlight-flash 1.5s ease-out; } @media (prefers-reduced-motion: reduce) { .scroll-highlight { animation: none; background-image: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(99, 102, 241, 0.26), rgba(139, 92, 246, 0.24)); box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.55), inset 0 0 26px rgba(139, 92, 246, 0.4); } } .card-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg-input); } .card-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 11px; text-align: center; } .card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .card-badges { display: flex; gap: 6px; flex-wrap: wrap; } .card-title { font-weight: 700; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-description { color: var(--text-dim); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { color: var(--text-dim); font-size: 14px; } /* Карточка заявки на /requests: сама заявка кликабельна (.request-card-link), а кнопка "Забрал" — соседний блок вне ссылки, чтобы не вкладывать интерактивный элемент в (см. .admin-card/.admin-card-link — тот же приём). */ .request-card { flex-direction: column; gap: 8px; } .request-card-link { display: flex; gap: 12px; } .request-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .badge-picked { background: rgba(34, 197, 94, 0.18); color: var(--green); } .stock-take-remaining { color: var(--text-dim); opacity: 0.75; } .stock-take-remaining::before { content: " · "; } .card-date { color: var(--text-dim); font-size: 12px; } .card-views, .table-views, .detail-views { display: flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 12px; } .detail-views { font-size: 13px; } .view-eye { opacity: 0.85; } .buyer-seen-mark { margin-left: 2px; color: var(--text-dim); font-weight: 700; cursor: default; } /* Badges */ .badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .badge-workshop { background: var(--bg-input); color: var(--text-dim); } .badge-author { background: var(--bg-input); color: var(--text-dim); } .badge-urgent { background: var(--urgent); color: #fff; animation: urgent-pulse 2s ease-in-out infinite; } /* Свечение вокруг плашки "СРОЧНО" через box-shadow (не transform/размер — геометрия плашки не меняется), плавно разгорается и гаснет по синусоиде ease-in-out. Приглушённое (transparent 45% в пике) — заметно боковым зрением, не мельтешит. */ @keyframes urgent-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--urgent), transparent 100%); } 50% { box-shadow: 0 0 7px 3px color-mix(in srgb, var(--urgent), transparent 45%); } } @media (prefers-reduced-motion: reduce) { .badge-urgent { animation: none; } } .badge-status.status-new { background: var(--gray); color: #fff; } .badge-status.status-ordered { background: var(--orange); color: #1a1400; } .badge-status.status-shipping { background: var(--purple); color: #fff; } .badge-status.status-received { background: var(--green); color: #05230f; } /* FAB */ .fab { position: fixed; left: 16px; right: 16px; /* Такой же приём, что и в .topbar/.app-toast — иначе кнопка проваливается под системную полоску снизу (home indicator) на iPhone/в standalone. */ bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 688px; margin: 0 auto; background: var(--accent-gradient); background-size: 145% 145%; background-position: 0% 0%; color: var(--accent-text); text-align: center; padding: 16px; border-radius: var(--btn-radius); font-weight: 700; font-size: 17px; box-shadow: var(--shadow-btn), 0 8px 24px rgba(0, 0, 0, 0.4); z-index: 20; transition: background-position 220ms ease-out, filter 120ms ease-out, transform 120ms ease-out; } .fab:hover, .fab:focus-visible { background-position: 100% 100%; filter: brightness(1.08); } .fab:active { filter: brightness(0.88); transform: translateY(var(--btn-press)); } @media (prefers-reduced-motion: reduce) { .fab { transition: none !important; } } /* На широких экранах FAB не растягивается на всю ширину контейнера — компактная кнопка в правом нижнем углу, не перекрывающая карточки. */ @media (min-width: 900px) { .fab { left: auto; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: none; width: auto; margin: 0; padding: 14px 22px; } } .footer-links { text-align: center; margin-top: 32px; padding-bottom: 80px; } .admin-link { color: var(--text-dim); font-size: 12px; opacity: 0.5; padding: 8px; } /* Forms */ .form { display: flex; flex-direction: column; } .field-label { font-size: 14px; color: var(--text-dim); margin: 16px 0 6px; font-weight: 600; } .text-input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-input); padding: 14px; font-size: 16px; width: 100%; font-family: inherit; } .text-input:focus { outline: 2px solid var(--accent); } /* Клик открывает системный календарь через showPicker() (см. initDatePickerFields в app.js) — курсор-указатель сигнализирует, что поле нажимается целиком, а не только его правая часть с иконкой. */ input[type="date"].text-input { cursor: pointer; } #unit_other { width: 100%; box-sizing: border-box; margin-top: 8px; } .pin-input { text-align: center; font-size: 32px; font-weight: 700; letter-spacing: 10px; } .form-checkbox-row { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 14px; cursor: pointer; } .qty-stepper { display: flex; align-items: center; gap: 10px; } .qty-stepper-btn { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-input); border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; } .qty-stepper-btn:active { filter: brightness(0.88); } .qty-stepper-input { flex: 1; text-align: center; } .choice-group { display: flex; gap: 10px; } .choice { flex: 1; text-align: center; padding: 16px 8px; border-radius: var(--radius-input); background: var(--bg-input); border: 2px solid var(--border); font-weight: 700; cursor: pointer; position: relative; } .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .choice:has(input:checked) { border-color: var(--accent); background: rgba(59,130,246,0.15); color: var(--accent); } .choice-urgent:has(input:checked) { border-color: var(--urgent); background: rgba(239,68,68,0.15); color: var(--urgent); } .file-input { background: var(--bg-input); border: 1px dashed var(--border); border-radius: var(--radius-input); padding: 14px; color: var(--text-dim); width: 100%; } .visually-hidden { display: none; } .photo-buttons { display: flex; gap: 10px; } .photo-btn { flex: 1; padding: 16px 8px; font-size: 14px; line-height: 1.3; } .photo-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .photo-preview-item { position: relative; width: 90px; height: 90px; } .photo-preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; } .photo-preview-file, .photo-preview-loading { width: 100%; height: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; text-align: center; overflow: hidden; } .photo-preview-file-icon { font-size: 22px; line-height: 1; } .photo-preview-file-name, .photo-preview-loading-text { font-size: 10px; line-height: 1.2; color: var(--text-dim); word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .photo-preview-loading-spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: photo-preview-spin 0.8s linear infinite; } @keyframes photo-preview-spin { to { transform: rotate(360deg); } } .photo-preview-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg); background: var(--urgent); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .photo-edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; } .photo-edit-item { position: relative; } .photo-edit-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); } .photo-delete-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--urgent); color: #fff; border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; } .btn[hidden] { display: none; } .btn { display: inline-block; text-align: center; border: none; border-radius: var(--btn-radius); font-weight: 700; cursor: pointer; font-family: inherit; /* Стандартный размер по умолчанию — раньше его не было вовсе, и почти каждое место использования (.export-btn, .archive-btn и т.д.) заново объявляло свои padding/font-size, которые почти совпадали, но не точь-в-точь. Теперь совпадают, потому что берутся из одних переменных; модификаторы ниже переопределяют размер только там, где он действительно другой (.btn-big, .btn-sm). */ padding: var(--btn-padding-y) var(--btn-padding-x); font-size: var(--btn-font-size); /* Лёгкий блик сверху (inset) + внешняя глубина — общие для всех кнопок; нет overflow: hidden на .btn, так что обычный box-shadow тут не обрезается (в отличие от .card, см. --card-depth). */ box-shadow: var(--shadow-btn); transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out; } .btn:active { transform: translateY(var(--btn-press)); box-shadow: var(--shadow-btn-active); } @media (prefers-reduced-motion: reduce) { .btn { transition: none !important; } .btn:active { transform: none; } } .btn-primary { background: var(--accent-gradient); /* Больше самого блока — чтобы на hover сдвинуть background-position и получить видимое "перетекание", а не просто смену двух статичных состояний. */ background-size: 145% 145%; background-position: 0% 0%; color: var(--accent-text); transition: background-position 220ms ease-out, filter 120ms ease-out, transform 120ms ease-out, box-shadow 120ms ease-out; } .btn-primary:hover, .btn-primary:focus-visible { background-position: 100% 100%; filter: brightness(1.08); } .btn-primary:active { filter: brightness(0.88); } /* Кнопка с обводкой: обычный border градиентом не красится, а border-image плохо дружит со скруглением в разных браузерах — вместо этого двойной background (тот же приём, что у .nav-menu-dropdown): внутренний слой прозрачный и обрезан по padding-box (сквозь него видно то, что за кнопкой — карточка или страница, не подбираем цвет вручную), внешний — градиент, обрезанный по border-box, поэтому виден только в кольце рамки. */ .btn-secondary { border: 2px solid transparent; background: transparent padding-box, var(--accent-gradient) border-box; color: var(--accent-grad-to); transition: filter 160ms ease-out, transform 120ms ease-out, box-shadow 120ms ease-out; } .btn-secondary:hover, .btn-secondary:focus-visible { filter: brightness(1.15); } .btn-secondary:active { filter: brightness(0.85); } .btn-big { padding: var(--btn-padding-lg); font-size: var(--btn-font-size-lg); margin-top: var(--space-lg); width: 100%; } /* Компактная кнопка — инлайновые действия (тулбары экспорта, строки карточек и т.п.). Раньше на это место претендовало полдюжины .xxx-btn с почти, но не совсем одинаковыми числами — см. .archive-btn/.status-save-btn/ .employee-btn/.landing-install-btn ниже, которые теперь комбинируются с этим классом вместо своих padding/font-size. */ .btn-sm { padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm); font-size: var(--btn-font-size-sm); border-radius: var(--btn-radius-sm); } .export-btn { display: inline-block; margin-bottom: var(--space-md); } .form-error { background: rgba(239,68,68,0.15); color: var(--urgent); border: 1px solid var(--urgent); padding: 12px; border-radius: var(--radius-sm); } .form-success { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid var(--green); padding: 12px; border-radius: var(--radius-sm); } .settings-hint { color: var(--text-dim); font-size: 14px; margin: 0 0 12px; } .sections-manage-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-lg); } .section-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); } .section-row-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; } .section-row-check input { accent-color: var(--accent); width: 18px; height: 18px; } .section-row-controls { display: flex; gap: 6px; flex-shrink: 0; } .section-move-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; } .section-move-btn:disabled { opacity: 0.35; cursor: default; } .error-box { text-align: center; margin-top: 40px; padding: 24px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); } .error-code { font-size: 15px; font-weight: 700; color: var(--urgent); margin-bottom: 10px; } .error-message { color: var(--text); margin-bottom: 8px; } /* Detail page */ .detail-badges { display: flex; gap: 8px; margin-bottom: 8px; } .detail-meta { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; font-size: 15px; display: flex; flex-direction: column; gap: 6px; } .detail-meta b { color: var(--text-dim); font-weight: 600; } .detail-description { margin-top: 6px; white-space: pre-wrap; } .updated-note { font-size: 13px; color: var(--text-dim); font-style: italic; } .expected-date { font-size: 13px; color: var(--text-dim); } .expected-date-overdue { color: var(--urgent); font-weight: 600; } .sheet-sync-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--urgent); background: rgba(239, 68, 68, 0.1); border-radius: var(--radius-xs); padding: 6px 10px; margin-bottom: 8px; } .sheet-sync-badge .btn-link { background: none; border: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; } /* Текстовое поле даты (не type="date" — см. initCustomDateFields в app.js: нужно принимать ручной ввод в двух форматах и подсвечивать поле при ошибке, а нативный date-инпут для этого не годится, у него свой сегментный ввод) + кнопка-календарь + кнопка очистки в один ряд. align-items не задаём — по умолчанию stretch, поэтому кнопки сами растягиваются на высоту инпута, без числа в пикселях. */ .date-field { display: flex; gap: 8px; } .date-field-input { flex: 1; min-width: 0; width: auto; } .date-field-input.date-field-invalid { border-color: var(--urgent); background: rgba(239, 68, 68, 0.08); } .date-field-btn { flex-shrink: 0; width: 48px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--bg-input); color: var(--text); font-size: 18px; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; } .date-field-btn:focus-visible { outline: 2px solid var(--accent); } .date-field-clear { font-size: 20px; font-weight: 700; color: var(--text-dim); } .date-field-clear:hover { color: var(--urgent); } /* Сам пикер невидим (открывается только через showPicker() из JS по клику на .date-field-pick) — но не display:none и не visibility:hidden: оба исключают элемент из рендера, а showPicker() требует, чтобы элемент именно рендерился, иначе бросает InvalidStateError. */ .date-field-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: none; padding: 0; margin: 0; } /* На случай, если сам факт непустого элемента где-то всё же даёт браузеру нарисовать иконку календаря внутри этой 1px-области — второй календарь рядом с нашей кнопкой не нужен ни при каких условиях. */ .date-field-native::-webkit-calendar-picker-indicator { display: none; } .status-comment { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 14px; color: var(--text); } .status-form-field { margin-bottom: 10px; grid-column: 1 / -1; } .status-save-btn { grid-column: 1 / -1; margin-bottom: 10px; } .supplier-info { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: var(--space-md); font-size: 14px; display: flex; flex-direction: column; gap: 4px; } .supplier-info b { color: var(--text-dim); font-weight: 600; } .supplier-info .field-label { margin: 0 0 4px; } .archive-supplier { color: var(--orange); font-size: 13px; margin-top: 2px; } .photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; } .photo-thumb-btn { padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); cursor: pointer; aspect-ratio: 1; overflow: hidden; } .photo-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .btn-danger { background: transparent; color: var(--urgent); border: 2px solid var(--urgent); margin-top: 12px; } /* Полноэкранный просмотр фото */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(6, 7, 9, 0.96); display: none; align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox-viewport { display: flex; width: 100%; height: 100%; touch-action: none; } .lightbox-img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; touch-action: none; user-select: none; -webkit-user-select: none; } .lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 1001; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .lightbox-counter { position: absolute; top: 22px; left: 16px; z-index: 1001; color: #fff; font-size: 14px; opacity: 0.8; } .lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1001; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } /* Admin */ .admin-card { flex-direction: column; gap: 10px; } .admin-card-link { display: flex; gap: 12px; } .archive-form { margin-top: 8px; } .archive-btn { width: 100%; } .archive-card-actions { display: flex; flex-direction: column; gap: 8px; } /* До 4 кнопок в ряд (К заявке/Остаток/Изменить/Удалить на /admin/stock-takes) — на узкой карточке все разом не помещаются, перенос на вторую строку и уменьшенный .btn-sm (не трогаем сам .btn-sm — он общий) не дают "Удалить" уехать за край карточки, как раньше при overflow: hidden у .card. */ .stock-take-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 100%; } .stock-take-card-actions .btn { padding: 5px 8px; font-size: 11px; flex: 0 0 auto; } .stock-take-card-actions form { margin: 0; flex: 0 0 auto; } /* Карточки "Итоги по месяцам" переиспользуют .landing-summary-card (сводка на главной) — тот же вид, но со словом-месяцем вместо числа: крупному .landing-summary-value тут нужен размер поменьше, иначе "Сентябрь 2026" не влезает в узкую карточку 2-в-ряд. */ .stock-takes-monthly-month { font-size: 16px; font-weight: 700; } .stock-takes-filter-actions { display: flex; gap: 10px; margin-top: 16px; } .stock-takes-filter-actions .btn { flex: 1; } .status-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .status-btn { padding: 12px 6px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--bg-input); color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; } .status-btn-active.status-btn-new { border-color: var(--gray); background: rgba(107,114,128,0.2); color: #fff; } .status-btn-active.status-btn-ordered { border-color: var(--orange); background: rgba(245,158,11,0.2); color: var(--orange); } .status-btn-active.status-btn-shipping { border-color: var(--purple); background: rgba(168,85,247,0.2); color: var(--purple); } .status-btn-active.status-btn-received { border-color: var(--green); background: rgba(34,197,94,0.2); color: var(--green); } @media (min-width: 480px) { .status-form { grid-template-columns: repeat(4, 1fr); } } .admin-table-wrap { max-width: 100%; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .admin-table { width: 100%; border-collapse: collapse; background: var(--bg-elevated); font-size: 14px; white-space: nowrap; } .admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table th { color: var(--text-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-input); } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover { background: var(--bg-input); } .push-log-row-warn td:first-child { box-shadow: inset 3px 0 0 var(--urgent); } .table-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-xs); display: block; background: var(--bg-input); } .table-thumb-empty { border: 1px dashed var(--border); } .table-title-link { font-weight: 600; color: var(--text); white-space: normal; } .table-title-link:hover { color: var(--accent-grad-to); } @supports (background-clip: text) or (-webkit-background-clip: text) { .table-title-link:hover { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .table-description { font-size: 12px; color: var(--text-dim); white-space: normal; margin-top: 2px; } .table-actions { display: flex; align-items: flex-start; gap: 8px; } .table-status-form { display: flex; gap: 4px; } .table-archive-btn { border-color: var(--orange); } .table-archive-btn .table-status-label { color: var(--orange); } .table-status-btn { padding: 4px 5px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; } .table-status-icon { font-size: 13px; } .table-status-label { font-size: 8px; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .table-status-btn-active { border-color: transparent; /* Раньше здесь был захардкожен rgba синего акцента (rgba(59,130,246,...)), не завязанный на переменную — при смене --accent на розово-фиолетовый тон стал бы просто не тем цветом. */ background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(139, 92, 246, 0.18)); } .table-status-btn-active .table-status-label { color: var(--accent-grad-to); } @supports (background-clip: text) or (-webkit-background-clip: text) { .table-status-btn-active .table-status-label { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* Переключение карточки/таблица в админке: правило размещено в самом конце файла и селекторы составные (.card-list.admin-cards-mobile), чтобы гарантированно выигрывать и по порядку каскада, и по специфичности у .card-list{display:flex}. */ .journal-table-wrap { position: relative; z-index: 0; max-width: 100%; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .journal-table thead th { position: sticky; top: 0; z-index: 1; } .journal-table tbody tr:nth-child(even) { background: var(--bg-input); } /* Фиксированная высота строки: и обычная ячейка, и её editing-состояние (текстовый инпут/селект внутри) занимают ровно эту высоту, так что вход в редактирование не "толкает" соседние строки. */ .journal-table th, .journal-table td { height: 44px; } /* border-collapse у .admin-table позволяет соседней колонке просвечивать через шов sticky-колонки на скролле (известная связка багов sticky + collapsed borders) — у этой таблицы швы рисуем раздельно. */ .journal-table { border-collapse: separate; border-spacing: 0; } .journal-table th[data-col-key="date"], .journal-table td[data-field="created_at"] { min-width: 140px; } .journal-table th[data-col-key="line_no"], .journal-table td[data-field="line_no"] { min-width: 68px; } /* Значение центрируется всегда (текст и в обычном режиме, и в select при редактировании — text-align наследуется в .cell-input). Горизонтальный padding задаём только для неактивного состояния: у editing уже есть свой (тот же 6px/28px) через .cell-input, а .editing{padding:0} должен остаться в силе, иначе паддинг задвоится и цифра сместится при клике. */ .journal-table td[data-field="line_no"] { text-align: center; } .journal-table td[data-field="line_no"]:not(.editing) { padding-left: 6px; padding-right: 28px; } /* «Ответственный» тоже стал select при редактировании — ширина колонки под самую длинную фамилию из справочника ("Никогосян") плюс место под стрелку, тот же гутер 28px справа зарезервирован и в обычном режиме, чтобы текст не сдвигался при входе в редактирование. */ .journal-table th[data-col-key="author"], .journal-table td[data-field="author"] { min-width: 130px; } .journal-table td[data-field="author"]:not(.editing) { padding-right: 28px; } /* «Время остановки»/«Время запуска»: короткий формат "11.08 14:20" в обычном режиме, но нативный в редакторе всегда рисует свой полный локализованный текст с годом ("11.08.2026, 14:20") — браузер это не даёт сократить никаким CSS/HTML, независимо от ширины поля. Поэтому вместо сжатия контрола или его выхода поверх соседней колонки (то и другое пробовали — обрезает либо перекрывает) колонка сразу шире, с запасом под полный формат + место под иконку пикера. Контрол остаётся в потоке, width: 100% (общее правило .cell-input), сосед никогда не перекрывается. white-space: normal вместо общего .resizable-table nowrap+ellipsis — если значение всё же не влезло, оно переносится, а не обрезается "…". */ .journal-table th[data-col-key="stopped_at"], .journal-table td[data-field="stopped_at"], .journal-table th[data-col-key="started_at"], .journal-table td[data-field="started_at"] { min-width: 220px; white-space: normal; overflow: visible; } /* Изменяемая ширина колонок: table-layout переключается на fixed только после того, как JS проставит явные ширины (замер натуральных + сохранённые из localStorage), поэтому вид таблицы не "прыгает" в момент инициализации. */ .resizable-table { table-layout: fixed; } .resizable-table th, .resizable-table td { overflow: hidden; text-overflow: ellipsis; } .col-resize-handle { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; touch-action: none; } .col-resize-handle:hover { background: rgba(59, 130, 246, 0.35); } body.col-resizing { cursor: col-resize; user-select: none; } body.col-resizing .col-resize-handle { background: rgba(59, 130, 246, 0.35); } .journal-table-work { white-space: normal; min-width: 220px; } .journal-table-comment { white-space: normal; min-width: 140px; } .journal-row-link-cell { width: 56px; white-space: nowrap; text-align: center; } .journal-row-link { color: var(--accent-grad-to); font-weight: 700; font-size: 16px; text-decoration: none; } @supports (background-clip: text) or (-webkit-background-clip: text) { .journal-row-link { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .journal-row-delete-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: var(--radius-xs); line-height: 1; margin-left: 6px; } .journal-row-delete-btn:hover { color: var(--urgent); background: rgba(239, 68, 68, 0.12); } .journal-row-delete-btn:disabled { opacity: 0.5; cursor: default; } .journal-row-link:hover { text-decoration: underline; } .journal-sheet-retry-btn { background: rgba(239, 68, 68, 0.12); border: none; color: var(--urgent); cursor: pointer; font-size: 11px; padding: 3px 6px; border-radius: var(--radius-xs); line-height: 1.3; margin-right: 6px; white-space: normal; } .journal-sheet-retry-btn:disabled { opacity: 0.6; cursor: default; } .journal-cell-editable { cursor: text; position: relative; } .journal-cell-editable:hover { background: rgba(59, 130, 246, 0.08); box-shadow: inset 0 0 0 1px var(--accent); } /* Рамка выделения рисуется один раз — на самой ячейке (её реальные границы), а не на контроле внутри. padding: 0, чтобы весь бюджет фиксированной высоты строки доставался input/select без второго слоя отступов поверх высоты строки. */ .journal-cell-editable.editing { padding: 0; cursor: default; box-shadow: inset 0 0 0 1px var(--accent); } .journal-cell-editable .cell-input { display: block; width: 100%; max-width: 100%; min-width: 0; height: 100%; background: transparent; border: none; box-shadow: none; color: var(--text); border-radius: 0; padding: 0 28px 0 6px; font-size: 13px; font-family: inherit; box-sizing: border-box; } .journal-cell-editable .cell-input:focus { outline: none; } /* Нативная стрелка