/* Визуальная система: спецификация дашборда, раздел 2.1 */ @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; } @font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2212; } :root { color-scheme: light; --ink: #1E2433; --fog: #EEF1F4; --sheet: #FFFFFF; --line: #D5DAE1; --muted: #5B6475; --cobalt: #2B4C9B; --cobalt-soft: #E4EAF6; --amber: #8F5B00; --plus: #1F7A4D; --minus: #B3261E; --on-accent: #FFFFFF; --row-alt: #F7F8FA; --drr-bad: #FBE4E1; --drr-good: #E3F2E8; --grid: #E3E7EC; --chart-1: #2B4C9B; --chart-2: #0F8B8D; --chart-3: #D98E04; --chart-4: #7B3F8C; --chart-5: #8A94A6; --radius-s: 4px; --radius-m: 8px; --gap: 16px; --tabbar: 0px; } :root[data-theme="dark"] { color-scheme: dark; --ink: #E6E9EF; --fog: #0F141C; --sheet: #171D28; --line: #2C3544; --muted: #9AA3B2; --cobalt: #8CAEF5; --cobalt-soft: #1F2C47; --amber: #F2B544; --plus: #56C991; --minus: #F07A70; --on-accent: #0F141C; --row-alt: #1B2230; --drr-bad: #4A2622; --drr-good: #1D3B2B; --grid: #262E3B; --chart-1: #8CAEF5; --chart-2: #3CC7C9; --chart-3: #F2B544; --chart-4: #C792DB; --chart-5: #A3ACBA; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #E6E9EF; --fog: #0F141C; --sheet: #171D28; --line: #2C3544; --muted: #9AA3B2; --cobalt: #8CAEF5; --cobalt-soft: #1F2C47; --amber: #F2B544; --plus: #56C991; --minus: #F07A70; --on-accent: #0F141C; --row-alt: #1B2230; --drr-bad: #4A2622; --drr-good: #1D3B2B; --grid: #262E3B; --chart-1: #8CAEF5; --chart-2: #3CC7C9; --chart-3: #F2B544; --chart-4: #C792DB; --chart-5: #A3ACBA; } } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 15px/1.5 "IBM Plex Sans", system-ui, sans-serif; background: var(--fog); color: var(--ink); font-variant-numeric: tabular-nums; padding-bottom: var(--tabbar); } a { color: var(--cobalt); } :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; } h1 { font-size: 24px; line-height: 1.25; font-weight: 600; margin: 0 0 12px; } h2 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 20px 0 8px; } h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; } small, .muted { color: var(--muted); font-size: 13px; } header.top { display: flex; gap: var(--gap); align-items: center; padding: 8px 24px; background: var(--sheet); border-bottom: 1px solid var(--line); } header.top .brand { font-weight: 600; white-space: nowrap; color: var(--ink); text-decoration: none; } header.top .brand:hover { color: var(--cobalt); } /* меню шапки (2026-10-09): группы разделов — заголовок ведёт в раздел, список раскрывается при наведении и фокусе */ header.top nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; } header.top nav a { display: block; padding: 8px 12px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; white-space: nowrap; } header.top .nav-group { position: relative; } header.top .nav-group .caret::after { content: "▾"; margin-left: 4px; font-size: 11px; color: var(--muted); } header.top .nav-drop { display: none; position: absolute; left: 0; top: 100%; z-index: 35; min-width: 100%; padding: 4px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent); } /* :hover — только где есть мышь: на касании «залипший» hover держал бы список открытым; касание — класс .open (app.js) */ @media (hover: hover) { header.top .nav-group:hover .nav-drop { display: block; } } header.top .nav-group.open .nav-drop, header.top .nav-group:has(:focus-visible) .nav-drop { display: block; } header.top nav a.active { background: var(--cobalt-soft); color: var(--cobalt); font-weight: 500; } header.top nav a:hover { color: var(--cobalt); } header.top .me { white-space: nowrap; color: var(--muted); } button.icon { padding: 6px 10px; line-height: 1; min-width: 40px; } a.back { display: inline-block; } .theme-icon { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; vertical-align: -3px; background: linear-gradient(90deg, currentColor 50%, transparent 50%); } main { padding: 20px 24px 32px; max-width: 1920px; margin: 0 auto; } button, select, input { font: inherit; color: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--sheet); } button { cursor: pointer; } button:hover { border-color: var(--cobalt); } button[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-accent); } button.primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-accent); } a.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--sheet); color: inherit; text-decoration: none; } a.button:hover { border-color: var(--cobalt); } a.button.primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-accent); } /* лёгкая красная кнопка (отмена запуска): токены есть в обоих видах и всех темах, hex не нужен */ button.danger-soft, a.button.danger-soft { background: var(--drr-bad); border-color: color-mix(in srgb, var(--minus) 40%, var(--line)); color: var(--minus); } button.danger-soft:hover, a.button.danger-soft:hover { border-color: var(--minus); } button.ok-soft, a.button.ok-soft { background: var(--drr-good); border-color: color-mix(in srgb, var(--plus) 40%, var(--line)); color: var(--plus); } button.ok-soft:hover, a.button.ok-soft:hover { border-color: var(--plus); } .link-button { border: 0; background: none; color: var(--cobalt); padding: 4px 0; text-decoration: underline; text-underline-offset: 2px; } .period .chips, .segmented { display: inline-flex; gap: 0; } .period .chips button, .segmented button { border-radius: 0; margin-left: -1px; } .period .chips button:first-child, .segmented button:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); margin-left: 0; } .period .chips button:last-child, .segmented button:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; } .card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .card-head h2 { margin: 0; } .card-head .link-button { margin-left: auto; } .chip-row { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; } ul.list li .reason { display: block; color: var(--muted); font-size: 13px; } .checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; margin-bottom: 12px; } .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 12px; } .facts > div { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; display: flex; flex-direction: column; } .fact { font-size: 20px; font-weight: 600; } .links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .links a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; } .links a:hover { border-color: var(--cobalt); } h4 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; } .description { white-space: pre-wrap; max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 12px; margin-top: 8px; } .chart.small { height: 220px; } .toolbar { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .period { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .period .chips { display: flex; gap: 6px; overflow-x: auto; } .period details.dates summary { cursor: pointer; color: var(--cobalt); padding: 6px 4px; } .period details.dates[open] { display: flex; gap: 6px; align-items: center; } .headline { font-size: 32px; line-height: 1.25; font-weight: 500; max-width: 36ch; min-height: 2.5em; margin: 4px 0 24px; text-wrap: balance; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; } .tile { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-height: 136px; min-width: 0; } .tile .label, .tile-label { color: var(--muted); font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile .value, .tile-value { font-size: 26px; font-weight: 600; line-height: 1.2; margin: 4px 0 2px; white-space: nowrap; } .tile-delta { font-size: 13px; font-weight: 500; line-height: 1.3; } .tile-usual { font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: auto; } .tile-week { font-size: 12px; line-height: 1.3; color: var(--muted); } .banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--radius-m); border: 1px solid var(--minus); background: var(--drr-bad); margin-bottom: 16px; } .banner[hidden] { display: none; } .banner .grow { flex: 1; min-width: 0; } @media (max-width: 720px) { .banner { flex-wrap: wrap; } .banner .grow { flex-basis: 200px; } } #watch h3 { font-size: 13px; font-weight: 500; color: var(--muted); margin: 12px 0 4px; } #watch h3:first-child { margin-top: 0; } .tile.is-loading .tile-label, .tile.is-loading .tile-value, .tile.is-loading .tile-delta { background: var(--fog); border-radius: 3px; color: transparent; } .tile.is-loading .tile-label { width: 60%; } .tile.is-loading .tile-value { width: 75%; } .tile.is-loading .tile-delta { width: 45%; } .state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 40vh; padding: 32px 16px; text-align: center; color: var(--muted); border: 1px solid transparent; border-radius: var(--radius-m); } .state-text { margin: 0; font-size: 16px; max-width: 48ch; overflow-wrap: anywhere; } .state-error { color: var(--ink); border-color: var(--minus); } .state-error .state-text { color: var(--minus); } .good { color: var(--plus); } .bad { color: var(--minus); } .error { color: var(--minus); } .warn { color: var(--amber); } section.card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; margin-bottom: 16px; } section.card > h2:first-child { margin-top: 0; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; } .cols > * { min-width: 0; } ul.list { list-style: none; padding: 0; margin: 0; } ul.list li { padding: 8px 0; border-bottom: 1px solid var(--line); } ul.list li:last-child { border-bottom: 0; } ul.list a { text-decoration: none; } ul.list a:hover { text-decoration: underline; } table.plain { border-collapse: collapse; width: 100%; } table.plain td, table.plain th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; } table.plain td:first-child, table.plain th:first-child { text-align: left; } table.plain th { font-weight: 500; color: var(--muted); font-size: 13px; } .chart { position: relative; height: 300px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 8px; margin-bottom: 16px; } .tabulator { border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 14px; background: var(--sheet); } .tabulator .tabulator-header { background: var(--row-alt); border-bottom: 1px solid var(--line); } .tabulator .tabulator-header .tabulator-col { background: var(--row-alt); } .tabulator-row.tabulator-row-even { background: var(--sheet); } .tabulator-row:hover { background: var(--cobalt-soft) !important; cursor: pointer; } .swatch.drr-bad { background: var(--drr-bad); } .swatch.drr-good { background: var(--drr-good); } .tabulator-row.drr-bad .tabulator-cell:first-child { box-shadow: inset 4px 0 0 var(--minus); } .tabulator-row.drr-good .tabulator-cell:first-child { box-shadow: inset 4px 0 0 var(--plus); } .tabulator-row.thr-bad .tabulator-cell { background: var(--drr-bad); } .tabulator-row.thr-bad .tabulator-cell:first-child { box-shadow: inset 4px 0 0 var(--minus); } /* строка кликабельна: при наведении заливка ячеек уступает общей подсветке строки, красная полоса слева остаётся */ .tabulator-row.thr-bad:hover .tabulator-cell { background: var(--cobalt-soft); } .tabulator .thr { margin-left: 4px; padding: 0 4px; font-size: 0.85em; font-weight: normal; } .tabulator .thr.on { color: var(--minus); } .tabulator-row.drr-bad .tabulator-cell[tabulator-field="drr"] { background: var(--drr-bad); } .tabulator-row.drr-good .tabulator-cell[tabulator-field="drr"] { background: var(--drr-good); } .swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 3px; vertical-align: -2px; margin-right: 4px; } /* Строка поиска таблицы (makeTable): поле над таблицей и подсказка «как понято»; предупреждение — отдельной строкой */ .tsearch { margin: 0 0 6px; } .tsearch-input { width: 100%; max-width: 520px; box-sizing: border-box; } .tsearch-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; min-height: 0; } .tsearch-hint:empty { display: none; } .tsearch-warn { display: block; color: var(--amber); } .modal { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 35%, transparent); display: flex; align-items: center; justify-content: center; z-index: 50; } .modal .dialog { background: var(--sheet); padding: 16px 20px 20px; border-radius: var(--radius-m); max-height: 88vh; overflow: auto; width: min(520px, 94vw); box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 18%, transparent); } .modal .dialog.wide { width: min(820px, 96vw); } .dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .dialog-head h3 { margin: 0; font-size: 18px; flex: 1; } .dialog-head .close { border: 0; background: none; font-size: 24px; line-height: 1; padding: 4px 8px; color: var(--muted); } .dialog-head .close:hover { color: var(--ink); } body.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-box { background: var(--sheet); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-m); display: flex; flex-direction: column; gap: 12px; width: min(340px, 92vw); } .login-box label { display: flex; flex-direction: column; gap: 4px; } .login-form { display: flex; flex-direction: column; gap: 12px; } .login-box h1 { margin: 0; } .login-box .notice { margin: 0; padding: 10px 12px; border-radius: var(--radius-s); line-height: 1.4; } .login-box .notice.good { background: var(--drr-good); } .login-box .notice.error { background: var(--drr-bad); } a.button.login-yandex { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; text-align: center; } .login-hint { margin: -6px 0 0; text-align: center; } .password-login { border-top: 1px solid var(--line); padding-top: 12px; } .password-login > summary { cursor: pointer; list-style: none; text-align: center; color: var(--cobalt); padding: 8px; border-radius: var(--radius-s); } .password-login > summary::-webkit-details-marker { display: none; } .password-login > summary:hover { background: var(--cobalt-soft); } .password-login[open] > summary { margin-bottom: 12px; color: var(--muted); } form.inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } textarea { width: 100%; min-height: 160px; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); } nav.tabbar { display: none; } .tabulator { max-width: 100%; } section.card, .scroll-x { overflow-x: auto; } table.plain td:not(:first-child), table.plain th:not(:first-child) { white-space: nowrap; } /* Тема для Tabulator и полей ввода: цвета из переменных (у Tabulator свои светлые в tabulator.min.css) */ .tabulator, .tabulator .tabulator-tableholder, .tabulator .tabulator-tableholder .tabulator-table, .tabulator-row, .tabulator .tabulator-footer { background: var(--sheet); color: var(--ink); } .tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col { background: var(--row-alt); color: var(--ink); border-color: var(--line); } .tabulator-row .tabulator-cell, .tabulator .tabulator-header .tabulator-col { border-right: 0; } .tabulator .tabulator-footer { border-top-color: var(--line); } .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: var(--cobalt-soft); } .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--muted); border-top-color: var(--muted); } .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--cobalt); } .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow { border-top-color: var(--cobalt); } .tabulator .tabulator-placeholder .tabulator-placeholder-contents { color: var(--muted); } .tabulator .tabulator-footer .tabulator-page { background: var(--sheet); color: var(--ink); border-color: var(--line); } .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover { background: var(--cobalt-soft); color: var(--cobalt); } .tabulator .tabulator-footer .tabulator-page.active { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-accent); } .tabulator .tabulator-footer .tabulator-page.disabled { color: var(--muted); opacity: .6; } .tabulator .tabulator-footer .tabulator-page-size { background: var(--sheet); color: var(--ink); border-color: var(--line); } input, select, textarea, button { background: var(--sheet); color: var(--ink); border-color: var(--line); } button[aria-pressed="true"], button.primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-accent); } input::placeholder, textarea::placeholder { color: var(--muted); } /* План 6.1: карточки, ключи, рынок */ .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { white-space: normal; } .tabulator .tabulator-header .tabulator-col .tabulator-col-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } /* прописные шире строчных: место под стрелку сортировки — по её ширине (у Tabulator 25px), иначе слова заголовков обрезаются */ .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { padding-right: 14px; } .panel.is-hidden { display: none; } input.short { width: 5em; } mark.hit { background: var(--cobalt-soft); color: inherit; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--amber); } .diff .del { background: color-mix(in srgb, var(--minus) 15%, transparent); text-decoration: line-through; } .diff .ins { background: color-mix(in srgb, var(--plus) 15%, transparent); } .terms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .terms span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 13px; } .terms span.ours { border-color: var(--plus); color: var(--plus); } .badge { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--cobalt-soft); color: var(--cobalt); font-size: 13px; } .status-text { color: var(--plus); } .status-attributes, .status-partial { color: var(--amber); } .status-none { color: var(--minus); } table.plain td .reason, ul.card-list .reason { display: block; color: var(--muted); font-size: 13px; white-space: normal; } table.plain td.wrap { white-space: normal; min-width: 16em; } .tabulator-row.ours-row { box-shadow: inset 4px 0 0 var(--cobalt); font-weight: 500; } .stack-on-phone > .tabs { margin-bottom: 12px; } .thresholds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; margin-bottom: 12px; } .thresholds label { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em; gap: 8px; align-items: start; } .thresholds input { width: 5.5em; } @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } } @media (max-width: 720px) { :root { --tabbar: 64px; } body { font-size: 15px; padding-bottom: calc(var(--tabbar) + 8px); } header.top { padding: 8px 16px; } header.top nav, header.top .me button { display: none; } main { padding: 12px 16px 24px; } h1 { font-size: 20px; } .headline { font-size: 20px; max-width: none; } .tiles { grid-template-columns: 1fr 1fr; gap: 8px; } .tile { min-height: 128px; padding: 12px; } .tile .label, .tile-label { white-space: normal; } .tile .value, .tile-value { font-size: 20px; } .tsearch-input { max-width: none; } .headline { min-height: 3.75em; } .facts { grid-template-columns: 1fr 1fr; } .modal { align-items: flex-end; } .modal .dialog, .modal .dialog.wide { width: 100vw; max-height: 88vh; border-radius: var(--radius-m) var(--radius-m) 0 0; } .chart { height: 220px; } button, a.button, select, input:not([type=checkbox]):not([type=radio]), .period details.dates summary { min-height: 44px; } button.icon { min-width: 44px; } ul.list li a, a.back { display: inline-flex; align-items: center; min-height: 44px; } ul.card-list li a { display: flex; } .period .chips { flex-wrap: nowrap; max-width: 100%; } /* период в фильтрах — не шире экрана, чипы прокручиваются внутри (иначе страница шире 390 px и при is_mobile масштабируется — щелчки ui_audit промахиваются) */ .filters > .period { flex: 1 1 100%; min-width: 0; max-width: 100%; } .period details.dates[open] { flex-wrap: wrap; } .period details.dates input { min-width: 0; max-width: 100%; } .stack-on-phone > .tabs { display: none; } .stack-on-phone .panel.is-hidden { display: block; } nav.tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: var(--tabbar); background: var(--sheet); border-top: 1px solid var(--line); z-index: 40; padding-bottom: env(safe-area-inset-bottom); } nav.tabbar > a, nav.tabbar summary { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink); text-decoration: none; font-size: 13px; padding: 4px; list-style: none; cursor: pointer; } nav.tabbar > a[aria-current="page"] { color: var(--cobalt); font-weight: 600; background: var(--cobalt-soft); } nav.tabbar details.more { flex: 1; display: flex; } nav.tabbar details.more > div { position: fixed; bottom: var(--tabbar); left: 0; right: 0; background: var(--sheet); border-top: 1px solid var(--line); display: flex; flex-direction: column; padding: 8px 16px; } nav.tabbar details.more > div a, nav.tabbar details.more > div button { display: flex; align-items: center; padding: 12px 8px; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 15px; } nav.tabbar details.more > div a[aria-current="page"], nav.tabbar details.more > summary[aria-current="page"] { background: var(--cobalt-soft); color: var(--cobalt); font-weight: 600; } } /* подпись загрузки (api() в app.js): по центру под шапкой, клики не перехватывает */ #loading-note { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 45; pointer-events: none; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 6px 14px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 15%, transparent); font-size: 13px; white-space: nowrap; } #loading-note::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--cobalt-soft); border-top-color: var(--cobalt); animation: loading-spin .8s linear infinite; } @keyframes loading-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* План 6.2: исследование и конкуренты */ button.link { background: none; border: 0; padding: 0; color: var(--cobalt); text-decoration: underline; cursor: pointer; min-height: 44px; text-align: left; } .family-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; align-items: end; } /* Заголовки-кнопки сортировки в простых таблицах: выглядят как заголовок, нажимаются целиком */ table.plain th button.sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; text-align: inherit; min-height: 32px; } table.plain th button.sort:hover { color: var(--ink); } @media (max-width: 720px) { table.plain th button.sort { min-height: 44px; } } /* План 6.2c: прокрутки, простые таблицы, панель действий */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--muted); } table.plain th { background: var(--sheet); position: sticky; top: 0; } table.plain tr:nth-child(even) td { background: var(--row-alt); } table.plain tr:hover td { background: var(--cobalt-soft); } table.plain tr.key-row td { font-weight: 600; background: var(--cobalt-soft); } /* 2.126: справочная строка «в т.ч.» под статьёй (P&L) — с отступом, приглушённая, в итоги не входит */ table.plain tr.sub-row td { color: var(--muted); font-size: 13px; } table.plain tr.sub-row td:first-child { padding-left: 24px; } table.plain tr.sub-row td span { white-space: nowrap; } @media (max-width: 720px) { table.plain tr.sub-row td { white-space: normal; } table.plain tr.sub-row td:first-child { padding-left: 16px; } } /* сверка P&L: длинные подписи и суммы «a / b / c» переносятся, а не прячут значение за прокруткой карточки */ @media (max-width: 720px) { table.reconcile td:not(:first-child) { white-space: normal; } } .toolbar label { display: inline-flex; align-items: center; gap: 6px; } .toolbar input[type=checkbox] { margin: 0; width: 18px; height: 18px; } .period .chips button { white-space: nowrap; } details.tool-more { display: inline-flex; } details.tool-more > summary { display: none; } details.tool-more > div { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } @media (max-width: 720px) { details.tool-more { position: relative; } details.tool-more > summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--sheet); cursor: pointer; list-style: none; font-size: 20px; } details.tool-more > summary::-webkit-details-marker { display: none; } details.tool-more[open] > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; flex-direction: column; align-items: stretch; min-width: 220px; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent); } } #tab-research .toolbar label { display: inline; } /* Новости Ozon (главная) */ .news-item { display: flex; flex-direction: column; gap: 6px; } .news-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; } .news-text { white-space: pre-wrap; max-width: 90ch; } .news-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .news-item .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .news-item .news-expand { align-self: flex-start; } /* Шапка таблиц: наведение — цветом строк */ .tabulator .tabulator-header .tabulator-col .tabulator-col-content { flex: 1; display: flex; flex-direction: column; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background-color: var(--cobalt-soft); } .tile-note { font-size: 12px; line-height: 1.3; color: var(--amber); } /* «Исследовать вручную» */ .manual-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 12px; } .manual-steps textarea { min-height: 140px; margin-top: 6px; font-size: 13px; } .manual-steps details summary { cursor: pointer; color: var(--cobalt); } .manual-result table.plain td:nth-child(2), .manual-result table.plain th:nth-child(2) { text-align: left; } main > .login-box { margin: 40px auto; } .task-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .task-form textarea { width: 100%; min-height: 44px; } .task-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .task-form-row input[name=title] { flex: 1 1 100%; } .stack-form { display: grid; gap: 8px; } .stack-form input, .stack-form select, .stack-form textarea { width: 100%; box-sizing: border-box; } .stack-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .stack-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Администрирование «Роли» (2.123): поиск и «+ роль» в списке, название, права роли по разделам меню — две колонки карточек, на телефоне одна; пояснение действия справа от подписи, на телефоне — под ней */ .ad-find { width: 100%; margin-bottom: 4px; } .ad-add { margin-top: 12px; } .ad-back { display: none; align-self: flex-start; } @media (max-width: 900px) { .ad-back { display: inline-block; } } .ad-head .card-head { justify-content: space-between; align-items: flex-start; } .ad-head .card-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ad-head .card-head h2 { overflow-wrap: anywhere; } .ad-name { display: flex; gap: 8px 12px; align-items: flex-end; flex-wrap: wrap; } .ad-name .tz-field { flex: 1 1 180px; } .tz-strip.ad-sum { margin: 0 0 12px; } .ad-people { margin: 0; } /* «Люди»: карточка заявки и «+ человек» — сведения под заголовком, строка кнопок формы, галочка под полями */ .ad-head .ad-kv { margin-top: 12px; } .ad-head > p.muted { margin: 8px 0 0; } .ad-acts { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .ad-check { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .ad-note-p { font-size: 13px; } #p-card .tz-sec > p { margin: 0; } #p-card .tz-sec > .ad-acts { margin-top: 0; } #p-card .tz-sec > div:empty { display: none; } /* пустые места полос (вопрос, итог) не добавляют зазор раздела */ /* карточка человека: «активен» — в строке с ролью, команда нового ключа — моноширинным полем во всю ширину */ .ad-name > .ad-check { margin: 0 0 8px; } #p-card details.tz-sec.card > summary ~ * + * { margin-top: 12px; } /* свёрнутый раздел — тот же зазор, что gap у section.tz-sec */ .ad-cmd { min-height: 0; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .ad-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .ad-perms .ad-gh { grid-column: 1 / -1; margin: 8px 0 0; } .ad-perm { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; } .ad-sect { display: flex; gap: 8px; align-items: center; font-weight: 600; } .ad-act { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0 0 26px; font-size: 13.5px; } .ad-act.off { color: var(--muted); } .ad-perm input[type=checkbox] { flex: none; margin: 2px 0 0; padding: 0; width: 16px; height: 16px; accent-color: var(--cobalt); } .ad-t { display: flex; flex-direction: column; min-width: 0; } .ad-l { display: flex; gap: 2px 12px; align-items: baseline; } .ad-l > span { flex: none; max-width: 100%; } .ad-hint, .ad-note { font-size: 12px; color: var(--muted); } .ad-note { color: var(--amber); } .ad-none { margin: 2px 0 0 26px; font-size: 12px; color: var(--muted); } .ad-perm .tz-strip { margin: 6px 0 0 18px; padding: 6px 8px; } .ad-perm .tz-strip > .ad-act { padding: 0; } .ad-perm .ad-gone { margin-left: 0; } /* «Раздел снят — сняты также» — во всю ширину карточки раздела */ @media (max-width: 720px) { .ad-perms { grid-template-columns: minmax(0, 1fr); } .ad-l { flex-direction: column; gap: 0; } .ad-l > span { flex: initial; } } @media (max-width: 720px) { .stack-form .pair { grid-template-columns: 1fr; } } .list.compact { margin: 4px 0 0; } .list.compact li { padding: 4px 0; } /* план 7.2: запуски и карточка для заведения */ .launch-admin { margin-top: 16px; } .launch-admin summary { cursor: pointer; margin-bottom: 8px; } .pre-line { white-space: pre-line; } table.plain td.nowrap { white-space: nowrap; } @media (max-width: 720px) { .segmented { flex-wrap: wrap; gap: 6px; } .segmented button, .segmented button:first-child, .segmented button:last-child { border-radius: var(--radius-s); margin-left: 0; } } .chip-demo { font-size: 0.8em; padding: 1px 6px; border: 1px solid var(--cobalt); border-radius: var(--radius-s); color: var(--cobalt); } /* план 7.3: «Старый формат» ТЗ на странице запуска (с 7.11 — «ТЗ как в документе») */ #old-format .copy-cell { visibility: hidden; padding: 0 6px; font-size: .85em; } #old-format td:hover .copy-cell, #old-format p:hover .copy-cell, #old-format .copy-cell:focus { visibility: visible; } @media (hover: none) { #old-format .copy-cell { visibility: visible; } } #old-format .pre { white-space: pre-wrap; max-width: 80ch; } #old-format > p, #old-format h3 { overflow-wrap: anywhere; } #old-format h3 { margin-top: 20px; } #old-format table.old-format td, #old-format table.old-format th { vertical-align: top; text-align: left; white-space: normal; overflow-wrap: break-word; position: relative; padding-left: 5px; padding-right: 5px; } #old-format table.old-format .copy-cell { position: absolute; top: 4px; right: 2px; padding: 0 4px; background: var(--sheet); } @media (hover: none) { #old-format table.old-format .copy-cell { position: static; display: block; margin-top: 4px; } } #old-format table.old-format.measuring { width: max-content; table-layout: auto; } #old-format table.old-format.measuring td { white-space: nowrap; } #old-format table.old-format.measuring .copy-cell, #old-format table.old-format.measuring .col-resize { display: none; } #old-format .col-resize { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 1; touch-action: none; } #old-format .col-resize:hover, #old-format .col-resize:focus-visible { background: var(--line); outline: none; } .segmented[aria-label="Вид ТЗ"] { margin: 12px 0; } /* конструктор ТЗ (7.4, 7.10 §1): шапка, список товаров, карточка по разделам, «Готовность»; цвета — только переменные. `.tz-*` — общие классы раскладки 7.10: конструктор, страница запуска, окно товара проверки (7.11) */ .tz-top { display: flex; gap: 0 var(--gap); align-items: flex-start; flex-wrap: wrap; } .tz-top > div:first-child { flex: 1 1 320px; min-width: 0; } .tz-top h1 { margin-bottom: 4px; } .tz-top p { margin: 0 0 12px; } .tz-top .toolbar { margin-bottom: 12px; } .tz-errors { color: var(--minus); border-color: var(--minus); font-weight: 600; } /* «Ошибок: N» рядом с «Отправить» (2.148, В1) */ /* три колонки; на средней ширине «Готовность» и «Подсказки» — под карточкой (список во всю высоту слева), на узкой — всё в столбик */ .tz-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) minmax(260px, 330px); gap: var(--gap); align-items: start; } .tz-list { min-width: 0; margin: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; } .tz-card { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); } .tz-side { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; } .tz-card > .card, .tz-side > .card { margin: 0; } .tz-side > .card { flex: none; overflow: visible; } details.card.tz-sec { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; } @media (max-width: 1240px) { .tz-layout { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } .tz-list { grid-row: span 2; } .tz-side { grid-column: 2; position: static; max-height: none; overflow: visible; } } @media (max-width: 900px) { .tz-layout { grid-template-columns: minmax(0, 1fr); } .tz-list { grid-row: auto; } .tz-side { grid-column: auto; } } /* список + карточка в две колонки (Личное, Администрирование «Люди»/«Роли»); на ≤ 900 px — одной колонкой, карточка не липкая */ .ws-split { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: var(--gap); align-items: start; } .ws-split > .tz-list { border-radius: 14px; } .ws-split > .tz-card { margin: 0; position: sticky; top: 12px; } @media (max-width: 900px) { .ws-split { grid-template-columns: minmax(0, 1fr); } .ws-split > .tz-card { position: static; } } .tz-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tz-grow { flex: 1 1 auto; min-width: 0; } .tz-sec-h { display: flex; gap: 4px 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; } .tz-sec-h h2 { margin: 0; } .tz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* список товаров */ .tz-list h2 { margin: 0; font-size: 16px; } #tz-find { width: 100%; margin-top: 10px; } #tz-pick-hint { margin: 6px 0 0; } .tz-group-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 4px; } .tz-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius-s); cursor: pointer; } .tz-item:hover { background: var(--row-alt); } .tz-item.on { background: var(--cobalt-soft); } .tz-pick { width: 16px; height: 16px; margin: 3px 0 0; padding: 0; flex: none; accent-color: var(--cobalt); } .tz-item-b { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; } .tz-item-b .t { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .tz-item-b .t.mono { font-family: var(--rt-mono, ui-monospace, Menlo, monospace); font-size: 13px; } .tz-item-b .s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .tz-foreign { padding: 6px 8px; border-radius: var(--radius-s); } .tz-foreign summary { cursor: pointer; display: flex; flex-direction: column; list-style: none; position: relative; padding-left: 16px; } .tz-foreign summary::-webkit-details-marker { display: none; } .tz-foreign summary::before { content: '▸'; position: absolute; left: 0; top: 0; color: var(--muted); } /* flex убирает свой маркер */ .tz-foreign[open] > summary::before { content: '▾'; } .tz-foreign summary .t { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .tz-foreign summary .s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .tz-foreign[open] { background: var(--row-alt); } .tz-st { margin-left: auto; font-size: 12px; white-space: nowrap; padding-top: 1px; } .tz-st.bad { font-weight: 600; } .tz-more { font-size: 13px; margin-left: 32px; } .tz-bar { position: sticky; bottom: 0; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--cobalt-soft); display: grid; gap: 8px; font-size: 13px; } .tz-bar .toolbar { margin: 0; } /* карточка товара */ section.tz-sec { display: flex; flex-direction: column; gap: 12px; } details.tz-sec[open] > summary { margin-bottom: 12px; } details.tz-sec > summary { cursor: pointer; } details.tz-sec > summary h3 { display: inline; } .tz-sec h3 { margin: 0; } .tz-sec:focus { outline: none; } .tz-kicker { margin: 0; } @media (max-width: 700px) { #tz-card-head { flex-basis: 100%; } } #tz-card-title { margin: 0; font-size: 20px; overflow-wrap: anywhere; } .tz-grid1, .tz-grid2, .tz-grid3, .tz-grid4 { display: grid; gap: 12px 16px; } .tz-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tz-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tz-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1280px) { .tz-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .tz-grid2, .tz-grid3, .tz-grid4 { grid-template-columns: minmax(0, 1fr); } } .tz-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tz-field.wide { grid-column: 1 / -1; } .tz-label { font-size: 13px; color: var(--muted); } .tz-field input:not([type=checkbox]), .tz-field select, .tz-field textarea { width: 100%; min-width: 0; } .tz-field textarea { min-height: 0; resize: vertical; } .tz-bool { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; } .tz-miss { border-color: var(--amber) !important; } .tz-bad { border-color: var(--minus) !important; box-shadow: 0 0 0 1px var(--minus); } .tz-seg { display: inline-flex; align-self: flex-start; max-width: 100%; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; } .tz-seg button { flex: 0 0 auto; border: 0; border-right: 1px solid var(--line); border-radius: 0; font-size: 13px; padding: 6px 12px; } .tz-seg button:last-child { border-right: 0; } @media (max-width: 700px) { /* на телефоне кнопки типа переносятся — отдельными плашками */ .tz-seg { border: 0; overflow: visible; gap: 6px; } .tz-seg button, .tz-seg button:last-child { border: 1px solid var(--line); border-radius: var(--radius-s); } } .tz-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 3px 6px; background: var(--sheet); } .tz-tags:focus-within { border-color: var(--cobalt); } .tz-tags > span { display: contents; } .tz-field .tz-tags input { flex: 1 1 120px; width: auto; min-width: 80px; border: 0; padding: 4px; background: transparent; } .tz-field .tz-tags input:focus-visible { outline: none; } .tz-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; background: var(--cobalt-soft); color: var(--ink); border-radius: 999px; padding: 1px 2px 1px 10px; overflow-wrap: anywhere; } .tz-chip button { border: 0; background: none; padding: 0; width: 24px; height: 24px; min-height: 0; line-height: 1; color: var(--muted); border-radius: 50%; } .tz-chip button:hover { color: var(--ink); } .tz-strip { display: flex; gap: 2px 12px; align-items: baseline; flex-wrap: wrap; padding: 8px 12px; margin-top: 8px; font-size: 13px; border: 1px solid var(--amber); border-left-width: 4px; border-radius: var(--radius-s); background: color-mix(in srgb, var(--amber) 8%, var(--sheet)); } .tz-strip.bad { border-color: var(--minus); background: color-mix(in srgb, var(--minus) 8%, var(--sheet)); } .tz-strip .link-button, ul.tz-checks .link-button { padding: 0; text-align: left; } .tz-badges { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .tz-badges:empty { display: none; } .src-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 999px; background: var(--fog); color: var(--muted); } .src-badge.auto { background: var(--cobalt-soft); color: var(--cobalt); } .offer { font-size: 12px; padding: 0 8px; border: 1px dashed var(--cobalt); border-radius: var(--radius-s); background: transparent; color: var(--cobalt); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* рассрочка (7.10 §5): переключатель, степпер частей, график */ .tz-inst { display: flex; flex-direction: column; gap: 12px; } [data-sec-x]:empty, .tz-inst [data-inst-part]:empty { display: none; } .tz-inst [data-inst-part]:focus { outline: none; } .tz-switch { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 36px; cursor: pointer; } .tz-switch input { appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--muted); cursor: pointer; transition: background .15s; } .tz-switch input::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); transition: transform .15s; } .tz-switch input:checked { background: var(--cobalt); } .tz-switch input:checked::before { transform: translateX(16px); } .tz-step { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; } .tz-step button { width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 0; background: var(--fog); font-size: 16px; } .tz-field .tz-step input { width: 52px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; text-align: center; font-weight: 600; } .tz-inst-hint, .tz-inst-tot { margin: 0; font-size: 13px; } .tz-inst-hint .link-button { padding: 0; } .tz-inst-tot { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; font-size: 15px; } [data-inst-part="total"].tz-bad { border-radius: var(--radius-s); padding: 4px 8px; } table.tz-inst-sched td, table.tz-inst-sched th { text-align: left; vertical-align: middle; } table.tz-inst-sched .n { text-align: right; } table.tz-inst-sched input.date-text { padding: 4px 6px; } .tz-inst-note { display: block; font-size: 12px; } .tz-inst-fold td { color: var(--muted); font-size: 13px; } /* состав комплекта (7.10 §4): позиции, итог, панель «Добавить позицию» */ [data-bp-part="table"]:focus { outline: none; } [data-bp-part="table"].tz-miss, [data-bp-part="table"].tz-bad { border: 1px solid; border-radius: var(--radius-s); padding: 4px 8px; } table.tz-btbl td, table.tz-btbl th { text-align: left; vertical-align: middle; } table.tz-btbl .n { text-align: right; } table.tz-btbl td.wrap { min-width: 12em; } table.tz-btbl .link-button { padding: 0; text-align: left; } .tz-x { width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; } .tz-x:hover { color: var(--ink); background: var(--fog); } .tz-bsum { display: flex; gap: 4px 24px; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; margin: 8px 0 0; font-size: 13px; } .tz-bsum b { font-size: 15px; } .tz-blegacy { margin-top: 4px; font-size: 13px; } .tz-bpick { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; } .tz-bpick[open] { border-color: var(--cobalt); } .tz-bpick > summary { cursor: pointer; font-weight: 600; } .tz-bpick-b { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .tz-bpick-b .tz-group-h { margin: 6px 0 0; } .tz-bpick-b input[type=search] { width: 100%; } .tz-pk { display: flex; gap: 4px 10px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; } .tz-pk.off { color: var(--muted); cursor: default; flex-wrap: wrap; } .tz-pk input { flex: none; margin: 0; padding: 0; align-self: center; accent-color: var(--cobalt); } .tz-pk .t { min-width: 0; overflow-wrap: anywhere; } .tz-pk .s { overflow-wrap: anywhere; } .tz-pk .p { margin-left: auto; white-space: nowrap; color: var(--muted); } .tz-pk .link-button { padding: 0; } .tz-bp-hint { margin: 0; font-size: 12px; } @media (max-width: 700px) { /* на телефоне: название и цена, под названием — артикул */ .tz-pk, .tz-pk.off { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; } .tz-pk input { grid-row: 1 / span 2; align-self: start; margin-top: 2px; } .tz-pk .t { grid-column: 2; grid-row: 1; } .tz-pk .p { grid-column: 3; grid-row: 1; } .tz-pk .s, .tz-pk .bad { grid-column: 2 / span 2; grid-row: 2; } } /* окно «Обновить из Портала» (7.10 §6): сводка, расхождения, новые товары, свёрнутые списки; низ окна прилипает */ .tz-pd-body { display: flex; flex-direction: column; gap: 12px; } .tz-pd-body h3 { margin: 4px 0 0; } .tz-pd-sum { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .tz-pill { font-size: 13px; border-radius: var(--radius-s); padding: 4px 10px; background: var(--fog); } .tz-pill.diff { background: color-mix(in srgb, var(--amber) 14%, var(--sheet)); } table.tz-pd td, table.tz-pd th { text-align: left; vertical-align: top; } table.tz-pd .n { text-align: right; } table.tz-pd td.wrap { min-width: 10em; } table.tz-pd tr.tz-pd-p th { padding-top: 10px; background: var(--row-alt); color: var(--ink); font-size: 13px; font-weight: 600; white-space: normal; } table.tz-pd td.old { color: var(--muted); } table.tz-pd td.new { font-weight: 500; } .tz-pd-chk { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 0 -6px -6px; cursor: pointer; } .tz-pd-chk input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--cobalt); cursor: pointer; } .src-badge.man { background: color-mix(in srgb, var(--amber) 14%, var(--sheet)); color: var(--amber); } .tz-pd-hint { margin: 0; } .tz-pd-more > summary { cursor: pointer; font-size: 13px; padding: 4px 0; } .tz-pd-more ul.list li { padding: 4px 0; font-size: 13px; } .tz-pd-foot { position: sticky; bottom: -20px; display: flex; gap: 8px 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 16px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--sheet); } @media (max-width: 700px) { /* на телефоне столбец «В Портале» виден без прокрутки: текст переносится */ .tz-pd-chk { width: 44px; height: 44px; margin: -12px 0 -12px -12px; } table.plain.tz-pd td, table.plain.tz-pd th { white-space: normal; overflow-wrap: break-word; } table.tz-pd td.wrap { min-width: 0; } table.tz-pd td.old .src-badge { display: table; margin-top: 2px; } .tz-pd-body .tz-row h3 { flex-basis: 100%; } } /* «Предпросмотр карточек» (7.10 §8): окно во всю ширину; на компьютере список и карточка прокручиваются отдельно */ .modal .dialog.tz-pv-dlg { width: min(1360px, 96vw); height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .tz-pv-dlg .dialog-body { flex: 1 1 auto; min-height: 0; } .tz-pv { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px 20px; height: 100%; } .tz-pv-top { grid-column: 1 / -1; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; } .tz-pv-top p { margin: 0; } .tz-pv-side { min-height: 0; overflow: auto; padding: 10px; border-radius: var(--radius-m); background: var(--row-alt); border: 1px solid var(--line); } .tz-pv-side > p { margin: 0; } .tz-pv-side .tz-group-h { margin: 12px 0 4px; } .tz-pv-it { display: flex; gap: 8px; align-items: baseline; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-s); background: none; text-align: left; font-size: 13px; cursor: pointer; } .tz-pv-it:hover { background: color-mix(in srgb, var(--cobalt-soft) 60%, transparent); } .tz-pv-it.on { background: var(--cobalt-soft); font-weight: 500; } .tz-pv-it .t { min-width: 0; overflow-wrap: anywhere; } .tz-pv-it .c { margin-left: auto; font-size: 12px; font-weight: 400; white-space: nowrap; } .tz-pv-main { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding-right: 4px; } .tz-pv-hero { display: flex; gap: 16px 20px; flex-wrap: wrap; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-m); } .tz-pv-ph { flex: none; width: 168px; height: 120px; padding: 8px 10px; border-radius: var(--radius-s); background: var(--fog); color: var(--muted); font-size: 12px; line-height: 1.35; white-space: pre-line; overflow: hidden; overflow-wrap: anywhere; } .tz-pv-hero-b { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .tz-pv-hero-b h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; } .tz-pv-hero-b .muted { overflow-wrap: anywhere; } .tz-pv-hero-b .link-button { padding: 0; } .tz-pv-price { font-size: 22px; font-weight: 600; } .tz-pv-old { margin-left: 8px; color: var(--muted); } .tz-pv-chips { display: flex; gap: 6px; flex-wrap: wrap; } .tz-pv-chip { font-size: 13px; padding: 4px 12px; border-radius: 999px; } .tz-pv-chip.on { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-accent); } .tz-pv-blocks { columns: 2; column-gap: 16px; } .tz-pv-blk { break-inside: avoid; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); } .tz-pv-blk h3 { margin: 0 0 4px; font-size: 14px; } .tz-pv-main > .tz-pv-blk { margin: 0; } table.plain.tz-pv-kv td { padding: 5px 6px 5px 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 13px; } table.plain.tz-pv-kv tr td, table.plain.tz-pv-kv tr:hover td { background: none; } table.plain.tz-pv-kv tr:last-child td { border-bottom: 0; } table.tz-pv-kv td.k { width: 40%; color: var(--muted); padding-right: 10px; } table.tz-pv-kv td.v { white-space: pre-line; } table.plain.tz-pv-kv td.s { width: 1%; padding-right: 0; text-align: right; white-space: nowrap; } .tz-pv-clip { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .tz-pv-kv .link-button { padding: 2px 0 0; font-size: 12px; } .tz-pv-empty { padding: 0 6px; border-radius: var(--radius-s); font-size: 12px; color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--sheet)); } .src-badge.tz { background: var(--cobalt-soft); color: var(--cobalt); } table.tz-pv-sch td, table.tz-pv-sch th { text-align: left; } table.tz-pv-sch .n { text-align: right; } @media (max-width: 900px) { /* узко: список над карточкой, окно прокручивается целиком, кнопка «следующая» прилипает */ .modal .dialog.tz-pv-dlg { display: block; height: auto; overflow: auto; } .tz-pv { display: flex; flex-direction: column; height: auto; } .tz-pv-top { display: contents; } .tz-pv-top button { position: sticky; top: -8px; z-index: 2; box-shadow: 0 0 0 8px var(--sheet); } .tz-pv-dlg .dialog-head { position: static; } /* прилипает кнопка «следующая», а не шапка (7.11: иначе она закрывает ×) */ .tz-pv-side { max-height: 32vh; } .tz-pv-main { overflow: visible; padding-right: 0; } .tz-pv-blocks { columns: 1; } } @media (max-width: 720px) { .modal .dialog.tz-pv-dlg { width: 100vw; } .tz-pv-ph { width: 100%; height: auto; max-height: 96px; } table.tz-pv-kv td.k { width: 36%; } } /* «Готовность» и «Подсказки» */ #tz-ready h2, #tz-hints h2 { margin: 0 0 4px; } #tz-ready h3, #tz-hints h3 { margin: 12px 0 4px; } #tz-hints { font-size: 13px; } #tz-hints > p { margin: 0; } #tz-hints .link-button { text-align: left; } .tz-sum { margin: 8px 0 0; font-size: 13px; } .tz-ready-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fog); margin: 8px 0 4px; } .tz-ready-bar .ok { background: var(--plus); } .tz-ready-bar .gap { background: var(--amber); } .tz-ready-bar .err { background: var(--minus); } ul.tz-checks { list-style: none; margin: 0; padding: 0; } ul.tz-checks li { display: flex; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } ul.tz-checks li:last-child { border-bottom: 0; } ul.tz-checks li > button { flex: none; } ul.tz-checks li.muted .link-button { color: var(--muted); } /* пункт WS.ready с cls: 'muted' — приглушён и текстом («После вердикта») */ #tz-ready details > summary { cursor: pointer; font-size: 13px; padding: 6px 0; } .tz-offers { font-size: 13px; margin: 12px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Инструкция InSales: читаемый текст, разделы — листы, образцы с копированием */ .ins-views { margin-bottom: 12px; } .ins-types { flex-wrap: wrap; gap: 6px; } .ins-body { max-width: 880px; } .ins-section { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 4px 20px 8px; margin-bottom: 16px; } .ins-section h2 { margin: 12px 0 4px; } .ins-point { padding: 10px 0; border-top: 1px solid var(--line); } .ins-section h2 + .ins-point { border-top: 0; } .ins-point h3 { font-size: 16px; margin: 0 0 4px; } .ins-point p, .ins-point ul { margin: 4px 0; max-width: 75ch; } .ins-example { display: flex; gap: 8px; align-items: flex-start; background: var(--fog); border-radius: var(--radius-s); padding: 6px 10px; margin: 6px 0; } .ins-example pre { flex: 1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; } .ins-example .ins-copy { font-size: 13px; padding: 2px 8px; } .ins-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; } .ins-type-select { display: none; margin-bottom: 12px; } @media (max-width: 640px) { .ins-section { padding: 4px 12px 8px; } .ins-example { flex-direction: column; } .ins-types { display: none; } .ins-type-select { display: block; } } #h-checks li, #h-manual { overflow-wrap: anywhere; } #h-due { color: var(--ink); } #h-due[hidden] { display: none; } #h-manual { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); } #h-manual[hidden] { display: none; } /* 7.11 §1: таблицы, пилюли, фильтры, окна, выравнивание */ /* таблицы — на подложке карточки: шапка мелкими прописными (как группы списка 7.10), строки без чередования и вертикальных линий */ .tabulator { overflow: hidden; } .tabulator-row { border-bottom: 1px solid var(--grid); } .tabulator-row .tabulator-cell { padding: 8px 10px; } .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 6px 4px 6px 10px; } /* заголовок — по левому краю текста ячеек; справа место у стрелки */ .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left, .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { border-right: 1px solid var(--grid); } /* граница закреплённого столбца — цветом сетки */ /* галочки строк и закреплённые сверху строки (makeTable, опция pick) */ .tabulator .tabulator-row .pick-cell, .tabulator .tabulator-header .pick-cell .tabulator-col-content { padding: 8px 0; cursor: pointer; } .tabulator .pick-cell input { margin: 0; width: 18px; height: 18px; cursor: pointer; vertical-align: middle; accent-color: var(--cobalt); } .tabulator .tabulator-frozen-rows-holder { border-top: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); } .tabulator .tabulator-frozen-rows-holder .tabulator-row { background: var(--sheet); font-weight: normal; } /* холдер — в шапке, она жирная */ /* пилюли счётчиков и статусов */ .pill { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 8px; border-radius: 999px; white-space: nowrap; background: var(--fog); color: var(--muted); } .pill.ok { background: var(--drr-good); color: var(--plus); } .pill.bad { background: var(--drr-bad); color: var(--minus); } .pill.warn { background: color-mix(in srgb, var(--amber) 14%, var(--sheet)); color: var(--amber); } .pill.mute { background: var(--fog); color: var(--muted); } /* списки строк с кнопкой (Главная): текст слева, кнопка/пилюля справа; на телефоне кнопка уходит под текст */ .stack { display: flex; flex-direction: column; min-width: 0; } .stack > section.card[hidden] { display: none; } .card-act { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .card-act h2 { margin: 0 auto 0 0; } .card-act a { text-decoration: none; } .list-group { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 2px; } .list-group:first-child { margin-top: 4px; } ul.list.rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; } ul.list.rows li > a.row-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; min-width: 0; color: inherit; } .row-main { display: flex; flex-direction: column; min-width: 0; } .row-sub { color: var(--muted); font-size: 13px; } .row-end { display: flex; align-items: center; gap: 10px; flex: none; font-size: 13px; } @media (max-width: 600px) { ul.list.rows li:has(.button) { flex-wrap: wrap; } .row-end { flex-wrap: wrap; } } .tz-st.mute { color: var(--muted); } /* фильтры — одной строкой на подложке; на телефоне поля во всю ширину */ .filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); } .filters input[type=search] { flex: 1 1 220px; min-width: 0; } /* строка с периодом и двумя флажками («Юнит-экономика»): поиск уступает место, чтобы «Excel» не уходил на вторую строку на 1440 */ .filters-tight input[type=search] { flex-basis: 120px; } .filters label { display: inline-flex; align-items: center; gap: 6px; } /* действие строки фильтров (форма добавления, «Пересчитать») — справа; на телефоне — с левого края, форма — своей строкой во всю ширину, её поля — тоже (вкладки «Карточек», 2.89 §5; в «Проверке товаров» то же делает .ck-add) */ .filters > .filters-act { margin-left: auto; } /* сегменты не растягиваются на ширину блока */ .segmented { align-self: flex-start; max-width: 100%; } /* P&L «Период» (план 55): таблица статей — заголовки групп, жирные итоговые строки, «к прошлому»; без чередования строк. На телефоне «Прошлый» и «Доля» уходят в мелкую строку под названием (.ph-only), слово «к прошлому» — в короткий вид */ table.plain.stat tr:nth-child(even) td { background: transparent; } table.plain.stat tr:hover td { background: var(--cobalt-soft); } table.plain.stat tr.key-row td, table.plain.stat tr.key-row:hover td { background: var(--cobalt-soft); } table.plain.stat tr.group-row td, table.plain.stat tr.group-row:hover td { background: var(--row-alt); color: var(--muted); font-size: 13px; font-weight: 600; } table.plain.stat tr.group-row td:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } table.plain.stat tr.tot-row td { font-weight: 600; } table.plain.stat tr.more-row td, table.plain.stat tr.more-row:hover td { background: transparent; text-align: left; font-size: 13px; } table.plain.stat tr.more-row .link-button { text-decoration: none; color: var(--muted); } .ph-only { display: none; } @media (max-width: 720px) { table.plain.stat .col-wide, table.plain.stat .wide-only { display: none; } .ph-only { display: inline; } table.plain.stat .pl-sub.ph-only { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; white-space: normal; } } /* плитка-статус «Сверка» (кнопка): ok — зелёное значение, warn — жёлтая, bad — красная; клик раскрывает подробную сверку */ .tile-status { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; } .tile-status .tile-value.is-text { white-space: normal; font-size: 20px; } /* «N отчётов с расхождением» — в две строки */ .tile-status.is-ok { border-color: var(--plus); } .tile-status.is-ok .tile-value { color: var(--plus); } .tile-status.is-warn { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--sheet)); } .tile-status.is-warn .tile-value, .tile-status.is-warn .tile-delta { color: var(--amber); } .tile-status.is-bad { border-color: var(--minus); background: var(--drr-bad); } .tile-status.is-bad .tile-value, .tile-status.is-bad .tile-delta { color: var(--minus); } #reconcile-box { margin-bottom: 16px; } #reconcile-box summary { cursor: pointer; } #reconcile-box[open] summary { margin-bottom: 8px; } /* P&L «По месяцам» (план 55): ручная таблица во всю ширину карточки, прокручивается только она; первая колонка (статья) закреплена слева — ячейка непрозрачная (цвет строки), иначе числа проезжают под подписью. Неполный месяц (.part) — штриховка столбца */ section.card.m-wrap { padding: 0; } .m-act { display: inline-flex; gap: 8px; flex-wrap: wrap; } .sum-text { white-space: pre-wrap; max-width: 90ch; margin: 8px 0 12px; } table.plain.stat.mon { width: max-content; min-width: 100%; font-size: 13px; } table.plain.stat.mon th, table.plain.stat.mon td { padding: 6px 10px; } table.plain.stat.mon th:first-child, table.plain.stat.mon td:first-child { position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 280px; background: var(--sheet); border-right: 1px solid var(--line); } table.plain.stat.mon th:first-child { z-index: 2; } table.plain.stat.mon tr.group-row td:first-child { background: var(--row-alt); } table.plain.stat.mon tr.key-row td:first-child { background: var(--cobalt-soft); } table.plain.stat.mon tr:hover td:first-child { background: var(--sheet); } table.plain.stat.mon tr.group-row:hover td:first-child { background: var(--row-alt); } table.plain.stat.mon tr.key-row:hover td:first-child { background: var(--cobalt-soft); } table.plain.stat.mon tr.sub-row td:first-child { padding-left: 24px; } /* «Общие расходы» — заголовок группы (group-row) с суммой и кнопкой раскрытия: подпись группы как у заголовков, «· N статей» — строчными */ table.plain.stat.mon tr.fold-row .link-button { font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; text-decoration: none; color: inherit; padding: 0; } table.plain.stat.mon tr.fold-row .m-fold { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; } @media (min-width: 721px) { /* на компьютере — одной строкой: колонка статей шире 280 px ради этой строки */ table.plain.stat.mon tr.fold-row td:first-child { max-width: none; } table.plain.stat.mon tr.fold-row .link-button { white-space: nowrap; } } table.plain.stat.mon .part { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted) 14%, transparent) 6px 7px); } .m-tag { display: block; font-size: 11px; font-weight: 500; color: var(--muted); } @media (max-width: 720px) { table.plain.stat.mon th:first-child, table.plain.stat.mon td:first-child { min-width: 128px; max-width: 150px; } table.plain.stat.mon tr.sub-row td:first-child { padding-left: 16px; } } /* плашки-фильтры по рядам («Частые ошибки» проверки, «Что поправить» карточек): подпись ряда слева, плашки с числом; нажатая плашка — фильтр, справа — «Фильтр: … · N сбросить» */ .fchips { display: flex; flex-direction: column; gap: 10px; } .fchips > .tz-row h3 { margin: 0 auto 0 0; } .fchips-active { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fchips-active .link-button { padding: 0; } .fchips-lv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; align-items: start; } .fchips-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 5px; } button.fchips-h { justify-self: start; min-height: 0; padding: 5px 6px 3px; margin-left: -6px; border: 0; text-align: left; border-radius: var(--radius-s); text-decoration: underline dotted; text-underline-offset: 3px; } button.fchips-h:not([aria-pressed="true"]) { background: none; } button.fchips-h[aria-pressed="true"] { color: var(--on-accent); text-decoration: none; } .fchips-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .fchips-row .link-button { align-self: center; padding: 0; } .fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 3px 10px; border-radius: 999px; font-size: 13px; } .fchip .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .fchip .n { color: var(--muted); } .fchip .fl { color: var(--minus); } .fchip[aria-pressed="true"] .fl { color: inherit; } .fchips-tail { align-self: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; } /* выбор строк «Цен и РРЦ»: полоса вместо счётчика над таблицей */ .selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 6px 6px 6px 12px; border-radius: 8px; background: var(--cobalt-soft); } .selbar b { margin-right: 4px; font-weight: 600; color: var(--cobalt); } .fchip[aria-pressed="true"] .n { color: inherit; } .dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .dot.bad { background: var(--minus); } .dot.warn { background: var(--amber); } .dot.good { background: var(--plus); } /* окна: × всегда в правом верхнем углу, кнопки шапки — своей группой с переносом; шапка прилипает при прокрутке */ .modal .dialog { position: relative; } .dialog-head { position: sticky; top: -16px; z-index: 2; background: var(--sheet); padding: 4px 44px 8px 0; flex-wrap: wrap; } .dialog-head .close { position: absolute; top: 2px; right: -6px; } .dialog-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .modal .dialog.xl { width: min(1440px, 96vw); height: 92vh; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: var(--fog); } .dialog.xl .dialog-head { position: static; padding: 10px 60px 10px 16px; margin: 0; background: var(--sheet); border-bottom: 1px solid var(--line); } .dialog.xl .dialog-head .close { top: 8px; right: 12px; } .dialog.xl .dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 18px; } /* подвал окна: итог слева, кнопки группой; на телефоне главная кнопка — первой во всю ширину */ .dialog-foot { position: sticky; bottom: -20px; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin: 16px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--sheet); } .dialog-foot .sum { margin-right: auto; min-width: 0; } .dialog-foot .acts { display: flex; gap: 8px; flex-wrap: wrap; } .dialog.xl .dialog-foot { position: static; margin: 0; } /* подсветка поля после перехода из «Готовности» или списка */ .ws-flash { animation: ws-flash 1.6s ease-out; border-radius: var(--radius-s); } @keyframes ws-flash { from { box-shadow: 0 0 0 3px var(--amber); } to { box-shadow: 0 0 0 3px transparent; } } @media (max-width: 720px) { .filters > select, .filters > input, .filters > details { flex: 1 1 100%; width: 100%; } .filters > .filters-act { margin-left: 0; } .filters > form.filters-act { flex: 1 1 100%; } .filters > form.filters-act > input, .filters > form.filters-act > select { flex: 1 1 100%; min-width: 0; } .fchips-lv { grid-template-columns: minmax(0, 1fr); } .fchip { max-width: 100%; } .fchips-tail { white-space: normal; } .selbar { flex-basis: 100%; } .fchips-active { flex-basis: 100%; } .modal .dialog.xl { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; } .dialog-foot { flex-direction: column; align-items: stretch; } .dialog-foot .acts { flex-direction: column; } .dialog-foot .acts > * { width: 100%; } .dialog-foot .acts .primary { order: -1; } } /* 7.11 §2: большое окно со страницей (iframe с ?embed=1); встроенная страница — без шапки, меню и нижней панели */ :root[data-embed] { --tabbar: 0px; } [data-embed] main { padding-top: 12px; } [data-embed] .back-list { display: none; } [data-embed] .ln-head > div:first-child { display: none; } /* пустой первый блок шапки запуска (h1 скрыт) не даёт отступ над рядом кнопок */ [data-embed] main h1 { display: none; } /* заголовок окна — .pw-title рамки; h1 остаётся в DOM: openPage читает его текст */ [data-embed] p:has(> .back-list:only-child) { display: none; } /* пустой абзац ссылки «к списку» не оставляет отступ */ html.pw-open { overflow: hidden; } .modal.pw { padding: 18px 24px; align-items: stretch; } .pw-win { width: 100%; max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--fog); border-radius: 10px; box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 30%, transparent); } .pw-head { position: relative; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 60px 10px 16px; background: var(--sheet); border-bottom: 1px solid var(--line); } .pw-title { flex: 1 1 260px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .pw-head .close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; padding: 4px 8px; color: var(--muted); } .pw-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--fog); } @media (max-width: 720px) { :root[data-embed] { --tabbar: 0px; } /* перебить --tabbar: 64px телефона */ .modal.pw { padding: 0; } .pw-win { border-radius: 0; height: 100dvh; } .pw-title { flex-basis: 100%; } } /* страница запуска (7.11 §3): шапка с главным действием и «Ещё», список товаров, строки полей «Что поправить | Все поля» */ .ln-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; } .ln-head > div:first-child { flex: 1 1 360px; min-width: 0; } .ln-head h1 { margin: 0 0 4px; overflow-wrap: anywhere; } .ln-head > div:first-child > p, .ln-info > p { margin: 0 0 6px; } .ln-info { flex: 1 1 100%; min-width: 0; } /* шапка запуска: заголовок, ряд кнопок, потом текст — рост текста после загрузки ряд не сдвигает */ #l-status { font-size: 13px; } #l-st .pill { white-space: normal; } #l-problems { font-size: 13px; } .ln-cardhead .ln-head > div:first-child { flex-basis: 240px; } /* длинный статус переносится, а не раздвигает страницу */ .ln-headr { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex-basis: 100%; min-width: 0; max-width: 100%; } /* ряд кнопок — всегда отдельной строкой: длина текста слева (до/после загрузки) его не двигает */ .ln-msgs { margin: 0; font-size: 13px; text-align: left; } /* статус — с начала строки, у «Проверить InSales» */ #ac-open[data-pending] { visibility: hidden; } /* место под «Создать в InSales…» до ответа API */ #l-assignee { min-width: 14em; } /* резерв под имя: пустой select до загрузки той же ширины, что после */ .ln-msgs:not(:has(span:not(:empty))) { display: none; } .ln-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ln-layout { margin-top: 12px; } details.tool-more[data-menu] { position: relative; } details.tool-more[data-menu] > summary { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; font-size: inherit; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--sheet); cursor: pointer; list-style: none; white-space: nowrap; } details.tool-more[data-menu] > summary:hover { border-color: var(--cobalt); } details.tool-more[data-menu] > summary::-webkit-details-marker { display: none; } details.tool-more[data-menu][open] > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; flex-direction: column; align-items: stretch; min-width: 240px; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent); } details.tool-more[data-menu] label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: 13px; color: var(--muted); } details.tool-more[data-menu] select { color: var(--ink); } #ln-find { width: 100%; margin-top: 10px; } .ln-legend { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--grid); font-size: 12px; } .ln-cardhead { display: flex; flex-direction: column; gap: 12px; } .ln-cardhead > p { margin: 0; } #ln-kicker { margin: 0 0 2px; } #ln-title { margin: 0; font-size: 20px; overflow-wrap: anywhere; } .ln-viewrow { justify-content: space-between; } .ln-viewrow .segmented { margin: 0; } #ln-secs { display: flex; flex-direction: column; gap: var(--gap); } #ln-secs > .card { margin: 0; } #ln-secs .tz-sec-h { margin-bottom: 0; } .ln-f { display: grid; grid-template-columns: 180px minmax(0, 1fr) 176px; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--grid); align-items: start; } .ln-f:first-of-type { border-top: 0; } .ln-f:focus { outline: none; } .ln-f .l { font-size: 13px; color: var(--muted); padding-top: 2px; overflow-wrap: anywhere; } .ln-hint { display: block; font-size: 12px; } .ln-f .v { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ln-f .val { overflow-wrap: anywhere; } .ln-f .val pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: .85em; max-height: 16em; overflow: auto; } .learn-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30vh; overflow: auto; margin: 4px 0; } .ln-f .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; } .ln-f .meta:empty { display: none; } .ln-f .meta .offer { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ln-act { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: flex-end; align-items: center; } .ln-act .link-button { font-size: 13px; } .ln-btn { font-size: 13px; padding: 2px 10px; } .ln-f.hot { margin: 4px -8px 0; padding: 10px 8px; border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line)); border-radius: var(--radius-s); background: color-mix(in srgb, var(--amber) 6%, var(--sheet)); } .ln-f.hot + .ln-f { border-top: 0; } .ln-rest { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 13.5px; } .ln-rest .link-button { padding: 0; } .ln-note { margin: 0; font-size: 13px; } .ln-tznote { white-space: pre-line; } #ln-tznote .tz-strip { margin: 0; } /* отступ даёт gap шапки карточки */ .ln-allgood { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; } .ln-allgood p { margin: 0; } .ln-allgood .ln-note { flex-basis: 100%; } p.ln-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; font-size: 13px; } p.ln-meta .link-button { padding: 0; } table.plain.ln-series td, table.plain.ln-series th { text-align: left; vertical-align: top; white-space: normal; } table.plain.ln-series td.n, table.plain.ln-series th.n { text-align: right; white-space: nowrap; } table.plain.ln-series td.nowrap { white-space: nowrap; } table.plain.ln-series td.t { min-width: 12em; } table.plain.ln-series td.p { min-width: 10em; font-size: 12px; color: var(--muted); } table.ln-series .ln-btn { display: block; margin-top: 4px; } /* телефон: часть рассрочки — блоком, подписи вместо шапки столбцов */ @media (max-width: 700px) { table.plain.ln-series thead { display: none; } table.plain.ln-series, table.plain.ln-series tbody, table.plain.ln-series tr, table.plain.ln-series td { display: block; } table.plain.ln-series tr { padding: 8px 0; border-bottom: 1px solid var(--line); } table.plain.ln-series td, table.plain.ln-series td.n { border: 0; padding: 2px 0; min-width: 0; text-align: left; } table.plain.ln-series td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; } } #l-problems details > summary { cursor: pointer; color: var(--cobalt); } .ln-sum { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; } #ln-ready h2, #ln-launch h2 { margin: 0; } #ln-ready .tz-group-h { margin: 16px 0 4px; } #ln-ready ul.tz-checks .link-button { padding: 0; text-align: left; } #ln-ready ul.tz-checks li { align-items: baseline; } /* точка — на строке текста: на телефоне кнопка-ссылка 44 px */ .ln-racts { display: block; margin-top: 2px; } .ln-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin: 8px 0 0; } .ln-kv dt { color: var(--muted); } .ln-kv dd { margin: 0; overflow-wrap: anywhere; } .ln-path { display: block; font-size: 12px; color: var(--muted); } #ln-launch .ln-acts { margin-top: 12px; } @media (max-width: 700px) { .ln-f { grid-template-columns: minmax(0, 1fr); } .ln-act { justify-content: flex-start; } .ln-acts > * { flex: 1 1 auto; } .ln-rest .link-button { flex-basis: 100%; text-align: left; } .ln-headr { align-items: stretch; } details.tool-more[data-menu] > summary { width: 100%; } } /* окно «Создать в InSales» (7.11 §4): блоки колонкой, товары по группам, категории и параметры рядом, ход и отчёт внизу */ .ac-body { display: flex; flex-direction: column; gap: 12px; } .ac-body > p { margin: 0; } .ac-body .card { margin: 0; } .ac-body .tz-sec-h { margin-bottom: 4px; } .ac-body .tz-sec-h h3, .ac-body .card > h3 { margin: 0 0 4px; } .ac-body .tz-sec-h .link-button { padding: 0; } .ac-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .ac-it { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--grid); } .tz-group-h + .ac-it, .ac-body .card > h3 + .ac-it { border-top: 0; } .ac-it input[type=checkbox] { margin-top: 3px; accent-color: var(--cobalt); } .ac-it .b { flex: 1 1 auto; min-width: 0; } .ac-it .t { font-weight: 500; overflow-wrap: anywhere; } .ac-it label.t { display: block; cursor: pointer; } .ac-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--muted); } .ac-meta .pill { white-space: normal; border-radius: 10px; } /* длинная причина «не создаём» переносится, а не раздвигает окно */ .ac-sub { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; } .ac-sub input { margin: 0; accent-color: var(--cobalt); } .ac-it details { margin-top: 4px; font-size: 13px; } .ac-it details > summary { cursor: pointer; color: var(--cobalt); font-size: 12.5px; } .ac-it pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 320px; overflow: auto; margin: 4px 0; } .ac-it.off { opacity: .55; } .ac-cat { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--grid); } .ac-body .card > h3 + .ac-cat { border-top: 0; } .ac-cat.off .ac-path { opacity: .6; } .ac-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .ac-row .ac-path { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; } .ac-row > label:not(.ac-sub) { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: var(--muted); } .ac-cat input[list], .ac-row input:not([type=checkbox]) { width: 100%; min-width: 0; } .ac-body .tz-switch { margin: 0 0 4px; } .ac-line { margin: 0; font-size: 13px; } .ac-line:not(:has(span:not(:empty))) { display: none; } #ac-report p { margin: 4px 0; font-size: 13px; overflow-wrap: anywhere; } #ac-report h3 { margin: 12px 0 4px; } .ac-log:has(#ac-report:not(:empty)) .ac-hint, .ac-log:has(.ac-line span:not(:empty)) .ac-hint { display: none; } .ac-hint { margin: 0; } .ac-pwait { margin: 0; padding: 6px 16px; background: var(--sheet); border-bottom: 1px solid var(--line); font-size: 13px; } @media (max-width: 760px) { .ac-two { grid-template-columns: minmax(0, 1fr); } } /* «Проверка товаров» (7.11 §5) */ .ck-add { margin-left: auto; } .ck-add > summary { display: inline; cursor: pointer; } .ck-add[open] { flex-basis: 100%; } .ck-add form { margin-top: 8px; } @media (max-width: 720px) { .ck-add { margin-left: 0; } } /* окно товара проверки (7.11 §5): пункты по разделам слева, «Готовность» и «Товар в проверке» справа */ .ck-win { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 16px; align-items: start; } .ck-main, .ck-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .ck-side { position: sticky; top: 0; } .ck-win .card { margin: 0; } .ck-win section.tz-sec { gap: 0; } /* между заголовком раздела и полосой — отступ полосы, а не ещё и зазор */ .ck-msg { grid-column: 1 / -1; margin: 0; font-size: 13px; } .ck-msg:empty { display: none; } .ck-nav { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; } .ck-nav button { min-width: 36px; } .ck-kicker { font-weight: 400; font-size: 13px; } /* серая полоса: оформление в «Проверке товаров» и WS.strip('mute') — идёт эксперимент, карточку не трогаем (2.89 §3) */ .tz-strip.design, .tz-strip.mute { border-color: var(--line); border-left-color: var(--muted); background: var(--row-alt); } .ck-win .tz-strip > * { flex-basis: 100%; } .ck-sh { display: flex; gap: 4px 8px; align-items: baseline; justify-content: space-between; } .ck-sh strong { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; } .ck-sh:focus { outline: none; } .ck-pair { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 2px 12px; margin: 4px 0 0; } .ck-pair dt { color: var(--muted); } .ck-pair dd { margin: 0; overflow-wrap: anywhere; } .ck-hint { margin: 2px 0 0; } .ck-ex { padding: 8px 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .ck-ex .link-button { padding: 0; } .ck-ex-form { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 4px; } .ck-ex-form label { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; flex: 1 1 280px; min-width: 0; color: var(--muted); } .ck-ex-form input { flex: 1 1 200px; min-width: 0; } .ck-ok > summary { cursor: pointer; font-size: 13px; padding: 6px 0; color: var(--plus); } .ck-side .card h3 { margin: 0 0 10px; } .ck-side .tz-checks li { align-items: center; } .ck-side .tz-checks li > span:last-child:has(> .link-button) { display: contents; } /* кнопка пункта WS.ready — прямо в строке: многоточие по ширине */ .ck-side .tz-checks .link-button { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; text-align: left; } .ck-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .ck-field select { width: 100%; } .ck-check { display: flex; gap: 6px; align-items: center; margin-top: 12px; } .ck-note { margin: 4px 0 0; } #ck-exclude { width: 100%; margin-top: 14px; } .ck-mark p { margin: 0 0 4px; } @media (max-width: 900px) { .ck-win { grid-template-columns: minmax(0, 1fr); } .ck-side { position: static; order: -1; } } @media (max-width: 720px) { .ck-pair { grid-template-columns: minmax(0, 1fr); gap: 0; } .ck-pair dd { margin-bottom: 6px; } .ck-sh { flex-direction: column; align-items: flex-start; } .ck-sh .pill { order: -1; } .dialog:has(.ck-win) .dialog-acts > * { flex: 1 1 auto; } /* кнопки шапки окна товара — во всю ширину, как в макете */ } /* возвраты, этап 2 (2.90 §5): экран приёмки для телефона и страница записи; касание — не ниже 44 px на любой ширине */ .rt-receive-page { max-width: 640px; margin: 0 auto; } .rt :is(button, a.button, select, input:not([type=checkbox]):not([type=radio])) { min-height: 44px; } .rt textarea { min-height: 88px; } .rt .stack-form { gap: 12px; } .rt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rt-label, .rt-field > label:not(.rt-file) { font-size: 13px; color: var(--muted); } .rt-find { display: flex; flex-direction: column; gap: 6px; } .rt-find label { font-size: 13px; color: var(--muted); } .rt-find input { font-size: 17px; letter-spacing: .02em; } .rt-wide { width: 100%; } .rt .card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; margin: 0 0 16px; } .rt .card > h2:first-child { margin-top: 0; } .stack-form label.rt-check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; min-height: 44px; } .stack-form .rt-check input { width: 22px; height: 22px; margin: 0; } /* выбор фото: поле скрыто (.tz-sr), подпись — кнопкой; на телефоне предложит камеру или галерею */ .rt-file { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; padding: 6px 14px; border: 1px dashed var(--line); border-radius: var(--radius-s); background: var(--sheet); color: var(--cobalt); cursor: pointer; } .rt-file:hover, .tz-sr:focus-visible + .rt-file { border-color: var(--cobalt); } .tz-sr:focus-visible + .rt-file { outline: 2px solid var(--cobalt); outline-offset: 2px; } .rt input.tz-sr { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; } /* .stack-form растягивает поля на 100% */ .tz-sr:disabled + .rt-file { color: var(--muted); cursor: not-allowed; border-style: solid; } .rt-cond { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .rt-cond button { border-radius: var(--radius-s); margin: 0; } .rt .segmented button { min-width: 64px; } .rt-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rt-chips button { text-align: left; } .rt-product { position: relative; } .rt-suggest { list-style: none; margin: 0; padding: 4px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-s); max-height: 264px; overflow-y: auto; } .rt-suggest button { display: block; width: 100%; text-align: left; border: 0; border-radius: var(--radius-s); background: none; } .rt-suggest button:hover, .rt-suggest button:focus-visible { background: var(--cobalt-soft); } .rt-thumbs { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 12px 0 0; } .rt-thumbs:empty { display: none; } .rt-thumbs figure { position: relative; margin: 0; display: flex; flex-direction: column; gap: 4px; } .rt-thumbs img { display: block; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--fog); } .rt-thumbs-big img { width: 128px; height: 128px; } .rt .rt-thumbs figure > button[data-drop] { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 20%, transparent); } .rt-thumbs-big { padding: 0; } .rt-msg { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--sheet); border: 1px solid var(--line); } .rt-msg.good { background: var(--drr-good); border-color: transparent; } .rt-msg.error { background: var(--drr-bad); border-color: transparent; } .rt-msg.warn { background: color-mix(in srgb, var(--amber) 14%, var(--sheet)); border-color: transparent; } ul.rt-links li { padding: 0; } ul.rt-links li.muted, ul.rt-links li.error { padding: 8px 0; } ul.rt-links li a { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 44px; padding: 6px 0; color: var(--ink); } ul.rt-links li a > span:first-child { min-width: 0; overflow-wrap: anywhere; } .rt-sub { display: block; color: var(--muted); font-size: 13px; } .rt-dl { grid-template-columns: 180px minmax(0, 1fr); } .rt-cols { margin-bottom: 4px; } .rt-acts { margin-top: 4px; } @media (max-width: 720px) { .rt-cond { grid-template-columns: 1fr 1fr; } .toolbar > .rt-receive { flex: 1 1 100%; order: -1; } .rt-acts > * { flex: 1 1 100%; } .rt-acts > .primary { order: -1; } .rt-dl { grid-template-columns: minmax(0, 1fr); } } /* 2.89: Готовность, предложения, карточки — общие части WS.ready (пилюли) и WS.proposal (предложение пунктиром) */ .ws-ready-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .ws-prop { border: 1px dashed var(--cobalt); border-radius: 6px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; } .ws-prop-q { font-weight: 500; flex: 0 0 16em; } /* одна ширина: «почему» соседних предложений — с одной позиции */ .ws-prop-why { flex: 1 1 300px; color: var(--muted); } .ws-prop-q, .ws-prop-why { min-width: 0; overflow-wrap: anywhere; } .ws-prop-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; } .ws-prop > input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; } @media (max-width: 720px) { .ws-prop-q { flex: 1 1 auto; } .ws-prop > input[type=checkbox] + .ws-prop-q { flex: 1 1 0; } } /* галочка — в строке с вопросом */ /* 2.89 §1: «← N из M →» большого окна — как .nav макета окна товара: рамка, кнопки 36 px, позиция между ними; высота — по строке шапки (рядом с «Открыть отдельно»), на телефоне не переносится внутрь */ .pw-nav { display: inline-flex; align-self: stretch; align-items: stretch; flex: none; min-height: 32px; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: var(--sheet); } .pw-nav button { width: 36px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--row-alt); } .pw-nav button:hover:not(:disabled) { background: var(--cobalt-soft); color: var(--cobalt); } .pw-nav button:disabled { color: var(--muted); opacity: .5; cursor: default; } .pw-pos { display: inline-flex; align-items: center; padding: 0 10px; font-size: 13px; } /* 2.89 §2: список «Товары» — даты данных под строкой фильтров, число товаров в сегментах групп, колонка «Что сделать» (пункты одного уровня — группой за точкой, группы переносятся) */ .filters > .filters-note { flex: 1 1 100%; margin: 0; font-size: 13px; } .segmented .n { margin-left: 4px; color: var(--muted); } .segmented button[aria-pressed="true"] .n { color: inherit; opacity: .8; } .todo-cell { display: flex; flex-wrap: wrap; gap: 2px 10px; white-space: normal; } .todo-cell > span { display: inline-flex; gap: 5px; align-items: center; } /* телефон: длинная пилюля в «Что сделать» (/ads) переносится внутри себя, строка растёт — а не обрезается краем ячейки */ @media (max-width: 720px) { .todo-cell .pill { white-space: normal; line-height: 16px; padding: 1px 8px; } } /* телефон: название рядом с «Что сделать» узкое — переносится, а не обрезается многоточием */ @media (max-width: 720px) { #cards .tabulator-cell[tabulator-field="name"] { white-space: normal; overflow-wrap: anywhere; } } /* 2.89 §3: окно товара «Карточек» (card.html, макеты cards/CardWindow и Accessory) — шапка с действиями справа, разделы слева, «Что сделать» и «Товар» справа (280–320 px; на узком — под разделами) */ .cw-head { display: flex; gap: 8px 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; } .cw-title { flex: 1 1 360px; min-width: 0; } .cw-meta { margin: 0 0 2px; } .cw-title h1 { margin: 0; overflow-wrap: anywhere; } .cw-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .cw-body { display: flex; gap: var(--gap); align-items: flex-start; flex-wrap: wrap; } .cw-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .cw-side { flex: 1 1 280px; max-width: 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; } .cw-main > .card, .cw-side > .card, .cw-main > p { margin: 0; } .cw-main .tz-sec h2 { font-size: 16px; margin: 0; } details.tz-sec > summary h2 { display: inline; } .cw-main section.tz-sec { gap: 10px; } .cw-main .tz-sec-h { margin-bottom: 0; } #content-box { display: flex; flex-direction: column; gap: 8px; } .cw-main .tz-strip { gap: 6px; padding: 10px 12px; margin: 0; } .cw-main .tz-strip > * { flex-basis: 100%; } .cw-strip-h { display: flex; gap: 4px 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .cw-strip-t { font-size: 14px; font-weight: 500; } .cw-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 13px; } .cw-kv dt { color: var(--muted); } .cw-kv dd { margin: 0; overflow-wrap: anywhere; } .cw-side .cw-kv { grid-template-columns: 120px minmax(0, 1fr); margin-top: 8px; } .cw-done { display: flex; gap: 4px 12px; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .cw-after { margin: 0; padding-left: 18px; } .cw-lost { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-s); background: color-mix(in srgb, var(--minus) 6%, var(--sheet)); font-size: 13px; } .cw-lost b { color: var(--minus); font-weight: 600; } .cw-side .card h3 { margin: 0; } .cw-side ul.tz-checks { margin-top: 4px; } .cw-side ul.tz-checks li { align-items: baseline; } .cw-side .dot { position: relative; top: -1px; } .cw-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; } .cw-more[open] > summary { margin-bottom: 8px; } /* разделы «Ключи», «Подсказки», «Конкуренты» (2.89 §3): подзаголовок группы, как .grp макета; группа предложений; строки «почему» у конкурента; ряд ссылок «Скопировать / показать» */ .cw-grp { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .cw-stack { display: flex; flex-direction: column; gap: 12px; } .cw-props { display: flex; flex-direction: column; gap: 6px; } .cw-props > .ws-prop, details.cw-props > .ws-prop { margin: 0; } .cw-props .cw-grp { margin: 0; } .ws-prop-why > .cw-line { display: block; } .cw-links { display: inline-flex; gap: 4px 14px; flex-wrap: wrap; } .cw-links .link-button, .cw-done .link-button { padding: 0; } #key-msg:empty { display: none; } #key-msg { margin: 0; } @media (max-width: 900px) { .cw-side { max-width: none; position: static; } } @media (max-width: 720px) { .cw-kv, .cw-side .cw-kv { grid-template-columns: minmax(0, 1fr); gap: 0; } .cw-kv dd + dt { margin-top: 4px; } } /* 2.89 §4: окно семейства «Исследования» (cards.html, familyHtml; макет cards/Family) — та же раскладка .cw-*: подпись над названием в шапке, сообщение, «Отметить все / Принять / Отклонить отмеченные», строки товаров с переносом, форма названий */ .cw-kicker { font-weight: 400; } .cw-msg { margin: 0; } .cw-msg:empty { display: none; } .cw-bulk { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); } .cw-mem { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; } .cw-mem:first-child { border-top: 0; } .cw-mem-n { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; } .cw-mem select { width: auto; flex: 0 1 240px; min-width: 0; max-width: 100%; } .cw-names { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .cw-names label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .cw-names button { align-self: flex-start; } .cw-names p { margin: 0; font-size: 13px; } /* 2.97 §4: окно товара ЮЭ (product.html, макеты ue/ProductWindow и ProductPhone) — та же раскладка .cw-*; cw-side-first — на узком колонка справа идёт над разделами; графики — внутри раздела без своей рамки; «Статьи» — три столбца (подпись, сумма, % выручки), итог «Маржа» — под чертой; подвал таблицы — счётчик слева, сумма справа */ .cw-side-first > .cw-side { flex-basis: 300px; max-width: 340px; } .cw-side-first .cw-side .cw-kv { grid-template-columns: 110px minmax(0, 1fr); } @media (max-width: 900px) { .cw-side-first > .cw-side { order: -1; max-width: none; } } .cw-main .tz-sec > .chart { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } .cw-main .tz-sec > .chart + .chart { padding-top: 16px; border-top: 1px solid var(--grid); } .cw-side-h { display: flex; gap: 4px 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .cw-side-h h3 { margin: 0; } .cw-art { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; margin-top: 10px; font-size: 13px; } .cw-art > span { padding: 5px 0; border-top: 1px solid var(--grid); } .cw-art > span:nth-child(-n+3) { border-top: 0; } .cw-art-v { text-align: right; white-space: nowrap; padding-left: 12px; } .cw-art-p { text-align: right; white-space: nowrap; color: var(--muted); font-size: 12px; } .cw-art .cw-art-b { font-weight: 600; } .cw-art .cw-art-tot { border-top: 2px solid var(--ink); font-weight: 600; font-size: 14px; padding-top: 7px; } .cw-art .cw-art-p.cw-art-tot { font-size: 12px; } .cw-art-p.good { color: var(--plus); } .cw-art-p.bad { color: var(--minus); } .cw-art > .muted { grid-column: 1 / -1; border-top: 0; } .cw-zero { margin: 8px 0 0; font-size: 12px; } .cw-tfoot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } @media (max-width: 720px) { .cw-meta-full { display: none; } .cw-acts { min-width: 0; max-width: 100%; } .cw-acts > .period { flex: 1 1 100%; min-width: 0; max-width: 100%; } /* чипы периода листаются внутри, а не за край */ .cw-side-first .cw-side .cw-kv { gap: 2px 12px; } .cw-side-first .cw-kv dd + dt { margin-top: 0; } /* макет ProductPhone: «Товар» — двумя столбцами и на телефоне */ } /* 2.97 §1: сводка одной строкой (ЮЭ, «Цены и РРЦ»): подпись «по чему» слева, показатели рядом; значения — как пришли с сервера */ .sumbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 10px 16px; } .sumbar-cap { display: flex; flex-direction: column; gap: 2px; min-width: 150px; margin-right: 4px; padding-right: 20px; border-right: 1px solid var(--grid); } .sumbar-cap b { font-size: 14px; font-weight: 600; } .sumbar-st { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 20px; border-left: 1px solid var(--grid); } .sumbar-cap + .sumbar-st { border-left: 0; } .sumbar-st .k { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .sumbar-st .v { font-size: 17px; font-weight: 600; white-space: nowrap; } .sumbar-st .s { font-size: 12px; color: var(--muted); } /* строка над таблицей: счётчик слева, легенда и кнопки справа; на странице с рядами плашек и сводкой — тот же зазор между блоками */ .toolbar-legend { display: inline-flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; } .toolbar > .grow { flex: 1 1 auto; min-width: 0; } .toolbar input[type=search] { flex: 0 1 280px; min-width: 0; } /* поиск рядом со «Столбцами» (окно кампании, макет CampaignWindow) */ .stack-gap { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .stack-gap > .card { margin: 0; } @media (max-width: 720px) { .sumbar-cap { flex-basis: 100%; border-right: 0; padding-right: 0; } .sumbar-st { padding: 0 16px 0 0; border-left: 0; } .toolbar-legend { flex-wrap: wrap; white-space: normal; } .toolbar input[type=search] { flex: 1 1 100%; } } /* 2.108: экран «Акции» (promos.html, promo_product.html, promo_action.html; макеты docs/ui/mockups/promos) */ .pr-h { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 12px; } .pr-h h1 { margin: 0; } .pr-bad { display: inline-block; padding: 1px 6px; border-radius: var(--radius-s); background: var(--drr-bad); color: var(--minus); } .pr-hint { color: var(--cobalt); cursor: help; } .pr-say { margin: 0 0 4px; } .pr-price { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pr-price input { width: 120px; } .pr-lim { margin: 8px 0 0; font-size: 12.5px; } .pr-cond { white-space: pre-line; margin: 8px 0 0; } /* 2.109 §5: запись в Ozon — панель над таблицей и окно подтверждения (promo_write.js) */ .pw-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } .pw-bar .pw-n { margin-right: auto; } .pw-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .pw-pick select { min-width: 0; max-width: 100%; } .pw-head { margin: 0 0 4px; } .pw-note { margin: 0 0 8px; font-size: 12.5px; } .pw-all { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .pw-all input { width: 110px; } .pw-scroll { overflow-x: auto; } .pw-t td.pw-text, .pw-t th.pw-text { text-align: left; white-space: normal; min-width: 180px; } .pw-t td { vertical-align: middle; } .pw-t .pw-price { width: 110px; text-align: right; } .pw-t tr.pw-more td { padding-top: 0; border-top: 0; font-size: 12.5px; } .pw-t tr.pw-more .pw-text { min-width: 0; } .pw-res td.pw-text { min-width: 0; } .pw-res .pill { white-space: normal; } .pj-wrap .tabulator-cell { white-space: normal; overflow-wrap: anywhere; } .pw-t tr.pw-off td { color: var(--muted); } .pw-sum { margin: 0 0 8px; } .pw-err { flex: 1 1 100%; } /* Поля дат (dateField в app.js): видимое «дд.мм.гггг» + кнопка календаря; настоящий input[type=date] невидим и несёт ISO */ .date-field { position: relative; display: inline-flex; align-items: center; gap: 2px; } .date-field[hidden] { display: none; } .date-field .date-text { width: 8.6em; min-width: 0; } .date-field .date-pick { padding: 2px 6px; background: none; border: 0; cursor: pointer; min-height: 0; } input.date-native { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; } #sync-banner .sync-more { margin-top: 4px; font-size: 13px; } #sync-banner .sync-more summary { cursor: pointer; color: var(--cobalt); } #sync-banner .sync-more ul { margin: 4px 0 0; padding-left: 18px; max-height: 40vh; overflow: auto; }