/* Оформление серверной части. * * Палитра и пороги контраста те же, что в автономных экранах: человек * переходит между ними в один день, и разный вид одних и тех же цифр * читается как разные системы. * * ТРИ ТЕМЫ: тёмная (по умолчанию), светлая и тёмно-зелёная. Выбранная * человеком проставляется атрибутом `data-theme` на ДО первой * отрисовки — скриптом в , иначе на каждой загрузке моргает чужая * тема. Пока выбор не сделан, действует системная настройка: в кабинете * читается тёмная, в весовой днём на солнце — только светлая. * * Контраст всех трёх палитр считает `tools/check_contrast_server.py`, * а не глаз. Тёмно-серое по тёмному выглядит «стильно приглушённым» ровно * до того дня, когда экран открывают с телефона на улице. */ :root { --bg: #0f1417; --panel: #161d21; --panel-2: #1c252a; --line: #26333a; --line-soft: rgba(38, 51, 58, .5); --ink: #e8eef1; --ink-dim: #a3b6c0; --ink-mute: #8ea1ac; --accent: #f0a202; --accent-soft: rgba(240, 162, 2, .14); --ok: #3fb950; --danger: #ff8078; --danger-soft: rgba(248, 81, 73, .1); --radius: 12px; } /* Светлая по системной настройке — но ТОЛЬКО пока тему не выбрали руками. `:not([data-theme])` здесь несущее: без него выбранная тёмная тема у человека со светлой системой молча перебивалась бы этим блоком, и переключатель выглядел бы сломанным через раз. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #eef1f3; --panel: #ffffff; --panel-2: #f4f6f8; --line: #d5dce1; --line-soft: rgba(213, 220, 225, .7); --ink: #16212a; --ink-dim: #495a66; --ink-mute: #556370; --accent: #855400; --accent-soft: rgba(184, 116, 0, .12); --ok: #14682c; --danger: #a5101c; --danger-soft: rgba(207, 34, 46, .08); } } /* Та же светлая палитра под явным выбором. Записана в файле дважды и может разойтись молча — проявится это только у того, у кого системная тема другая, то есть почти наверняка не у того, кто правил файл. Расхождение ловит check_contrast_server.py отдельной проверкой. */ :root[data-theme="light"] { --bg: #eef1f3; --panel: #ffffff; --panel-2: #f4f6f8; --line: #d5dce1; --line-soft: rgba(213, 220, 225, .7); --ink: #16212a; --ink-dim: #495a66; --ink-mute: #556370; --accent: #855400; --accent-soft: rgba(184, 116, 0, .12); --ok: #14682c; --danger: #a5101c; --danger-soft: rgba(207, 34, 46, .08); } /* Тёмно-зелёная. Глубокий английский зелёный с шампанским золотом вместо янтаря — сочетание, на котором держится палитра Rolls-Royce. Структура токенов та же, что в тёмной: меняются оттенки, а не роли, поэтому все три темы проходят одни и те же проверки контраста. */ :root[data-theme="green"] { --bg: #0b1512; --panel: #112019; --panel-2: #17291f; --line: #24392e; --line-soft: rgba(36, 57, 46, .5); --ink: #e9f2ec; --ink-dim: #a8c3b1; --ink-mute: #93ae9d; --accent: #d9b675; --accent-soft: rgba(217, 182, 117, .15); --ok: #4fc26d; --danger: #ff8f85; --danger-soft: rgba(248, 81, 73, .12); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Segoe UI", Roboto, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2 { margin: 0; font-weight: 600; } h2 { font-size: 16px; } .muted { color: var(--ink-mute); font-size: 13px; } .mono { font-family: "Consolas", "SF Mono", monospace; } .num { text-align: right; font-variant-numeric: tabular-nums; } button { font: inherit; cursor: pointer; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); } button:hover { border-color: var(--ink-mute); } button:disabled { opacity: .5; cursor: not-allowed; } button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; } input, select, textarea { font: inherit; font-size: 16px; /* меньше — Safari зумит поле на фокусе */ padding: 10px 12px; border-radius: 9px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); outline: none; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } /* --- вход --- */ .auth { min-height: 100dvh; display: grid; place-items: center; padding: 20px; } .auth .card { width: 100%; max-width: 380px; display: grid; gap: 14px; } .auth h1 { font-size: 19px; } .auth .sub { margin: -8px 0 0; color: var(--ink-dim); font-size: 13.5px; } .auth label { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-mute); } .auth .hint { margin: 0; font-size: 12px; color: var(--ink-mute); line-height: 1.5; } .err { padding: 10px 12px; border-radius: 9px; font-size: 13.5px; color: var(--danger); background: var(--danger-soft); border-left: 3px solid var(--danger); } /* --- оболочка --- */ .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px max(14px, env(safe-area-inset-left)); padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); } .brand { font-weight: 600; } .tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } .tabs button { padding: 7px 12px; font-size: 13.5px; background: transparent; border-color: transparent; color: var(--ink-dim); } .tabs button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .who .role { color: var(--ink-mute); } .who form { margin: 0; } .who button { padding: 6px 10px; font-size: 12px; } main { padding: 14px max(14px, env(safe-area-inset-left)) 60px; } .loading { color: var(--ink-mute); padding: 30px 4px; } /* Строка состояния связи. LTE на карьере глушат на часы, и «данные не менялись» надо отличать от «связь пропала». */ .state { padding: 9px 16px; font-size: 13px; border-bottom: 1px solid var(--line); } .state.bad { background: var(--danger-soft); color: var(--danger); } .state.warn { background: var(--accent-soft); color: var(--accent); } .state.ok { background: var(--accent-soft); color: var(--ok); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .card-head h2 { flex: 1; } .warn-card { border-color: var(--accent); } .warn { padding: 10px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); background: var(--accent-soft); border-left: 3px solid var(--accent); } .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); } .kpi-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } .kpi-sub { font-size: 12.5px; color: var(--ink-mute); } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-dim); padding: 7px 8px; border-bottom: 1px solid var(--line); } td { padding: 8px; border-bottom: 1px solid var(--line-soft); } tbody tr:hover td, tr:hover td { background: var(--accent-soft); } tr.stale td { background: var(--accent-soft); } /* Заявка, заведённая после начала погрузки. Не ошибка ввода, а вопрос: план, записанный задним числом, планом не является. */ tr.bad-row td { background: var(--danger-soft); } .bad-mark { color: var(--danger); font-weight: 600; } td.empty { text-align: center; color: var(--ink-mute); padding: 22px 8px; } .rows { display: flex; flex-direction: column; } .row { display: flex; gap: 12px; align-items: baseline; cursor: pointer; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .row-main { flex: 1; } .row-side { color: var(--ink-mute); font-size: 12.5px; } /* --- воронка --- */ /* --- воронка сделок --- Колонки прокручиваются вбок: этапов восемь, и ужимать их до нечитаемых полосок ради того, чтобы влезли все сразу, — хуже, чем прокрутка. */ .funnel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 6px; align-items: start; } .funnel-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; } .funnel-head { padding: 11px 13px 8px; border-bottom: 1px solid var(--line-soft); } .funnel-title { font-size: 13px; font-weight: 600; } .funnel-sub { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; } .funnel-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 70px; } /* Колонка, над которой держат карточку. Подсветка обязана быть заметной: без неё непонятно, куда именно упадёт сделка, и промах виден только после того, как этап уже сменился. */ .funnel-body.drop-here { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 9px; } .funnel-empty { color: var(--ink-mute); font-size: 12px; text-align: center; padding: 10px 0; } .deal { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: grab; } .deal:hover { border-color: var(--ink-mute); } .deal.dragging { opacity: .4; cursor: grabbing; } .deal-stale { border-left: 3px solid var(--accent); } .deal-title { font-size: 13px; line-height: 1.35; } .deal-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: var(--ink-mute); } .deal-sum { color: var(--ink-dim); font-weight: 600; } .deal-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink-mute); } .deal-idle { color: var(--accent); } /* --- карточка сделки --- */ .lead-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; } @media (min-width: 620px) { .lead-grid { grid-template-columns: 1fr 1fr; } } .lead-field { display: grid; gap: 4px; } .lead-field input, .lead-field select { width: 100%; } .feed-call { border-left: 2px solid var(--accent); padding-left: 8px; } .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; } .chip { padding: 7px 11px; font-size: 12.5px; } .chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .form select, .form input { width: auto; flex: 1 1 150px; } .bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .bar .muted.bad { color: var(--danger); font-weight: 600; } .post { font: 13px/1.55 "Consolas", "SF Mono", monospace; min-height: 160px; resize: vertical; } /* --- карточка сделки --- */ .modal { position: fixed; inset: 0; z-index: 60; padding: 20px; background: rgba(0, 0, 0, .55); overflow-y: auto; display: grid; place-items: start center; } .modal-card { width: 100%; max-width: 620px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; } .feed { margin-top: 14px; border-top: 1px solid var(--line); } .feed-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .feed-when, .feed-who { color: var(--ink-mute); font-size: 11.5px; } /* --- происхождение данных --- Не уведомление, а свойство данных: закрыть нельзя, висит над всеми разделами, пока база наполнена синтетикой. */ .origin { padding: 9px 16px; font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); background: var(--accent-soft); border-bottom: 1px solid var(--accent); } /* --- накопители --- */ .delta { font-size: 12px; margin-top: 4px; display: block; } .delta.up { color: var(--ok); } .delta.down { color: var(--danger); } /* --- аномалии --- */ .sev { font-weight: 600; font-size: 12.5px; } .sev-critical { color: var(--danger); } .sev-high { color: var(--accent); } .sev-medium { color: var(--ink-dim); } .sev-low { color: var(--ink-mute); } .chip.sev-critical.on { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); } /* --- журнал --- */ .marks { display: inline-flex; gap: 4px; flex-wrap: wrap; } .mark-tag { min-width: 20px; text-align: center; padding: 1px 5px; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: help; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); } /* --- сотрудники и доступ --- */ .pw-link { color: var(--ink-mute); font-size: 12.5px; text-decoration: none; } .pw-link:hover { color: var(--accent); } /* Выбор темы. Ширину и размер шрифта перебиваем: общее правило для полей ввода растягивает их на всю строку и ставит 16 px, что в шапке лишнее. */ .theme-pick { width: auto; padding: 5px 8px; font-size: 12px; background: transparent; color: var(--ink-dim); border-color: var(--line); } .theme-pick:hover { border-color: var(--ink-mute); } .warn-mark { color: var(--accent); font-weight: 600; } tr.muted-row td { opacity: .55; } .field-label { color: var(--ink-mute); font-size: 12.5px; align-self: center; } /* Список прав. Одна колонка на узком экране, две на широком: строки разной высоты (у части прав есть предупреждение), и сетка из трёх колонок превращается в рваный забор. */ .perm-grid { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 12px; border-top: 1px solid var(--line); } @media (min-width: 700px) { .perm-grid { grid-template-columns: 1fr 1fr; gap: 2px 18px; } } .perm { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .perm input { width: auto; flex: none; margin-top: 2px; cursor: pointer; } .perm input:disabled { cursor: not-allowed; } .perm input:disabled + .perm-text { opacity: .5; } .perm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .perm-title { font-size: 13.5px; line-height: 1.35; } /* Почему это право опасно — рядом с галочкой, а не в документации. Решение принимается здесь, значит и цена решения должна быть здесь. */ .perm-warn { font-size: 11.5px; line-height: 1.4; color: var(--accent); } .perm-note { font-size: 11.5px; color: var(--ink-mute); font-style: italic; } /* Временный пароль. Показывается один раз, поэтому крупно и моноширинно: его переписывают или диктуют, а «l» и «1» на глаз не различаются. */ .temp-pass { margin: 12px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--accent); } .temp-login { color: var(--ink-mute); font-size: 12px; margin-bottom: 6px; } .temp-value { font-family: "Consolas", "SF Mono", monospace; font-size: 22px; letter-spacing: 1.5px; user-select: all; overflow-wrap: anywhere; } /* --- телефон --- */ @media (max-width: 720px) { .top { gap: 8px; padding: 8px 12px; } .brand { flex: 1 1 100%; font-size: 14px; } .tabs { order: 3; flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; } .tabs button { white-space: nowrap; } .kpis { grid-template-columns: 1fr; } .form select, .form input, .form button { flex: 1 1 100%; } .feed-row { grid-template-columns: 1fr; gap: 2px; } /* Ниже 16 px Safari зумит страницу при фокусе на поле — включая список выбора. Возврат из зума руками, и это раздражает сильнее, чем лишние пара пикселей в шапке. */ .theme-pick { font-size: 16px; } /* Таблицы разворачиваются в карточки. * * Боковая прокрутка на телефоне работает, но читать ею таблицу из девяти * колонок нельзя: видно две, а сравнить надо все. Подпись каждому полю * ставит `table()` в app.js атрибутом data-label — поэтому карточкой * становится ЛЮБАЯ таблица, включая те, которых ещё нет. */ table, tbody, tr, td { display: block; } thead, table > tr:first-child { display: none; } table > tr:not(:first-child), tbody tr { margin-bottom: 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); } td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 3px 0; border: 0; text-align: left; white-space: normal; /* Длинное значение без пробелов обязано переноситься внутри карточки, иначе оно растянет её за край экрана. */ overflow-wrap: anywhere; } td::before { content: attr(data-label); flex: none; max-width: 45%; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-mute); } /* Первая ячейка — заголовок карточки, подпись ей не нужна. */ tr > td:first-child { display: block; font-size: 16px; font-weight: 600; padding-bottom: 7px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); } tr > td:first-child::before { display: none; } td.empty { text-align: center; color: var(--ink-mute); } td.empty::before { display: none; } tr:hover td, tbody tr:hover td { background: transparent; } tr.stale, tr.bad-row { border-color: var(--accent); border-left: 3px solid var(--accent); } tr.bad-row { border-color: var(--danger); border-left-color: var(--danger); } /* Карточка сделки во весь экран: на телефоне окно посреди экрана оставляет по краям бесполезные поля. */ .modal { padding: 0; } .modal-card { min-height: 100dvh; border-radius: 0; border: 0; } }