/* ============================================================ Дизайн-система в стиле iOS (Human Interface Guidelines) Светлая и тёмная темы через CSS-переменные + prefers-color-scheme ============================================================ */ :root { color-scheme: light dark; /* Фоны: мягкий цветной градиент вместо плоского серого */ --bg-page: linear-gradient(165deg, #f4f1ff 0%, #fdf1ea 48%, #edf5ff 100%); /* Сплошной цвет верхней точки градиента — им красится overscroll-зона iOS */ --bg-top: #f4f1ff; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-blur: rgba(250, 247, 255, 0.75); /* Заливки контролов — чуть тёплые, не «казённые» */ --fill: rgba(110, 100, 145, 0.1); --fill-strong: rgba(110, 100, 145, 0.18); /* Поля ввода: тёплый почти белый + мягкая рамка, теплеющая при ховере */ --input-bg: #fffdfa; --input-border: rgba(84, 76, 120, 0.24); --input-border-hover: rgba(255, 77, 38, 0.4); /* Текст */ --text-primary: #16121f; --text-secondary: rgba(52, 45, 75, 0.62); --text-tertiary: rgba(52, 45, 75, 0.34); /* Разделители */ --separator: rgba(84, 76, 120, 0.18); /* Шапка карточки калькулятора: номер позиции и сегмент типа материала */ --num-ink: #6b6480; --seg-ink: #5a5470; --seg-track: rgba(110, 100, 145, 0.1); --seg-shine: rgba(255, 255, 255, 0.55); --seg-empty-track: rgba(255, 77, 38, 0.07); /* Акценты: фирменный оранжевый + сочный градиент для главных действий */ --tint: #ff4d26; --tint-pressed: #e63a15; --tint-soft: rgba(255, 77, 38, 0.12); --tint-grad: linear-gradient(135deg, #ff8a1e 0%, #ff4d26 55%, #ff2d55 100%); --tint-glow: 0 6px 18px rgba(255, 77, 38, 0.32); --red: #ff3b30; --green: #34c759; --blue: #007aff; /* Геометрия. Радиусы — строго из этого набора: капсулы (шапка, рейл, карта, таб-бар, форма логина) → capsule, карточки → card, контролы/кнопки → control, мелочь → small. Вложенный скруглённый элемент берёт радиус на ступень меньше родителя */ --radius-capsule: 22px; --radius-card: 16px; --radius-control: 12px; --radius-small: 8px; /* Единый отступ закреплённых капсул от краёв окна */ --edge-gap: 14px; /* Единый зазор между крупными блоками раскладки (рейл/панель/карта) */ --layout-gap: 28px; --shadow-card: 0 2px 6px rgba(31, 27, 57, 0.05), 0 10px 30px rgba(255, 90, 46, 0.07); /* Схемы изделий в калькуляторе: заливки секций и цвет кромок */ --sch-top: #eceaf2; --sch-front: #cfcadb; --sch-left: #b9b3c9; --sch-edge: rgba(60, 50, 80, 0.5); } /* Тема выбирается НЕ через @media (prefers-color-scheme), а по атрибуту data-theme на : его ставит инлайн-скрипт в (header.php) до первой отрисовки. Скрипт берёт сохранённый выбор пользователя, а если выбора не было — системную тему, и следит за её сменой на лету. Один источник истины: правило темы пишется здесь один раз, дублировать палитру под медиазапрос и под атрибут не нужно */ :root[data-theme="dark"] { /* Тёмная тема — глубокий сине-фиолетовый «космос», не чёрная дыра */ --bg-page: linear-gradient(165deg, #14101f 0%, #1d1218 50%, #0f1524 100%); --bg-top: #14101f; --bg-card: #1c1728; --bg-elevated: #272033; --bg-blur: rgba(20, 16, 31, 0.72); --fill: rgba(150, 140, 190, 0.16); --fill-strong: rgba(150, 140, 190, 0.28); --input-bg: rgba(150, 140, 190, 0.09); --input-border: rgba(150, 140, 190, 0.34); --input-border-hover: rgba(255, 106, 69, 0.5); --text-primary: #f5f3fa; --text-secondary: rgba(228, 222, 245, 0.62); --text-tertiary: rgba(228, 222, 245, 0.32); --separator: rgba(150, 140, 190, 0.24); --num-ink: #a9a3bb; --seg-ink: #d2ccdf; --seg-track: rgba(150, 140, 190, 0.13); --seg-shine: rgba(255, 255, 255, 0.1); --seg-empty-track: rgba(255, 106, 69, 0.12); --tint: #ff6a45; --tint-pressed: #ff8264; --tint-soft: rgba(255, 106, 69, 0.16); --tint-grad: linear-gradient(135deg, #ff9736 0%, #ff6a45 55%, #ff3d63 100%); --tint-glow: 0 6px 20px rgba(255, 106, 69, 0.35); --red: #ff453a; --green: #30d158; --blue: #0a84ff; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(255, 106, 69, 0.06); --sch-top: #4a4658; --sch-front: #35313f; --sch-left: #2b2834; --sch-edge: rgba(255, 255, 255, 0.28); } /* ---------- База ---------- */ * { box-sizing: border-box; } html { /* Сплошной цвет верхней точки градиента: только им iOS красит overscroll-«резинку» вверху (background-image туда не затекает) */ background-color: var(--bg-top); min-height: 100%; } /* Градиент — отдельным фиксированным слоем, а не background-attachment: fixed (тот на WebKit глючит). Слой держится по вьюпорту, поэтому не растягивается на всю длину страницы и не темнеет на длинных экранах */ html::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--bg-page); pointer-events: none; } body { padding: 0 50px; /* перебиваем серый фон bootstrap (#f1f1f1), чтобы просвечивал градиент html */ background: transparent; min-height: 100vh; color: var(--text-primary); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } #page-wrapper { /* 3 карточки калькулятора в ряд: 3 × (400px + 12px margin) */ max-width: 1236px; margin: 0 auto; } h1 { margin-bottom: 24px; font-weight: 700; letter-spacing: -0.4px; } /* Живой градиентный заголовок страницы */ #workarea h1 { background: linear-gradient(100deg, var(--text-primary) 0%, var(--tint) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; } h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; } h3 { font-size: 20px; font-weight: 600; } h4 { font-weight: 600; } a { color: var(--tint); } a:hover, a:focus { color: var(--tint-pressed); } hr { border: 0; border-top: 1px solid var(--separator); } pre { background: var(--bg-card); border: 0; border-radius: var(--radius-control); color: var(--text-primary); padding: 12px 16px; } div.spacer { height: 1px; clear: both; width: 100%; } .orange-text { color: var(--tint); } /* Перекраска инлайновых svg-иконок под тему (presentation-атрибуты слабее CSS) */ svg[fill="#4b4b4b"], svg[fill="#717171"] { fill: var(--text-secondary); } svg[fill="red"] { fill: var(--red); } svg[fill="#0591F7"] { fill: var(--tint); } /* Тёмная тема: логотип-png делаем светлым. Иконки синхронизации сюда больше не входят — это inline-SVG .ic-sync под currentColor. Растровый sync.png был синим, а invert+hue-rotate возвращал ему тот же синий (для насыщенного синего пара почти тождественна) */ :root[data-theme="dark"] .logo-wrapper img { filter: invert(1) hue-rotate(180deg); } /* Иконка синхронизации/обновления: одна пиктограмма на весь портал */ .ic-sync { display: block; width: 24px; height: 24px; flex: none; color: var(--tint); } /* Логотип Google Диска — цветной брендовый знак: у путей свои fill, currentColor к нему не применяется. Абстрактная «цепочка» на его месте не читалась как ссылка на документы */ .ic-drive { width: 16px; height: 16px; flex: none; } /* Имя doc-link, а не drive-link: .drive-link уже занят кнопкой-плашкой документации в калькуляторе (padding 10/16, рамка, тень) — попап унаследовал бы чип высотой 43 в ряду строк по 19.6 */ a.doc-link { display: inline-flex; align-items: center; gap: 7px; } /* Крутилка, подставляемая скриптом в строку текста (перенос замера) */ .ic-sync-inline { display: inline-block; width: 18px; height: 18px; vertical-align: middle; } /* ---------- Шапка / навигация ---------- */ /* Шапка-капсула: на десктопе скроллится вместе со страницей */ #header { display: flex; align-items: center; z-index: 100; margin: var(--edge-gap) 0 48px; padding: 10px 20px; border-radius: var(--radius-capsule); background: var(--bg-blur); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--separator); box-shadow: var(--shadow-card); } .logo-wrapper img { max-width: 220px; display: block; } #header ul { list-style: none; margin: 0 0 0 30px; padding: 0; display: flex; align-items: center; } #header ul li { float: none; margin-right: 8px; } #header ul li a { display: inline-block; text-decoration: none; color: var(--text-primary); font-weight: 400; font-size: 15px; padding: 7px 14px; border-radius: 100px; transition: background 0.15s, color 0.15s; } #header ul li a:hover { background: var(--fill); } #header ul li a.active { font-weight: 600; color: var(--tint); background: var(--tint-soft); } #header ul li:last-child { margin-left: 8px; color: var(--text-secondary); font-size: 14px; white-space: nowrap; } #header ul li:last-child a { display: inline; padding: 0; color: var(--tint); } .menu-burger { display: none; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); align-items: center; justify-content: center; cursor: pointer; position: relative; } .menu-burger span, .menu-burger:before, .menu-burger:after { content: ""; display: block; position: absolute; left: 9px; width: 18px; height: 2px; border-radius: 2px; background: var(--text-primary); } .menu-burger:before { top: 12px; } .menu-burger span { top: 17px; } .menu-burger:after { top: 22px; } /* ---------- Кабинет: левый рейл (десктоп) и нижний таб-бар (мобильный) ---------- */ /* Оба элемента рендерятся только авторизованным вне iframe Б24 (body.app-shell); какой из них виден — решает ширина экрана */ #rail, #tabbar { display: none; } @media screen and (min-width: 981px) { /* Навигация уезжает в рейл — капсульная шапка больше не нужна */ body.app-shell #header { display: none; } body.app-shell { /* край + рейл + единый зазор раскладки */ padding-left: calc(var(--edge-gap) + 96px + var(--layout-gap)); } /* Прежде отступ сверху задавала шапка (margin-bottom) */ body.app-shell #workarea { padding-top: 34px; } #rail { display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: fixed; left: var(--edge-gap); top: var(--edge-gap); bottom: var(--edge-gap); width: 96px; padding: 12px 8px; z-index: 100; border-radius: var(--radius-capsule); background: var(--bg-blur); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--separator); box-shadow: var(--shadow-card); } .rail-logo { display: flex; justify-content: center; padding: 4px 0 6px; } .rail-logo img { width: 42px; height: 42px; border-radius: var(--radius-control); } .rail-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } /* Нижний блок не ужимается и не выталкивается: сжимается только .rail-nav (у неё flex:1 и своя прокрутка). Раньше в служебном состоянии (профиль раскрывает «Кэш») пунктов становилось на один больше, и «Выйти» уезжал за нижний край рейла */ .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; } .rail-bottom .rail-item { width: 100%; } /* Аватар с именем — одним блоком: кругляш, под ним подпись. Клик раскрывает сервисный «Сбросить кэш» (см. .rail-hard-refresh) */ .rail-profile { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; cursor: pointer; } /* Сброс кэша прячем за кликом по имени: нужен редко, но должен быть под рукой. Селектор с #rail — иначе общее правило .rail-item (display:flex) ниже по файлу перебило бы скрытие при равной специфичности */ #rail .rail-hard-refresh { display: none; } #rail.show-hard-refresh .rail-hard-refresh { display: flex; } /* Без сети сброс запрещён — чистка кэшей офлайн оставит пустой экран */ body.is-offline .rail-hard-refresh { opacity: 0.4; pointer-events: none; } .rail-user { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint-grad); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; cursor: default; } /* Имя под кружком-аватаром; длинное режется многоточием */ .rail-user-name { max-width: 100%; margin-top: -2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 11px; font-weight: 500; color: var(--text-secondary); } } .rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 7px; border-radius: var(--radius-card); font-size: 11px; font-weight: 500; line-height: 1.1; text-align: center; color: var(--text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; } .rail-item:hover, .rail-item:focus { background: var(--fill); color: var(--text-primary); text-decoration: none; } .rail-item.active { background: var(--tint-soft); color: var(--tint); font-weight: 600; } .rail-item svg { width: 22px; height: 22px; } /* ---------- Отклик на переход по меню ---------- */ /* Пункт, по которому кликнули, подпрыгивает и покачивается, пока браузер грузит страницу: переход из Битрикса не мгновенный, и без отклика человек не понимает, засчитан ли тап. Пульсирует размер, а не цвет — прозрачность на иконке читается как «выключено», а рост-сжатие как «работаю». Метку ставит и снимает js/script.js */ @keyframes nav-loading-bounce { 0% { transform: scale(1) rotate(0deg); } 20% { transform: scale(1.32) rotate(-12deg); } 40% { transform: scale(0.86) rotate(10deg); } 60% { transform: scale(1.2) rotate(-7deg); } 80% { transform: scale(0.94) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } } .nav-loading svg { animation: nav-loading-bounce 0.9s ease-in-out infinite; transform-origin: 50% 55%; } /* В шторке пункт — текстовая ссылка без иконки: подпрыгивает она сама, но мягче (вращать строку текста нельзя — читается как сбой вёрстки) */ @keyframes nav-loading-bounce-soft { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.06); } 60% { transform: scale(0.98); } } .menu-wrapper a.nav-loading { display: inline-block; animation: nav-loading-bounce-soft 0.9s ease-in-out infinite; transform-origin: left center; } /* ---------- Переключатель темы ---------- */ /* Иконка показывает то, ВО ЧТО переключит клик: в светлой теме — луна, в тёмной — солнце. Обе лежат в разметке, лишнюю прячем — переключение мгновенное, без перерисовки DOM. display: contents у обёртки — чтобы svg остался прямым потомком флекс-контейнера (колонка .rail-item, чип в шторке) и не сбил раскладку */ .theme-ic-dark { display: contents; } .theme-ic-light { display: none; } :root[data-theme="dark"] .theme-ic-dark { display: none; } :root[data-theme="dark"] .theme-ic-light { display: contents; } .rail-item.theme-switch { cursor: pointer; } /* В мобильной шторке переключатель — иконка-кнопка в правом углу нижней строки (там же имя и «Выйти»). Отдельным пунктом списка он читался как раздел меню, хотя это переключатель */ #header ul li.menu-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #header ul li .theme-switch { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--fill); color: var(--text-primary); cursor: pointer; transition: background 0.15s; } #header ul li .theme-switch:hover, #header ul li .theme-switch:focus-visible { background: var(--fill-strong); } #header ul li .theme-switch svg { width: 20px; height: 20px; } /* Страницы без карты (расчёт, сотрудники, цены): то же меню, но горизонтальной капсулой сверху — контенту отдаётся вся ширина. Разделы с картой (.measure-map на странице) остаются с вертикальным рейлом: справа у них закреплённая капсула карты, и второй горизонтали сверху не место. Без :has() — вертикальный рейл */ @media screen and (min-width: 981px) { /* Оба боковых паддинга в ноль (базовый body — padding: 0 50px): иначе контент центрируется со сдвигом и капсула меню с ним не совпадает */ body.app-shell:not(:has(.measure-map)) { padding: 0; } /* Контент выравниваем ровно по капсуле меню — та же ширина и центрирование. Без этого при обнулённом паддинге body заголовок и карточки прижимались к самым краям окна, а капсула висела с отступом --edge-gap */ body.app-shell:not(:has(.measure-map)) #page-wrapper { width: min(1236px, calc(100vw - var(--edge-gap) * 2)); } body.app-shell:not(:has(.measure-map)) #workarea { padding-top: calc(var(--edge-gap) + 64px + var(--layout-gap)); } /* Зазор «капсула меню → заголовок» уже посчитан в padding-top выше (--layout-gap). Бутстраповский margin-top: 20px у h1 добавлял к нему ещё 20 — фактически 48 вместо 28. На страницах с картой он и так снят */ body.app-shell:not(:has(.measure-map)) #workarea h1 { margin-top: 0; } body.app-shell:not(:has(.measure-map)) #rail { flex-direction: row; align-items: center; gap: 6px; /* Капсула по ширине контента (#page-wrapper), по центру окна */ left: 50%; right: auto; transform: translateX(-50%); width: min(1236px, calc(100vw - var(--edge-gap) * 2)); top: var(--edge-gap); bottom: auto; height: 64px; padding: 0 14px; } body.app-shell:not(:has(.measure-map)) .rail-logo { padding: 0; margin-right: 8px; } body.app-shell:not(:has(.measure-map)) .rail-logo img { width: 38px; height: 38px; } body.app-shell:not(:has(.measure-map)) .rail-nav { flex: 1; flex-direction: row; align-items: center; gap: 6px; overflow: visible; } body.app-shell:not(:has(.measure-map)) .rail-item { padding: 6px 14px 5px; } body.app-shell:not(:has(.measure-map)) .rail-bottom { flex-direction: row; gap: 12px; } body.app-shell:not(:has(.measure-map)) .rail-bottom .rail-item { width: auto; } /* Аватар компактнее, имя под ним — как подписи у пунктов меню */ body.app-shell:not(:has(.measure-map)) .rail-user { width: 28px; height: 28px; font-size: 11px; } body.app-shell:not(:has(.measure-map)) .rail-profile { gap: 3px; } body.app-shell:not(:has(.measure-map)) .rail-user-name { margin-top: 0; max-width: 90px; font-size: 11px; } } /* ---------- Индикатор онлайн/офлайн (PWA) ---------- */ #net-status { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 12px; border-radius: 100px; font-size: 13px; white-space: nowrap; color: var(--text-secondary); background: var(--fill); } #net-status .net-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); } #net-status.offline { color: var(--red); background: rgba(255, 69, 58, 0.14); } #net-status.offline .net-dot { background: var(--red); box-shadow: none; } /* Плашка «работаем из кэша»: скрыта, пока есть сеть */ #offline-note { display: none; margin: -34px 0 24px; padding: 10px 16px; border-radius: var(--radius-control); background: rgba(255, 149, 0, 0.14); color: var(--text-primary); font-size: 14px; line-height: 1.45; text-align: center; } body.is-offline #offline-note { display: block; } /* «Данные актуальны на HH:MM» + кнопка обновления: появляется через 5 минут после загрузки страницы (или сразу для копии из кэша), автообновлений нет. Живёт под заголовком страницы (pwa.js) */ #stale-note { /* По ширине содержимого: растянутая на весь контент полоса ради одной строки выглядела чужеродно */ width: fit-content; max-width: 100%; margin: 0 0 20px; padding: 10px 16px; border-radius: var(--radius-control); background: var(--tint-soft); color: var(--text-primary); font-size: 14px; line-height: 1.45; text-align: left; } #stale-note a { color: var(--tint); font-weight: 600; white-space: nowrap; } /* В офлайне о состоянии данных говорит своя плашка, обновляться всё равно нечем */ body.is-offline #stale-note { display: none; } /* В офлайне действия, требующие сервера, гасим — иначе молча упадут */ body.is-offline .grab-deal, body.is-offline .grab-deal-map, body.is-offline .cancel-measure, body.is-offline .change-date, body.is-offline .set-datetime, body.is-offline .set-datetime-save, body.is-offline .add-address, body.is-offline .save-input-address, body.is-offline .refresh-page, body.is-offline .refresh-clients, body.is-offline a.calc { opacity: 0.35; pointer-events: none; } /* Кнопки-иконки в заголовке страницы («обновить»). Раньше это были inline-img: картинка садилась на baseline строки и висела на 3–4px ниже центра заголовка. Приём: обёртка — inline-flex, внутрь добавлен нулевой по ширине символ, который наследует line-height заголовка. Он растягивает бокс обёртки ровно на высоту строки и задаёт ей baseline строки, а align-items: center ставит иконку в середину этого бокса — то есть в центр строки заголовка. Высота нигде не прописана числом: меняется line-height — едет и иконка */ h1 .refresh-clients, h1 .refresh-page, h1 .sync-all { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; cursor: pointer; } h1 .refresh-clients::before, h1 .refresh-page::before, h1 .sync-all::before { content: '\200b'; flex: none; width: 0; } h1 .refresh-clients .ic-sync, h1 .refresh-page .ic-sync, h1 .sync-all .ic-sync { width: 26px; height: 26px; } /* Место под нижний таб-бар. На десктопе таб-бара нет (навигация в рейле) — остаётся воздух между последним блоком страницы и низом окна */ #footer { padding-bottom: 100px; } @media screen and (min-width: 981px) { #footer { padding-bottom: var(--layout-gap); } } /* ---------- Кнопки ---------- */ .bttn { height: 50px; border: 0; border-radius: var(--radius-control); background: var(--fill); color: var(--text-primary); display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 200px; padding: 0 24px; margin: 0 auto; font-size: 17px; font-weight: 600; cursor: pointer; position: relative; z-index: 2; transition: background 0.15s, transform 0.1s, opacity 0.15s; } .bttn:active { transform: scale(0.97); } .bttn.disabled { opacity: 0.4; } .bttn.disabled:hover { text-decoration: none; cursor: default; transform: none; } .bttn-orange { background: var(--tint-grad); color: #fff; box-shadow: var(--tint-glow); } .bttn-orange:not(.disabled):hover, .bttn-orange:not(.disabled):focus { text-decoration: none; color: #fff; background: var(--tint-grad); filter: brightness(1.07); } .bttn.disabled:hover { color: #fff; } /* Bootstrap-кнопки на страницах менеджера */ .btn { border: 0; border-radius: var(--radius-control); font-weight: 600; padding: 9px 18px; transition: opacity 0.15s; box-shadow: none; text-shadow: none; background-image: none; } .btn:active { box-shadow: none; } .btn-success { background: var(--green); color: #fff; } .btn-success:hover, .btn-success:focus { background: var(--green); opacity: 0.85; color: #fff; } .btn-info { background: var(--tint); color: #fff; } .btn-info:hover, .btn-info:focus { background: var(--tint-pressed); color: #fff; } /* Малые «tinted»-кнопки (телефоны, назначение даты) */ a.set-datetime-save, a.set-datetime, a.phone { /* Высота 36 задана явно: на padding+line-height капсула получалась 35.4 и выбивалась из ряда действий */ display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: var(--tint-soft); border-radius: 100px; color: var(--tint); font-weight: 600; font-size: 15px; margin-right: 8px; margin-top: 3px; vertical-align: middle; transition: background 0.15s; } a.set-datetime-save:hover, a.set-datetime:hover, a.phone:hover { cursor: pointer; text-decoration: none; background: var(--tint-grad); color: #fff; } /* Квадратные иконки-действия в карточках */ .measure .calc, .measure .cancel-measure, a.grab-deal, .change-date a.change { border: 0 !important; background: var(--fill); border-radius: var(--radius-control); transition: background 0.15s; } .measure .calc:hover, .measure .cancel-measure:hover, a.grab-deal:hover, .change-date a.change:hover { background: var(--fill-strong); text-decoration: none; cursor: pointer; } /* Цвет пиктограмм — токенами, а не fill="red"/"#717171" в разметке (в тёмной теме хардкод не переключался). Красным остаётся только отмена — она и есть отказ */ .measure .calc, a.grab-deal, .change-date a.change, .measure .repeat-order { color: var(--tint); } .measure .cancel-measure { color: var(--red); } .measure .content-measure-wrap .line .date > svg, .measure .content-measure-wrap .line .name svg, .measure .content-measure-wrap .line .comment svg, .measure .content-measure-wrap .line .repeat-order-link svg { color: var(--text-secondary); } /* ---------- Формы ---------- */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select { background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--input-border); border-radius: var(--radius-control); height: 36px; padding: 0 12px; font-size: 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="date"]:hover, input[type="datetime-local"]:hover, input[type="time"]:hover, textarea:hover, select:hover { border-color: var(--input-border-hover); } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus, textarea:focus, select:focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } /* Поля даты/времени: гасим системный вид, календарную иконку — под тон темы. datetime-local используется при переносе замера и в форме «Назначить доставку и монтаж» — без этих правил он оставался системным полем 26px с рамкой 2px inset и нулевым радиусом посреди контролов 36px */ input[type="date"], input[type="datetime-local"], input[type="time"] { -webkit-appearance: none; appearance: none; } input[type="date"]::-webkit-date-and-time-value, input[type="datetime-local"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; } /* Инвертировать индикатор в тёмной теме НЕЛЬЗЯ: в объявлен color-scheme: light dark, поэтому Chrome сам рисует глиф светлым, и invert(1) делал его чёрным на тёмном поле — иконка пропадала */ /* Многострочные поля: фиксированная высота инпутов им не подходит. Поле поиска select2 — тоже textarea, его не трогаем */ textarea:not(.select2-search__field) { height: auto; min-height: 180px; padding: 10px 12px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-tertiary); } select[multiple] { height: auto; padding: 8px 12px; } label { font-weight: 400; } input[type="file"] { color: var(--text-secondary); } input[type="file"]::file-selector-button { border: 0; border-radius: 100px; background: var(--tint-soft); color: var(--tint); font-weight: 600; padding: 6px 14px; margin-right: 10px; cursor: pointer; } /* Радиокнопки в стиле iOS */ input[type="radio"] { appearance: none; -webkit-appearance: none; margin: 0 4px 0 0; width: 22px; height: 22px; border: 1.5px solid var(--text-tertiary); border-radius: 50%; vertical-align: middle; position: relative; cursor: pointer; transition: border-color 0.15s, background 0.15s; } input[type="radio"]:checked { border-color: var(--tint); background: var(--tint); } input[type="radio"]:checked:before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; } /* Чекбоксы — тумблеры (switch) в стиле iOS */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; width: 51px; height: 31px; border-radius: 31px; background: var(--fill-strong); position: relative; vertical-align: middle; cursor: pointer; transition: background 0.2s; flex: none; } input[type="checkbox"]:before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); transition: left 0.2s; } input[type="checkbox"]:checked { background: var(--green); } input[type="checkbox"]:checked:before { left: 22px; } /* ---------- Форма входа ---------- */ body.guest { background: var(--bg-page); } .login-form { text-align: center; max-width: 380px; margin: 60px auto 0; background: var(--bg-card); border-radius: var(--radius-capsule); box-shadow: var(--shadow-card); padding: 32px 28px 36px; } .login-form h1 { font-size: 24px; margin-bottom: 24px; } .login-form .field { margin-bottom: 12px; } .login-form input[type="password"], .login-form input[type="text"] { height: 50px; border-radius: var(--radius-control); border: 1px solid var(--input-border); background: var(--input-bg); padding: 0 18px; width: 100%; font-size: 17px; color: var(--text-primary); outline: none; text-align: center; } .login-form .bttn { width: 100%; } [name="form_auth"] label { font-weight: 400; font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 8px; } .login-form .field.remember { margin: 18px 0; } /* ---------- Чипы-фильтры (состояния замеров) ---------- */ /* Колонка списка. 400px — ширина карточки на десктопе, где справа стоит карта; на планшете (601–980) карты рядом нет, и колонка должна занимать всю ширину, иначе половина экрана пустует */ .measure { max-width: 400px; } @media screen and (max-width: 980px) { .measure { max-width: none; } } .measure .tabs-wrap { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; margin-bottom: 20px; } .measure .tabs-wrap > div { padding: 8px 14px; border: 0; background: var(--fill); color: var(--text-primary); display: flex; border-radius: 100px; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 500; transition: background 0.15s, box-shadow 0.15s; } /* Иконка чипа (есть только на «Доставка/Монтаж»): размер как у остальных иконок карточек, цвет — за подписью. Без этого правила инлайновый fill="#4b4b4b" уводил её в --text-secondary, и в активном чипе тёмная иконка оставалась на оранжевом градиенте рядом с белым текстом */ .measure .tabs-wrap > div svg { width: 18px; height: 18px; flex: none; fill: currentColor; } .measure .tabs-wrap > div:hover { cursor: pointer; background: var(--fill-strong); } .measure .tabs-wrap > div.active { font-weight: 600; border: 0 !important; background: var(--tint-grad); color: #fff; box-shadow: var(--tint-glow); } .measure .tabs-wrap .count { background: var(--fill-strong); color: var(--text-secondary); display: inline-block; padding: 1px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; } .measure .tabs-wrap .active .count { background: rgba(255, 255, 255, 0.25); color: #fff; } /* ---------- Карточки замеров ---------- */ .measure .content-measure-wrap { min-height: 300px; } .measure .content-measure-wrap .line { background: var(--bg-card); padding: 16px; box-shadow: var(--shadow-card); border-radius: var(--radius-card); margin-bottom: 12px; } .measure .content-measure-wrap .line .date { font-weight: 600; margin-bottom: 7px; display: flex; align-items: center; /* Зазор иконка↔дата задаём gap, а не   в разметке: во flex-строке неразрывный пробел схлопывался и иконка прилипала к дате */ gap: 7px; } .measure .content-measure-wrap .line .date > svg { flex: none; } .measure .content-measure-wrap .line .date .id { margin-left: auto; color: var(--text-secondary); display: inline-block; padding: 3px 10px; background: var(--fill); border-radius: 100px; font-size: 13px; font-weight: 600; } .measure .measure-set-wrap { display: block; background: var(--bg-card); padding: 20px; border-radius: var(--radius-card); margin-bottom: 12px; box-shadow: var(--shadow-card); } .measure .measure-set-wrap h3 { cursor: pointer; margin: 0; } .measure h3 { font-size: 19px; } .measure hr { margin-top: 12px; margin-bottom: 12px; } .measure .address { margin-bottom: 12px; } .measure .comment { color: var(--text-secondary); } /* Карточки замерщика — тот же вид, что на карте менеджеров: коммент в подложке, ID-бейдж с решёткой */ .measure .content-measure-wrap .line .comment { position: relative; margin: 10px 0 0; padding: 10px 14px 10px 38px; background: var(--fill); border-radius: var(--radius-control); color: var(--text-secondary); font-size: 14px; line-height: 1.45; } /* Иконка-«облачко» комментария слева (единая для карточек замерщика и менеджера) */ .measure .content-measure-wrap .line .comment::before, .mmap-card-comment::before { content: ''; position: absolute; left: 13px; top: 11px; width: 16px; height: 16px; background: var(--text-tertiary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; } .measure .content-measure-wrap .line .comment svg { display: none; } .measure .content-measure-wrap .line .date .id:before { content: '#'; } /* Ряд действий карточки: имя своей строкой, ниже телефоны слева и кнопки справа. Раскладка флексом, а не абсолютом: центры совпадают по построению и не зависят от того, есть ли у контакта имя */ .measure .phones-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .measure .phones-wrap > .name { order: 1; flex-basis: 100%; } /* Контакты сжимаются и переносятся внутри себя (у части сделок в Б24 телефон задвоен) — кнопки при этом остаются в той же строке, а не уезжают под них */ .measure .measure-contacts { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .measure .measure-buttons { order: 3; margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; } /* Зазоры даёт gap — собственные маржины пилюли здесь только сбивают ряд */ .measure .measure-contacts a.phone { margin: 0; } /* WhatsApp — такая же плитка 36×36, как «отправить замер»/«отменить»: раньше это была голая картинка 33px в инлайн-боксе 16.5px, ряд действий получался из трёх разных высот (35.4 / 33 / 36) */ .measure .whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--fill); vertical-align: middle; } .measure .whatsapp:hover { background: var(--fill-strong); } .measure .whatsapp img { max-width: 22px !important; display: block; } .measure .repeat-order:hover { cursor: pointer; } .measure .repeat-order { display: flex; height: 26px; width: 26px; align-items: center; justify-content: center; margin-left: 5px; } .measure .calc { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; } .measure .cancel-measure { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; } a.grab-deal { display: flex; height: 36px; width: 36px; align-items: center; justify-content: center; } /* Кнопка-карандаш центрируется флексом, а не ручным margin-top: -3px — он уводил её центр на 1.5px выше центра даты */ .change-date a.change { margin: 0; display: flex; padding: 4px; align-items: center; justify-content: center; } .change-date { display: inline-flex; align-items: center; font-weight: 500; font-size: 12px; } .phones-wrap { margin-top: 10px; } .measure .changing .save { display: inline-block; margin-left: 10px; } .measure .loading .change, .measure .changing .change, .measure .loading .save, .measure .save { display: none; } .measure .new h3 { color: var(--tint); margin-top: 0; padding-top: 20px; } .measure .address-input-wrap { text-align: left; width: 100%; padding: 14px; background: var(--fill); border-radius: var(--radius-control); box-shadow: none; margin: 6px 0; } .measure .address-input-wrap input[type="text"] { width: 100%; background: var(--bg-elevated); } .measure .address-input-wrap .coordinates { display: inline-block; margin: 5px 0; height: 20px; color: var(--text-secondary); } .measure .address-input-wrap .bttn { height: 40px; min-width: 100px; margin-top: 10px; margin-left: 0; } /* «Сохранить» и «Отмена» — одной строкой: базовый .bttn это display:flex, поэтому кнопку переводим в inline-flex, иначе «Отмена» падает под неё. Отмена — вторичное действие, поэтому ссылкой, а не второй кнопкой */ .address-input-wrap .save-input-address { display: inline-flex; vertical-align: middle; } .address-input-wrap .cancel-input-address { /* Та же высота, что у кнопки, и inline-flex по центру: иначе текстовая ссылка (высотой в строку) висит выше центра «Сохранить» */ display: inline-flex; align-items: center; height: 40px; vertical-align: middle; /* тот же верхний отступ, что у «Сохранить», иначе ссылка встаёт выше кнопки */ margin-top: 10px; /* шаг между контролами по дизайн-системе */ margin-left: 8px; font-size: 15px; color: var(--text-secondary); text-decoration: none; } .address-input-wrap .cancel-input-address:hover { color: var(--text-primary); } .measure .refresh-page:hover { cursor: pointer; } .measure .refresh-page img { max-height: 32px; } /* Адресная строка карточки: кнопки «на карте»/«маршрут» + текст адреса */ /* Иконки и текст всегда в одну строку: с flex-wrap длинный адрес целиком переносился под иконки и высота карточек скакала (как на карте менеджера) */ .measure .content-measure-wrap .line .address { display: flex; align-items: flex-start; gap: 8px; } .measure .content-measure-wrap .line .address .addr-text { padding-top: 4px; flex: 1 1 auto; min-width: 0; } .measure .content-measure-wrap .line .repeat-order-link { margin-bottom: 10px; font-size: 14px; } /* Иконка — часть ссылки (кликается вместе с подписью) и её же цвета: раньше svg лежал рядом со ссылкой, был серым при оранжевом тексте и по нему нельзя было попасть */ .measure .content-measure-wrap .line .repeat-order-link a { display: inline-flex; align-items: center; gap: 7px; } .measure .content-measure-wrap .line .repeat-order-link svg { flex: none; fill: currentColor; } .measure .content-measure-wrap .line .comment svg { vertical-align: -4px; } .measure .set-datetime-wrapper { margin-top: 8px; } .measure .phones-wrap .name { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; font-weight: 500; } .measure .address-input-wrap .coordinates-line, .mmap .address-input-wrap .coordinates-line { margin-top: 8px; font-size: 13px; color: var(--text-secondary); } .measure .address-input-wrap .progress { color: var(--tint); font-weight: 600; margin: 10px 0 0; } /* Карта с легендой под списком «Моих замеров» (мобильная раскладка); на десктопе — правая панель двухпанельной сетки (ниже) */ .measure + .mmap { margin-top: 40px; } /* Десктоп-кабинет: список слева, липкая карта справа на всю высоту окна. Без :has() (очень старый браузер) раскладка остаётся «столбиком» — не ломается */ @media screen and (min-width: 981px) { body.app-shell #page-wrapper:has(.measure + .mmap) { max-width: none; } /* Карта — закреплённая капсула: как у рейла, отступ --edge-gap от краёв окна (справа поджимаем паддинг body, обычно он шире) */ body.app-shell:has(.measure + .mmap) { padding-right: var(--edge-gap); } body.app-shell #workarea:has(.measure + .mmap) { display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); gap: var(--layout-gap); align-items: start; /* Верхняя линия капсул: контент начинается на уровне верха рейла */ padding-top: var(--edge-gap); } body.app-shell #workarea:has(.measure + .mmap) h1 { margin-top: 0; margin-bottom: 16px; } body.app-shell #workarea:has(.measure + .mmap) .measure { max-width: none; } body.app-shell #workarea:has(.measure + .mmap) .measure + .mmap { margin-top: 0; position: sticky; top: var(--edge-gap); height: calc(100vh - 2 * var(--edge-gap)); display: flex; flex-direction: column; gap: 12px; } body.app-shell #workarea:has(.measure + .mmap) .measure-map { flex: 1; height: auto; min-height: 0; /* Закреплённая капсула — радиус на ступень выше карточки */ border-radius: var(--radius-capsule); border: 1px solid var(--separator); box-shadow: var(--shadow-card); } /* Легенда — карточкой поверх карты в левом нижнем углу (как на менеджерских картах), а не строкой чипов над картой; из потока уходит, карта занимает всю высоту капсулы */ body.app-shell #workarea:has(.measure + .mmap) .mmap-legend { position: absolute; left: 16px; bottom: 20px; z-index: 20; display: block; margin: 0; padding: 12px 16px 10px; background: var(--bg-blur); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--separator); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } body.app-shell #workarea:has(.measure + .mmap) .mmap-legend .mmap-legend-title { display: block; } body.app-shell #workarea:has(.measure + .mmap) .mmap-legend .mmap-chip { display: flex; background: transparent; border: 0; box-shadow: none; padding: 3px 0; font-size: 13px; } } /* Кнопка «К списку» — только в полноэкранной мобильной карте (mobile.css) */ .mmap-map-close { display: none; } /* Менеджерские карты: панель списка слева, липкая карта справа. Разметка не меняется, только сетка */ @media screen and (min-width: 981px) { body.app-shell #page-wrapper:has(.mmap-cols), body.app-shell #page-wrapper:has(.mmap-panel) { max-width: none; } /* Карта монтажей — пока старая двухколоночная панель */ body.app-shell .mmap:has(.mmap-cols) { display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); /* Ровно два ряда: авто под легенду + остальное; без этого высота длинной панели (span 2) распределяется по рядам и карта уезжает вниз */ grid-template-rows: auto 1fr; column-gap: var(--layout-gap); align-items: start; } body.app-shell .mmap:has(.mmap-cols) .mmap-legend { grid-column: 2; grid-row: 1; margin-bottom: 14px; } body.app-shell .mmap:has(.mmap-cols) .measure-map { grid-column: 2; grid-row: 2; position: sticky; top: var(--edge-gap); height: calc(100vh - 2 * var(--edge-gap)); /* Закреплённая капсула — как у карты замеров и панели .mmap-panel */ border-radius: var(--radius-capsule); border: 1px solid var(--separator); box-shadow: var(--shadow-card); } body.app-shell .mmap:has(.mmap-cols) .mmap-cols { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 1fr; margin-top: 0; } /* Карта замеров: панель фиксированной ширины слева, карта закреплена на всю правую часть окна (от верха до низа, вплотную вправо), легенда — карточкой поверх карты в левом нижнем углу */ body.app-shell .mmap:has(.mmap-panel) .mmap-panel { width: 440px; } body.app-shell .mmap:has(.mmap-panel) .measure-map { position: fixed; /* Капсула в стиле рейла: те же отступы от краёв окна и скругление */ top: var(--edge-gap); right: var(--edge-gap); bottom: var(--edge-gap); /* отступ контента (см. body.app-shell) + панель + зазор раскладки */ left: calc(var(--edge-gap) + 96px + var(--layout-gap) + 440px + var(--layout-gap)); width: auto; height: auto; margin: 0; border-radius: var(--radius-capsule); border: 1px solid var(--separator); box-shadow: var(--shadow-card); z-index: 10; } body.app-shell .mmap:has(.mmap-panel) .mmap-legend { position: fixed; left: calc(var(--edge-gap) + 96px + var(--layout-gap) + 440px + var(--layout-gap) + 16px); /* Тот же инсет 16, что слева и что у зум-контрола: раньше низ был 20, и два оверлея одной карты стояли на разных линиях */ bottom: calc(var(--edge-gap) + 16px); z-index: 20; display: block; margin: 0; padding: 12px 16px 10px; background: var(--bg-blur); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--separator); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } body.app-shell .mmap:has(.mmap-panel) .mmap-legend .mmap-legend-title { display: block; } body.app-shell .mmap:has(.mmap-panel) .mmap-legend .mmap-chip { display: flex; background: transparent; border: 0; box-shadow: none; padding: 3px 0; font-size: 13px; } /* Заголовок страницы — в одну верхнюю линию с капсулами рейла и карты */ body.app-shell #workarea:has(.mmap-panel) { padding-top: var(--edge-gap); } body.app-shell #workarea:has(.mmap-panel) h1 { margin-top: 0; margin-bottom: 16px; } /* Плашка «данные актуальны на» — по ширине панели, чтобы не ныряла под карту */ body.app-shell #workarea:has(.mmap-panel) #stale-note { max-width: 440px; } } /* Заголовок легенды-карточки (виден только в оверлее на карте) */ .mmap-legend-title { display: none; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; } /* Фильтры панели: первая строка — статус, дата, сброс; селект замерщика — второй строкой на всю ширину */ .mmap-panel-filters { /* Место, которое строка диапазона дат оставляет крестику сброса */ --filters-reset-space: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .mmap-panel-filters .mmap-filter-date { height: 36px; font-size: 14px; } /* Диапазон дат — второй строкой под статусом и замерщиком. Базис почти во всю ширину гарантирует перенос; вычтенное место крестика сброса держится всегда (он скрывается через visibility), поэтому поля не дёргаются при фильтрации */ .mmap-panel-filters .mmap-filter-range { display: flex; align-items: center; gap: 8px; flex: 1 1 calc(100% - var(--filters-reset-space)); min-width: 0; } /* Поле остаётся контролом: на широкой панели таб-барного режима без max-width оно растягивалось до 460px при собственной ширине ~145 */ .mmap-panel-filters .mmap-filter-range .mmap-filter-date-wrap { flex: 1 1 0; min-width: 0; max-width: 170px; } .mmap-panel-filters .mmap-filter-range .mmap-filter-date { width: 100%; min-width: 0; } .mmap-filter-range-sep { flex: 0 0 auto; color: var(--text-secondary); font-size: 14px; } /* Кастомный селект с бейджами: кнопка-инпут + выпадающая карточка */ .nice-select { position: relative; min-width: 0; } .ns-status { flex: 0 0 auto; } /* Замерщик — в одной строке со статусом, забирает её остаток */ .ns-people { flex: 1 1 200px; } /* На телефоне — своя строка всегда: ширина статуса зависит от выбранного пункта («Все» и «Назначен» различаются на 77px), и без этого правила блок фильтров прыгал между двумя и тремя строками при каждой смене статуса */ @media screen and (max-width: 600px) { .ns-people { flex: 1 1 100%; } } .nice-select-btn { display: flex; align-items: center; width: 100%; height: 36px; padding: 0 30px 0 12px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-control); color: var(--text-primary); font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .nice-select-btn:hover { border-color: var(--input-border-hover); } .nice-select.open .nice-select-btn { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } /* Без overflow: hidden — он срезал свечение статусных точек; длинные подписи режет сам .ns-item-label своим ellipsis */ .ns-btn-content { display: flex; align-items: center; gap: 7px; min-width: 0; } .ns-arrow { position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--text-secondary); border-bottom: 1.6px solid var(--text-secondary); transform: translateY(-70%) rotate(45deg); transition: transform 0.15s; pointer-events: none; } .nice-select.open .ns-arrow { transform: translateY(-30%) rotate(225deg); } .nice-select-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 320px; overflow: auto; z-index: 700; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: var(--radius-control); box-shadow: var(--shadow-card); } .nice-select.open .nice-select-menu { display: flex; flex-direction: column; gap: 2px; } /* Точка-призрак: держит сетку пункта без статуса («Все») */ .mmap-dot.ghost { background: transparent; box-shadow: none; } /* Чип «без адреса»: сделки есть в списке, но метки на карте у них нет — приглушён и с полой точкой, чтобы не читался как ещё один статус */ .mmap-chip-muted { color: var(--text-secondary); } .mmap-chip-muted .mmap-dot.ghost { /* Не --text-tertiary: пунктир давал 2.5:1 на подложке легенды (для нетекстового элемента порог 3) */ border: 1.5px dashed var(--text-secondary); } .mmap-chip-muted b { color: var(--text-secondary); } /* Пара «точка + счётчик» одного статуса в кнопке мультивыбора */ .ns-btn-pair { display: inline-flex; align-items: center; gap: 5px; } .ns-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radius-small); font-size: 14px; cursor: pointer; white-space: nowrap; } .ns-item:hover { background: var(--fill); } .ns-item.active { background: var(--tint-soft); color: var(--tint); font-weight: 600; } .ns-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ns-badges { display: inline-flex; gap: 4px; margin-left: auto; } .mmap-badge.grey { background: var(--fill-strong); color: var(--text-secondary); } /* Низ карточки замера: замерщик слева, клиент (имя над телефоном) справа. Выравнивание по низу, а не по центру: замерщик занимает одну строку против двух у клиента и при центрировании не совпадал с телефоном на 10px */ .mmap-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; } .mmap-card-measurer { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; } /* Клиент — колонка «имя над телефоном» по правому краю подвала: у нераспределённых замеров и в карточках монтажей ячейка слева пустая или её нет вовсе, поэтому вправо прижимаем сами */ .mmap-card-client { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; margin-left: auto; text-align: right; /* Сжимается охотнее соседа: у имени есть ellipsis, а ФИО замерщика без этого уходило в две строки, стоило клиенту оказаться длинным */ flex-shrink: 3; } .mmap-card-client-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 13px; font-weight: 500; } .mmap-card-phone { white-space: nowrap; font-size: 14px; font-weight: 500; } .measure-wrapper .not-latlon { opacity: 0.5; } .measure-wrapper h3 { padding-left: 10px; } .measure-wrapper ul li { list-style: decimal; } /* ---------- Карта замеров ---------- */ .measure-map { display: block; height: 600px; width: 100%; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); /* Селектор с .leaflet-container — чтобы перебить дефолт leaflet.css (background: #ddd), который грузится позже. Фон рисуется до внешнего края border-box, а тайлы клипаются по padding-box, поэтому под рамкой 1px оставалось кольцо #ddd: полупрозрачный --separator композитился на нём в rgb(204,202,214) вместо rgb(52,48,66) как у рейла и зум-бара — в тёмной теме карта стояла в яркой серой кайме. Заодно убирает серую вспышку до подгрузки тайлов */ /* Leaflet задаёт своим панелям/контролам z-index до 1000 — замыкаем их в отдельный stacking-контекст, иначе карта пробивает бургер-меню (z-index 111) */ position: relative; z-index: 0; } .measure-map.leaflet-container { background: var(--bg-card); } /* Тёмная тема: перекрашиваем светлые тайлы OSM фильтром, а не подменяем слой. Раньше в тёмной теме грузился CARTO dark_all — у него подписи только по-английски («MOSCOW», «TVER»), и выбор слоя делался один раз при инициализации карты, поэтому смена системной темы на лету её не трогала. Фильтр решает и то, и другое: подписи остаются русскими, а тема переключается средствами CSS без перезагрузки. Фильтр только на слой тайлов — маркеры и контролы лежат в других панелях */ :root[data-theme="dark"] .measure-map .leaflet-tile-pane { /* saturate обязателен: голая инверсия делает лес ядовито-зелёным, а воду коричневой — карта начинает спорить с интерфейсом */ filter: invert(1) hue-rotate(180deg) saturate(0.3) brightness(0.85) contrast(1.05); } /* Обводка маркера в тёмной теме: чистый белый 2px по затемнённым тайлам бьёт по глазам — приглушаем, силуэт капли при этом остаётся читаемым. Инлайновый stroke="#ffffff" в SVG — презентационный атрибут, любое CSS-правило его перекрывает */ :root[data-theme="dark"] .mmap-pin svg path { stroke: rgba(245, 243, 250, 0.45); } /* Кнопка-спойлер карты: живёт только на мобильном (см. mobile.css) */ .mmap-map-toggle { display: none; } /* Заглушка внутри контейнера, пока грузится (или не загрузился) Google Maps */ .measure-map .mmap-map-note { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 24px; text-align: center; background: var(--bg-card); color: var(--text-secondary); } .measure-map .mmap-map-note .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--fill-strong); border-top-color: var(--tint); animation: rotating 0.8s linear infinite; } /* Легенда — чипы со счётчиками над картой */ .mmap-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .mmap-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border-radius: 100px; box-shadow: var(--shadow-card); padding: 8px 14px; font-size: 14px; color: var(--text-secondary); } .mmap-chip b { color: var(--text-primary); font-weight: 600; } /* Цвета точек = цвета маркеров на карте */ .mmap-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; } .mmap-dot.green { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18); } .mmap-dot.orange { background: #ff9500; box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.18); } .mmap-dot.red { background: #ff3b30; box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18); } /* Стадии карты монтажей */ .mmap-dot.lightgreen { background: #7ed957; box-shadow: 0 0 0 3px rgba(126, 217, 87, 0.18); } .mmap-dot.darkgreen { background: #1e8a4c; box-shadow: 0 0 0 3px rgba(30, 138, 76, 0.18); } .mmap-dot.blue { background: #5ac8fa; box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.18); } /* Доставлено, но монтаж не назначен — пополам зелёный/жёлтый (зелёный тот же, что у «доставка назначена») */ .mmap-dot.split { background: linear-gradient(90deg, #7ed957 50%, #ffcc00 50%); box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.18); } /* Ждёт назначения доставки (готов к отгрузке) */ .mmap-dot.yellow { background: #ffcc00; box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2); } /* Рекламации: красный — назначить, красные сплиты — с цветом назначенного этапа */ .mmap-dot.redgreen { background: linear-gradient(90deg, #ff3b30 50%, #7ed957 50%); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15); } .mmap-dot.redblue { background: linear-gradient(90deg, #ff3b30 50%, #5ac8fa 50%); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15); } /* Фильтры карты: отдельная карточка в строке легенды, чтобы не сливались с чипами-счётчиками; подпись напоминает, что фильтруются только назначенные */ .mmap-filters { display: flex; align-items: center; gap: 8px; margin-left: auto; background: var(--bg-card); border-radius: 100px; box-shadow: var(--shadow-card); padding: 6px 8px 6px 14px; } .mmap-filters-label { font-size: 13px; color: var(--text-tertiary); white-space: nowrap; } .mmap-filters input[type="date"] { -webkit-appearance: none; appearance: none; background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--input-border); border-radius: var(--radius-control); height: 36px; min-width: 150px; padding: 0 12px; font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .mmap-filters input[type="date"]::-webkit-date-and-time-value { text-align: left; } /* iOS Safari не показывает формат в пустом поле даты — рисуем свой плейсхолдер, пока дата не выбрана (класс filled вешает JS) и поле не в фокусе */ .mmap-filter-date-wrap { position: relative; display: inline-flex; margin: 0; } .mmap-filter-date-ph { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; /* Не --text-tertiary: 2.5:1 в тёмной теме, подпись «Дата» пропадала */ color: var(--text-secondary); pointer-events: none; white-space: nowrap; display: none; } .mmap-filter-date-wrap:not(.filled) .mmap-filter-date:not(:focus) { color: transparent; } .mmap-filter-date-wrap:not(.filled) .mmap-filter-date-ph { display: block; } .mmap-filter-date-wrap:not(.filled) .mmap-filter-date:focus + .mmap-filter-date-ph { display: none; } .mmap-filters input[type="date"]:hover { border-color: var(--input-border-hover); } .mmap-filters input[type="date"]:focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } /* appearance: none — чтобы высота и базовая линия совпадали с полем даты (нативный селект на iOS рисуется по своим метрикам); стрелку рисуем сами */ .mmap-filters select { -webkit-appearance: none; appearance: none; max-width: 220px; height: 36px; font-size: 14px; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; text-overflow: ellipsis; } .mmap-filters-reset { font-size: 13px; color: var(--text-secondary); white-space: nowrap; } /* Скрываем видимостью, а не display: место крестика в строке остаётся за ним, иначе при первом же фильтре поля дат прыгали на 9px */ .mmap-filters-reset.is-hidden { visibility: hidden; } .mmap-filters-reset:hover { color: var(--tint); } @media (max-width: 760px) { .mmap-filters { width: 100%; margin-left: 0; flex-wrap: wrap; border-radius: var(--radius-control); padding: 10px 12px; } /* Подпись — отдельной строкой над полями */ .mmap-filters-label { width: 100%; } /* min-width: 0 обязателен: иначе селект не ужимается уже самой длинной фамилии в опциях и выталкивает ряд за экран */ .mmap-filters select { flex: 1; max-width: none; min-width: 0; } .mmap-filters .mmap-filter-date-wrap { flex: 1; min-width: 0; } .mmap-filters input[type="date"] { width: 100%; min-width: 0; } } /* Две колонки под картой: нераспределённые | по замерщикам */ .mmap-cols { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(320px, 7fr); gap: 32px; align-items: start; } .mmap-col h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 28px 0 16px; } .mmap-count { background: var(--tint-soft); color: var(--tint); border-radius: 100px; padding: 2px 10px; font-size: 13px; font-weight: 700; } /* Карточка нераспределённого замера */ .mmap-card { background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 14px 16px; margin-bottom: 12px; } @media (hover: hover) { .mmap-card { transition: box-shadow 0.15s ease; } .mmap-card:hover { box-shadow: 0 4px 10px rgba(31, 27, 57, 0.07), 0 16px 40px rgba(255, 90, 46, 0.12); } } .mmap-card-head { display: flex; align-items: center; gap: 8px; } .mmap-card-date { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; } .mmap-card-date svg { flex: none; } /* Название сделки в шапке карточки — ссылка на сделку в Б24 */ .mmap-card-date a { color: inherit; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mmap-card-date a:hover { color: var(--tint); text-decoration: none; } .mmap-card-date.repeat { color: var(--red); } .mmap-card-id { margin-left: auto; flex: none; color: var(--text-secondary); background: var(--fill); border-radius: 100px; padding: 3px 10px; font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s; } .mmap-card-id:hover { background: var(--tint-soft); color: var(--tint); text-decoration: none; } .mmap-card-addr { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; width: 100%; } .mmap-card-addr > span { padding-top: 4px; } /* Квадратная кнопка «показать на карте» */ .mmap-pin-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--fill); flex: none; transition: background 0.15s; } .mmap-pin-btn:hover { background: var(--fill-strong); } .mmap-pin-btn svg { fill: var(--tint); } /* Материал сделки — компактная пилюля */ .mmap-card-material { display: inline-flex; align-items: center; margin-top: 8px; padding: 3px 11px; background: var(--fill); border-radius: 999px; color: var(--text-secondary); font-size: 13px; font-weight: 600; line-height: 1.35; } /* В шапке карточки пилюля материала прижата вправо; длинное название режется многоточием, полный текст — в title */ .mmap-card-head .mmap-card-material { display: inline-block; margin: 0 0 0 auto; max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mmap-card-comment { position: relative; margin-top: 10px; padding: 10px 14px 10px 38px; background: var(--fill); border-radius: var(--radius-control); color: var(--text-secondary); font-size: 14px; line-height: 1.45; } /* Добавление адреса сделке без координат */ .mmap .add-address { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding-top: 2px; } .mmap .address-input-wrap { width: 100%; padding: 12px; background: var(--fill); border-radius: var(--radius-control); } .mmap .address-input-wrap input[type="text"] { width: 100%; background: var(--bg-elevated); } .mmap .address-input-wrap .coordinates-line { margin-top: 8px; font-size: 13px; color: var(--text-secondary); } .mmap .address-input-wrap .bttn { height: 40px; min-width: 120px; margin: 10px 0 0; } .mmap .address-input-wrap .progress { color: var(--tint); font-weight: 600; margin: 10px 0 0; } .mmap-note { background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px; text-align: center; color: var(--text-secondary); } .mmap-empty { background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 40px 24px; max-width: 480px; text-align: center; color: var(--text-secondary); font-size: 16px; } .mmap-empty .emoji { display: block; font-size: 40px; margin-bottom: 12px; } /* Аккордеон «Замеры по замерщикам» */ .mmap-acc { background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 12px; overflow: hidden; } /* Замер не на замерщике (назначен не на нашего замерщика) — выделяем нейтральным серым, а не цветом статуса, чтобы не путать с нераспределёнными замерами */ .mmap-acc.no-measurer { background: var(--fill-strong); box-shadow: inset 0 0 0 1.5px var(--separator), var(--shadow-card); } .mmap-acc-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 15px 16px; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--text-primary); text-align: left; -webkit-tap-highlight-color: transparent; } .mmap-acc-name { font-weight: 600; font-size: 16px; margin-right: auto; } .mmap-badge { border-radius: 100px; padding: 2px 9px; font-size: 12px; font-weight: 700; flex: none; } .mmap-badge.green { background: rgba(52, 199, 89, 0.15); color: var(--green); } .mmap-badge.orange { background: rgba(255, 149, 0, 0.15); color: #ff9500; } /* Бейджи карты монтажей */ .mmap-badge.lightgreen { background: rgba(126, 217, 87, 0.15); color: #6cc44a; } .mmap-badge.darkgreen { background: rgba(30, 138, 76, 0.15); color: #1e8a4c; } .mmap-badge.blue { background: rgba(90, 200, 250, 0.15); color: #3aa8dc; } /* Бейджи статусов — сплошным цветом поинтов карты; на сплитах с половинкой светлого цвета белому тексту помогает лёгкая тень */ .mmap-badge.red { background: #ff3b30; color: #fff; } .mmap-badge.split { background: linear-gradient(90deg, #7ed957 50%, #ffcc00 50%); color: rgba(0, 0, 0, 0.65); } .mmap-badge.yellow { background: #ffcc00; color: rgba(0, 0, 0, 0.65); } .mmap-badge.redgreen { background: linear-gradient(90deg, #ff3b30 50%, #7ed957 50%); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .mmap-badge.redblue { background: linear-gradient(90deg, #ff3b30 50%, #5ac8fa 50%); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } /* Спойлеры «Готовы к отгрузке» / «Доставлено» на карте монтажей: карточки внутри аккордеона теряют собственную подложку, чтобы не сливаться с ним */ .mmap-acc-cards { padding: 12px 12px 4px; } .mmap-acc-cards .mmap-card { background: var(--fill); box-shadow: none; margin-bottom: 8px; } @media (hover: hover) { .mmap-acc-cards .mmap-card:hover { box-shadow: none; } } .mmap-card-sub { font-size: 13px; color: var(--text-secondary); margin-top: 6px; } /* Доставка и монтаж — по строке на этап: слева подпись этапа, справа дата и исполнитель. Сетка, а не подобранная под шрифт min-width: колонка подписи сама берёт ширину самой длинной («Доставлено:»), и значения стоят в одну вертикаль при любом шрифте и в любой ОС. Условие на строки обязательно: в этом же блоке на странице монтажника лежит простой текст, и сетка загнала бы его в узкую колонку, оставив половину ширины пустой */ .mmap-card-sub:has(.mmap-card-subrow) { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; } /* Строка раскрывается в ячейки сетки — иначе выравнивались бы строки, а не колонки внутри них */ .mmap-card-subrow { display: contents; } .mmap-card-subkey { color: var(--text-secondary); font-weight: 500; } .mmap-card-subval { min-width: 0; overflow-wrap: break-word; } /* Иконка «Документация на Google Диске» в карточках и списках */ .mmap-card-drive { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; /* Внутри — фирменный знак Диска со своими fill, поэтому currentColor здесь ни на что не влияет; отклик на наведение даём прозрачностью */ transition: opacity 0.15s; } .mmap-card-drive:hover { opacity: 0.7; } .mmap-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--text-tertiary); border-bottom: 1.5px solid var(--text-tertiary); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; flex: none; margin-left: 4px; } .mmap-acc.open .mmap-chevron { transform: translateY(1px) rotate(225deg); } .mmap-acc-body { display: none; border-top: 1px solid var(--separator); } .mmap-acc.open .mmap-acc-body { display: block; } .mmap-acc-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--separator); } .mmap-acc-item:last-child { border-bottom: 0; } .mmap-acc-item .mmap-dot { margin-top: 6px; } .mmap-acc-item.muted { opacity: 0.55; } .mmap-acc-item-main { min-width: 0; margin-right: auto; } .mmap-acc-item-main > a { color: var(--text-primary); font-weight: 500; } .mmap-acc-item-main > a:hover { color: var(--tint); text-decoration: none; } .mmap-acc-item-sub { color: var(--text-secondary); font-size: 13px; margin-top: 2px; } /* Предупреждение «не назначено» — одинаково заметно и в попапе, и в карточке списка: раньше правило покрывало только попап, и в карточке тот же текст был неотличим от обычного значения */ .mmap-acc-item-sub .warn, .mmap-iw .warn, .mmap-card-sub .warn, .mmap-card-date .warn, .mmap-card-addr .warn { color: #ff9500; font-weight: 600; } /* Плашка «Leaflet | © OpenStreetMap» — прячем: внутренний портал, подпись только шумит на карте */ .leaflet-control-attribution { display: none; } /* Зум-контролы (+/−): дефолтные квадратики Leaflet не из системы — делаем blur-карточку в стиле оверлеев карты (как легенда), кнопки 36px как контролы. Селекторы через .measure-map.leaflet-container: CSS Leaflet подключается позже и при равной специфичности перебивает наши правила */ .measure-map.leaflet-container .leaflet-bar { border: 1px solid var(--separator); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--bg-blur); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); overflow: hidden; } .measure-map.leaflet-container .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; background: transparent; border-bottom: 1px solid var(--separator); border-radius: 0; /* Не --tint: оранжевый глиф на blur-подложке давал 2.8:1 в светлой теме и 3.1:1 в тёмной. Акцент остаётся в наведении */ color: var(--text-primary); /* Вместо лефлетовской Lucida Console — системный шрифт портала */ font-family: inherit; font-size: 20px; font-weight: 500; } .measure-map.leaflet-container .leaflet-bar a:last-child { border-bottom: 0; border-radius: 0; } .measure-map.leaflet-container .leaflet-bar a:hover, .measure-map.leaflet-container .leaflet-bar a:focus { background: var(--tint-soft); color: var(--tint); } .measure-map.leaflet-container .leaflet-bar a.leaflet-disabled { background: transparent; color: var(--text-secondary); opacity: 0.5; } /* Отступы контрола от углов карты — ровно как у карточки легенды: 16/16 */ .measure-map.leaflet-container .leaflet-right .leaflet-control-zoom { margin-right: 16px; } .measure-map.leaflet-container .leaflet-bottom .leaflet-control-zoom { margin-bottom: 16px; } /* Инфоокна карты (Leaflet popup) под тему. Селекторы с .leaflet-container обязательны: leaflet.css подключается страницами карт через AddHeadString и попадает в ПОСЛЕ этого файла, поэтому при равной специфичности выигрывали его дефолты (белый фон, радиус 12, чужая тень) — в тёмной теме попап оставался белым с серым текстом */ .leaflet-container .leaflet-popup-content-wrapper { position: relative; border-radius: var(--radius-card); background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-card); } /* Длинный попап (форма назначения доставки) не должен вылезать за карту: контент ограничен по высоте (карта 600px минус хвостик и отступы) и скроллится. Полоса прокрутки постоянная и заметная (системная на маках и телефонах — прячущийся оверлей, человек её не увидит): видимый трек на всю высоту и «ползунок» в акцентном цвете */ .leaflet-container .leaflet-popup-content { margin: 16px 6px 16px 16px; padding-right: 10px; max-height: 450px; overflow-y: auto; overscroll-behavior: contain; } /* scrollbar-color — только для Firefox: Chrome при заданном scrollbar-color игнорирует ::-webkit-scrollbar и возвращает прячущийся системный оверлей — полоса «исчезает» */ @supports (-moz-appearance: none) { .leaflet-container .leaflet-popup-content { scrollbar-color: var(--tint) var(--fill); } } .leaflet-container .leaflet-popup-content::-webkit-scrollbar { width: 10px; } /* Ползунок узкий внутри широкого трека: прозрачная рамка + background-clip дают видимые 6px в жёлобе 10px — полоса заметна, но не кричит сплошным оранжевым во всю высоту попапа */ .leaflet-container .leaflet-popup-content::-webkit-scrollbar-thumb { background: var(--tint); background-clip: padding-box; border: 2px solid transparent; border-radius: 5px; } .leaflet-container .leaflet-popup-content::-webkit-scrollbar-track { background: var(--fill); background-clip: padding-box; border: 3px solid transparent; border-radius: 5px; } /* Пока контент не доскроллен до низа, попап носит класс iw-has-more (вешает JS страницы) — градиент у нижнего края намекает, что ниже есть ещё; полосу прокрутки справа не накрывает. Главная подсказка для iPhone, где кастомные полосы прокрутки не рисуются вовсе */ .leaflet-container .leaflet-popup.iw-has-more .leaflet-popup-content-wrapper::after { content: ''; position: absolute; left: 2px; right: 16px; bottom: 2px; height: 34px; /* На ступень меньше радиуса обёртки (--radius-card) */ border-radius: 0 0 14px 14px; background: linear-gradient(to bottom, transparent, var(--bg-elevated) 85%); pointer-events: none; } .leaflet-container .leaflet-popup-tip { background: var(--bg-elevated); } /* Крестик: у leaflet он 18×14 и сидит на скруглённом углу. Селектор с .leaflet-popup нужен, чтобы перебить его правило той же специфичности */ .leaflet-container .leaflet-popup a.leaflet-popup-close-button { display: flex; align-items: center; justify-content: center; top: 6px; /* Не 4: справа идёт полоса прокрутки контента (10px трека + 7px до края обёртки) — крестик ложился прямо на неё. 18 ставит его вплотную слева от трека и примерно симметрично левому отступу контента (16) */ right: 18px; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-small); /* Непрозрачная подложка обязательна: кнопка висит поверх скроллящегося контента, и без неё прокручиваемые строки проходили сквозь крестик. Цвет обёртки попапа — на неподвижном фоне подложка не видна */ background: var(--bg-elevated); color: var(--text-secondary); font-size: 20px; line-height: 1; } .leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover { color: var(--text-primary); background: var(--fill); } /* Leaflet красит все ссылки внутри карты (.leaflet-container a) — возвращаем кнопкам-ссылкам в попапе их цвет (иначе «Назначить замерщика» уходит в синий) */ .leaflet-popup-content a.bttn { color: var(--text-primary); } .leaflet-popup-content a.bttn-orange { color: #fff; } /* SVG-«капля» маркера без стандартной белой подложки divIcon */ .mmap-pin { background: none; border: none; } /* Подсказка «зумьте с Ctrl» — мигает, когда над картой крутят колесо без Ctrl */ .mmap-zoom-hint { position: absolute; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: 16px; font-weight: 600; color: #fff; background: rgba(10, 12, 20, 0.5); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .mmap-zoom-hint.show { opacity: 1; visibility: visible; } .mmap-iw { min-width: 230px; max-width: 280px; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; } .mmap-iw-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; /* Место под крестик (32px + его инсеты), который висит поверх контента */ padding-right: 48px; } /* Инфостроки попапа — компактно в одну линию: подпись слева, значение справа (как строки настроек iOS); длинное значение переносится с выравниванием вправо. Строки формы (с полями) ниже раскладываются столбиком */ .mmap-iw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 5px; text-align: right; min-width: 0; /* break-word, а не anywhere: anywhere разрешает разрыв внутри слова и заодно обнуляет min-content подписи — «АДРЕС» сжимался до 20px и сыпался по буквам */ overflow-wrap: break-word; } /* Подпись сжимается вместе со значением: при flex:none длинная подпись съедала всю ширину попапа и значение обрезалось до пары букв */ /* Регистр обычный: в роли подписи выступает и имя клиента, а имя капсом читается как крик — остальные подписи держим в одном с ним оформлении */ .mmap-iw-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: left; /* Сжимается, но не уже самого длинного слова — иначе подпись рвётся по буквам */ flex: 0 1 auto; min-width: min-content; /* В роли подписи выступает имя клиента: без потолка длинное имя отжимало телефон и номер рвался по дефису посреди цифр */ max-width: 55%; } /* Номер не переносим: разорванный по дефису телефон нельзя прочитать */ .mmap-iw-row a[href^="tel:"] { white-space: nowrap; } /* Свёрнутый адрес: ссылка «показать» с пунктиром — видно, что раскрывается */ .mmap-iw-addr-toggle { font-size: 13px; color: var(--tint); border-bottom: 1px dashed currentColor; } /* leaflet.css грузится позже и красит ВСЕ ссылки попапа в свой #0078A8 ((0,1,1) бьёт наши (0,1,0)): в тёмной теме это 3.17:1 — телефон и «показать» уходили в нечитаемую синеву. Возвращаем свои цвета более специфичными селекторами. Телефон — это значение строки, а не навигация: цвет текста. Исключения перечислены прямо в правиле: :not() учитывает специфичность своего аргумента, поэтому отдельное правило на .mmap-iw-addr-toggle (0,2,0) проигрывало бы этому (0,4,1) независимо от порядка строк */ .leaflet-container .mmap-iw a:not(.bttn):not(.mmap-assign-btn):not(.mmap-iw-addr-toggle) { color: var(--text-primary); } .leaflet-container .mmap-iw-addr-toggle { color: var(--tint); } /* Строка с полем формы: подпись отдельной строкой над полем на всю ширину */ .mmap-iw-row:has(select), .mmap-iw-row:has(input) { display: block; text-align: left; margin-top: 8px; } .mmap-iw-row:has(select) .mmap-iw-label, .mmap-iw-row:has(input) .mmap-iw-label { display: block; margin-bottom: 2px; } .mmap-iw select, .mmap-card-assign select { width: 100%; margin-top: 8px; } /* Поля формы «Назначить доставку и монтаж» (карта монтажей) — по строке на поле. Та же форма работает и в карточке левой колонки (.mmap-card-assign) */ .mmap-iw .mmap-iw-row select, .mmap-iw .mmap-iw-row input, .mmap-card-assign .mmap-iw-row select, .mmap-card-assign .mmap-iw-row input { width: 100%; margin-top: 2px; } /* «Сохранить» стоит в одном ряду с полями формы — значит и высота у неё контрольная (36), а не CTA-шная (50 у .bttn). Было 40: третья высота в форме, где поля 36, а кнопка-триггер 34 */ .mmap-iw .bttn, .mmap-card-assign .bttn { height: 36px; min-width: 0; width: 100%; font-size: 15px; margin-top: 8px; } /* Блок назначения внутри карточки левой колонки */ .mmap-card-assign { margin-top: 8px; } /* Строка действий карточки (страница монтажника): навигация слева, завершение — справа, в свободной половине этой же строки. Отдельной строкой кнопка зря растягивала карточку по высоте */ .mount-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .mount-card-foot { margin-top: 8px; } .mount-finish { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Выбор результата («Успешно» / «Рекламация» / отмена) остаётся в строке действий, на месте кнопки, из которой раскрылся: компактные пилюли влезают рядом с «на карте»/«маршрут» даже на 375px */ .mount-finish:has(.mount-finish-opt) { justify-content: flex-end; } /* А вот форме рекламации, прогрессу и итоговому «готово» нужна вся ширина — они переносятся на свою строку */ .mount-finish:has(.mount-claim-text), .mount-finish:has(.progress), .mount-finish:has(.mmap-iw-ok) { flex: 1 1 100%; justify-content: flex-end; margin-top: 8px; } /* Кнопка в строке действий: компактная пилюля с подписью, высотой в один ряд с соседними «на карте»/«маршрут». Заливка акцентная, а не зелёная — галочка на зелёном читалась как отметка «уже сделано», а не как кнопка */ .mount-finish-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; /* Высота — ровно как у соседних иконок-кнопок, чтобы строка была ровной; компактность добирается шрифтом и боковыми отступами */ height: 28px; padding: 0 10px; border-radius: 100px; background: var(--tint-soft); color: var(--tint); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background 0.15s, color 0.15s, transform 0.1s; } .mount-finish-btn svg { width: 14px; height: 14px; flex: none; fill: currentColor; } .mount-finish-btn:hover, .mount-finish-btn:focus { text-decoration: none; background: var(--tint-grad); color: #fff; } .mount-finish-btn:active { transform: scale(0.94); } /* Выбор результата монтажа — те же компактные пилюли, что и кнопка-триггер, чтобы вся тройка помещалась в строку действий */ .mount-finish-opt { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 100px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; } /* Отмена — иконка-кнопка того же роста, что и соседи по строке */ .mount-finish-cancel { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-small); color: var(--text-secondary); font-size: 14px; line-height: 1; } .mount-finish-cancel:hover { background: var(--fill); color: var(--text-primary); text-decoration: none; } .mount-finish-opt.ok { background: rgba(52, 199, 89, 0.14); color: var(--green); } .mount-finish-opt.claim { background: rgba(255, 59, 48, 0.12); color: #ff3b30; } .mount-finish-opt:hover, .mount-finish-opt:focus { text-decoration: none; filter: brightness(1.05); } .mount-finish-cancel { color: var(--text-tertiary); font-size: 14px; padding: 0 4px; } .mount-finish .mount-claim-text { width: 100%; min-height: 72px; padding: 10px 12px; border: 0; border-radius: var(--radius-control); background: var(--fill); color: var(--text-primary); font: inherit; font-size: 15px; resize: vertical; } .mount-finish .bttn { height: 40px; min-width: 0; font-size: 15px; margin: 0; } .mount-finish .progress, .mount-finish .mmap-iw-ok { margin: 0; } /* Кнопка-триггер «Назначить …». В списке карточек — компактная нейтральная пилюля с приглушённой иконкой, чтобы колонка не пестрила оранжевым. Жирный градиент остаётся только у «Сохранить» внутри раскрытой формы. */ .mmap-assign-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-control); background: var(--fill); color: var(--text-secondary); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s, transform 0.1s; } .mmap-assign-btn:hover, .mmap-assign-btn:focus { background: var(--fill-strong); color: var(--text-primary); text-decoration: none; } .mmap-assign-btn:active { transform: scale(0.96); } .mmap-assign-btn svg { width: 16px; height: 16px; fill: var(--tint); flex: none; } /* В попапе маркера кнопка одна и это главное действие — там она во всю ширину, в мягком акцентном стиле (tinted), без градиента и свечения */ .leaflet-popup-content .mmap-assign-btn { width: 100%; justify-content: center; height: 36px; margin-top: 8px; border-radius: var(--radius-control); background: var(--tint-soft); color: var(--tint); font-size: 15px; } .leaflet-popup-content .mmap-assign-btn:hover, .leaflet-popup-content .mmap-assign-btn:focus { background: var(--tint-soft); color: var(--tint); filter: brightness(1.05); } .mmap-iw-ok { color: var(--green); font-weight: 600; margin: 12px 0 0; } /* ---------- Таблицы (синхронизация сотрудников) ---------- */ /* Заголовок секции с бейджем количества; отступы вместо
-распорок */ .emp-sync h2 { display: flex; align-items: center; gap: 10px; margin: 32px 0 14px; } .emp-sync table { width: 100%; background: var(--bg-card); border-radius: var(--radius-card); border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: var(--shadow-card); } .emp-sync table th, .emp-sync table td { border: 0; border-bottom: 1px solid var(--separator); padding: 11px 16px; text-align: left; } .emp-sync table th { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); } .emp-sync table tbody tr:last-child td { border-bottom: 0; } .emp-sync table tbody tr:hover td { background: var(--fill); } .emp-sync .upd-passwrd { display: inline-block; width: 100%; text-align: center; } /* Кнопка «скопировать пароль» */ .emp-sync .pswd-wrap { display: inline-flex; align-items: center; gap: 8px; } .emp-sync .copy-pswd { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--fill); color: var(--text-secondary); cursor: pointer; flex: none; transition: background 0.15s, color 0.15s; } .emp-sync .copy-pswd:hover { background: var(--fill-strong); color: var(--text-primary); } .emp-sync .copy-pswd .ic-check { display: none; } .emp-sync .copy-pswd.copied { background: rgba(52, 199, 89, 0.15); color: var(--green); } .emp-sync .copy-pswd.copied .ic-copy { display: none; } .emp-sync .copy-pswd.copied .ic-check { display: block; } /* Пока пароля нет — кнопку не показываем */ .emp-sync td:has(.pswd-container:empty) .copy-pswd { display: none; } .emp-sync .upd-passwrd:empty { display: none; } /* Спойлер «Подробнее» нужен только на мобильном */ .emp-sync .emp-toggle { display: none; } .emp-sync .sync-all:hover, .emp-sync .upd-passwrd:hover { cursor: pointer; } .emp-sync .upd-passwrd .ic-sync { width: 18px; height: 18px; color: var(--text-secondary); margin: 0 auto; } /* Состояние синхронизации: точка/подпись берут цвет из токенов, а не из инлайнового limegreen / #ff482f */ .emp-sync .emp-yes { color: var(--green); } .emp-sync .emp-no { color: var(--red); } /* ---------- Загрузка прайса ---------- */ .price-manage { max-width: 480px; } /* От 601 карточка тянется на всю ширину: на планшете 480 из 950 оставляли полэкрана пустыми, а двухколоночная сетка включалась только с 981 */ @media screen and (min-width: 601px) { body.app-shell .price-manage { max-width: none; } } /* Шаги «скачать» и «загрузить» идут одной карточкой сверху вниз, отчёт — ниже */ .price-flow .price-step + .price-step { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--separator); } /* Содержимое шага выровнено под заголовок: ширина номера (24) + зазор (10) */ .price-step-body { padding-left: 34px; } @media screen and (max-width: 600px) { .price-step-body { padding-left: 0; } } /* Отчёт отбивается от карточки шагов заметнее, чем карточки друг от друга */ .price-report { margin-top: var(--layout-gap); } .price-card { background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 12px; } /* Сегмент-контрол (радио под капотом) — общий, вне контекста калькулятора */ .seg-control { display: flex; background: var(--fill); border-radius: var(--radius-control); padding: 2px; margin-bottom: 16px; } .seg-control label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; /* 36 — высота контролов; капсула с паддингом 2 даёт 40 */ height: 36px; padding: 0 8px; margin: 0; /* Концентрично паддингу 2px родителя .seg-control (--radius-control) */ border-radius: calc(var(--radius-control) - 2px); font-size: 15px; font-weight: 500; color: var(--text-primary); cursor: pointer; white-space: nowrap; /* Длинная подпись («Оборудование») не должна распирать сегмент шире экрана */ min-width: 0; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } /* Подпись обёрнута в span: у флекс-контейнера text-overflow не работает — анонимный текстовый флекс-элемент режется по букве, а не многоточием */ .seg-control label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .seg-control label { font-size: 13px; padding: 0 4px; } } /* Двухколоночная сетка прайса: колонка 356–420, на треть капсулы остаётся ~99px, а «Оборудование» кеглем 15 занимает 108.6 — не влезало. Кегль 13 даёт 94.1. Выше 900 колонка достаточно широкая для 15 */ @media (min-width: 768px) and (max-width: 900px) { .seg-control label { font-size: 13px; padding: 0 4px; } } /* На узких экранах «Оборудование» (94px при 13px кегля) не влезает в треть капсулы. Две ступени, чтобы не мельчить там, где не нужно: 375 — доступно 100px, кегль 12 даёт 86.9; 320 — доступно 81px, кегль 11 даёт 79.6 */ @media (max-width: 380px) { .seg-control label { font-size: 12px; padding: 0 3px; } } @media (max-width: 340px) { .seg-control label { font-size: 11px; padding: 0 2px; } } .seg-control input[type="radio"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .seg-control label:has(input:checked) { background: var(--tint-grad); color: #fff; font-weight: 600; box-shadow: var(--tint-glow); } /* Шаг процесса: номер + заголовок */ .price-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .price-step-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-soft); color: var(--tint); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .price-step-title { font-size: 15px; font-weight: 600; } /* Подсказка под действием шага — строкой с иконкой, без подложки: единственная плашка в карточке — акцентная памятка ниже, остальное её не перебивает */ .price-hint { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); } .price-hint svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--tint); } /* На белом фоне карточки ключам нужна заливка, на цветной памятке — рамка */ .price-hint .price-key { background: var(--fill); border-color: transparent; } /* Зона перетаскивания файла: белая, с иконкой — как область действия, а не как серая заглушка */ .price-drop { display: flex; align-items: center; gap: 14px; position: relative; border: 1.5px dashed var(--input-border); border-radius: var(--radius-control); background: var(--bg-card); padding: 18px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; margin-bottom: 12px; } .price-drop:hover, .price-drop.dragover { border-color: var(--tint); background: var(--tint-soft); } .price-drop input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } /* Иконка в круге — акцент зоны, при выбранном файле заливается фирменным */ .price-drop-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tint-soft); color: var(--tint); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .price-drop-icon svg { width: 22px; height: 22px; } .price-drop.filled .price-drop-icon { background: var(--tint-grad); color: #fff; } .price-drop-inner { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .price-drop-title { font-size: 14px; font-weight: 500; color: var(--text-primary); } .price-drop-name { font-size: 13px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price-drop.filled { border-style: solid; border-color: var(--tint); background: var(--tint-soft); } .price-drop.filled .price-drop-name { color: var(--tint); font-weight: 500; } /* Памятка по файлу: важная инструкция, поэтому отдельной плашкой с иконкой и основным цветом текста, а не мелкой серой сноской */ .price-rules { margin-bottom: 12px; padding: 14px 16px; background: var(--tint-soft); border-radius: var(--radius-control); } .price-rules-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--tint); } .price-rules-title svg { flex: none; width: 18px; height: 18px; } /* Селектор с #workarea перебивает штатные list-style-type и margin списков из styles.css шаблона (иначе к точке-псевдоэлементу добавляется маркер) */ #workarea .price-rules ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } #workarea .price-rules li { position: relative; margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.45; color: var(--text-primary); } .price-rules li:before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--tint); } /* Имя колонки файла — как ключ в тексте: заметно и не сливается со словами */ .price-key { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-small); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Кнопка отправки — слева, а не по центру (у .bttn дефолтный margin auto); ряд flex — появляющаяся при отправке крутилка встаёт рядом с кнопкой */ .price-submit { display: flex; align-items: center; gap: 14px; } .price-card .bttn { margin: 0; } .price-card .bttn:disabled { opacity: 0.6; cursor: default; } /* Тумблер в карточке прайса отбивается от кнопки под ним */ .price-card .switch-line { margin: 0 0 16px; } /* Зона файла подсвечивается на ошибку (нет файла, не тот формат) — вместе с тостом */ .price-drop.price-drop-err { border-color: var(--tint); background: var(--tint-soft); } /* Режим загрузки: тумблер и пояснение к нему — одним блоком, отбитым от зоны файла и от кнопки. В боевом режиме блок подсвечивается акцентом */ .price-mode { margin: 0 0 16px; padding: 12px 14px; background: var(--fill); border-radius: var(--radius-control); } .price-card .price-mode .switch-line { margin: 0; } .price-mode .price-hint { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); } .price-mode .price-hint svg { width: 16px; height: 16px; margin-top: 2px; color: var(--text-tertiary); } .price-mode-live { background: var(--tint-soft); } .price-mode-live .price-hint { color: var(--tint); } .price-mode-live .price-hint svg { color: var(--tint); } /* Отчёт импорта — карточка на всю ширину двухколоночной сетки страницы */ .price-report-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; } .price-report-err .price-report-title { color: var(--red); } /* Плитки счётчиков: число крупно, подпись под ним */ .price-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; } .price-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--fill); border-radius: var(--radius-control); } .price-tile b { font-size: 20px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .price-tile span { font-size: 12px; color: var(--text-secondary); } /* Группа операций по листу файла */ .price-group + .price-group { margin-top: 16px; } .price-group-title { font-size: 13px; font-weight: 500; color: var(--text-secondary); padding-left: 4px; margin-bottom: 4px; } /* Строка операции: слева позиция и её место, справа — что меняется */ .price-op { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 4px; border-bottom: 1px solid var(--separator); } .price-op:last-child { border-bottom: 0; } .price-op-main { min-width: 0; } .price-op-name { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.35; } .price-op-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; } .price-op-changes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Пилюля изменения */ .price-chg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--fill); border-radius: var(--radius-small); font-size: 13px; line-height: 1.2; } .price-chg i { font-style: normal; color: var(--text-secondary); } .price-chg s { color: var(--text-tertiary); text-decoration: line-through; font-variant-numeric: tabular-nums; } .price-chg b { font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; } .price-chg-danger { background: rgba(255, 59, 48, 0.12); color: var(--red); } /* #1f8f43 — затемнённый вариант --green для читаемого текста на зелёной подложке */ .price-chg-ok { background: rgba(52, 199, 89, 0.14); color: #1f8f43; } /* Ошибка: текст читаемым основным цветом */ .price-op-err .price-op-name { font-weight: 400; } .price-more { padding: 10px 4px 0; font-size: 13px; color: var(--text-tertiary); } /* ---------- Калькулятор ---------- */ .price-manage label { text-align: left; } .calc-wrapper label { font-weight: normal; } /* Контролы карточек калькулятора: 40px, радиус на ступень меньше карточки */ .calc-wrapper .calc-block input[type="text"], .calc-wrapper .calc-block .ctrl-in { width: 100%; max-width: none; height: 40px; line-height: 38px; padding: 0 12px; font-size: 15px; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-control); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .calc-wrapper .calc-block .ctrl-in:hover { border-color: var(--input-border); } .calc-wrapper .calc-block .ctrl-in:focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } .calc-wrapper .calc-block .ctrl-in::placeholder { color: var(--text-tertiary); } /* Select2 внутри карточек — под тот же контрол 40px */ .calc-wrapper .calc-block .select2-container--default .select2-selection--single { height: 40px; min-height: 40px; background: var(--bg-card); border-color: var(--separator); border-radius: var(--radius-control); } .calc-wrapper .calc-block .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; font-size: 15px; } .calc-wrapper .calc-block .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; } .calc-wrapper .calc-block { margin-top: var(--layout-gap); } /* Верх первого блока слева бьётся с верхом сводки справа */ .calc-wrapper .calc-content > .calc-block:first-child { margin-top: 0; } /* Шапка карточки: сегмент типа слева, количество и крестик справа */ .calc-wrapper .calc-block .line .head-qty { position: absolute; right: 52px; top: 11px; height: 32px; display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; } .calc-wrapper .calc-block .line .head-qty > span { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } /* Инпут кол-ва — компактный, радиус на ступень меньше сегмента типа рядом */ .calc-wrapper .calc-block .line .head-qty input.ctrl-in { width: 44px; height: 32px; line-height: 30px; padding: 0 6px; text-align: center; border-radius: 9px; font-size: 14px; font-weight: 600; } .calc-wrapper .calc-block .line .head-qty .head-qty-unit { color: var(--text-tertiary); } /* «+ Добавить позицию» — пунктирная кнопка во всю ширину блока изделий */ .calc-wrapper .calc-block .add-position { display: block; width: 100%; height: 50px; margin-top: 12px; border: 1px dashed var(--input-border); border-radius: var(--radius-card); background: transparent; color: var(--tint); font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .calc-wrapper .calc-block .add-position:hover { background: var(--tint-soft); border-color: var(--tint); } /* Ряд параметров: подписи над контролами */ .calc-wrapper .base-wrap { margin-top: 8px; } .calc-wrapper .row-b { display: flex; align-items: flex-start; column-gap: 8px; row-gap: 8px; flex-wrap: wrap; } .calc-wrapper .row-b .grow { flex: 1 1 0; min-width: 0; } /* Узкие числовые поля строки (толщина, высота бортика): значение — две-три цифры, ширину строки отдаём селектам. Число по центру — иначе теряется в паддинге */ .calc-wrapper .row-b .w60 { width: 60px; flex: none; } .calc-wrapper .row-b > .w60 .ctrl-in { padding: 0 8px; text-align: center; } .calc-wrapper .f-label { display: block; height: 17px; font-size: 12px; line-height: 1.25; color: var(--text-secondary); padding-left: 4px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Пары подписей «полная / короткая»: на телефоне (≤700, css/mobile.css) показывается короткая — «Высота бортика» → «Высота» и т.п. */ .calc-wrapper .lab-short { display: none; } .calc-wrapper .fld-cell { min-width: 0; } .calc-wrapper .fld-cell .select2-container, .calc-wrapper .sel-slot .select2-container { width: 100% !important; max-width: none !important; } /* Плашка вместо ещё не созданного каскадом селекта: пунктирная рамка, как у заблокированного зависимого поля */ .calc-wrapper .sel-ghost { display: flex; align-items: center; width: 100%; height: 40px; padding: 0 12px; background: transparent; border: 1px dashed var(--separator); border-radius: var(--radius-control); color: var(--text-tertiary); font-size: 15px; cursor: not-allowed; } .calc-wrapper .sel-ghost > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Заблокированное зависимое поле (кол-во до выбора ветки каскада) — тем же приёмом */ .calc-wrapper .calc-block input.ctrl-in:disabled { background: transparent; border: 1px dashed var(--separator); color: var(--text-tertiary); box-shadow: none; cursor: not-allowed; } .calc-wrapper .calc-block input.ctrl-in:disabled::placeholder { color: var(--text-tertiary); } /* Стоимость строки в «Оборудовании» и «Работах» — в конце ряда полей. padding-left добавляет воздуха к соседнему контролу: одного column-gap (8) мало — цифры липнут к стрелке селекта */ .calc-wrapper .price-cell { flex: 0 0 auto; min-width: 96px; padding-left: 6px; display: flex; flex-direction: column; align-items: flex-end; } .calc-wrapper .price-cell .f-label { text-align: right; } .calc-wrapper .price-cell .price-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; height: 40px; } .calc-wrapper .price-cell .price-num { font-size: 19px; font-weight: 700; line-height: 40px; font-variant-numeric: tabular-nums; white-space: nowrap; } .calc-wrapper .price-cell .price-cur { font-size: 14px; font-weight: 600; color: var(--text-secondary); } .calc-wrapper .price-cell-zero .price-num { color: var(--num-ink); } /* Шапка карточки: номер-пилюля + сегмент материала Акрил/Кварц (сегмент заменяет скрытый селект type-material) */ .calc-wrapper .line .head-title { position: absolute; left: 12px; top: 11px; height: 32px; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .calc-wrapper .line .head-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 10px; background: var(--fill-strong); color: var(--text-primary); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .calc-wrapper .line .head-title .mat-seg { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 3px; border-radius: 10px; background: var(--fill); } .calc-wrapper .line .head-title .mat-btn { display: flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; } .calc-wrapper .line .head-title .mat-btn:hover { color: var(--text-primary); background: var(--bg-card); } .calc-wrapper .line .head-title .mat-btn.active { background: var(--tint-grad); color: #fff; box-shadow: 0 2px 8px rgba(255, 77, 38, 0.28); } /* Материал не выбран: контурные оранжевые кнопки-подсказка на тёплой подложке */ .calc-wrapper .line .head-title .mat-seg.mat-seg-empty { background: var(--seg-empty-track); } .calc-wrapper .line .head-title .mat-seg.mat-seg-empty .mat-btn { background: var(--bg-card); border-color: var(--tint); color: var(--tint); } .calc-wrapper .line .head-title .mat-seg.mat-seg-empty .mat-btn:hover { background: var(--tint); color: #fff; } /* Родной селект типа материала скрыт — его заменяет сегмент */ .calc-wrapper .line select.type-material + .select2-container { display: none !important; } .calc-wrapper .top-wrap-selects { display: block; width: 100%; } /* Видимой цены в шапке нет ни в одном блоке: у изделий цифры в подвале карточки, у оборудования и работ — в .price-cell. В шапке остаются только скрытые поля суммы и цены за единицу (уходят в POST для КП) */ .calc-wrapper .price-container { display: none; } /* Удаление позиции — крестик в правом углу шапки карточки */ .calc-wrapper .calc-block .line .del-line { position: absolute; right: 16px; top: 13px; width: 26px; height: 26px; line-height: 24px; border-radius: 50%; text-align: center; font-size: 18px; color: var(--text-tertiary); cursor: pointer; transition: background 0.15s, color 0.15s; } .calc-wrapper .calc-block .line .del-line:hover { background: var(--fill); color: var(--red); } .calc-wrapper .calc-block .top-label { font-size: 12px; color: var(--text-secondary); } .calc-wrapper .calc-block .lines-wrapper { display: flex; flex-direction: column; gap: 12px; } .calc-wrapper .calc-block .line { position: relative; width: 100%; padding: 56px 16px 12px; border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--shadow-card); } /* Подсветка карточек тенью при наведении, без сдвига */ @media (hover: hover) { .calc-wrapper .calc-block .line, .measure .content-measure-wrap .line { transition: box-shadow 0.15s ease; } .calc-wrapper .calc-block .line:hover, .measure .content-measure-wrap .line:hover { box-shadow: 0 4px 10px rgba(31, 27, 57, 0.07), 0 16px 40px rgba(255, 90, 46, 0.12); } } /* Страховка от выхода select2 за пределы карточки */ .calc-wrapper .line .select2-container { max-width: 100%; } /* Шапка раздела: название слева, сумма раздела справа */ .calc-wrapper .calc-block .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0 4px; } .calc-wrapper .calc-block .sec-head-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .calc-wrapper .calc-block .sec-title { margin: 0; font-size: 22px; font-weight: 700; border: 0; } .calc-wrapper .calc-block .sec-sum { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- Калькулятор: раскладка «формы слева + сводка справа» ---------- */ /* Десктоп (≥1121px): контент и липкая сводка — грид-колонки; сводка не выше окна, при переполнении скроллится внутри себя. Ниже 1121 сводка живёт нижним листом */ @media screen and (min-width: 1121px) { body.calc-open .calc-wrapper .calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--layout-gap); align-items: start; } .calc-wrapper .calc-summary { position: sticky; top: calc(var(--edge-gap) + 64px + var(--layout-gap)); max-height: calc(100vh - var(--edge-gap) * 2 - 64px - var(--layout-gap)); overflow-y: auto; } } .calc-wrapper .calc-summary { background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px; max-width: 400px; margin-top: 28px; } @media screen and (min-width: 1121px) { .calc-wrapper .calc-summary { max-width: none; margin-top: 0; } } /* Поле сводки: 36px, как остальные контролы вне карточек */ .calc-wrapper .calc-summary .fld { height: 36px; padding: 0 10px; font-size: 14px; line-height: 34px; color: var(--text-primary); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-control); outline: none; } .calc-wrapper .calc-summary .fld::placeholder { color: var(--text-tertiary); } .calc-wrapper .calc-summary .fld:hover { border-color: var(--input-border-hover); } .calc-wrapper .calc-summary .fld:focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } /* Шапка сводки: подпись «№ сделки» и поле — одной строкой */ .calc-wrapper .sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .calc-wrapper .sum-deal { display: flex; align-items: center; gap: 12px; margin: 0; flex: 1 1 0; min-width: 0; } .calc-wrapper .sum-deal > span { flex: none; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .calc-wrapper .calc-summary .sum-deal-in { flex: 1 1 0; width: auto; min-width: 0; height: 40px; line-height: 38px; border-radius: var(--radius-control); font-weight: 600; font-variant-numeric: tabular-nums; } .calc-wrapper .sum-deal-in[readonly] { background: var(--fill); color: var(--text-secondary); } /* Незаполненный № сделки при «Поделиться» */ .calc-wrapper .deal-line.field-error input { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15); } /* Плитка итога */ .calc-wrapper .sum-total { margin: 18px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--tint-grad); color: #fff; box-shadow: 0 8px 20px rgba(255, 77, 38, 0.22); } .calc-wrapper .sum-total-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .calc-wrapper .sum-total-label { font-size: 15px; font-weight: 600; } .calc-wrapper .sum-total-chip { height: 24px; padding: 0 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; font-variant-numeric: tabular-nums; } .calc-wrapper .sum-total-value { font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; margin-top: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Экономия / надбавка */ .calc-wrapper .sum-facts { display: flex; gap: 8px; margin: 8px 0 6px; } /* Между «Итого» и разбивкой в потоке всегда стоит .sum-facts (обычно скрытый), поэтому соседний селектор «+» тут не срабатывает — только «~» */ .calc-wrapper .sum-total ~ .sum-rows { margin-top: 18px; } .calc-wrapper .sum-fact { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--radius-control); background: var(--tint-soft); } .calc-wrapper .sum-fact > span { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .calc-wrapper .sum-fact > b { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .calc-wrapper .sum-fact-tint { color: var(--tint); } /* Разбивка по блокам + строка «Без скидки» */ .calc-wrapper .sum-rows { display: flex; flex-direction: column; gap: 2px; } .calc-wrapper .sum-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 36px; padding: 0 12px; font-size: 14px; } .calc-wrapper .sum-row span { color: var(--text-secondary); } .calc-wrapper .sum-row b { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Нулевая строка разбивки не тянет на себя внимание */ .calc-wrapper .sum-row-zero b { color: var(--text-secondary); font-weight: 400; } .calc-wrapper .sum-rows .sum-row-sum { margin-top: 6px; position: relative; } .calc-wrapper .sum-rows .sum-row-sum::before { content: ""; position: absolute; left: 12px; right: 12px; top: -4px; height: 1px; background: var(--separator); } .calc-wrapper .sum-rows .sum-row-sum.active::before { display: none; } .calc-wrapper .sum-rows .sum-row-sum .sum-ladder-pct { color: var(--text-primary); font-weight: 500; } .calc-wrapper .sum-rows .sum-row-sum .sum-ladder-amt { font-weight: 600; } /* Секция скидок: сегмент групп + лестница строк */ /* translateZ — свой слой композитора: iOS Safari при анимации opacity внутри фиксированного листа с внутренним скроллом не затирал старый кадр и секция скидок задваивалась «призраком» (видно при включённой ручной цене) */ .calc-wrapper .sum-section { margin-top: 10px; transition: opacity 0.2s; transform: translateZ(0); } .calc-wrapper .sum-section-muted { opacity: 0.4; pointer-events: none; } .calc-wrapper .sum-section-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; } .calc-wrapper .sum-ladder { display: flex; flex-direction: column; gap: 2px; } .calc-wrapper .sum-ladder-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary); font-size: 14px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; transition: background 0.15s; } .calc-wrapper .sum-ladder-row:hover { background: var(--fill); } .calc-wrapper .sum-ladder-pct { flex: none; color: var(--text-secondary); } .calc-wrapper .sum-ladder-amt { flex: none; font-weight: 500; white-space: nowrap; } .calc-wrapper .sum-ladder-row.active { background: var(--tint-soft); } .calc-wrapper .sum-ladder-row.active .sum-ladder-pct { color: var(--tint); font-weight: 600; } .calc-wrapper .sum-ladder-row.active .sum-ladder-amt { color: var(--tint); font-weight: 700; } .calc-wrapper .sum-seg { display: flex; gap: 2px; margin: 10px 0 6px; padding: 3px; border-radius: 10px; background: var(--fill); } .calc-wrapper .sum-seg-btn { flex: 1 1 0; height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; } .calc-wrapper .sum-seg-btn:hover { color: var(--text-primary); } .calc-wrapper .sum-seg-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } /* Ручная цена: заменяет итог и глушит секцию скидок */ .calc-wrapper .sum-manual { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding-top: 12px; /* Высота заложена под появляющийся инпут (36) + паддинг (12) + бордер (1): тумблер не должен дёргать кнопки под собой */ min-height: calc(36px + 12px + 1px); border-top: 1px solid var(--separator); } .calc-wrapper .sum-manual .switch-line { font-size: 14px; color: var(--text-primary); } .calc-wrapper .sum-manual-fld { position: relative; display: inline-flex; align-items: center; } .calc-wrapper .sum-manual .fld { width: 140px; text-align: right; padding-right: 28px; font-variant-numeric: tabular-nums; font-weight: 600; border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } .calc-wrapper .sum-manual-cur { position: absolute; right: 10px; font-size: 14px; color: var(--text-secondary); pointer-events: none; } /* Модалка «Данные клиента для КП» перед скачиванием */ /* Модальное окно: .kp-* — исторические имена калькулятора, .modal-* — общие, для остальных страниц (подтверждение заливки прайса и т.п.) */ .kp-modal-overlay, .modal-overlay { position: fixed; inset: 0; z-index: 500; align-items: center; justify-content: center; padding: var(--edge-gap); background: rgba(25, 18, 42, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .kp-modal, .modal-box { width: min(440px, 100%); max-height: calc(100vh - var(--edge-gap) * 2); overflow-y: auto; background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 20px; } .modal-box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); } .kp-modal h4, .modal-box h4 { margin: 0 0 14px; } .kp-modal .kp-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-weight: normal; } .kp-modal .kp-field > span { font-size: 12px; color: var(--text-secondary); padding-left: 4px; } .kp-modal .kp-field input, .kp-modal .kp-field textarea { width: 100%; max-width: 100%; color: var(--text-primary); } .kp-modal .kp-field textarea { resize: vertical; font-family: inherit; } .kp-modal-actions, .modal-actions { display: flex; gap: 8px; margin-top: 14px; } .kp-modal-actions .bttn, .modal-actions .bttn { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; padding-left: 12px; padding-right: 12px; } /* Главная кнопка шире второстепенной — подпись длиннее */ .kp-modal-actions .kp-submit { flex: 1.4 1 0; } .kp-modal-actions .kp-cancel, .modal-actions .modal-cancel { background: var(--fill); color: var(--text-primary); border-radius: var(--radius-control); } .kp-modal-actions .kp-cancel:hover, .modal-actions .modal-cancel:hover { background: var(--fill-strong); color: var(--text-primary); text-decoration: none; } /* Просмотр КП на телефоне и в вебвью: оверлей поверх калькулятора, страницы PDF рисует PDF.js в canvas (script.js, kpViewOpen) — со страницы никто не уходит и расчёт не теряется. Открывается через display: flex из JS */ .kp-view-overlay { position: fixed; inset: 0; z-index: 550; /* поверх модалок (500), но под тостами (600) */ flex-direction: column; background: var(--bg-page); } /* Пока просмотр открыт, страница под ним не прокручивается */ body.kp-view-open { overflow: hidden; } .kp-view-bar { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px var(--edge-gap); padding-top: calc(10px + env(safe-area-inset-top)); background: var(--bg-card); border-bottom: 1px solid var(--separator); } /* «Назад» — обязательный выход: в вебвью приложения ни адресной строки, ни кнопок браузера нет, а про свайп догадываются не все */ .kp-view-back { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 8px; border-radius: var(--radius-control); background: var(--fill); color: var(--text-primary); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none; } .kp-view-back:hover { background: var(--fill-strong); } .kp-view-back svg { width: 18px; height: 18px; } .kp-view-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Базовая .bttn рассчитана на крупную кнопку в потоке (50px, min-width 200) — в панели она компактная, под высоту контролов */ .kp-view-bar .bttn { flex: none; margin: 0; min-width: 0; height: 36px; padding: 0 16px; font-size: 14px; font-weight: 600; text-decoration: none; } /* Документ: страницы во всю ширину, вертикальная прокрутка только внутри */ .kp-view-doc { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px var(--edge-gap) calc(12px + env(safe-area-inset-bottom)); } /* Полотно страницы: бумага КП белая в обеих темах */ .kp-view-page { display: block; width: 100%; height: auto; margin: 0 0 12px; background: #fff; border-radius: var(--radius-small); box-shadow: var(--shadow-card); } .kp-view-msg { padding: 24px 0; text-align: center; font-size: 14px; color: var(--text-secondary); } /* Поля вне карточек калькулятора (модалка КП, блок замерщика) — та же геометрия и цвета, что у контролов карточек: 40px, радиус control, рамка separator на фоне карточки. Иначе на одной странице соседствовали поля двух разных систем (36px на --input-bg и 40px на --bg-card) */ .calc-wrapper .kp-modal .kp-field input, .calc-wrapper .kp-modal .kp-field textarea, .calc-wrapper .info-line input[type="text"], .calc-wrapper .info-line input[type="number"], .calc-wrapper .info-line input[type="date"], .calc-wrapper .info-line input[type="datetime-local"], .calc-wrapper .info-line input[type="time"], .calc-wrapper .info-line textarea, .calc-wrapper .info-line select:not(.select2-hidden-accessible) { height: 40px; padding: 0 12px; font-size: 15px; background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-control); } .calc-wrapper .kp-modal .kp-field input:hover, .calc-wrapper .kp-modal .kp-field textarea:hover, .calc-wrapper .info-line input[type="text"]:hover, .calc-wrapper .info-line input[type="number"]:hover, .calc-wrapper .info-line input[type="date"]:hover, .calc-wrapper .info-line input[type="datetime-local"]:hover, .calc-wrapper .info-line input[type="time"]:hover, .calc-wrapper .info-line textarea:hover, .calc-wrapper .info-line select:not(.select2-hidden-accessible):hover { border-color: var(--input-border); } .calc-wrapper .kp-modal .kp-field input:focus, .calc-wrapper .kp-modal .kp-field textarea:focus, .calc-wrapper .info-line input[type="text"]:focus, .calc-wrapper .info-line input[type="number"]:focus, .calc-wrapper .info-line input[type="date"]:focus, .calc-wrapper .info-line input[type="datetime-local"]:focus, .calc-wrapper .info-line input[type="time"]:focus, .calc-wrapper .info-line textarea:focus, .calc-wrapper .info-line select:not(.select2-hidden-accessible):focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } /* Многострочные поля высоту держат сами */ .calc-wrapper .kp-modal .kp-field textarea, .calc-wrapper .info-line textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.4; } /* Select2 вне карточек (клиент у замерщика) — по той же мерке */ .calc-wrapper .select2-container--default .select2-selection--single { height: 40px; min-height: 40px; background: var(--bg-card); border-color: var(--separator); } .calc-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; font-size: 15px; } .calc-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; } .calc-wrapper .select2-container--default .select2-selection--single:hover { border-color: var(--input-border); } .calc-wrapper .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } /* Кнопки сводки: «Скачать КП» тянется, «Поделиться» — квадратная иконка */ .calc-wrapper .calc-actions { display: flex; gap: 8px; margin-top: 16px; } .calc-wrapper .calc-actions .download-calc { flex: 1 1 0; margin: 0; min-width: 0; font-size: 15px; } .calc-wrapper .calc-actions .share-calc { flex: none; width: 50px; padding: 0; margin: 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--text-primary); border-radius: var(--radius-control); } .calc-wrapper .calc-actions .share-calc:hover { background: var(--fill-strong); color: var(--text-primary); text-decoration: none; } .calc-wrapper .calc-actions .share-calc svg { flex: none; } /* ---------- Сводка: нижний лист на планшете и телефоне (≤1120px) ---------- */ /* На десктопе сводка — обычная колонка, полосы нет */ .calc-wrapper .sum-bar { display: none; } @media screen and (max-width: 1120px) { /* Свёрнутый лист: полоса с итогом, закреплённая у нижнего края */ body.calc-open .calc-wrapper .calc-summary { position: fixed; left: 0; right: 0; bottom: 0; top: auto; /* выше липкой шапки сайта (100), ниже модалки КП (500) и тоста (600): раскрытый лист доходит до верха окна и не должен уезжать под шапку */ z-index: 110; width: auto; max-width: none; max-height: 88vh; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; /* Волосяная граница, как у таб-бара: в тёмной теме одной тени мало — лист сливался с карточкой под ним */ border: 1px solid var(--separator); box-shadow: 0 -8px 30px rgba(31, 27, 57, 0.18); } /* Ручка-грип у верхнего края листа */ body.calc-open .calc-wrapper .calc-summary::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--fill-strong); } .calc-wrapper .sum-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border: 0; background: transparent; font: inherit; color: var(--text-primary); text-align: left; cursor: pointer; } .calc-wrapper .sum-bar-cap { font-size: 13px; color: var(--text-secondary); } .calc-wrapper .sum-bar-val { font-size: 21px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } .calc-wrapper .sum-bar-more { margin-left: auto; height: 34px; padding: 0 14px; border-radius: 100px; background: var(--fill); color: var(--text-primary); font-size: 13px; font-weight: 600; line-height: 34px; white-space: nowrap; } .calc-wrapper .sum-sheet { display: none; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 16px 4px; /* тот же приём для самого скроллера: без своего слоя Safari оставлял куски прошлого кадра при прокрутке листа */ transform: translateZ(0); } .calc-wrapper .calc-summary.sheet-open .sum-sheet { display: block; } /* Быстрый просмотр: лист поверх контента, кнопка «Свернуть» внизу */ .calc-wrapper .calc-summary.sheet-overlay .sum-sheet { padding: 14px 16px 4px; } .calc-wrapper .calc-summary.sheet-overlay .sum-bar { order: 2; min-height: 48px; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--separator); justify-content: center; } .calc-wrapper .calc-summary.sheet-overlay .sum-bar-cap, .calc-wrapper .calc-summary.sheet-overlay .sum-bar-val { display: none; } .calc-wrapper .calc-summary.sheet-overlay .sum-bar-more { margin: 0; } /* Долистали до низа: сводка встаёт в поток страницы, полосы уже не нужно */ body.calc-open .calc-wrapper .calc-summary.sheet-inline { position: static; max-height: none; border-radius: var(--radius-card); box-shadow: var(--shadow-card); /* в потоке лист — обычный крупный блок: тот же зазор, что между разделами, иначе он липнет к кнопке «+ Добавить …» над ним */ margin-top: var(--layout-gap); } .calc-wrapper .calc-summary.sheet-inline .sum-sheet { overflow: visible; padding: 16px; } body.calc-open .calc-wrapper .calc-summary.sheet-inline::before { display: none; } .calc-wrapper .calc-summary.sheet-inline .sum-bar { display: none; } /* Контент не ныряет под закреплённый лист */ body.calc-open #workarea { padding-bottom: 86px; } } /* В кабинете ниже 981 снизу висит таб-бар (68 + отступ) — лист встаёт над ним и повторяет его боковые границы, иначе низ панели «висел» бы над зазором. Порог именно 980: выше таб-бара нет и лист прижимается к краю окна */ @media screen and (max-width: 980px) { body.app-shell.calc-open .calc-wrapper .calc-summary { left: var(--edge-gap); right: var(--edge-gap); bottom: calc(var(--edge-gap) + 68px + 8px + env(safe-area-inset-bottom)); border-radius: var(--radius-capsule); } /* Безопасная зона уже учтена в bottom — второй раз в паддинге не нужна */ body.app-shell .calc-wrapper .sum-bar { padding-bottom: 12px; } body.app-shell .calc-wrapper .calc-summary.sheet-overlay .sum-bar { padding-bottom: 10px; } } /* Схема изделия: вид сверху с размерными линиями и бейджами-буквами */ .calc-wrapper .scheme-box { width: 100%; } .calc-wrapper .scheme-box svg { display: block; width: 100%; margin: 0 auto; } /* Плоские формы (классы ставит drawScheme: flat — прямые, Г-образные и радиусный, wide — низкие дуга и Г) на ширинах >540 — в горизонтальной ориентации: портретная зря тянет карточку в высоту. На 391–540 схема снова портретная рядом с полями, ≤390 ландшафт для всех (мобильный блок) */ @media screen and (min-width: 541px) { .calc-wrapper .scheme-box.scheme-flat .sch-portrait { display: none !important; } .calc-wrapper .scheme-box.scheme-flat .sch-landscape { display: block !important; } /* портретное over-выравнивание ландшафту не нужно; класс удвоен, чтобы перебить одноранговые правила over-N, идущие в CSS позже */ .calc-wrapper .main .panel-params .scheme-box.scheme-flat.scheme-flat { padding-top: 0; } .calc-wrapper .main .panel-params .scheme-box.scheme-flat ~ .dims { padding-top: 0; } .calc-wrapper .main .panel-params .scheme-box.scheme-wide { width: 100%; max-width: 420px; } } .calc-wrapper .scheme-box .sch-sec-a { fill: var(--sch-top); } .calc-wrapper .scheme-box .sch-sec-b { fill: var(--sch-front); } .calc-wrapper .scheme-box .sch-split { stroke: var(--sch-edge); stroke-width: 1; stroke-dasharray: 3 3; } .calc-wrapper .scheme-box .sch-outline { fill: none; stroke: var(--text-primary); stroke-width: 1.4; stroke-linejoin: round; } .calc-wrapper .scheme-box .sch-sec { fill: var(--text-secondary); font-size: 9px; font-weight: 600; text-anchor: middle; font-family: inherit; letter-spacing: 0.02em; } .calc-wrapper .scheme-box .sch-ext { fill: none; stroke: var(--text-tertiary); stroke-width: 0.75; } .calc-wrapper .scheme-box .sch-wall { fill: none; stroke: var(--text-tertiary); stroke-width: 1; stroke-linecap: butt; } .calc-wrapper .scheme-box .sch-dim { fill: none; stroke: var(--text-secondary); stroke-width: 1; } .calc-wrapper .scheme-box .sch-badge { fill: var(--tint); stroke: var(--bg-card); stroke-width: 1.5; } .calc-wrapper .scheme-box .sch-letter { fill: #fff; font-size: 9.5px; font-weight: 700; text-anchor: middle; font-family: inherit; } .calc-wrapper .scheme-box .scheme-hint { margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--text-tertiary); text-align: center; } /* Тумблеры (ручной м², ручная цена) — общий компонент, используется и в калькуляторе, и на странице цен (manage/price) */ .switch-line { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin: 0; } .switch-line input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .switch-line .switch { flex: none; width: 36px; height: 22px; border-radius: 100px; background: var(--fill-strong); position: relative; transition: background 0.15s; } .switch-line .switch:after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; } .switch-line input:checked + .switch { background: var(--green); } .switch-line input:checked + .switch:after { transform: translateX(14px); } /* Тост: .calc-toast — историческое имя калькулятора, .toast — общее */ .calc-toast, .toast { position: fixed; left: 50%; bottom: calc(var(--edge-gap) + 76px); transform: translateX(-50%) translateY(10px); z-index: 600; max-width: min(420px, calc(100vw - var(--edge-gap) * 2)); padding: 12px 18px; background: var(--bg-elevated); color: var(--text-primary); font-size: 14px; border: 1px solid var(--separator); border-radius: var(--radius-control); box-shadow: var(--shadow-card); opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; } .calc-toast.show, .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Тост об ошибке — акцентная рамка, чтобы не путался с нейтральным уведомлением */ .toast-err { border-color: var(--tint); color: var(--tint); } /* Габариты: схема слева, поля справа группами-таблицами */ .calc-wrapper .main .panel-params { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 340px); gap: 24px; align-items: start; margin-top: 10px; } .calc-wrapper .main .panel-params .scheme-box { width: 240px; max-width: 100%; justify-self: center; align-self: start; } /* Верх фигуры выравнивается с первой строкой габаритов: выноска схемы выступает над рамкой на разную долю высоты (класс over-N ставит drawScheme) */ .calc-wrapper .main .panel-params .dims.over-2 { padding-top: 0; } .calc-wrapper .main .panel-params .scheme-box.over-2 { padding-top: 23px; } .calc-wrapper .main .panel-params .dims.over-50 { padding-top: 15px; } .calc-wrapper .main .panel-params .scheme-box.over-50 { padding-top: 0; } .calc-wrapper .main .panel-params .dims.over-35 { padding-top: 3px; } .calc-wrapper .main .panel-params .scheme-box.over-35 { padding-top: 0; } .calc-wrapper .main .panel-params .dims { min-width: 0; display: flex; flex-direction: column; gap: 8px; } /* minmax(0, 1fr), а не 1fr: иначе колонка не ужимается ниже min-content полей и на узкой карточке группа габаритов вылезает за край */ .calc-wrapper .dim-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .calc-wrapper .dim-sec { display: flex; flex-direction: column; min-width: 0; } .calc-wrapper .dim-sec-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px 0; margin: 0; } .calc-wrapper .dim-group { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--separator); border-radius: var(--radius-control); overflow: hidden; } .calc-wrapper .dim-field { display: flex; align-items: center; gap: 10px; margin: 0; width: 100%; min-width: 0; height: 40px; padding: 0 12px; background: transparent; border: 0; cursor: text; position: relative; font-weight: 400; } .calc-wrapper .dim-field + .dim-field::before { content: ""; position: absolute; left: 44px; right: 0; top: 0; height: 1px; background: var(--separator); } /* Ручной м²: габариты гаснут визуально, но остаются в форме (нужны КП) */ .calc-wrapper .dim-grid-locked .dim-field { opacity: 0.45; pointer-events: none; } .calc-wrapper .dim-grid-locked .dim-badge { background: var(--text-tertiary); } .calc-wrapper .dim-field .dim-badge { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--tint); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .calc-wrapper .dim-field .dim-label { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 1.2; color: var(--text-primary); /* рядом с подписью стоят пилюли бортика и кромки: длинная подпись («Длина (общая)») должна ужиматься, а не переносить строку */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-wrapper .calc-block .dim-field .ctrl-in { flex: none; width: 80px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none; text-align: right; font-size: 15px; font-weight: 500; line-height: 40px; color: var(--text-primary); font-variant-numeric: tabular-nums; } .calc-wrapper .calc-block .dim-field .ctrl-in:focus { box-shadow: none; } .calc-wrapper .dim-field::after { content: "мм"; flex: none; font-size: 13px; color: var(--text-tertiary); } .calc-wrapper .dim-field-count::after { content: "шт"; } .calc-wrapper .dim-field:focus-within .dim-label { color: var(--tint); } /* Бортик — переключателем прямо в строке габаритов: одна кнопка на размерность, клик перебирает 0 → ×1 → ×2 (стороны этой размерности). Итог п.м./₽ — в шапке */ .calc-wrapper .dims-cap { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; } .calc-wrapper .dims-cap .edges-totals { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .calc-wrapper .dims-cap .edges-totals > span { white-space: nowrap; } .calc-wrapper .dims-cap .edges-totals b { color: var(--text-primary); font-weight: 600; } .calc-wrapper .edges-data { display: none; } /* Пустой слот (бортик не выбран или размерность без сторон) не занимает место */ .calc-wrapper .dim-edge:empty { display: none; } .calc-wrapper .dim-edge { flex: none; display: inline-flex; align-items: center; gap: 6px; } .calc-wrapper .dim-edge .edge-cb { display: none; } .calc-wrapper .edge-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; height: 26px; margin: 0; padding: 0 9px; border: 1px solid var(--separator); border-radius: var(--radius-small); background: var(--fill); color: var(--text-secondary); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; } .calc-wrapper .edge-toggle:hover { border-color: var(--tint); color: var(--tint); } .calc-wrapper .edge-toggle.edge-toggle-on, .calc-wrapper .edge-toggle.edge-toggle-on:hover { background: var(--tint); border-color: var(--tint); color: #fff; } /* Кромка — «мягкая» пилюля: в одной строке с бортиком две сплошные заливки спорили бы друг с другом, поэтому включённая кромка идёт фоном --tint-soft */ .calc-wrapper .edge-toggle-edging.edge-toggle-on, .calc-wrapper .edge-toggle-edging.edge-toggle-on:hover { background: var(--tint-soft); border-color: var(--tint); color: var(--tint); } .calc-wrapper .edge-toggle-edging.edge-toggle-on .edge-toggle-x { background: var(--tint); color: #fff; } /* Количество сторон — белым бейджем в пилюле: цифра читается лучше, чем «×2» текстом */ .calc-wrapper .edge-toggle-x { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 16px; margin-left: 6px; padding: 0 4px; border-radius: 5px; background: #fff; color: var(--tint); font-size: 11px; font-weight: 700; line-height: 1; } .calc-wrapper .edge-toggle-x:empty { display: none; } .calc-wrapper .edge-toggle[disabled] { opacity: 0.4; cursor: default; } .calc-wrapper .edge-toggle[disabled]:hover { border-color: var(--separator); color: var(--text-secondary); } /* Подвал карточки: площадь, количество, цена за м², стоимость позиции */ .calc-wrapper .pos-foot { display: flex; align-items: flex-end; gap: 36px; margin-top: 16px; padding: 14px 0 2px; border-top: 1px solid var(--separator); } /* Ячейки не сжимаются: подписи («Стоимость позиции») длиннее цифр и при сжатии наезжали бы на соседнюю ячейку — вместо этого подвал переносится */ .calc-wrapper .pos-cell { flex: none; display: flex; flex-direction: column; gap: 6px; } .calc-wrapper .pos-cap { display: flex; align-items: center; gap: 12px; height: 22px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; } .calc-wrapper .pos-cap .pos-manual { font-size: 12px; color: var(--text-tertiary); gap: 6px; } .calc-wrapper .pos-cap .pos-manual .switch { width: 28px; height: 18px; } .calc-wrapper .pos-cap .pos-manual .switch:after { width: 14px; height: 14px; top: 2px; left: 2px; } .calc-wrapper .pos-cap .pos-manual input:checked + .switch:after { transform: translateX(10px); } .calc-wrapper .pos-val { display: flex; align-items: center; gap: 6px; height: 34px; } .calc-wrapper .pos-num { font-size: 26px; font-weight: 700; line-height: 34px; font-variant-numeric: tabular-nums; white-space: nowrap; } .calc-wrapper .pos-num-tint { color: var(--tint); } .calc-wrapper .pos-num-quiet { font-size: 20px; font-weight: 600; color: var(--text-secondary); } .calc-wrapper .pos-unit { font-size: 15px; font-weight: 600; color: var(--text-secondary); align-self: baseline; line-height: 34px; } /* input.pos-in — не короче: общий .calc-block input[type="text"] содержит атрибутный селектор и перебивает голые классы */ .calc-wrapper .calc-block input.pos-in { width: 96px; height: 34px; padding: 0 10px; border: 1px solid var(--tint); border-radius: 10px; background: var(--input-bg); box-shadow: 0 0 0 3px var(--tint-soft); outline: none; font-size: 20px; font-weight: 700; line-height: 32px; color: var(--tint); text-align: right; font-variant-numeric: tabular-nums; } .calc-wrapper .calc-block input.pos-in-qty { width: 60px; border-color: var(--input-border); box-shadow: none; color: var(--text-primary); text-align: center; } .calc-wrapper .calc-block input.pos-in-qty:focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } .calc-wrapper .pos-cell-rate { margin-left: auto; text-align: right; } .calc-wrapper .pos-cell-rate .pos-cap, .calc-wrapper .pos-cell-rate .pos-val { justify-content: flex-end; } .calc-wrapper .pos-cell-price { text-align: right; } .calc-wrapper .pos-cell-price .pos-cap, .calc-wrapper .pos-cell-price .pos-val { justify-content: flex-end; } /* Ниже 1121 сводка уходит вниз листом, карточка занимает всю ширину — подвал раскладывается в три равные колонки (в строку три ячейки уже не помещаются). Остальной адаптив карточек — в css/mobile.css */ @media screen and (max-width: 1120px) { .calc-wrapper .pos-foot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 12px; align-items: start; } .calc-wrapper .pos-cell-rate, .calc-wrapper .pos-cell-price { margin-left: 0; text-align: left; } .calc-wrapper .pos-cell-rate .pos-cap, .calc-wrapper .pos-cell-rate .pos-val, .calc-wrapper .pos-cell-price .pos-cap, .calc-wrapper .pos-cell-price .pos-val { justify-content: flex-start; } } .calc-wrapper .errors { color: var(--red); } /* Выбор клиента: поле не шире колонки — инлайновый width:400px вылезал за экран. Скрытый a11y-дубль select2 не трогаем: у него свои width:1px/clip, иначе он растягивается на ширину ячейки и даёт горизонтальный скролл */ .client-wrapper select:not(.select2-hidden-accessible), .client-wrapper .select2-container { width: 100% !important; max-width: 400px !important; } /* «Данные замера» — сетка колонок по ширине поля, а не столбик из 26 полей: на 1440 форма занимала 400px из 1236 и вытягивалась на 3044px в высоту */ .client-wrapper-data { margin-top: var(--layout-gap); display: grid; /* 320 — чтобы на 1236 вставало 3 колонки по ~396 (ширина поля по дизайну), а не 4 по 297: на узких колонках подписи полей начинали переноситься */ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; } .client-wrapper-data > h2, .client-wrapper-data > hr, .client-wrapper-data > br, .client-wrapper-data > .errors, .client-wrapper-data > .btn-wrap, .client-wrapper-data > .docs-line, .client-wrapper-data > .info-line:has(textarea) { grid-column: 1 / -1; } .client-wrapper-data .info-line { margin-top: 0; min-width: 0; } .client-wrapper-data > hr { width: 100%; margin: 4px 0; } /* Поля тянутся по ячейке: инлайновый width:400px на 16 полях давал горизонтальный скролл 39px на 375 и не давал сетке сжиматься */ .client-wrapper-data .info-line select:not(.select2-hidden-accessible), .client-wrapper-data .info-line input[type="text"], .client-wrapper-data .info-line textarea, .client-wrapper-data .info-line .select2-container { width: 100% !important; max-width: 100% !important; } /* Комментарий занимает всю строку сетки, но не растягивается на 1236px */ .client-wrapper-data .info-line textarea { max-width: 820px !important; } .client-wrapper-data .info-line b { font-weight: 600; } /* Кнопка-ссылка на документацию замера в Google Диске */ .drive-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--input-border); border-radius: var(--radius-control); box-shadow: var(--shadow-card); color: var(--text-primary); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color 0.15s, transform 0.15s; } .drive-link:hover, .drive-link:focus { color: var(--text-primary); border-color: var(--input-border-hover); text-decoration: none; transform: translateY(-1px); } .drive-link svg { flex: none; } .drive-link .ext-arrow { color: var(--text-tertiary); font-size: 14px; } .drive-link-empty { display: inline-block; margin-top: 4px; color: var(--text-primary); font-size: 13px; line-height: 1.35; } .drive-link-empty .drive-link-input { margin-top: 4px; } /* ---------- Select2 и jQuery UI под тему ---------- */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-control); min-height: 36px; transition: border-color 0.15s, box-shadow 0.15s; } .select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--multiple:hover { border-color: var(--input-border-hover); } .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); line-height: 34px; padding-left: 12px; } .select2-container--default .select2-selection--single { height: 36px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; } .select2-dropdown { background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: var(--radius-control); overflow: hidden; color: var(--text-primary); } .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-small); color: var(--text-primary); } /* Системное синее кольцо фокуса — как у остальных полей портала */ .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); outline: none; } /* Пункты выпадающего списка. Классов у select2 два поколения: старое --highlighted[aria-selected] и новое --selected / --highlighted.--selectable. Подключённая версия — новая, поэтому выбранный пункт оставался с дефолтным светло-серым #ddd и в тёмной теме выглядел инородной плашкой. Оба варианта перечислены: правило переживёт смену версии select2 */ .select2-container--default .select2-results__option--selected { background: var(--fill); color: var(--text-primary); } .select2-container--default .select2-results__option--disabled { color: var(--text-tertiary); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--tint); color: #fff; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--tint-soft); border: 0; border-radius: 100px; color: var(--tint); padding: 2px 10px; } /* Кнопка «×» в пилюле: у штатной темы select2 вертикальный разделитель — убираем */ .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border: 0; background: transparent; color: var(--tint); } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background: transparent; color: var(--text-primary); } .ui-widget.ui-widget-content { background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--text-primary); } .ui-widget-header { background: transparent; border: 0; color: var(--text-primary); } .ui-state-default, .ui-widget-content .ui-state-default { background: transparent; border: 0; color: var(--text-primary); text-align: center; border-radius: var(--radius-small); } .ui-state-hover, .ui-widget-content .ui-state-hover { background: var(--fill); border: 0; } .ui-state-active, .ui-widget-content .ui-state-active { background: var(--tint); border: 0; color: #fff; } /* ---------- Публичная страница заказа ---------- */ .docs-container .gallery { background: var(--bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 12px; } .docs-container .gallery img { border-radius: var(--radius-control); } /* ---------- Анимация синхронизации ---------- */ @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { animation: rotating 2s linear infinite; } /* «Обновить приложение» — тихая сервисная функция под списком меню, не пункт. Сидит на тёмном оверлее шторки (rgba(25,18,42,.45)), поэтому текст светлый — в обе темы. display:none снимает pwa.js только в webapp (с домашнего экрана) */ #pwa-hard-refresh-item { text-align: center; margin-top: 14px; } #pwa-hard-refresh-item a { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-decoration: none; border-bottom: 1px dotted currentColor; transition: color 0.2s; } #pwa-hard-refresh-item:hover a, #pwa-hard-refresh-item:active a { color: rgba(255, 255, 255, 0.9); } /* Без сети «Обновить приложение» запрещено: чистка кэшей офлайн уничтожит сохранённые страницы и оставит пустой экран */ body.is-offline #pwa-hard-refresh-item { opacity: 0.4; pointer-events: none; } /* ---------- Лоадер перехода между страницами (webapp) ---------- */ #page-loader { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg-blur); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; animation: page-loader-in 0.2s ease-out 0.05s forwards; } @keyframes page-loader-in { to { opacity: 1; } } #page-loader .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--fill-strong); border-top-color: var(--tint); animation: rotating 0.8s linear infinite; } #page-loader .loader-text { font-size: 15px; color: var(--text-secondary); }