/* ============================================================ Dashbox — дашборд VK Рекламы (MPN) Система оформления — SPEC-redesign §1 и README дизайнера (.work/design-review/v1/design_handoff_dashbox/README.md): • токены цветов — oklch (каноническое значение), hex — запасные значения для браузеров без oklch (@supports ниже); • тема — [data-theme="dark"] на , по умолчанию светлая; • шрифты Onest (интерфейс) и IBM Plex Mono (числа) — локально из web/fonts/: CSP экрана запрещает чужие адреса. Лицензия — web/fonts/LICENSE (SIL OFL 1.1). Старые имена токенов (--text, --hairline, --bad …) оставлены синонимами новых: разделы, которые ещё не переделаны (Кампании, Отчёты, Планы, Настройки), получают новую палитру без правок. ============================================================ */ /* ---------- Шрифты ---------- */ @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/onest-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/onest-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/onest-symbols.woff2) format('woff2'); unicode-range: U+2190, U+2192, U+2194-2199, U+25A0-27BF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/ibm-plex-mono-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/ibm-plex-mono-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/ibm-plex-mono-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/ibm-plex-mono-cyrillic-500.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/ibm-plex-mono-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/ibm-plex-mono-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/ibm-plex-mono-cyrillic-600.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ---------- Токены: светлая тема (по умолчанию) ---------- Первым — hex-приближение из README, ниже в @supports — канонические oklch. */ :root { color-scheme: light; --bg: #f5f7f9; --surface: #fdfeff; --surface2: #eff3f6; --surface3: #e8ecf0; /* между surface2 и line: наведение на серое, пилюли */ --line: #dee2e6; --line2: #ebeef1; --line-strong: #c9ced5; /* граница наведённого поля и кнопки */ --ink: #1a2029; --ink2: #474d58; --ink3: #666c77; --accent: #275eae; --accent-bg: #e4efff; --crit: #b32322; --crit-bg: #ffe0dc; --crit-line: #febab4; --warn: #824700; --warn-bg: #ffeec3; --warn-line: #f0d08f; --ok: #106c3e; --ok-bg: #daf7e3; --info: #216188; --info-bg: #e0f1fe; --bar: #618fc8; --bar2: #a9c0de; --skel: #e5e8ec; --shadow-menu: 0 12px 32px -12px rgba(38, 48, 66, 0.25); --scrim: rgba(20, 26, 36, 0.28); } @supports (color: oklch(0 0 0)) { :root { --bg: oklch(0.975 0.004 250); --surface: oklch(0.997 0.002 250); --surface2: oklch(0.962 0.006 250); --surface3: oklch(0.942 0.007 250); --line: oklch(0.91 0.007 250); --line2: oklch(0.948 0.005 250); --line-strong: oklch(0.85 0.01 250); --ink: oklch(0.24 0.02 260); --ink2: oklch(0.42 0.02 260); --ink3: oklch(0.53 0.018 260); --accent: oklch(0.49 0.14 258); --accent-bg: oklch(0.95 0.025 258); --crit: oklch(0.5 0.18 27); --crit-bg: oklch(0.94 0.045 25); --crit-line: oklch(0.85 0.08 25); --warn: oklch(0.46 0.11 62); --warn-bg: oklch(0.955 0.06 85); --warn-line: oklch(0.87 0.09 85); --ok: oklch(0.47 0.11 155); --ok-bg: oklch(0.95 0.04 155); --info: oklch(0.47 0.09 240); --info-bg: oklch(0.95 0.025 240); --bar: oklch(0.64 0.1 255); --bar2: oklch(0.8 0.05 255); --skel: oklch(0.93 0.006 250); --shadow-menu: 0 12px 32px -12px oklch(0.3 0.03 260 / 0.25); --scrim: oklch(0.2 0.02 260 / 0.28); } } /* ---------- Токены: тёмная тема ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1114; --surface: #15171b; --surface2: #1b1e23; --surface3: #22252a; --line: #2b2e33; --line2: #202327; --line-strong: #3d4147; --ink: #e9ebef; --ink2: #c0c4cb; --ink3: #979ca3; --accent: #8bb9fd; --accent-bg: #1e2e47; --crit: #ff9189; --crit-bg: #521d1b; --crit-line: #843c38; --warn: #f5c66d; --warn-bg: #442e09; --warn-line: #72511e; --ok: #7ad59c; --ok-bg: #173523; --info: #8ec5ec; --info-bg: #1a3040; --bar: #78a1d6; --bar2: #3a4e68; --skel: #24272b; --shadow-menu: 0 12px 32px -12px rgba(0, 0, 0, 0.6); --scrim: rgba(0, 0, 0, 0.45); } @supports (color: oklch(0 0 0)) { :root[data-theme="dark"] { --bg: oklch(0.175 0.008 260); --surface: oklch(0.205 0.009 260); --surface2: oklch(0.235 0.01 260); --surface3: oklch(0.26 0.01 260); --line: oklch(0.3 0.01 260); --line2: oklch(0.255 0.009 260); --line-strong: oklch(0.36 0.012 260); --ink: oklch(0.94 0.005 260); --ink2: oklch(0.82 0.01 260); --ink3: oklch(0.69 0.012 260); --accent: oklch(0.78 0.11 258); --accent-bg: oklch(0.3 0.05 258); --crit: oklch(0.78 0.14 25); --crit-bg: oklch(0.31 0.08 25); --crit-line: oklch(0.45 0.1 25); --warn: oklch(0.85 0.12 82); --warn-bg: oklch(0.32 0.06 75); --warn-line: oklch(0.46 0.08 75); --ok: oklch(0.8 0.12 155); --ok-bg: oklch(0.3 0.05 155); --info: oklch(0.8 0.08 240); --info-bg: oklch(0.3 0.04 240); --bar: oklch(0.7 0.09 255); --bar2: oklch(0.42 0.05 255); --skel: oklch(0.27 0.01 260); } } /* «Как в системе» — выбор из прежней версии: сохранённые настройки продолжают работать, в переключателе его больше нет. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --bg: #0e1114; --surface: #15171b; --surface2: #1b1e23; --surface3: #22252a; --line: #2b2e33; --line2: #202327; --line-strong: #3d4147; --ink: #e9ebef; --ink2: #c0c4cb; --ink3: #979ca3; --accent: #8bb9fd; --accent-bg: #1e2e47; --crit: #ff9189; --crit-bg: #521d1b; --crit-line: #843c38; --warn: #f5c66d; --warn-bg: #442e09; --warn-line: #72511e; --ok: #7ad59c; --ok-bg: #173523; --info: #8ec5ec; --info-bg: #1a3040; --bar: #78a1d6; --bar2: #3a4e68; --skel: #24272b; --shadow-menu: 0 12px 32px -12px rgba(0, 0, 0, 0.6); --scrim: rgba(0, 0, 0, 0.45); } @supports (color: oklch(0 0 0)) { :root[data-theme="system"] { --bg: oklch(0.175 0.008 260); --surface: oklch(0.205 0.009 260); --surface2: oklch(0.235 0.01 260); --surface3: oklch(0.26 0.01 260); --line: oklch(0.3 0.01 260); --line2: oklch(0.255 0.009 260); --line-strong: oklch(0.36 0.012 260); --ink: oklch(0.94 0.005 260); --ink2: oklch(0.82 0.01 260); --ink3: oklch(0.69 0.012 260); --accent: oklch(0.78 0.11 258); --accent-bg: oklch(0.3 0.05 258); --crit: oklch(0.78 0.14 25); --crit-bg: oklch(0.31 0.08 25); --crit-line: oklch(0.45 0.1 25); --warn: oklch(0.85 0.12 82); --warn-bg: oklch(0.32 0.06 75); --warn-line: oklch(0.46 0.08 75); --ok: oklch(0.8 0.12 155); --ok-bg: oklch(0.3 0.05 155); --info: oklch(0.8 0.08 240); --info-bg: oklch(0.3 0.04 240); --bar: oklch(0.7 0.09 255); --bar2: oklch(0.42 0.05 255); --skel: oklch(0.27 0.01 260); } } } /* ---------- Общие величины и синонимы прежних токенов ---------- */ :root { --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-num: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --radius: 10px; /* карточки */ --radius-sm: 6px; /* кнопки, поля */ --radius-tile: 8px; /* плитки, меню */ --topbar-h: 57px; /* Сетка страницы: содержимое не шире --content-max (с полями) и по центру. 1680 = 1624 px текста: вмещает все 19 столбцов «Отчётов» (1580 px) без прокрутки, а на мониторах 1920–2560 главная не растягивается в полосы. */ --content-max: 1680px; --page-pad: 28px; --text: var(--ink); --text-2: var(--ink2); --text-3: var(--ink3); --hairline: var(--line); --hairline-strong: var(--line-strong); --surface-2: var(--surface2); --surface-3: var(--surface3); --accent-strong: var(--accent); --accent-soft: var(--accent-bg); --good: var(--ok); --good-soft: var(--ok-bg); --warn-strong: var(--warn); --warn-soft: var(--warn-bg); --bad: var(--crit); --bad-strong: var(--crit); --bad-soft: var(--crit-bg); --neutral: var(--info); --neutral-soft: var(--info-bg); --shadow-card: none; --shadow-pop: var(--shadow-menu); --chart-spent: var(--bar); --chart-spent-soft: color-mix(in srgb, var(--bar) 20%, transparent); --chart-result: var(--ok); --chart-grid: var(--line2); /* Кольцо фокуса у старых компонентов (они рисуют его тенью): тот же вид, что outline 2px accent с отступом 2px у новых. */ --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); } /* ---------- База ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Липкая шапка не закрывает то, к чему прокрутили (фокус с клавиатуры, scrollIntoView): отступ сверху — на высоту шапки. */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .num, td.c-num, .metric-value { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } /* ---------- Полоса «Тестовая версия» (STAGING=1) ---------- */ .staging-stripe { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 4px var(--page-pad); font-size: 12px; line-height: 1.4; background: var(--ink); color: var(--bg); } .staging-stripe b { font-weight: 600; } /* ---------- Верхняя панель ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; min-height: 56px; padding: 10px var(--page-pad); max-width: var(--content-max); margin: 0 auto; /* та же сетка, что у содержимого */ } .topbar-left { display: flex; align-items: center; gap: 24px; flex: none; min-width: 0; } .brand { color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1; border-radius: 4px; } .brand:hover { text-decoration: none; } .nav { display: flex; gap: 2px; flex-wrap: wrap; } .nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; color: var(--ink2); font-weight: 400; white-space: nowrap; transition: background 0.14s ease-out, color 0.14s ease-out; } .nav a:hover { background: var(--surface2); color: var(--ink); text-decoration: none; } .nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); font-weight: 600; } /* Счётчик открытых проблем на «Главной» (SPEC-redesign §0.2): красный, если есть критичные, иначе янтарный. */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 16px; background: var(--warn-bg); color: var(--warn); font-variant-numeric: tabular-nums; } .nav-badge.is-crit { background: var(--crit-bg); color: var(--crit); } .topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink3); } /* Индикатор свежести: точка 8 px и «Данные на 18:00 МСК» */ .status-indicator { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink3); white-space: nowrap; } .status-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--ink3); flex: none; } .status-dot.ok { background: var(--ok); } .status-dot.busy { background: var(--ink3); animation: pulse 1.6s ease-in-out infinite; } .status-dot.stale { background: var(--warn); } .status-dot.err { background: var(--crit); } .status-text.is-stale { color: var(--warn); } .status-text.is-err { color: var(--crit); } .status-text-long { color: var(--ink3); } .stale-badge { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--warn-bg); color: var(--warn); white-space: nowrap; } @keyframes pulse { 50% { opacity: 0.45; } } /* Переключатель темы: текстом, как в макете («Тёмная тема» / «Светлая тема») */ .theme-toggle { border: 1px solid var(--line); background: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; color: var(--ink2); font-size: 13px; white-space: nowrap; transition: background 0.14s ease-out, border-color 0.14s ease-out; } .theme-toggle:hover { background: var(--surface2); border-color: var(--line-strong); } .user-menu { position: relative; } .user-btn { display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; padding: 0; border-radius: 15px; color: var(--ink2); font-size: 13px; } .user-avatar { width: 30px; height: 30px; border-radius: 15px; flex: none; background: var(--surface2); color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; transition: background 0.14s ease-out; } .user-btn:hover .user-avatar { background: var(--surface3); } .user-name-label { display: none; } /* ---------- Баннеры состояний (сбор, свежесть, доступ) ---------- */ .state-banners:empty { display: none; } .state-banner { display: flex; gap: 14px; align-items: flex-start; /* Фон — во всю ширину, текст — по сетке содержимого (--content-max). */ padding: 12px max(var(--page-pad), calc((100% - var(--content-max)) / 2 + var(--page-pad))); border-bottom: 1px solid var(--line); background: var(--surface2); color: var(--ink); } .state-banner-dot { flex: none; margin-top: 6px; width: 8px; height: 8px; border-radius: 4px; background: var(--ink); } .state-banner-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .state-banner-title { font-weight: 600; } .state-banner-text { color: var(--ink2); line-height: 1.45; } .state-banner.is-warn { background: var(--warn-bg); border-bottom-color: var(--warn-line); } .state-banner.is-warn .state-banner-dot { background: var(--warn); } .state-banner.is-warn .state-banner-title { color: var(--warn); } .state-banner.is-crit { background: var(--crit-bg); border-bottom-color: var(--crit-line); } .state-banner.is-crit .state-banner-dot { background: var(--crit); } .state-banner.is-crit .state-banner-title { color: var(--crit); } /* ---------- Выбор периода ---------- */ .period-control { position: relative; } .period-btn { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; color: var(--ink2); white-space: nowrap; transition: border-color 0.14s ease-out, background 0.14s ease-out; } .period-btn:hover { border-color: var(--line-strong); background: var(--surface2); } .period-btn .chev { color: var(--ink3); font-size: 10px; } .period-dates { color: var(--ink3); } .popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); box-shadow: var(--shadow-menu); padding: 6px; min-width: 220px; animation: pop-in 0.14s ease-out; } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } } .period-preset { display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; border-radius: 5px; cursor: pointer; font-size: 14px; color: var(--ink); } .period-preset:hover { background: var(--surface2); } .period-preset[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .period-custom { border-top: 1px solid var(--line); margin-top: 6px; padding: 10px 8px 4px; display: grid; gap: 8px; } .period-custom-row { display: flex; align-items: center; gap: 8px; } .period-custom-row label { font-size: 12px; color: var(--ink3); width: 20px; } .period-custom input[type="date"] { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 13px; background: var(--surface); color: var(--ink); } /* ---------- Разметка страницы ---------- */ .view { padding: 22px var(--page-pad) 40px; min-width: 0; max-width: var(--content-max); margin: 0 auto; } .view:focus { outline: none; } .view-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; } .view-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } .view-head .muted { color: var(--ink3); font-size: 13px; } .card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .card-pad { padding: 16px; } .card-title { font-size: 13px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; gap: 8px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; } .card-head .card-title { font-size: 15px; color: var(--ink); } .card-head .link-more { font-size: 13px; } /* ---------- Кнопки, поля, пилюли ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 7px 12px; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background 0.14s ease-out, border-color 0.14s ease-out, opacity 0.14s ease-out; white-space: nowrap; } .btn:hover { background: var(--surface2); border-color: var(--line-strong); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-primary { background: var(--accent); border-color: transparent; color: var(--surface); font-weight: 600; } .btn-primary:hover { background: var(--accent); border-color: transparent; filter: brightness(1.08); } .btn-sm { padding: 5px 10px; font-size: 13px; } .btn-block { width: 100%; } .btn-ghost { border-color: transparent; background: none; color: var(--accent); } .btn-ghost:hover { background: var(--accent-bg); border-color: transparent; } .btn-danger-ghost { border-color: transparent; background: none; color: var(--crit); } .btn-danger-ghost:hover { background: var(--crit-bg); border-color: transparent; } .btn-danger { background: var(--crit); border-color: transparent; color: var(--surface); font-weight: 600; } .btn-danger:hover { background: var(--crit); border-color: transparent; filter: brightness(1.06); } .input, select.input { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 7px 10px; font-size: 13px; color: var(--ink); transition: border-color 0.14s ease-out; } .input:hover { border-color: var(--line-strong); } .input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; box-shadow: none; } .input::placeholder { color: var(--ink3); } select.input { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23868d98' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 10px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.35; } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pill-good { background: var(--ok-bg); color: var(--ok); } .pill-warn { background: var(--warn-bg); color: var(--warn); } .pill-bad { background: var(--crit-bg); color: var(--crit); } .pill-neutral { background: var(--info-bg); color: var(--info); } .pill-muted { background: var(--surface2); color: var(--ink3); } .delta { font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .delta-up { color: var(--crit); } .delta-down { color: var(--ok); } .delta-neutral { color: var(--ink3); } .delta.inverse.delta-up { color: var(--ok); } .delta.inverse.delta-down { color: var(--crit); } /* ---------- Вход ---------- */ .login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--bg); } .login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px 28px; text-align: left; } .login-brand { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 18px; } .login-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .login-sub { color: var(--ink3); font-size: 13px; margin: 4px 0 22px; } .login-card .field { text-align: left; margin-bottom: 14px; } .login-card .field label { display: block; font-size: 13px; font-weight: 500; color: var(--ink2); margin-bottom: 5px; } .login-card .field input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 9px 10px; font-size: 14px; color: var(--ink); } .login-card .field input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; } .login-error { color: var(--crit); font-size: 13px; margin: 2px 0 12px; text-align: left; } .login-card .btn-primary { padding: 10px 14px; font-size: 14px; margin-top: 6px; } /* ---------- Графики (обзор, карточка кампании) ---------- */ .chart-card { display: flex; flex-direction: column; } .chart-body { padding: 8px 12px 14px; flex: 1; min-height: 240px; position: relative; } .chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); } .chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; } .lg-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; } .chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: 9px; box-shadow: var(--shadow-pop); padding: 7px 10px; font-size: 12px; line-height: 1.5; white-space: nowrap; } .chart-tip b { font-variant-numeric: tabular-nums; } .chart-tip .tip-date { color: var(--text-3); font-size: 11.5px; } /* Полоса важности у строки проблемы / алерта */ .alert-stripe { border-radius: 2px; align-self: stretch; } .alert-stripe.critical { background: var(--bad-strong); } .alert-stripe.warning { background: var(--warn-strong); } .alert-stripe.info { background: var(--neutral); } .alert-title { font-size: 13px; font-weight: 600; } .alert-msg { font-size: 12.5px; color: var(--text-2); margin-top: 1px; } .alert-meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; } .alert-time { font-size: 11.5px; color: var(--text-3); white-space: nowrap; padding-top: 2px; } /* Подписи метрик (карточка кампании, сводка загрузки целевых) */ .metric-label { font-size: 11px; font-weight: 600; color: var(--text-3); } .metric-value { font-size: 15px; font-weight: 650; margin-top: 1px; white-space: nowrap; } /* ---------- Таблицы ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .card > .table-wrap { border-radius: 0 0 var(--radius) var(--radius); } table.data { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; } table.data th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--hairline); background: var(--surface); white-space: nowrap; user-select: none; } table.data th.sortable { cursor: pointer; padding: 0; } table.data th .th-sort { display: inline-flex; align-items: center; gap: 3px; width: 100%; padding: 10px 12px; margin: 0; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: inherit; white-space: nowrap; } table.data th.c-num .th-sort { justify-content: flex-end; } table.data th .th-sort:hover { color: var(--text); } table.data th .th-sort:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } table.data th .sort-arrow { font-size: 9px; } table.data td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr.row-main { cursor: pointer; transition: background 0.12s; } table.data tbody tr.row-main:hover { background: var(--surface-2); } table.data tbody tr.row-main[aria-expanded="true"] { background: var(--accent-soft); } th.c-num, td.c-num { text-align: right; } td.c-num { font-variant-numeric: tabular-nums; white-space: nowrap; } .cell-main { font-weight: 550; } .cell-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; } .cell-name { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.campaigns-table { min-width: 1060px; } .spike-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; } .spike-badge.warn { background: var(--warn-soft); color: var(--warn); } .spike-badge.bad { background: var(--bad-soft); color: var(--bad); } /* Раскрытая карточка кампании */ tr.row-detail > td { padding: 0; background: var(--surface-2); } .campaign-detail { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; } .detail-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .detail-title { font-size: 15px; font-weight: 650; } .detail-head .muted { color: var(--text-3); font-size: 12.5px; } .detail-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 12px 16px; } .detail-charts { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; } @media (max-width: 1024px) { .detail-charts { grid-template-columns: 1fr; } } .detail-chart-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); } .detail-chart-card .card-head { padding: 12px 16px 0; } .detail-chart-card .chart-body { min-height: 190px; padding: 6px 10px 10px; } .minute-total { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .banners-block { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; } .banners-block .card-head { padding: 12px 16px 2px; } .banners-block table.data { min-width: 640px; font-size: 12.5px; } .banners-block table.data th { position: static; } /* Панель фильтров */ .filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .filter-bar .input-search { min-width: 220px; flex: 1 1 220px; max-width: 340px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='5.5' cy='5.5' r='4' fill='none' stroke='%2386868b' stroke-width='1.5'/%3E%3Cpath d='M8.8 8.8l3 3' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; padding-left: 32px; } .filter-count { font-size: 12.5px; color: var(--text-3); margin-left: auto; white-space: nowrap; } /* Сегментированный контрол */ .seg { display: inline-flex; background: var(--surface-3); border-radius: 9px; padding: 2px; gap: 2px; } .seg button { border: none; background: none; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--text-2); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* ---------- Планы ---------- */ .month-nav { display: inline-flex; align-items: center; gap: 4px; } .month-nav .btn { padding: 2px 10px; font-size: 15px; line-height: 1.4; } .month-label { min-width: 128px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .plans-hint { margin: -8px 0 14px; padding: 10px 14px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-2); } /* Подпись над таблицей: откуда берётся факт УЦО */ .plans-caption { margin: -2px 0 12px; font-size: 12.5px; color: var(--text-3); } .plans-caption a { color: var(--accent-strong); font-weight: 550; } table.plans { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 1360px; } table.plans th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 7px 9px; border-bottom: 1px solid var(--hairline); background: var(--surface); white-space: nowrap; } table.plans thead .plans-groups th { padding: 10px 9px 3px; font-size: 11.5px; color: var(--text-2); } table.plans thead .plans-groups th[colspan] { border-bottom: none; } table.plans thead .plans-cols th { padding-top: 3px; } table.plans td { padding: 7px 9px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } table.plans tbody tr:last-child td { border-bottom: none; } table.plans th.c-num, table.plans td.c-num { text-align: right; } table.plans td.c-num { font-variant-numeric: tabular-nums; white-space: nowrap; } table.plans .c-dim { color: var(--text-3); } table.plans .group-start { border-left: 1px solid var(--hairline); } table.plans .plans-manager { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Название проекта не сжимается в столбик: шрифт Onest шире системного, и без минимальной ширины «Клиент · Проект» ломался на три строки. */ table.plans tbody td:first-child { min-width: 180px; } table.plans .plans-note { min-width: 150px; } table.plans .input { padding: 4px 7px; font-size: 12.5px; border-radius: 7px; } table.plans .input-num { width: 90px; text-align: right; font-variant-numeric: tabular-nums; } table.plans .input-short { width: 64px; } table.plans .input-note { width: 100%; min-width: 140px; } table.plans .input:disabled { background: none; border-color: transparent; color: var(--text); opacity: 1; padding-left: 0; } .plans-src { font-size: 10px; color: var(--text-3); margin-top: 2px; } /* «нет загрузок CRM» — ссылка в «Отчёты» кабинета; кегль мелкий, поэтому берём --accent-strong (контраст 5,8:1 против 4,19:1 у --accent). */ .plans-src-link { color: var(--accent-strong); font-weight: 600; } /* Подсветка темпа: только ячейка факта, спокойные тона */ table.plans td.pace-warn { background: var(--warn-soft); color: var(--warn); } table.plans td.pace-bad { background: var(--bad-soft); color: var(--bad); } table.plans td.pace-good { background: var(--good-soft); color: var(--good); } table.plans td.pace-warn .plans-src { color: var(--warn); } table.plans td.pace-bad .plans-src { color: var(--bad); } table.plans td.pace-good .plans-src { color: var(--good); } /* Группы и итоги */ table.plans tr.plans-group td { padding: 9px 9px 5px; background: var(--surface-2); font-size: 11.5px; font-weight: 700; color: var(--text-2); border-left: none; } table.plans tr.plans-total td { font-weight: 600; background: var(--surface-2); font-size: 12px; } table.plans tr.plans-grand td { background: var(--surface-3); font-size: 12.5px; border-top: 1px solid var(--hairline-strong); } /* ---------- Алерты (страница) ---------- */ .alerts-list { display: flex; flex-direction: column; } .alerts-list .alert-row { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); align-items: start; } .alerts-list .alert-row:last-child { border-bottom: none; } .alert-row.acked { opacity: 0.62; } .alert-row .alert-title { font-size: 13.5px; } .alert-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } /* ---------- Настройки ---------- */ .settings-stack { display: flex; flex-direction: column; gap: 18px; max-width: 1080px; } .settings-desc { font-size: 12.5px; color: var(--text-3); margin: 2px 0 0; } .settings-table-wrap { overflow-x: auto; } table.settings-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; } table.settings-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; } table.settings-table td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } table.settings-table tr:last-child td { border-bottom: none; } table.settings-table .input { width: 100%; min-width: 90px; padding: 5px 9px; font-size: 13px; } table.settings-table .input-num { max-width: 110px; text-align: right; font-variant-numeric: tabular-nums; } .rule-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); align-items: start; } .rule-row:last-child { border-bottom: none; } .rule-title { font-size: 13.5px; font-weight: 600; } .rule-desc { font-size: 12.5px; color: var(--text-3); margin-top: 2px; max-width: 620px; } .rule-params { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 9px; } .rule-param { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); } .rule-param .input { width: 84px; padding: 4px 8px; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; } .rule-row.disabled .rule-title, .rule-row.disabled .rule-desc { opacity: 0.55; } .rule-row.disabled .rule-params { display: none; } /* Что значит «выключено»: выключатель действует сразу (SPEC-alerts-noise §4). */ .rule-off-note { margin-top: 6px; font-size: 12.5px; color: var(--text-2); border-left: 2px solid var(--hairline-strong); padding-left: 9px; max-width: 620px; } .rule-off-dialog { width: min(460px, 92vw); } /* Переключатель */ .switch { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch .track { position: absolute; inset: 0; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--hairline); transition: background 0.18s, border-color 0.18s; } .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.18s; } .switch input:checked + .track { background: #34c759; border-color: transparent; } .switch input:checked + .track::after { transform: translateX(16px); } .switch input:focus-visible + .track { box-shadow: var(--focus-ring); } /* Telegram */ .tg-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tg-code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 700; letter-spacing: 2px; background: var(--surface-3); border-radius: 9px; padding: 7px 14px; } /* Диалог пользователя */ dialog.user-dialog { border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-pop); background: var(--surface); color: var(--text); padding: 24px; width: min(400px, 92vw); } dialog.user-dialog::backdrop { background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .dialog-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; } .dialog-grid { display: grid; gap: 12px; } .dialog-grid label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; } .dialog-grid .input { width: 100%; } .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* ---------- Состояния ---------- */ .skeleton { position: relative; overflow: hidden; background: var(--skel); border-radius: 5px; min-height: 8px; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; } :root[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); } } @keyframes shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .empty-state { text-align: center; padding: 48px 24px; color: var(--text-3); font-size: 13.5px; } .empty-state .empty-icon { font-size: 26px; margin-bottom: 10px; opacity: 0.6; } .error-state { text-align: center; padding: 40px 24px; color: var(--text-2); font-size: 13.5px; } .error-state b { display: block; color: var(--bad); margin-bottom: 6px; font-size: 14px; } .error-state .btn { margin-top: 14px; } /* Тосты: снизу по центру, фон --ink, текст --bg (README дизайнера); у действия над проблемой — кнопка «Отменить» прямо в тосте. */ .toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 100; pointer-events: none; } .toast { display: flex; align-items: center; gap: 16px; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 11px 16px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-menu); animation: toast-in 0.16s ease-out; max-width: min(90vw, 560px); pointer-events: auto; } .toast.err { background: var(--crit); color: var(--surface); } .toast-action { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .toast-action:focus-visible { outline-color: var(--bg); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* ---------- Адаптив ---------- */ @media (max-width: 900px) { :root { --page-pad: 16px; } .topbar-inner { padding: 8px var(--page-pad); gap: 8px 12px; } .topbar-right { gap: 10px; } .view { padding: 16px var(--page-pad) 48px; } .state-banner, .staging-stripe { padding-left: var(--page-pad); padding-right: var(--page-pad); } } @media (max-width: 700px) { /* Узко: логотип и навигация — на всю строку, пункты переносятся; шапка в несколько строк не липнет — иначе закрыла бы полэкрана (этап D). */ .topbar { position: static; } html { scroll-padding-top: 12px; } .topbar-left { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; gap: 6px 16px; } .nav { width: 100%; } .filter-bar .input-search { max-width: none; } .detail-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); } .rule-row { grid-template-columns: auto minmax(0, 1fr); } .rule-row .rule-side { grid-column: 2; justify-self: end; } } /* Переключатель «только с расходом» в панели фильтров кампаний */ .filter-check { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; white-space: nowrap; } .filter-check input { accent-color: var(--accent); cursor: pointer; } .filter-check:hover { color: var(--text-1); } /* Форма смены собственного пароля */ .pass-form { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)) auto; gap: 10px; align-items: center; } @media (max-width: 720px) { .pass-form { grid-template-columns: 1fr; } } /* Приглушённая ячейка таблицы (Кампании) */ .cell-dim { color: var(--text-3); font-size: 12.5px; } /* Спарклайн «Расход по дням» (web/js/charts.js) с подсказкой «ДД.ММ: X ₽» */ .spark-host { position: relative; cursor: crosshair; } .spark-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--chart-spent); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; } .spark-tip { position: fixed; z-index: 80; } /* ============================================================ Отчёты: таблица уровней, «посылы» по месяцам, загрузка целевых ============================================================ */ /* Панель: выгрузка всегда прижата вправо, как счётчик на других экранах */ .report-exports { display: flex; gap: 8px; margin-left: auto; } /* Настройка столбцов: кнопка рядом с уровнем и всплывающая панель под ней */ .cols-control { position: relative; display: inline-flex; } .cols-pop { min-width: 268px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); overflow-y: auto; padding: 10px 10px 4px; } .cols-pop:focus-visible { outline: none; box-shadow: var(--focus-ring); } .cols-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 2px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline); } .cols-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .cols-item { display: flex; align-items: center; gap: 10px; padding: 0 6px; border-radius: 7px; } .cols-item:hover { background: var(--surface-2); } .cols-check { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; padding: 5px 0; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .cols-check input { accent-color: var(--accent); cursor: pointer; flex: none; } .cols-check input:disabled { cursor: default; } .cols-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cols-order { display: inline-flex; gap: 3px; flex: none; } .cols-move { width: 23px; height: 23px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); color: var(--text-2); font-size: 11px; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cols-move:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--hairline-strong); } .cols-move:disabled { opacity: 0.3; cursor: default; } .cols-move:focus-visible { outline: none; box-shadow: var(--focus-ring); } .cols-note { margin: 8px 6px 4px; font-size: 11.5px; color: var(--text-3); } .filter-bar .input-date { font-variant-numeric: tabular-nums; } .range-pair { display: inline-flex; align-items: center; gap: 6px; } .range-dash { color: var(--text-3); font-size: 12px; } /* ---------- Ручные посылы (SPEC-groups.md) ---------- Несколько названий объявлений сведены в один посыл: кнопка со счётчиком рядом со «Столбцами», отметки строк и панель «Выбрано N» над таблицей. */ .groups-control { display: inline-flex; } .groups-btn { display: inline-flex; align-items: center; gap: 6px; } .groups-count { min-width: 17px; padding: 0 5px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 600; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; } .groups-btn:hover .groups-count { background: var(--surface); } /* Панель выбора: появляется над таблицей, как только отмечена первая строка */ .sel-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--accent-soft); } .sel-count { font-size: 13px; font-weight: 600; color: var(--text); } .sel-dot { color: var(--text-3); } /* Колонка отметок — первая, узкая; в «Итого» она пустая */ th.c-check, td.c-check { width: 34px; padding-right: 0; } td.c-check input { accent-color: var(--accent); cursor: pointer; margin: 0; } td.c-check input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } table.data tbody tr.row-sel { background: var(--accent-soft); } /* Значок строки-посыла */ .group-row-name { display: flex; align-items: center; gap: 7px; min-width: 0; } .group-badge { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; } /* Окно «Объединить в посыл»: поле названия и список существующих посылов */ dialog.merge-dialog { width: min(520px, calc(100vw - 40px)); } .group-suggest-block { margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 12px; } .group-suggest-head { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; } .group-suggest-list { display: grid; gap: 6px; max-height: 210px; overflow-y: auto; } .group-suggest { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; text-align: left; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; } .group-suggest:hover { border-color: var(--hairline-strong); background: var(--surface-3); } .group-suggest:focus-visible { outline: none; box-shadow: var(--focus-ring); } .group-suggest-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-suggest-sub { flex: none; font-size: 11.5px; color: var(--text-3); } /* Окно «Посылы»: список посылов и их названий */ dialog.groups-dialog { width: min(640px, calc(100vw - 40px)); } .groups-body { display: grid; gap: 12px; } .group-card { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); } .group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; } .group-head-text { min-width: 0; } .group-name { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-actions { display: flex; gap: 6px; flex: none; } .group-rename { display: flex; gap: 6px; align-items: center; padding: 10px 12px; } .group-rename .input { flex: 1 1 auto; min-width: 0; } .group-members { border-top: 1px solid var(--hairline); padding: 4px 12px 8px; } .group-member { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--hairline); } .group-member:last-child { border-bottom: none; } .group-member-name { flex: 1 1 auto; max-width: none; } .group-member-sub { flex: none; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } .group-member-gone .group-member-name { color: var(--text-3); } .group-remove { flex: none; } table.reports-table { min-width: 1120px; } table.reports-table td { padding: 8px 12px; } table.reports-table .cell-name { max-width: 300px; } /* Кампания/группа над названием — тем же серым, что и подписи под ним. Длинную пару «кампания · группа» обрезаем: полный текст — в title. */ .cell-above { margin: 0 0 2px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Превью креатива */ td.c-prev, th.c-prev { width: 56px; padding-right: 0; } .prev-img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--hairline); } .prev-ph { width: 40px; height: 40px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--hairline); } /* Строка «Итого» — липкая снизу, чтобы не терялась при прокрутке таблицы */ table.data tfoot tr.row-total td { border-top: 1px solid var(--hairline-strong); border-bottom: none; background: var(--surface-2); font-weight: 600; } table.data tfoot tr.row-total .cell-sub { font-weight: 400; } /* Подвал таблицы: откуда целевые и сколько не сведено */ .report-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 2px 0; font-size: 12.5px; color: var(--text-3); } /* Подпись мелкая (12,5 px), поэтому берём --accent-strong: на светлом фоне страницы у --accent контраст 4,19:1, у --accent-strong — 5,80:1. */ .report-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--accent-strong); font-weight: 550; } .report-link:hover { text-decoration: underline; } .report-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 5px; } /* Пометка-подсказка у числа (расхождение «Лиды ВК» и «Заявки форм») */ .hint-mark { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: 5px; vertical-align: 1px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700; font-style: italic; line-height: 1; color: var(--text-3); cursor: help; flex: none; } /* Покрытие: свод по объявлениям может недосчитать расход остановленных кампаний */ .report-coverage { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--text-2); } .report-coverage .hint-mark { margin-left: 0; color: var(--warn); } /* «Посылы» по месяцам */ .report-months { margin-top: 20px; } /* Та же плашка внутри карточки: поля и кегль берём у карточки, не у подвала */ .report-months .report-coverage { margin: 12px 20px 0; font-size: 12.5px; } table.months-table { min-width: 820px; } table.months-table .cell-name { max-width: 380px; } /* Креатив: превью и название объявления в одной ячейке */ .creative-cell { display: flex; align-items: center; gap: 10px; } td.nowrap, th.nowrap { white-space: nowrap; } /* Загрузка целевых */ .upload-card { margin-top: 20px; } .upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 12px; } .upload-row input[type="file"] { padding: 6px 9px; max-width: 340px; } .upload-row input[type="file"]::file-selector-button { border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text); border-radius: 7px; padding: 4px 10px; margin-right: 10px; font: inherit; font-size: 12.5px; cursor: pointer; } /* Область загрузки: кабинеты клиента, чья это CRM */ .upload-scope { padding: 14px 20px 0; } .upload-scope-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .upload-scope-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .upload-scope-hint { font-size: 12.5px; color: var(--text-3); } /* 270px — чтобы длинные названия кабинетов вставали в одну строку */ .upload-scope-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2px 18px; margin-top: 6px; } .upload-scope-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 3px 0; } /* Почему кнопка недоступна — рядом с ней, а не только в подсказке сверху */ .upload-scope-note { font-size: 12.5px; color: var(--warn); } .upload-result:not(:empty) { padding: 0 20px 4px; } .upload-summary { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px 16px; display: grid; gap: 10px; } .upload-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 10px; } .upload-clients { display: flex; gap: 6px; flex-wrap: wrap; } /* Предупреждения сводки: файл без даты, без телефона, подозрительно большой. Жёлтая плашка, а не строка мелким шрифтом, — иначе «залили не тот файл» теряется среди цифр; рядом с ней выход: ссылка на удаление загрузки (DU). */ .upload-warnings { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--text-2); } .upload-warnings-title { font-size: 12.5px; font-weight: 600; color: var(--warn); } .upload-warnings-list { margin: 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 3px; } /* ---------- Google Таблица как источник целевых (SPEC-gsheet §7) ---------- Карточка стоит между загрузкой файла и историей: сначала «залить руками», потом «пусть подтягивается само», потом «что уже заливали». */ .gs-card, .uploads-card { margin-top: 20px; } /* Кому расшаривать таблицу: адрес робота и кнопка «Скопировать» */ .gs-robot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 20px 0; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: 12.5px; } .gs-robot-text { min-width: 0; } .gs-robot-email { color: var(--text); font-weight: 600; overflow-wrap: anywhere; } /* Ключа на сервере нет — подключать нечего: это предупреждение, а не подсказка */ .gs-robot-off { background: var(--warn-soft); border-color: transparent; justify-content: flex-start; } .gs-robot-off .hint-mark { margin-left: 0; color: var(--warn); } .gs-list { display: grid; gap: 10px; padding: 14px 20px 0; } /* Формы нет (группхед) — список не должен упираться в край карточки */ .gs-list:last-child { padding-bottom: 18px; } .gs-empty { padding: 4px 0; } .gs-source { display: grid; gap: 6px; justify-items: start; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px 14px; } .gs-source-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gs-source-title { font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; } a.gs-source-title { color: var(--accent-strong); } a.gs-source-title:hover { text-decoration: underline; } a.gs-source-title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 5px; } .gs-source-meta { color: var(--text-3); } .gs-state { font-size: 12.5px; color: var(--text-3); } /* Ошибка и остановка по защите: плашка, а не строка мелким шрифтом, — иначе «таблицу не расшарили» потеряется среди цифр. */ .gs-state-err, .gs-state-paused { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-2); width: 100%; } .gs-state-err { background: var(--bad-soft); } .gs-state-err .gs-state-text { color: var(--bad); font-weight: 550; } .gs-state-paused { background: var(--warn-soft); } .gs-state-paused .gs-state-text { color: var(--warn); font-weight: 550; } .gs-source-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; } /* Форма подключения: поля в две строки, кабинеты — тот же компонент отметок */ .gs-form { display: grid; gap: 10px; padding: 16px 20px 18px; } .gs-form-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .gs-form-row { display: flex; gap: 12px; flex-wrap: wrap; } .gs-field { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; } .gs-field-sm { flex: 0 1 240px; } .gs-field-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .gs-field .input { width: 100%; } .gs-form .upload-scope { padding: 2px 0 0; } .gs-form-error { font-size: 12.5px; color: var(--bad); } .gs-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ---------- Режим «скрипт» (SPEC-push §5) ---------- Лист присылает скрипт Apps Script из таблицы. На карточке — пометка способа и расписание, в форме — выбор способа, в окне — скрипт и инструкция. */ .gs-kind { font-size: 11px; padding: 1px 8px; } .gs-mode-line { font-size: 12.5px; color: var(--text-2); } .gs-force-note { color: var(--text-2); } .gs-robot-off-hint { color: var(--text-2); } /* Способ подключения: два варианта с пояснением под каждым */ .gs-mode { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; } .gs-mode legend { padding: 0; margin-bottom: 4px; } .gs-mode-item { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; } .gs-mode-item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .gs-mode-item input { margin-top: 3px; flex: none; } .gs-mode-body { min-width: 0; } .gs-mode-hint { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; } .gs-mode-single { font-size: 12.5px; } /* Расписание скрипта — подпись, а не поле: ей нужна ширина строки, а не селекта */ .gs-field.gs-field-schedule { flex: 1 1 360px; } .gs-field-schedule .gs-schedule-text { padding: 8px 0 0; } /* Окно «Скрипт и инструкция»: широкое, с прокруткой внутри */ dialog.user-dialog.gs-script-dialog { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 24px; } dialog.user-dialog.gs-confirm-dialog { width: min(460px, 92vw); } .gs-script-dialog .dialog-title { margin-bottom: 12px; overflow-wrap: anywhere; } .gs-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: var(--radius-sm); margin: 0 0 12px; background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-2); font-size: 12.5px; } .gs-note-key { background: var(--accent-soft); border-color: transparent; color: var(--text); } .gs-note-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); font-weight: 550; } .gs-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--text); } /* Пояснение к шагу (экран разрешений Google): отдельной строкой, тише основного текста */ .gs-step-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-2); } .gs-steps code, .gs-script-facts code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-3); border-radius: 5px; padding: 1px 5px; } .gs-code-block { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; } .gs-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .gs-code-name { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .gs-code-actions { display: flex; gap: 8px; flex-wrap: wrap; } .gs-code-hint { margin: 0; } .gs-code { margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; white-space: pre; tab-size: 2; color: var(--text); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); } .gs-code:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Манифест короткий — показываем целиком, без внутренней прокрутки */ .gs-code-manifest { max-height: none; } .gs-script-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; } .gs-script-facts code { overflow-wrap: anywhere; } @media (max-width: 600px) { dialog.user-dialog.gs-script-dialog { padding: 16px 14px; } .gs-code { font-size: 11px; max-height: 220px; } .gs-steps { font-size: 12.5px; } .gs-source-actions .btn { flex: 1 1 auto; } } /* История загрузок: строку источника удаляют вместе с ним, кнопки тут нет */ .upload-source-mark { color: var(--text-3); } table.uploads-table { min-width: 1140px; font-size: 12.5px; } table.uploads-table th { position: static; } table.uploads-table .cell-name { max-width: 220px; } /* Область загрузки — главное новое в истории: даём ей больше места */ table.uploads-table .upload-scope-cell { max-width: 330px; } /* Колонка действий: кнопка «Удалить» не должна растягивать строку */ table.uploads-table .c-act { width: 1%; white-space: nowrap; text-align: right; } /* Модальное окно несведённых обращений — шире пользовательского */ dialog.report-dialog { width: min(920px, calc(100vw - 40px)); } dialog.report-dialog .dialog-body { max-height: 60vh; overflow-y: auto; } table.unmatched-table { min-width: 780px; font-size: 12.5px; } table.unmatched-table th { position: static; } table.unmatched-table .cell-name { max-width: 180px; } @media (max-width: 1024px) { .report-exports { margin-left: 0; } /* Узкий экран: поля формы источника встают в столбик, а не жмутся по 3 в ряд */ .gs-field, .gs-field-sm { flex: 1 1 100%; } .gs-robot { justify-content: flex-start; } }