/* Персональный размер текста (п.1) и тема (п.7) — переменные на :root, переключаются атрибутами data-font-size/data-theme на (base.html), которые сервер выставляет по значению, сохранённому на аккаунте. font-size ниже переведён в calc(Npx * var(--font-scale)) везде, где раньше был буквальный px — сам layout (отступы/размеры) не меняется, меняется только текст. "Как в системе" (theme=system) — атрибут не выставляется вовсе, тогда решает только prefers-color-scheme. */ :root { --font-scale: 1; --text-weight: 400; --font-family-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bg: #f4f5f7; --surface: #fff; --surface-2: #eef0f4; --text: #1a1a1a; --muted: #666; --line: #ddd; --accent: #2b5cff; --accent-hover: #1f47cc; --topbar-bg: #1a2233; --topbar-text: #fff; --topbar-muted: #9aa5ba; --topbar-link: #cfd6e4; } :root[data-font-size="small"] { --font-scale: 0.88; } :root[data-font-size="large"] { --font-scale: 1.18; } /* Насыщенность (п.1, «Дополнение 9») и гарнитура (п.1, «Дополнение 10») — та же схема: атрибут на из значения на аккаунте, переменная, которую использует body ниже. Гарнитура шрифта относится к общему интерфейсу портала — моноширинный шрифт строк самого прайса (--p-mono в price.html) выравнивает цифры цен нарочно и не подчиняется этому выбору. */ :root[data-font-weight="bold"] { --text-weight: 600; } :root[data-font-family="arial"] { --font-family-ui: Arial, Helvetica, sans-serif; } :root[data-font-family="georgia"] { --font-family-ui: Georgia, "Times New Roman", serif; } :root[data-font-family="courier"] { --font-family-ui: "Courier New", Courier, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14161c; --surface: #1c1f28; --surface-2: #262b38; --text: #e8e9ee; --muted: #9099ab; --line: #333947; --accent: #5b82ff; --accent-hover: #7a9aff; --topbar-bg: #0d0f14; --topbar-text: #e8e9ee; --topbar-muted: #7c869c; --topbar-link: #b7c0d6; } } :root[data-theme="dark"] { --bg: #14161c; --surface: #1c1f28; --surface-2: #262b38; --text: #e8e9ee; --muted: #9099ab; --line: #333947; --accent: #5b82ff; --accent-hover: #7a9aff; --topbar-bg: #0d0f14; --topbar-text: #e8e9ee; --topbar-muted: #7c869c; --topbar-link: #b7c0d6; } /* Подстраховка на случай узкого окна браузера (п.3) — без этого некоторые строки шапки/прайса могли вылезать за пределы окна и создавать горизонтальный скролл вместо переноса. РЕГРЕССИЯ (найдена 12.09 по жалобе заказчика, что закреплённая шапка «Прайса» перестала прилипать при прокрутке): `overflow-x: hidden` в паре с ancestor'ом sticky-элемента ломает position:sticky — по спеке CSS, overflow-x:hidden без явного overflow-y автоматически вычисляет overflow-y как auto (а не visible), из-за чего html/body превращаются в отдельный скролл-контейнер, и #priceStickyHeader в price.html перестаёт прилипать к реальному видимому скроллу. `overflow-x: clip` даёт тот же эффект (обрезает горизонтальный overflow) без этой побочной привязки overflow-y — проверено вживую (Puppeteer): sticky работает, горизонтальный скролл по-прежнему не появляется на 380px. */ html, body { max-width: 100%; overflow-x: clip; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-family-ui); font-weight: var(--text-weight); background: var(--bg); color: var(--text); } .topbar { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.5rem; background: var(--topbar-bg); color: var(--topbar-text); flex-wrap: wrap; } .topbar .brand { font-weight: 600; } .topbar nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; } .topbar a { color: var(--topbar-link); text-decoration: none; } .topbar a:hover { color: var(--topbar-text); } .topbar-right { font-size: calc(0.85rem * var(--font-scale)); color: var(--topbar-muted); display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .whoami-text { white-space: nowrap; } .logout-link { color: var(--topbar-muted); text-decoration: none; } .logout-link:hover { color: var(--topbar-text); } /* Общий каркас для любого выпадающего меню (см. base.js) — показ/скрытие через .open, визуальное оформление каждого меню — своим классом. */ .dropdown-menu { display: none; } .dropdown-menu.open { display: flex; flex-direction: column; } .user-menu { position: relative; } .user-menu-btn { background: none; border: none; -webkit-appearance: none; appearance: none; color: var(--topbar-muted); font: inherit; font-size: calc(0.85rem * var(--font-scale)); cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 4px 2px; white-space: nowrap; } .user-menu-btn:hover { color: var(--topbar-text); } .user-menu-btn .caret { font-size: calc(10px * var(--font-scale)); } .user-menu-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--surface); color: var(--text); border-radius: 8px; min-width: 170px; padding: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.18); z-index: 50; } .user-menu-dropdown a { color: var(--text); text-decoration: none; font-size: calc(0.85rem * var(--font-scale)); padding: 8px 10px; border-radius: 5px; white-space: nowrap; } .user-menu-dropdown a:hover { background: var(--bg); } /* Текущая страница — выделена жирным+фоном, а не приглушённым цветом текста (приглушённый цвет читался как "недоступно", а не как "вы здесь"); цвет текста переобъявлен явно тем же токеном --text, чтобы гарантированно не остаться тусклым независимо от происхождения прежнего тусклого вида (в т.ч. если это был цвет :visited-ссылки браузера по умолчанию). */ .user-menu-dropdown a.current { font-weight: 700; background: var(--surface-2); color: var(--text); } .user-menu-dropdown a.current:hover { filter: brightness(0.96); } .user-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; } main { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; } .login-box { max-width: 320px; margin: 4rem auto; padding: 2rem; background: var(--surface); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); color: var(--text); } .login-box form { display: flex; flex-direction: column; gap: 1rem; } .login-box label { display: flex; flex-direction: column; gap: 0.25rem; font-size: calc(0.9rem * var(--font-scale)); } input, select { padding: 0.5rem; border: 1px solid var(--line); border-radius: 4px; font-size: calc(1rem * var(--font-scale)); background: var(--surface); color: var(--text); } button { padding: 0.6rem; border: none; border-radius: 4px; background: var(--accent); color: #fff; font-size: calc(1rem * var(--font-scale)); cursor: pointer; } button:hover { background: var(--accent-hover); } .flashes { list-style: none; padding: 0; margin: 0 0 1rem; } .flash-error { color: #b00020; } .flash-success { color: #1a7a3a; } /* Подменю внутри «Склада» (Поставки/Баланс/Черновики/Каталог) — общий для всех страниц раздела, чтобы не заходить в каждую только через список поставок. Текущая вкладка — как activeвыделение в меню админа: жирным и подчёркиванием, не тусклым цветом (тот же урок про "похоже на disabled"). */ .sklad-subnav { display: flex; gap: 4px; margin: 12px 0 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .sklad-subnav a { padding: 8px 14px; text-decoration: none; color: var(--muted); font-size: calc(13.5px * var(--font-scale)); border-bottom: 2px solid transparent; margin-bottom: -1px; } .sklad-subnav a:hover { color: var(--text); } .sklad-subnav a.current { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* Общий виджет загрузки файла (sklad_upload.js) — используется в форме баланса, на карточках поставки/черновика и в карточке товара. */ .sklad-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sklad-upload-btn { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 7px 12px; font-size: calc(12.5px * var(--font-scale)); cursor: pointer; font-weight: 600; white-space: nowrap; } .sklad-upload-hint { font-size: calc(11.5px * var(--font-scale)); color: var(--muted); } .sklad-upload-progress { height: 5px; width: 140px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 6px; } .sklad-upload-progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .2s; } .sklad-upload-result { display: flex; align-items: center; gap: 8px; } .sklad-upload-link { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); text-decoration: none; font-size: calc(12px * var(--font-scale)); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .sklad-upload-link:hover { background: var(--surface-2); } .sklad-upload-remove { border: none; background: none; color: #b00020; cursor: pointer; font-size: calc(13px * var(--font-scale)); padding: 2px 4px; } .sklad-upload-error { color: #b00020; font-size: calc(12px * var(--font-scale)); margin-top: 4px; } /* .sklad-upload-row/-result declare their own `display:flex` — without this, that class rule has equal specificity to the browser's default `[hidden]{display:none}` and (being an author style) wins by cascade order, so the `hidden` attribute stopped hiding anything: both the picker button and an empty "attached file" row showed at once on every page load. `[hidden]` here has higher specificity (attribute+class) so it wins. */ .sklad-upload-row[hidden], .sklad-upload-result[hidden] { display: none; } /* Общий модальный диалог раздела «Склад» — использовался в 3+ местах (Поставки/Черновики/Каталог) с идентичной вёрсткой, вынесено сюда, чтобы не дублировать один и тот же CSS-блок ещё в одном шаблоне. */ .sklad-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .sklad-modal-box { background: var(--surface); color: var(--text); border-radius: 8px; padding: 20px; width: 100%; max-width: 380px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .sklad-modal-box h3 { margin: 0 0 12px; } .sklad-modal-box label { display: block; font-size: calc(12.5px * var(--font-scale)); color: var(--muted); margin-bottom: 10px; } .sklad-modal-box input, .sklad-modal-box select, .sklad-modal-box textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 4px; font-size: calc(13.5px * var(--font-scale)); margin-top: 3px; } .sklad-modal-actions { display: flex; gap: 8px; margin-top: 6px; } .sklad-modal-actions button { flex: 1; padding: 9px; border-radius: 4px; border: 1px solid var(--line); font-size: calc(13px * var(--font-scale)); cursor: pointer; background: var(--surface); color: var(--text); } .sklad-modal-actions .confirm { background: var(--accent); color: #fff; border: none; font-weight: 600; } .placeholder { color: var(--muted); } table.users-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; } table.users-table th, table.users-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--line); } .new-user-form { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; } .new-user-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: calc(0.9rem * var(--font-scale)); }