/* Витрина спроса 100sp — оформление. * * Смысловое решение, из которого выводится палитра: НАКОПЛЕННЫЙ счётчик * заказов серый, СУТОЧНЫЙ прирост цветной. Накопленное вводит в заблуждение * (это вся жизнь карточки, а не сегодня), поэтому глаз не должен цепляться * за него первым. Цвет здесь несёт смысл, а не украшает. * * Числа набраны моноширинным: это прибор, колонки должны сходиться. */ :root { /* Нативные контролы (полосы прокрутки, календарь, выпадающие списки) красит браузер, и он обязан знать, какая тема сейчас: светлый календарь на тёмной странице выглядит поломкой. */ color-scheme: light; --paper: #f4f5f2; --panel: #ffffff; --panel-2: #fafbf8; --ink: #101317; --ink-2: #545a61; --ink-3: #838a92; --rule: #e3e5df; --rule-2: #eceee8; /* поток — суточный прирост, единственная честная величина */ --flow: #1d6e5f; --flow-dim: #d8e8e3; /* запас — накопленное. Намеренно нейтрален */ --stock: #8a9199; /* давление — конкурент дешевле, деградация сбора, ошибки */ --press: #8c3a5a; --press-dim:#f3e2e8; --warn: #9a6b18; /* СВЕТОФОР ПОЛЕЙ КАРТОЧКИ. Три пары, а не три цвета в разметке: ночная палитра отдельная, и красный, подобранный для белого фона, на тёмном читается как поломка вёрстки. Оттенки намеренно бледные — владелец просил «чуть-чуть», а цвет здесь только ускоряет поиск глазами: смысл несёт слово рядом. */ --tone-ok: #e6f1ed; --tone-weak: #f7ecd9; --tone-bad: #f7e4ea; --radius: 9px; --radius-s: 6px; --rail: 212px; --shadow: 0 1px 2px rgba(16,19,23,.05), 0 8px 24px -18px rgba(16,19,23,.35); --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* Ночная тема. Выбирается в «Настройках» и приезжает атрибутом на , * а не подхватывается по системе: сервис смотрят с разных машин, и цвет * страницы не должен зависеть от того, за каким компьютером сегодня сели. * «Как в системе» — тоже выбор, и он тоже кончается этим атрибутом: * коротким скриптом в , до первой отрисовки. * * Смысл цвета сохраняется: поток остаётся зелёным, давление — розовым, * запас — серым. Меняется только основа, иначе тёмная тема стала бы * вторым языком, который надо учить заново. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #14161a; --panel: #1b1e23; --panel-2: #20242a; --ink: #f0f2ee; --ink-2: #a9b0b8; --ink-3: #79818a; --rule: #2a2f36; --rule-2: #23272d; --flow: #3f9e8a; --flow-dim: #1c3a35; --stock: #7d858e; --press: #c9748f; --press-dim:#3a232c; --warn: #c99a3c; --tone-ok: #1b312c; --tone-weak: #34291a; --tone-bad: #33222a; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.8); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--flow); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--flow); outline-offset: 2px; border-radius: 3px; } /* ------------------------------- каркас ------------------------------- */ .shell { display: flex; min-height: 100vh; } /* Навигация прокручивается ВМЕСТЕ со страницей, а не отдельно. Своя полоса прокрутки у меню означала два независимых движения в одном окне: колесо под курсором листало то страницу, то меню — и попасть в нужное приходилось прицельно. Теперь прокрутка одна на всё окно, а меню при длинной странице просто уезжает вверх. */ .rail { width: var(--rail); flex: 0 0 var(--rail); background: var(--panel); border-right: 1px solid var(--rule); padding: 18px 12px; } .brand { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px 18px; font-weight: 700; letter-spacing: -.02em; font-size: 17px; } .brand span { font: 500 11px/1 var(--mono); color: var(--ink-3); letter-spacing: .08em; } .rail { display: flex; flex-direction: column; } /* Группа рельсы — раскрывающаяся. Заголовок был `h6`, стал `summary`: подписи те же, но по ним теперь щёлкают и ходят с клавиатуры. */ .rail-group { margin: 0 0 10px; } .rail-group > summary { margin: 0 0 4px; padding: 5px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; font: 600 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); border-radius: var(--radius-s); } .rail-group > summary:hover { color: var(--ink-2); background: var(--rule-2); } .rail-group > summary::-webkit-details-marker { display: none; } /* Стрелка своя, а не родной треугольник: у браузеров он разный по размеру и цвету, и в узкой рельсе это видно. */ .rail-group > summary::before { content: "›"; display: inline-block; width: 8px; font-size: 13px; line-height: 1; color: var(--ink-3); transform: rotate(0deg); transition: transform .12s ease; } .rail-group[open] > summary::before { transform: rotate(90deg); } /* Счётчик очереди НА ЗАГОЛОВКЕ группы. Он висит на пункте «Задания» и отвечает на вопрос «идёт ли сейчас сбор» с любой страницы; свёрнутая группа спрятала бы единственный сигнал, ради которого счётчик и заведён. Пустой — не занимает места. */ .rail-group-n { margin-left: auto; } .rail-group-n:empty { display: none; } .rail-group[open] .rail-group-n { display: none; } .rail a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--radius-s); color: var(--ink-2); font-size: 14px; } .rail a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; } .rail a.on { background: var(--flow-dim); color: var(--flow); font-weight: 600; } .rail a .n { font: 600 11px/1 var(--mono); color: var(--ink-3); } .rail a.on .n { color: var(--flow); } .main { flex: 1; min-width: 0; } .wrap { max-width: 1240px; margin: 0 auto; padding: 26px 26px 72px; } /* ------------------------------ заголовки ----------------------------- */ .page-head { margin: 0 0 20px; } .eyebrow { font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 0 0 5px; } h1 { font-size: 27px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 6px; font-weight: 680; } h2 { font-size: 16px; letter-spacing: -.01em; margin: 30px 0 10px; font-weight: 650; } h3 { font-size: 14px; margin: 20px 0 8px; font-weight: 650; } .lede { color: var(--ink-2); margin: 0; max-width: 62ch; font-size: 14.5px; } .note { color: var(--ink-3); font-size: 13px; margin: 8px 0 0; max-width: 70ch; } /* Строка НАД плашкой — то, что сказано один раз на всю таблицу, чтобы не повторять это в каждой строке. `.note` задуман как подпись СНИЗУ и нижнего отступа не имеет: прилипнув к краю плашки (мерили — 2 px), он читается как часть шапки таблицы, а не как отдельная мысль. */ .note + .card { margin-top: 10px; } /* -------------------------------- блоки ------------------------------- */ .card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 14px; } .card.pad-0 { padding: 0; overflow: hidden; } .grid { display: grid; gap: 14px; } .grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* показатели */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin: 0 0 18px; } .tile { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 11px 13px; } .tile b { display: block; font: 640 23px/1.15 var(--mono); letter-spacing: -.03em; } .tile span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); } .tile.flow b { color: var(--flow); } .tile.press b { color: var(--press); } .tile.stock b { color: var(--stock); } .tile small { display: block; font: 400 11.5px/1.4 var(--sans); color: var(--ink-3); margin-top: 4px; } /* -------------------------------- таблицы ----------------------------- */ .scroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: 14px; } thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; font: 600 10.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); text-align: left; /* Заголовки ПЕРЕНОСЯТСЯ. «Оборот за сутки» в одну строку распирает колонку шире, чем нужно самим числам, и таблица уезжает за край экрана из-за подписи, а не из-за данных. */ white-space: normal; vertical-align: bottom; padding: 9px 12px; border-bottom: 1px solid var(--rule); } /* Числовым колонкам перенос заголовка не мешает, а вот самим числам разрываться нельзя. */ thead th.num { white-space: normal; } tbody td { padding: 9px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--panel-2); } .num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .flow-n { color: var(--flow); font-weight: 620; } .stock-n { color: var(--stock); } .press-n { color: var(--press); font-weight: 620; } /* Длинная ячейка режется многоточием, полный текст уходит в подсказку. Ячейка, разъехавшаяся на четыре строки, ломает и таблицу, и чтение. Подсказку дописывает tables.js — держать её в каждом шаблоне значило бы забыть в половине. */ /* Нижний предел — 150, а не 200: он платится ВСЕГДА, даже когда в колонке короткая строка, и три таких колонки в узком окне выталкивали таблицу за край. Когда место есть, браузер всё равно отдаёт его этой колонке до самого max-width, так что на широком экране ничего не изменилось. */ td.wide, td.clip { min-width: 150px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.compact td.wide, table.compact td.clip { max-width: 280px; } /* Уточнение второй строкой режется отдельно: это свой блок. */ td.wide .sub-line, td.clip .sub-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td.wide[title], td.clip[title] { cursor: help; } /* Узкая ячейка, помеченная вручную, свой предел не теряет. */ td.clip[style*="max-width"] { min-width: 0; } /* Плотная таблица: помещается в окно без горизонтальной прокрутки. Вторая строка в ячейке несёт уточнение — так колонок нужно вдвое меньше. */ table.compact { font-size: 13.5px; } table.compact th, table.compact td { padding: 7px 10px; } table.compact td.threat { color: var(--ink-2); font-size: 12.5px; min-width: 150px; white-space: normal; } /* Длинное имя обрезается многоточием, а целиком показывается подсказкой. Перенос по словам раздувал бы строку втрое и разъезжал таблицу; обрезка без подсказки прятала бы часть названия совсем. */ .ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; } .ellipsis[title] { cursor: help; } /* В широкой ячейке названия режем жёстче: колонка «что рекламируют» легко уносит таблицу за край экрана, а имя закупки читается и обрезанным. */ td.wide .ellipsis { max-width: 300px; } table.compact td.wide .ellipsis { max-width: 260px; } /* Обрезка на самой ячейке — когда её содержимое собирает помощник (ссылка на товар со значком «открыть на площадке»), и обернуть текст в свой span уже негде. Полное имя остаётся в подсказке ячейки. */ td.clip .ext { display: none; } /* значок ↗ съедал бы место под имя */ /* Заголовки этой таблицы переносятся: «Рекламодателей» в одну строку съедает ширину, которой не хватает данным. */ /* Класс остался у таблиц, где перенос был включён вручную: теперь он общий, а класс не мешает. */ table.wrap-head thead th { line-height: 1.25; } .sub-line { display: block; font: 400 11.5px/1.4 var(--sans); color: var(--ink-3); margin-top: 1px; } .num .sub-line { font-family: var(--mono); } .th-hint { display: block; font: 400 9.5px/1.3 var(--mono); color: var(--ink-3); text-transform: none; letter-spacing: .02em; } .mark-manual { color: var(--ink-3); font-size: 12px; cursor: help; margin-left: 3px; } /* Миниатюра баннера. Ширина задана жёстко: у креативов она своя у каждого, и колонка без предела растягивалась по самому широкому баннеру, утаскивая таблицу за край экрана. Пропорции сохраняет object-fit. */ .thumb { display: block; width: 64px; height: 34px; object-fit: contain; border-radius: 4px; background: var(--rule-2); } th[data-sort] { cursor: pointer; user-select: none; } th[data-sort]:hover { color: var(--ink); } th[data-sort]::after { content: "↕"; opacity: .3; margin-left: 5px; font-size: 10px; } th[data-sort].asc::after { content: "↑"; opacity: .9; } th[data-sort].desc::after { content: "↓"; opacity: .9; } /* ------------------------------- элементы ----------------------------- */ .chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 11.5px/1.7 var(--sans); white-space: nowrap; background: var(--rule-2); color: var(--ink-2); } .chip-flow { background: var(--flow-dim); color: var(--flow); } .chip-press { background: var(--press-dim); color: var(--press); } .chip-warn { background: rgba(154,107,24,.14); color: var(--warn); } .chip-me { background: var(--flow); color: #fff; } .chip-mute { background: var(--rule-2); color: var(--ink-3); } /* Короткая фишка с подробностью в подсказке. Курсор — единственное, чем видно, что подсказка вообще есть: без него уведённый туда текст не прячется, а исчезает. То же и у второй строки ячейки. */ .chip[title], .sub-line[title] { cursor: help; } .ent { border-bottom: 1px solid transparent; } .ent:hover { text-decoration: none; border-bottom-color: currentColor; } /* Ссылка красится как ссылка; нессылочное имя (сущность без id приходит span-ом) остаётся цветом текста. */ a.ent { color: var(--flow); } span.ent { color: var(--ink); } .ent-org, .ent-seg { font-weight: 560; } .ext { color: var(--ink-3); font-size: 12px; text-decoration: none; } .ext:hover { color: var(--flow); text-decoration: none; } .empty, .muted { color: var(--ink-3); } .mono { font-family: var(--mono); } /* стежки — суточная динамика. Подпись интерфейса */ .stitches { display: block; } .stitches .stitch { fill: var(--flow); } .stitches.tone-stock .stitch { fill: var(--stock); } .stitches.tone-press .stitch { fill: var(--press); } .stitches .stitch-gap { fill: var(--ink-3); opacity: .35; } .stitches .stitch { transition: opacity .12s ease; } .stitches:hover .stitch { opacity: .55; } .stitches .stitch:hover { opacity: 1; } .sparkline.tone-stock { stroke: var(--stock); } .sparkline.tone-flow { stroke: var(--flow); } .meter { display: inline-block; width: 74px; height: 6px; border-radius: 3px; background: var(--rule-2); vertical-align: middle; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--flow); border-radius: 3px; } .meter.tone-stock i { background: var(--stock); } .meter-empty { opacity: .4; } /* Наш магазин в списках: рамка вместо тега «мы» — тег дублировал бы соседнюю колонку отношения. */ .ent.is-me { background: color-mix(in srgb, var(--flow) 10%, transparent); border: 1px solid color-mix(in srgb, var(--flow) 35%, transparent); border-radius: 5px; padding: 1px 7px; font-weight: 620; } .ent.is-me:hover { border-color: var(--flow); } /* состав целого одной полосой */ .sharebar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--rule-2); } .sharebar i { display: block; height: 100%; } .sh-a { background: var(--flow); } .sh-b { background: color-mix(in srgb, var(--flow) 72%, var(--paper)); } .sh-c { background: color-mix(in srgb, var(--flow) 50%, var(--paper)); } .sh-d { background: var(--press); } .sh-e { background: color-mix(in srgb, var(--press) 60%, var(--paper)); } .sh-f { background: var(--warn); } .sh-rest { background: var(--rule); } .sh-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; } .sh-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); } .sh-key b { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .sh-key .mono { color: var(--ink-3); font-size: 11.5px; } /* компактные показатели внутри карточки */ .mini-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--rule-2); } .mini-tiles > div { min-width: 0; } .mini-tiles b { display: block; font: 640 17px/1.2 var(--mono); letter-spacing: -.02em; } .mini-tiles span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; } /* сравнение «мы — рынок» одной строкой */ .versus { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .versus > div { min-width: 0; } .versus b { display: block; font: 640 21px/1.2 var(--mono); letter-spacing: -.03em; } .vs-label { display: block; font-size: 11.5px; color: var(--ink-3); } .vs-mid { align-self: flex-end; padding-bottom: 3px; } .vs-sep { width: 1px; height: 34px; background: var(--rule); } /* рейтинги полосами */ .ranks { display: flex; flex-direction: column; gap: 7px; } .rank { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; gap: 10px; align-items: center; font-size: 13.5px; } .rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-bar { height: 9px; border-radius: 5px; background: var(--rule-2); overflow: hidden; } .rank-bar i { display: block; height: 100%; border-radius: 5px; background: var(--flow); transition: width .5s cubic-bezier(.2,.7,.3,1); } .rank-bar.tone-stock i { background: var(--stock); } .rank-bar.tone-press i { background: var(--press); } .rank-val { font: 620 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); } /* накопление заливкой */ .area .area-fill { fill: var(--flow); opacity: .12; } .area .area-line { stroke: var(--flow); stroke-width: 1.8; stroke-linejoin: round; } .area circle { fill: var(--flow); } .area.tone-stock .area-fill { fill: var(--stock); } .area.tone-stock .area-line { stroke: var(--stock); } .area.tone-stock circle { fill: var(--stock); } /* карточка сегмента: сначала главное сравнение, потом факты списком */ .seg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .seg-head h3 { margin: 0; font-size: 16px; } .seg-prices { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 14px; } .seg-price { font: 640 24px/1.1 var(--mono); letter-spacing: -.03em; } .seg-vs { color: var(--ink-3); font-size: 12px; padding-bottom: 4px; } .seg-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rule-2); } .seg-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .seg-facts dt { color: var(--ink-3); font-size: 12.5px; } .seg-facts dd { margin: 0; font: 620 14px/1.3 var(--mono); } /* вердикты сегментов */ .verdict { display: block; font-weight: 620; } .verdict + .why { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; } .v-good .verdict { color: var(--flow); } .v-bad .verdict { color: var(--press); } .v-mute .verdict { color: var(--ink-2); } /* расписание: время слева крупно, дальше что и когда дальше */ .sched-list { display: flex; flex-direction: column; gap: 10px; } .sched.off { opacity: .62; } .sched-main { display: flex; gap: 18px; align-items: flex-start; } .sched-when { flex: 0 0 116px; } .sched-time { font: 640 21px/1.15 var(--mono); letter-spacing: -.03em; } .sched-days { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .sched-what { flex: 1; min-width: 0; } .sched-what h3 { margin: 0 0 3px; font-size: 15.5px; } .sched-what p { margin: 0; font-size: 13px; } .sched-next { color: var(--ink-3); font-size: 12.5px; margin-top: 5px !important; } .sched-next b { color: var(--ink-2); font-family: var(--mono); font-weight: 620; } .sched-act { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; } .sched-act button { font-size: 13px; padding: 6px 11px; } .sched-edit { margin-top: 12px; border-top: 1px solid var(--rule-2); padding-top: 10px; } .sched-edit summary { cursor: pointer; color: var(--ink-3); font-size: 13px; } .sched-edit[open] summary { margin-bottom: 10px; } /* быстрые кнопки заданий */ .job-quick { display: flex; flex-wrap: wrap; gap: 8px; } /* карточки отчётов */ .rep-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; } .rep-head h3 { margin: 0; font-size: 15px; } .rep-periods { display: flex; flex-wrap: wrap; gap: 5px; } .rep-periods .chip { font-family: var(--mono); font-size: 11.5px; } .rep-last { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; } .rep-last b { color: var(--ink); font-family: var(--mono); } .rep-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rep-pick input[type=date] { width: 100%; } .rep-warn { font-size: 12.5px; } .rep-links { display: flex; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule-2); font-size: 12.5px; } /* ------------------------------ управление ---------------------------- */ button, .btn { font: 550 14px/1.2 var(--sans); padding: 8px 14px; border-radius: var(--radius-s); border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: border-color .12s ease, background .12s ease, transform .06s ease; } button:hover, .btn:hover { border-color: var(--ink-3); text-decoration: none; } button:active { transform: translateY(1px); } button.primary, .btn.primary { background: var(--flow); border-color: transparent; color: #fff; } button.primary:hover { filter: brightness(1.08); } button.ghost { border-color: transparent; background: transparent; color: var(--ink-2); } /* Кнопка, после которой прежнего состояния не вернуть, выглядит иначе остальных: восстановление базы стоит рядом с обычными «сохранить», и промах мышью не должен обходиться в накопленную историю. */ button.danger, .btn.danger { background: var(--press); border-color: transparent; color: #fff; } button.danger:disabled { filter: grayscale(.4); cursor: progress; } /* Дата в переключателе периода. Стоит В ОДНОМ РЯДУ с кнопками горизонта намеренно: длина окна и его конец — один вопрос, и разносить их по разным местам страницы значит заставлять искать вторую половину. */ .win-date { display: flex; align-items: center; gap: 6px; } .win-date input[type=date] { width: auto; padding: 7px 10px; font-size: 13.5px; color: var(--ink-2); } .win-date-off { font-size: 17px; line-height: 1; color: var(--ink-3); text-decoration: none; padding: 0 2px; } .win-date-off:hover { color: var(--press); text-decoration: none; } .steps { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; } .steps li { margin-bottom: 7px; } input, select, textarea { font: 14px/1.4 var(--sans); padding: 8px 10px; width: 100%; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); } /* Рамка меняет цвет, но обводку клавиатурного фокуса не гасим: `outline: none` перебивал общий `:focus-visible`, и человек, идущий по форме табом, терял место в ней. */ input:focus, select:focus { border-color: var(--flow); } input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; } label { display: block; font-size: 12.5px; color: var(--ink-3); margin: 0 0 4px; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .row > div { flex: 1; min-width: 150px; } .row > div.tight { flex: 0 0 auto; min-width: 0; } /* Форма, у полей которой есть подсказки под ними. ПОЧЕМУ НЕ `.row`. Там колонки выравниваются по нижнему краю, и для панели фильтров это верно: под полями ничего нет, низ у них общий. Стоит появиться подсказкам разной длины — и выравнивается низ ПОДСКАЗКИ, а поле уезжает вверх тем сильнее, чем длиннее текст под ним. Замерено на странице подачи счёта до этой правки: подписи стояли на 165 и 184 пикселях, поля на 188 и 207, кнопка на 243 — три разных уровня в одном ряду, и это видно глазом. Здесь колонки выравниваются по ВЕРХУ: подписи в одну линию, поля в одну, подсказки в одну. Рваным остаётся только низ, и это нормально: подсказки разной длины, а не поля разной высоты. */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 14px; align-items: start; } .form-grid > .field { display: flex; flex-direction: column; min-width: 0; } .form-grid > .field > label { margin: 0 0 5px; } .form-grid > .field > .sub-line { margin-top: 6px; } /* Высота поля задана ЧИСЛОМ, а не выведена из отступов. Текстовое поле и выбор файла считают её по-разному: у второго внутри своя кнопка со своими полями, и при одинаковых отступах он выходил на два пикселя выше. Два пикселя незаметны поодиночке и заметны, когда поля стоят рядом. */ /* ВЫСОТА ЧИСЛОМ, а не выведенная из отступов: родные элементы (список, выбор файла) считают её иначе текстового поля, и «одинаковые» поля расходятся на пиксель. Правило стояло только у `.form-grid`, а `.edit-grid` про него не знал — и список в разделе «Пользователи» был на пиксель выше соседей. То же правило, вызванное не везде. */ .form-grid input, .form-grid select, .edit-grid input, .edit-grid select { height: 38px; } input[type="file"] { padding: 0 10px; line-height: 36px; } input[type="file"]::file-selector-button { font: 550 12.5px/1.2 var(--sans); margin-right: 10px; padding: 4px 11px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--panel); color: var(--ink-2); cursor: pointer; } input[type="file"]::file-selector-button:hover { border-color: var(--flow); color: var(--flow); } .flash { padding: 11px 14px; border-radius: var(--radius-s); margin: 0 0 12px; font-size: 14px; border: 1px solid transparent; } .flash.ok { background: var(--flow-dim); color: var(--flow); } .flash.error { background: var(--press-dim); color: var(--press); } /* Оговорка: работа сделана, но к результату есть замечание. Ни зелёное, ни красное здесь не годятся — первое умалчивает, второе объявляет сделанное несделанным. */ .flash.warn { background: var(--paper); color: var(--ink); border-color: var(--rule); } pre.log { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 12px 14px; overflow: auto; max-height: 460px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--ink-2); margin: 0; } pre.log b { color: var(--press); font-weight: 700; } /* пропавшие с витрин: из справочника не удаляются, но и не равны живым */ tr.gone td { opacity: .55; } tr.gone td:first-child::after { content: " · пропал"; color: var(--ink-3); font-size: 11px; } /* ------------------------------- движение ----------------------------- */ @media (prefers-reduced-motion: no-preference) { .stagger > * { animation: rise .34s cubic-bezier(.2,.7,.3,1) backwards; } .stagger > *:nth-child(2) { animation-delay: .04s; } .stagger > *:nth-child(3) { animation-delay: .08s; } .stagger > *:nth-child(4) { animation-delay: .12s; } .stagger > *:nth-child(5) { animation-delay: .16s; } .stagger > *:nth-child(6) { animation-delay: .2s; } .stagger > *:nth-child(7) { animation-delay: .24s; } @keyframes rise { from { opacity: 0; transform: translateY(5px); } } .pulse { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .45; } } } /* ------------------------------- телефон ------------------------------ */ @media (max-width: 900px) { .shell { display: block; } .rail { width: auto; height: auto; position: static; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--rule); } .brand { padding: 0 12px 0 0; } /* В узкой рельсе группы не сворачиваются: пунктов на экране и так мало, а лишний щелчок до раздела дороже сэкономленной строки. */ .rail-group { margin: 0; display: contents; } .rail-group > summary { display: none; } .rail a { padding: 6px 10px; } .wrap { padding: 18px 14px 56px; } h1 { font-size: 23px; } .tiles { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } } /* ------------------- почасовая динамика гладкой нитью ------------------ */ /* Внутри суток спрос — величина непрерывная: покупатель заходит и уходит, а не «оформляет ровно в 14:00». Отсюда линия, а не стежки, которыми рисуются дни. Восстановленные часы отличаются штриховкой и отсутствием точки: оценка не должна читаться как измерение. */ .curves { --cv: var(--flow); } .curves svg { display: block; overflow: visible; } .cv-grid { stroke: var(--rule-2); stroke-width: 1; } .cv-ytick, .cv-xtick { font: 10.5px/1 var(--mono); fill: var(--ink-3); } .cv-gapband { fill: var(--rule-2); opacity: .5; } @media (prefers-color-scheme: dark) { .cv-gapband { opacity: .35; } } .cv-line { stroke: var(--cv); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cv-dot { fill: var(--cv); } .cv-dot-est { fill: none; stroke: var(--cv); stroke-width: 1.2; opacity: .55; } .cv-line.tone-flow, .cv-dot.tone-flow, .cv-dot-est.tone-flow { --cv: var(--flow); } .cv-line.tone-press, .cv-dot.tone-press, .cv-dot-est.tone-press { --cv: var(--press); } .cv-line.tone-stock, .cv-dot.tone-stock, .cv-dot-est.tone-stock { --cv: var(--stock); } .cv-line.tone-warn, .cv-dot.tone-warn, .cv-dot-est.tone-warn { --cv: var(--warn); } .cv-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; } .cv-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); --cv: var(--flow); } .cv-key b { width: 14px; height: 3px; border-radius: 2px; background: var(--cv); display: inline-block; } .cv-key.tone-press { --cv: var(--press); } .cv-key.tone-stock { --cv: var(--stock); } .cv-key.tone-warn { --cv: var(--warn); } .cv-key .mono { color: var(--ink-3); font-size: 11.5px; } /* число, за которым стоит список: кликается так же, как ссылка, но не выглядит навигацией по сущности */ .drill { border-bottom: 1px dashed color-mix(in srgb, var(--flow) 45%, transparent); font-variant-numeric: tabular-nums; } .drill:hover { border-bottom-style: solid; text-decoration: none; } td.num .drill { display: inline-block; } /* --------------------- диагностика разбора ---------------------------- */ /* Сломанный раздел должен быть виден с первого взгляда: чинить его надо сегодня, а не когда заметят расхождение в отчётах. */ .diag { border-left: 3px solid var(--rule); } .diag-broken { border-left-color: var(--press); } .diag-warn { border-left-color: var(--warn); } .diag-ok { border-left-color: var(--flow); } .diag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .diag-head h3 { margin: 0; font-size: 15.5px; font-family: var(--mono); } .diag-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 7px 18px; margin: 0 0 12px; } .diag-facts > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; } /* Подпись УМЕЕТ переноситься, значение — нет. Раньше подпись не сжималась вовсе (`flex: 0 0 auto`), и длинная — «порог похожести на момент срабатывания» — вылезала за свою ячейку сетки и налезала на соседнюю: на карточке заявки два разных факта читались как одно слипшееся слово. Теперь она переносится на вторую строку своей же ячейки. Значение при этом по-прежнему режется многоточием, а не переносится: ему отдана вся оставшаяся ширина (`flex: 1 1 0`), поэтому короткие пары — а их большинство — стоят в одну строку ровно как прежде. */ .diag-facts dt { color: var(--ink-3); font-size: 12.5px; flex: 0 1 auto; min-width: 0; } .diag-facts dd { margin: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; } .diag-drop { background: var(--press-dim); color: var(--ink); padding: 10px 12px; border-radius: var(--radius-s); font-size: 13.5px; margin: 0 0 10px; } .diag-drop code { font: 12.5px/1.5 var(--mono); background: var(--panel); padding: 1px 5px; border-radius: 3px; } .chip-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } /* ---------------------------- вход и доступ --------------------------- */ /* Страница входа не имеет навигации: показывать меню тому, кто ещё не представился, значит обещать разделы, которых он может и не получить. */ body.gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .gate-box { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 26px 22px; } .gate-box h1 { font-size: 21px; margin: 14px 0 16px; } .gate-box .brand { padding: 0; } .gate-box .note { margin-top: 16px; } /* кто вошёл — внизу навигации, рядом с выходом */ /* Блок пользователя — сразу под меню, а не прижат к низу окна: прижатый к низу он на длинной странице оказывался бы за экраном, в паре тысяч пикселей от самого меню. */ .rail-user { margin: 4px 0 0; padding: 12px 10px 4px; border-top: 1px solid var(--rule-2); } .rail-who { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-role { font-size: 11.5px; color: var(--ink-3); margin: 1px 0 6px; } .rail-version { font-size: 11px; color: var(--ink-3); opacity: .7; font-family: var(--mono, ui-monospace, monospace); margin: 0 0 6px; } .rail-out { display: inline-block; font-size: 12.5px; color: var(--ink-3); padding: 0 !important; } .rail-out:hover { color: var(--press); background: none !important; } /* разделы роли — сеткой по группам меню */ .perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; } .perm-col .eyebrow { margin-bottom: 6px; } .perm { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); margin: 0 0 5px; cursor: pointer; } .perm input { width: auto; margin: 0; } /* ------------------------------ пагинация ----------------------------- */ /* Появляется сама на таблицах длиннее тридцати строк. Стоит под таблицей и СНАРУЖИ прокручиваемой области: внутри .scroll он уезжал бы вбок вместе с широкой таблицей и терялся из виду. */ .pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--rule-2); font-size: 13px; color: var(--ink-2); } .card.pad-0 > .pager { background: var(--panel-2); border-radius: 0 0 var(--radius) var(--radius); } .pg-info { flex: 1; min-width: 140px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .pg-nav { display: inline-flex; align-items: center; gap: 4px; } .pg-nav button { padding: 2px 10px; font-size: 16px; line-height: 1.2; border: 1px solid var(--rule); background: var(--panel); } .pg-nav button:disabled { opacity: .35; cursor: default; } .pg-nav button:disabled:hover { border-color: var(--rule); } .pg-page { min-width: 54px; text-align: center; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .pg-size { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; color: var(--ink-3); } .pg-size select { width: auto; padding: 4px 8px; font-size: 12.5px; } @media (max-width: 900px) { .pager { gap: 10px; } .pg-info { flex-basis: 100%; } } /* Советы, посчитанные кодом, из проекта удалены: что делать с рекламой, теперь пишет модель. Стили `.adv*` ушли вместе с ними; ниже — оформление вывода модели, оно самостоятельное. */ /* Вывод, написанный моделью. Оформлен как посчитанный совет (`.adv`) и намеренно: читатель не должен гадать, кем вывод сделан по виду блока — об этом говорит подпись с датой и моделью, а не оформление. Отличие одно: строка действия выделена, потому что за ней и приходят. */ .ai-point { border-left: 3px solid var(--rule); padding: 2px 0 2px 12px; margin: 0 0 14px; } .ai-point:last-child { margin-bottom: 0; } .ai-point.tone-press { border-left-color: var(--press); } .ai-point.tone-flow { border-left-color: var(--flow); } .ai-point.tone-stock { border-left-color: var(--stock); } .ai-point b { display: block; font-size: 14.5px; font-weight: 620; margin-bottom: 5px; } .ai-point p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-2); max-width: 80ch; } .ai-act { color: var(--ink) !important; font-weight: 560; } .ai-base { font-size: 12.5px !important; color: var(--ink-3) !important; } /* Подпись над блоком: кем и когда. Без даты текст читается как сегодняшнее суждение, а он мог быть написан неделю назад. */ .ai-by { font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; } /* Вывод под графиком. Не `note`: тот шириной в семьдесят знаков и на широкой плашке жмётся к левому краю, оставляя половину пустой. Здесь утверждения разложены по всей ширине и разделены точками. */ .chart-foot { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule-2); color: var(--ink-2); font-size: 13px; max-width: none; } .chart-foot > span { flex: 1 1 auto; } .chart-foot b { color: var(--ink); font-weight: 620; } /* ------------------------- настройки и пользователи ------------------- Одно поле на строку во всю ширину растягивало «Настройки» на три экрана, хотя в каждом поле лежит одно число. Поля раскладываются сеткой по ширине окна: на узком — два столбца, на широком — четыре. */ .set-grid { display: grid; gap: 14px 18px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .set label { display: block; margin: 0 0 5px; color: var(--ink); font: 550 13px/1.35 var(--sans); } .set-why { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); } /* Ключ настройки нужен для разговора о ней: в документации и в письме «поставь me_organizer» имя поля — единственное, чем на неё сослаться. */ .set-key { display: block; margin: 3px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); opacity: .7; } /* Сохранить, не долистав до низа: настроек четыре десятка, а кнопка была одна и в самом конце. */ .form-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 14px; align-items: center; margin: 16px 0 0; padding: 12px 0 14px; background: var(--paper); border-top: 1px solid var(--rule); } .form-bar .muted { font-size: 12.5px; } /* Правка пользователя раскрывается ПОД строкой во всю ширину таблицы, а не в последней колонке: в колонке форма ужималась до полосы и уезжала к правому краю экрана. */ tr.edit-row > td { background: var(--panel-2); } .edit-box { padding: 4px 2px 10px; } /* ВЫРАВНИВАНИЕ ПО ВЕРХУ, а не по низу. Ряд по нижнему краю годится, пока под полями ничего нет; появилась подсказка — и поле уезжает вверх тем сильнее, чем длиннее текст под ним. Здесь это стоило 65 px: поле пароля с подписью «пароль временный» всплыло над именем и ролью, а на снимке экрана выглядело «нормально» (BUG-61). Класс используется только в разделе «Пользователи», и обе его формы промерены браузером после правки. */ .edit-grid { display: grid; gap: 12px 16px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } /* Кнопка ряда — по НИЖНЕМУ краю: у неё под полем ничего нет, и при верхнем выравнивании она повисала бы отдельно от строки ввода. */ .edit-grid > div:last-child { align-self: end; } .edit-act { display: flex; gap: 10px; align-items: center; margin-top: 12px; } .edit-act form { margin: 0; } /* Подпись рядом с полем периода. Была inline-стилем в шаблоне — восемь одинаковых `align-self:center;font-size:13px` по разным страницам означают ненаписанный класс, а не восемь решений. */ .period-note { align-self: center; font-size: 13px; } .self-center { align-self: center; } /* Ряд действий под рядом фильтров: разделены отступом и разным весом кнопок, чтобы действие не читалось как ещё один вариант фильтра. */ .bar-split { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-2); } .small-note { font-size: 12px; } /* Выход — кнопка в форме, а не ссылка: он меняет состояние, и переход по чужой ссылке разлогинивать не должен. Выглядит по-прежнему ссылкой. */ .rail-out-form { margin: 0; } button.rail-out { background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink-3); } button.rail-out:hover { color: var(--press); } /* `display: block` здесь не украшение и стоит ИМЕННО ЗДЕСЬ, а не выше. Многоточие при обрезке работает только у блочного элемента, а это ссылка внутри меню, и правило `.rail a { display: flex }` её перебивает по частности. Из-за этого `overflow` и `text-overflow` выше стояли и МОЛЧА не действовали: длинное имя рубилось на полуслове без всякого знака, что оно длиннее. Видно только на длинном имени — потому и прожило незамеченным. */ a.rail-who { display: block; color: var(--ink); text-decoration: none; } a.rail-who:hover { color: var(--flow); } /* ------------------------- строки-действия ---------------------------- */ /* Кнопка-значок в строке таблицы. Только значок и только с title: три текстовые кнопки в строке распирают таблицу шире экрана, а колонка действий обязана оставаться узкой. */ td.acts, th.acts { width: 1%; white-space: nowrap; } .acts-row { display: flex; gap: 4px; justify-content: flex-end; } .acts-row form { margin: 0; display: inline-flex; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: var(--radius-s); border: 1px solid var(--rule); background: var(--panel); color: var(--ink-2); cursor: pointer; text-decoration: none; } .icon-btn:hover { border-color: var(--flow); color: var(--flow); } .icon-btn.primary { border-color: var(--flow); color: var(--flow); background: var(--flow-dim); } /* Значок удаления не залит цветом: заливка притягивает взгляд к самому опасному действию в строке. Цвет появляется под курсором. */ button.icon-btn.danger, .icon-btn.danger { background: var(--panel); border-color: var(--rule); color: var(--ink-3); } button.icon-btn.danger:hover, .icon-btn.danger:hover { border-color: var(--press); color: var(--press); background: var(--press-dim); } /* Выключенная строка бледнее, но читается: «выключено» это состояние, а не отсутствие. */ tr.row-off td { opacity: .62; } /* Две сетки подряд — это ряд полей и поле, которому нужна вся ширина (список доменов поставщика: их бывает пять, и в колонке шириной с соседнюю подпись они не читаются). Отступ между рядами задан здесь, а не инлайном: правило общее для всех форм, а инлайн в одной из них разойдётся со следующей. Ни одна форма проекта двух сеток подряд до этого не имела, так что чужих страниц правило не трогает. */ .form-grid + .form-grid { margin-top: 16px; } .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; } .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; } /* ------------------------------- казначей ----------------------------- Путь счёта — цепочка состояний, а не список: важен порядок и то, в каких двух точках стоит человек. Переносится по словам, потому что на узком окне девять звеньев в строку не встают, а горизонтальная прокрутка спрятала бы хвост цепочки — ровно те состояния, ради которых на неё и смотрят. */ .tr-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0; max-width: none; } .tr-arrow { color: var(--ink-3); font-size: 15px; line-height: 1; } /* Чем порт закрыт или будет закрыт. Не `seg-facts`: там подпись и значение разведены по краям двухколоночной сетки, и перечисление из четырёх адаптеров рассыпалось в столбик по одному слову. Здесь подпись и перечисление идут одной строкой и переносятся вместе. */ .tr-planned { margin: 12px 0 0; padding-top: 10px; max-width: none; border-top: 1px solid var(--rule-2); font: 620 13px/1.45 var(--mono); color: var(--ink); } .tr-planned > span { font: inherit; font-weight: 400; color: var(--ink-3); font-family: inherit; margin-right: 6px; } /* Здоровье контура списком, а не таблицей: у строки тут всего две части — что случилось и почему, — и вторая длинная. Таблица резала бы её до двух строк с подсказкой, то есть прятала бы ровно причину, ради которой на раздел и смотрят. */ .tr-health { margin: 0; padding: 0; list-style: none; } .tr-health li { padding: 8px 0 8px 12px; border-left: 3px solid var(--rule-2); } .tr-health li + li { margin-top: 6px; } /* Цвет различает ДВА состояния, и различает намеренно: красное — служба чего-то не делает, жёлтое — сделала своё и ждёт человека. Один цвет на оба означал бы либо привычку не читать красное, либо поломку, спрятанную среди ожиданий. */ .tr-health li.lvl-press { border-left-color: var(--press); } .tr-health li.lvl-press > a { color: var(--press); } .tr-health li.lvl-warn { border-left-color: var(--warn); } .tr-health li.lvl-warn > a { color: var(--warn); } .tr-health li.lvl-ok { border-left-color: var(--flow); } .tr-health .sub-line { margin-top: 2px; } /* Число в колонке «Застряло» — ссылка, и цветом она обязана отличаться от соседней «Сейчас»: обе ведут в реестр, но одна к работе, а другая к беде. */ .warn-link { color: var(--press); font-weight: 620; } /* Светофор в таблице полей заявки. Красится ЯЧЕЙКА значения: строка целиком делает таблицу пёстрой и мешает читать соседние колонки, а вопрос у цвета один — дошло ли значение до заявки. «Отвергнуто» и «слабо» — разные оттенки намеренно: «проверено и не сошлось» это не сомнение, и звать человека они зовут по-разному. */ td.tone-ok { background: var(--tone-ok); } td.tone-weak { background: var(--tone-weak); } td.tone-bad { background: var(--tone-bad); }