/* Рабочий инструмент, а не витрина: плотно, спокойно, без анимаций. Тёмная тема по умолчанию — смотреть приходится подолгу. */ /* Тёмная — по умолчанию: смотреть приходится подолгу. Светлая включается атрибутом data-theme="light" на , выбор запоминается в браузере. Обе темы описаны переменными, поэтому правила ниже про темы ничего не знают. */ :root { --bg: #0f1116; --panel: #161922; --panel2: #1c2029; --line: #262b36; --ink: #e6e9ef; --dim: #8b93a5; --accent: #60a5fa; --accent-ink: #0b1220; --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --heat: 96, 165, 250; --hair: rgba(255, 255, 255, .04); --shade: rgba(0, 0, 0, .25); --strong: #fff; --r: 8px; } :root[data-theme="light"] { --bg: #f6f7f9; --panel: #fff; --panel2: #f0f2f5; --line: #dfe3e9; --ink: #1a1d24; --dim: #6b7280; --accent: #1d5fb8; --accent-ink: #fff; --ok: #0f8a5f; --warn: #a86a00; --bad: #c2352f; --heat: 29, 95, 184; --hair: rgba(0, 0, 0, .05); --shade: rgba(0, 0, 0, .06); --strong: #000; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; } main.wrap { padding-bottom: 64px; } /* шапка */ .top { background: var(--panel); border-bottom: 1px solid var(--line); margin-bottom: 28px; position: sticky; top: 0; z-index: 20; } .top .wrap { display: flex; align-items: center; gap: 24px; height: 52px; } .brand { font-weight: 700; color: var(--ink); letter-spacing: .2px; } .top nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .top nav a { color: var(--dim); padding: 6px 12px; border-radius: var(--r); font-weight: 500; } .top nav a:hover { background: var(--panel2); color: var(--ink); text-decoration: none; } .top nav a.on { background: var(--panel2); color: var(--ink); } .out { color: var(--dim); font-size: 13px; } /* заголовки */ .shead { margin: 0 0 22px; } h1 { font-size: 24px; margin: 0; font-weight: 700; } h2 { font-size: 17px; margin: 34px 0 12px; font-weight: 600; } .sub { color: var(--dim); margin: 6px 0 0; font-size: 13px; max-width: 70ch; } /* плитки сводки */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .tile .k { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } .tile .v { font-size: 28px; font-weight: 700; line-height: 1.1; } .tile .n { color: var(--dim); font-size: 12px; } /* таблицы */ .scroll { overflow-x: auto; } table.grid { width: 100%; border-collapse: collapse; font-size: 13px; } table.grid th, table.grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } table.grid thead th { color: var(--dim); font-weight: 500; font-size: 12px; white-space: nowrap; } table.grid tbody tr:hover { background: var(--panel); } .dim { color: var(--dim); } .ttl { color: var(--warn); white-space: nowrap; } table.heat td { text-align: center; padding: 6px 4px; min-width: 46px; } table.heat td a { color: var(--ink); font-weight: 600; } table.heat .rh { white-space: nowrap; font-weight: 600; } table.heat .sum { color: var(--dim); } /* фильтры */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; align-items: center; } .filters .q { flex: 1 1 260px; } input, select, textarea { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } textarea { resize: vertical; width: 100%; } .clear { color: var(--dim); font-size: 13px; } /* кнопки */ .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; } .btn:hover { filter: brightness(1.08); text-decoration: none; } .btn.sm { padding: 7px 12px; font-size: 13px; } .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .x { background: none; border: 0; color: var(--dim); cursor: pointer; font: inherit; font-size: 12px; } .x:hover { color: var(--bad); } /* карточки креативов */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .card-cr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: var(--ink); display: flex; flex-direction: column; } .card-cr:hover { border-color: var(--accent); text-decoration: none; } .thumb { position: relative; aspect-ratio: 4 / 3; background: var(--panel2); display: flex; align-items: center; justify-content: center; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb .play { position: absolute; font-size: 26px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); } .pruned { color: var(--dim); font-size: 12px; } .meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .row1 { display: flex; align-items: center; gap: 6px; font-size: 13px; } .row1 b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hook { color: var(--dim); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .row2, .row3 { display: flex; gap: 8px; font-size: 11px; color: var(--dim); flex-wrap: wrap; } .row3 { justify-content: space-between; } .lp { color: var(--accent); } .badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; white-space: nowrap; font-weight: 600; } .v-test { background: rgba(52,211,153,.16); color: var(--ok); } .v-watch { background: rgba(251,191,36,.16); color: var(--warn); } .v-arch { background: rgba(139,147,165,.16); color: var(--dim); } .v-rej { background: rgba(248,113,113,.16); color: var(--bad); } .v-none { display: none; } /* карточка целиком */ .two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; } .col-media video, .col-media img.full { width: 100%; border-radius: var(--r); background: #000; display: block; } .pruned-box { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); padding: 28px; text-align: center; color: var(--dim); } .pruned-box b { color: var(--ink); display: block; margin-bottom: 6px; } table.facts { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 18px; } table.facts th { text-align: left; color: var(--dim); font-weight: 500; padding: 5px 12px 5px 0; width: 130px; } table.facts td { padding: 5px 0; } .edit { display: flex; flex-direction: column; gap: 10px; } .edit label, .card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); } /* текстовые блоки */ .prose { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; max-width: 80ch; line-height: 1.65; } .prose h2, .prose h3 { margin: 18px 0 8px; font-size: 15px; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { margin: 0 0 10px; } .prose ul { margin: 0 0 10px; padding-left: 20px; } .prose code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 12px; } .warn-box code { background: var(--shade); } .prose.orig { color: var(--dim); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; } .prose strong { color: var(--strong); } /* вкладки ленда */ .lp-actions { display: flex; gap: 8px; margin-bottom: 18px; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim); padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 500; } .tab.on { color: var(--ink); border-bottom-color: var(--accent); } .pane { display: none; } .pane.on { display: block; } .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .shots img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); } /* формы, состояния */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; max-width: 380px; margin: 60px auto; display: flex; flex-direction: column; gap: 14px; } .card.wide { max-width: 100%; margin: 0 0 12px; } .card h2 { margin: 0; } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .add-domain { display: grid; grid-template-columns: 3fr 2fr auto; gap: 8px; margin-bottom: 20px; align-items: start; } .empty { color: var(--dim); padding: 40px 0; text-align: center; } .err { color: var(--bad); font-size: 13px; margin: 0; } .ok { border-color: var(--ok); } .ok.inline { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: var(--ok); padding: 8px 14px; border-radius: var(--r); margin-bottom: 16px; font-size: 13px; } .token { background: var(--panel2); padding: 12px; border-radius: 6px; font-size: 12px; word-break: break-all; } @media (max-width: 860px) { .two { grid-template-columns: 1fr; } .add-domain { grid-template-columns: 1fr; } .top .wrap { height: auto; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; } } /* предупреждение, когда копия ленда не залита */ .warn-box { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.28); color: var(--warn); padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; font-size: 13px; } .warn-box code { padding: 1px 6px; border-radius: 4px; } /* скриншоты убраны под раскрывашку: смотреть ленд надо на самом ленде */ .shots-fold { margin-top: 26px; } .shots-fold summary { cursor: pointer; color: var(--dim); font-size: 13px; padding: 6px 0; list-style: none; } .shots-fold summary::-webkit-details-marker { display: none; } .shots-fold summary::before { content: "▸ "; } .shots-fold[open] summary::before { content: "▾ "; } .shots-fold summary:hover { color: var(--ink); } .shots-fold .shots { margin-top: 12px; } /* расшифровка VSL: таймкод отдельной колонкой, реплики по строкам */ .script { display: flex; flex-direction: column; gap: 2px; } .script .line { display: flex; gap: 14px; padding: 5px 0; align-items: baseline; } .script .line + .line { border-top: 1px solid var(--hair); } .script .tc { flex: 0 0 52px; color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; } .script .tx { flex: 1; } @media (max-width: 620px) { .script .line { flex-direction: column; gap: 2px; } .script .tc { flex: none; } } /* код ленда рядом с человеческим именем */ .code { color: var(--dim); font-size: 11px; margin-left: 8px; font-variant-numeric: tabular-nums; } .note { font-style: italic; margin-bottom: 14px; } /* домены с фан-пейджами */ .dlist { display: flex; flex-direction: column; gap: 10px; } .drow { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; } .dhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .dname { font-weight: 600; font-size: 14px; } .dcnt { font-size: 12px; } .ddate { color: var(--dim); font-size: 12px; margin-left: auto; } .dkill, .fpkill { display: inline; } .dnote { color: var(--dim); font-size: 12px; margin-top: 4px; } .fplist { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .fp { display: flex; align-items: center; gap: 10px; font-size: 13px; } .fp a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } .fpnote { color: var(--dim); font-size: 12px; } .fpempty { color: var(--dim); font-size: 12px; } .fpadd { margin-top: 8px; } .fpadd summary { cursor: pointer; color: var(--accent); font-size: 12px; list-style: none; display: inline-block; padding: 2px 0; } .fpadd summary::-webkit-details-marker { display: none; } .fpadd form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; margin-top: 8px; } @media (max-width: 720px) { .fpadd form { grid-template-columns: 1fr; } .ddate { margin-left: 0; } } /* поле ссылок в форме фан-пейджа — многострочное, но компактное */ .fpadd textarea { min-height: 38px; font-size: 13px; } .fpadd form { align-items: start; } /* переключатель темы */ .theme-btn { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--dim); cursor: pointer; font: inherit; font-size: 15px; line-height: 1; padding: 6px 9px; } .theme-btn:hover { color: var(--ink); border-color: var(--dim); } /* код гео: подчёркиванием намекаем, что есть подсказка */ .geo { font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--dim); cursor: help; border-bottom: 1px dotted var(--line); } .row1 .geo { flex: 0 0 auto; } /* вставка фан-пейджей двумя колонками */ .add-fp { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 22px; align-items: start; } .add-fp textarea { font-family: Consolas, ui-monospace, monospace; font-size: 12px; } .add-fp-side { display: flex; flex-direction: column; gap: 8px; } .add-fp-side .sub { margin: 0; font-size: 12px; } @media (max-width: 720px) { .add-fp { grid-template-columns: 1fr; } } /* фильтр по датам */ .dates { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; white-space: nowrap; } .dates input { padding: 6px 8px; } /* строка со скачиванием: отделена от кнопок открытия */ .lp-actions.dl { margin-top: -8px; margin-bottom: 18px; align-items: center; } .dl-label { color: var(--dim); font-size: 13px; } .col-media .lp-actions.dl { margin-top: 12px; } /* компактная лента креативов на странице ленда */ .cards.mini { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .cards.mini .thumb { aspect-ratio: 1 / 1; } .cards.mini .meta { padding: 8px 10px; gap: 4px; } .cards.mini .row1 { font-size: 12px; } .cards.mini .hook { -webkit-line-clamp: 2; font-size: 11px; } .cnt { color: var(--dim); font-weight: 500; font-size: 14px; margin-left: 4px; } /* короткие формы в настройках */ .row-form { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .row-form input[type=number] { width: 96px; } .row-form input[type=password] { width: 220px; } .card.wide.narrow { max-width: 420px; } .bad.inline { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); color: var(--bad); padding: 8px 14px; border-radius: var(--r); margin-bottom: 16px; font-size: 13px; }