/* ───────────────────────────────────────────────────────────── styles.css — statly. Тёмная (по умолчанию) + светлая тема, индиго-градиент, шрифт Manrope. Сайдбар + основная область. Темы переключаются атрибутом . ───────────────────────────────────────────────────────────── */ :root { --bg: #0b0d14; --panel: #12151f; --panel-2: #1a1e2c; --border: #232838; --text: #e8eaf2; --muted: #8a91a5; --accent: #6e7bf2; --accent-2: #a06ef2; --grad: linear-gradient(135deg, #6e7bf2 0%, #a06ef2 100%); --accent-soft: rgba(110, 123, 242, 0.14); --up: #3fb950; --down: #f85149; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5); --scheme: dark; } html[data-theme="light"] { --bg: #f4f5fa; --panel: #ffffff; --panel-2: #eef0f7; --border: #e3e6f0; --text: #181b26; --muted: #686f83; --accent: #5b68e8; --accent-2: #9355e8; --grad: linear-gradient(135deg, #5b68e8 0%, #9355e8 100%); --accent-soft: rgba(91, 104, 232, 0.1); --up: #15803d; --down: #dc2626; --shadow: 0 1px 2px rgba(24, 27, 38, 0.05), 0 8px 24px -12px rgba(24, 27, 38, 0.12); --scheme: light; } * { box-sizing: border-box; } html { color-scheme: var(--scheme); } /* HTML-атрибут hidden должен побеждать display:flex/grid у панелей и форм */ [hidden] { display: none !important; } /* Гостевой режим (только просмотр) — прячем элементы управления */ body.viewer #new-project, body.viewer #del-project, body.viewer #refresh-btn, body.viewer .add-account { display: none !important; } body { margin: 0; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); transition: background 0.25s ease, color 0.25s ease; -webkit-font-smoothing: antialiased; } .layout { display: flex; min-height: 100vh; } /* ── Сайдбар ──────────────────────────────────────────────── */ .sidebar { width: 280px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; } .brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } /* Вордмарк statly. — градиентный текст с акцентной точкой */ .logo { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; user-select: none; } .logo .dot { color: var(--accent-2); -webkit-text-fill-color: var(--accent-2); } /* Переключатель темы (луна/солнце) */ .theme-toggle { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); flex-shrink: 0; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); filter: none; } .theme-toggle .sun { display: none; } html[data-theme="light"] .theme-toggle .sun { display: block; } html[data-theme="light"] .theme-toggle .moon { display: none; } .field-label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; } .project-row { display: flex; gap: 8px; } .project-row select { flex: 1; } select, input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; } button { background: var(--border); color: var(--text); border: none; border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; transition: filter 0.15s, background 0.15s; } button:hover { filter: brightness(1.25); } button.primary { background: var(--grad); color: #fff; font-weight: 700; box-shadow: 0 4px 14px -6px rgba(110, 123, 242, 0.55); } button:disabled { opacity: 0.5; cursor: progress; } /* Иконочные кнопки управления проектом */ .icon-btn { width: 36px; height: 36px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--border); color: var(--text); border-radius: 8px; transition: background 0.15s, color 0.15s, transform 0.1s; } .icon-btn:hover { background: var(--panel-2); transform: translateY(-1px); filter: none; } .icon-btn:active { transform: translateY(0); } .icon-btn.danger:hover { background: rgba(248, 81, 73, 0.16); color: var(--down); } /* Панель подтверждения удаления проекта */ .del-confirm { background: rgba(248, 81, 73, 0.08); border: 1px solid rgba(248, 81, 73, 0.35); border-radius: 10px; padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .del-confirm span { font-size: 13px; line-height: 1.4; } .del-confirm b { color: var(--text); } .danger-btn { background: var(--down); color: #fff; font-weight: 600; flex: 1; } .danger-btn:hover { filter: brightness(1.1); } /* ── Дерево навигации ─────────────────────────────────────── */ .nav-tree { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; user-select: none; } .nav-item:hover { background: var(--panel-2); } .nav-item.active { background: var(--grad); color: #fff; } .nav-item.platform { font-weight: 600; } .nav-item.account { padding-left: 16px; font-size: 13px; color: var(--muted); } .nav-check { accent-color: var(--accent); width: 14px; height: 14px; margin-right: 7px; cursor: pointer; vertical-align: -2px; } .nav-item span > span.nav-caret { margin-left: 0; } .acc-link { color: inherit; text-decoration: none; } .acc-link:hover { color: var(--accent); text-decoration: underline; } .acc-link .ext { font-size: 10px; opacity: 0.5; } .acc-link:hover .ext { opacity: 1; } .nav-item.account.active .acc-link { color: #fff; } .nav-item.account.active { color: #fff; } .nav-item .count { font-size: 11px; color: var(--muted); } .nav-item.active .count { color: rgba(255, 255, 255, 0.7); } .nav-caret { width: 14px; display: inline-block; transition: transform 0.15s; } .nav-caret.open { transform: rotate(90deg); } .nav-overview { margin-bottom: 6px; } .nav-empty { color: var(--muted); font-size: 13px; padding: 10px; text-align: center; } .add-account { border-top: 1px solid var(--border); padding-top: 12px; } .ghost-btn { width: 100%; background: transparent; border: 1px dashed var(--border); color: var(--muted); } .add-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .form-hint { color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: -2px; } .np-actions { display: flex; gap: 8px; } .np-actions button { flex: 1; } .acc-actions { display: flex; gap: 2px; } .del-x { background: transparent; color: var(--down); padding: 2px 6px; font-size: 12px; opacity: 0; } .refresh-x { background: transparent; color: var(--muted); padding: 2px 6px; font-size: 13px; opacity: 0; } .nav-item:hover .del-x, .nav-item:hover .refresh-x { opacity: 1; } .refresh-x:hover { color: var(--accent); } .refresh-x.spinning { opacity: 1; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Основная область ─────────────────────────────────────── */ .main { flex: 1; padding: 24px 32px; min-width: 0; /* чтобы таблицы внутри flex не распирали страницу */ } .main-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 16px; flex-wrap: wrap; } .breadcrumb { font-size: 20px; font-weight: 700; } .controls { display: flex; gap: 12px; align-items: center; } .period-tabs { display: flex; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .period-tabs button { background: transparent; padding: 6px 12px; font-size: 13px; } .period-tabs button.active { background: var(--grad); color: #fff; font-weight: 700; } .top-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .top-head h2 { margin: 0; } .top-toggle { display: flex; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .top-toggle button { background: transparent; padding: 5px 11px; font-size: 12px; } .top-toggle button.active { background: var(--accent); color: #fff; } .link-fetch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .link-fetch input { flex: 1; min-width: 220px; font-size: 13px; } .manual-form-hint { margin: 14px 0 8px; font-size: 12px; color: var(--muted); } .manual-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; } .manual-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); } .manual-form label.grow { flex: 1; min-width: 160px; } .manual-form input, .manual-form select { font-size: 13px; } .manual-form input[type="number"] { width: 100px; } .manual-form button { align-self: flex-end; } .month-select { font-size: 13px; padding: 7px 10px; } .date-range { display: flex; align-items: center; gap: 6px; } .date-range input[type="date"] { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; color: var(--text); } .date-range .dash { color: var(--muted); } .status-line { font-size: 12px; color: var(--muted); min-height: 18px; margin-bottom: 16px; } /* ── KPI-карточки ─────────────────────────────────────────── */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); transition: transform 0.15s ease, border-color 0.15s ease; } .kpi:hover { transform: translateY(-2px); border-color: var(--accent); } .kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .kpi-value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; } .kpi-growth { font-size: 13px; font-variant-numeric: tabular-nums; } .kpi-growth.up { color: var(--up); } .kpi-growth.down { color: var(--down); } .kpi-growth.flat { color: var(--muted); } /* ── Панели и таблицы ─────────────────────────────────────── */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow); } h2 { font-size: 14px; color: var(--muted); margin: 0 0 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .inline-select { font-size: 13px; padding: 4px 8px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; } th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--panel-2); } td.empty { text-align: center; color: var(--muted); padding: 28px; } .badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--border); text-transform: capitalize; } .cell-growth { font-size: 11px; margin-left: 6px; } .cell-growth.up { color: var(--up); } .cell-growth.down { color: var(--down); } canvas { max-height: 320px; } /* Мобильная верхняя панель и затемнение — по умолчанию скрыты (десктоп) */ .mobile-topbar { display: none; } .backdrop { display: none; } /* ── Планшеты ── */ @media (max-width: 900px) { .main { padding: 20px; } .kpis { grid-template-columns: repeat(2, 1fr); } } /* ── Телефоны: сайдбар становится выезжающим меню ── */ @media (max-width: 720px) { /* Верхняя панель с кнопкой-меню */ .mobile-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 60; } .hamburger { font-size: 20px; line-height: 1; padding: 6px 10px; background: var(--border); } .mt-title { font-weight: 700; font-size: 16px; } /* Сайдбар — поверх контента, выезжает слева */ .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 84vw; max-width: 320px; z-index: 70; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; } body.nav-open .sidebar { transform: translateX(0); } /* Затемнение под открытым меню */ body.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 65; } /* Контент — на всю ширину */ .main { padding: 14px; max-width: 100%; } .breadcrumb { font-size: 17px; } .main-head { gap: 10px; } .controls { flex-wrap: wrap; gap: 8px; } .date-range { flex-wrap: wrap; } /* KPI в один столбец на узких экранах */ .kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi-value { font-size: 22px; } /* Широкие таблицы — горизонтальная прокрутка вместо «уезжания» */ #breakdown, #top-posts, #manual-list { overflow-x: auto; } table { min-width: 460px; } .panel { padding: 14px; } } /* Сортируемые заголовки таблицы «Все видео» */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--accent); } /* Индикатор сортировки в заголовках (↕ — можно кликнуть, ↓/↑ — активная колонка) */ .sort-ar { opacity: 0.35; font-size: 11px; } .sort-ar.act { opacity: 1; color: var(--accent); } /* Подпись диапазона дат рядом с «Лучшие видео» */ .top-range { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } /* ── statly: фирменные элементы ───────────────────────────── */ /* Иконка «Обзор проекта» в дереве */ .nav-ico { vertical-align: -2px; margin-right: 2px; color: var(--accent); } .nav-item.active .nav-ico { color: #fff; } /* Цветные точки платформ в дереве */ .pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } .pdot.instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); } .pdot.tiktok { background: linear-gradient(45deg, #25f4ee, #fe2c55); } .pdot.youtube { background: #ff0033; } .pdot.facebook { background: #1877f2; } .nav-item.active .pdot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); } /* Цветные бейджи платформ в таблицах */ .badge { font-weight: 600; } .badge.instagram { background: rgba(238, 42, 123, 0.16); color: #f06292; } .badge.tiktok { background: rgba(37, 244, 238, 0.13); color: #2cc7c0; } .badge.youtube { background: rgba(255, 0, 51, 0.14); color: #f4577a; } .badge.facebook { background: rgba(24, 119, 242, 0.16); color: #5b9cf6; } html[data-theme="light"] .badge.instagram { color: #c2185b; } html[data-theme="light"] .badge.tiktok { color: #00838f; } html[data-theme="light"] .badge.youtube { color: #c62828; } html[data-theme="light"] .badge.facebook { color: #1565c0; } /* Сайдбар/инпуты: плавная смена темы */ .sidebar, .panel, .kpi, select, input, button { transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Ссылки в таблицах — акцентные, без подчёркивания до hover */ td a { color: var(--accent); text-decoration: none; } td a:hover { text-decoration: underline; } /* ── Мобильная полировка ──────────────────────────────────── */ @media (max-width: 720px) { .mobile-topbar { padding: 10px max(14px, env(safe-area-inset-left)) 10px max(14px, env(safe-area-inset-right)); backdrop-filter: blur(8px); } .mt-title { font-size: 20px; flex: 1; } .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); } .sidebar { border-right: none; box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35); padding-bottom: max(20px, env(safe-area-inset-bottom)); } .controls { width: 100%; } .period-tabs { width: 100%; overflow-x: auto; } .period-tabs button { flex: 1; white-space: nowrap; padding: 7px 9px; font-size: 12px; } #refresh-btn { width: 100%; } .kpi { padding: 13px; border-radius: 13px; } .kpi-value { font-size: 20px; } .kpi-label { font-size: 10px; } .panel { border-radius: 13px; } h2 { flex-wrap: wrap; } /* Таблица «Все видео» тоже скроллится */ #videos-list { overflow-x: auto; } } /* ── UI Pro Max: правки по гайдлайнам ─────────────────────── */ /* Даты/бейджи не переносятся (truncation-strategy: wrap хуже для данных) */ td.nowrap, .badge { white-space: nowrap; } /* Сайдбар: список не растягивается — «Добавить» сразу под ним, низ занимает аккуратный футер (whitespace-balance) */ .nav-tree { flex: 0 1 auto; } .add-account { margin-top: 2px; } .side-foot { margin-top: auto; padding-top: 14px; font-size: 11px; color: var(--muted); opacity: 0.6; text-align: center; letter-spacing: 0.04em; } /* Кнопка Refresh и кнопки с SVG — выравнивание иконки с текстом */ #refresh-btn, .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } /* Календарь: один «пилюльный» контейнер с иконкой, инпуты без рамок */ .date-range { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px; gap: 4px; } .date-range .dr-ico { color: var(--muted); flex-shrink: 0; } .date-range input[type="date"] { background: transparent; border: none; padding: 8px 2px; min-height: 38px; } .date-range input[type="date"]:focus { outline: none; color: var(--accent); } /* SVG-стрелки сортировки */ .sort-ar { opacity: 0.35; vertical-align: -1px; } .sort-ar.act { opacity: 1; color: var(--accent); } /* Иконки в мини-кнопках дерева */ .refresh-x, .del-x { display: inline-flex; align-items: center; justify-content: center; } /* Видимый фокус с клавиатуры + reduced-motion */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Мобильные карточки вместо сжатых таблиц ──────────────── */ .only-mobile { display: none; } @media (max-width: 720px) { .only-desktop { display: none; } .only-mobile { display: block; } table { min-width: 0; } .m-cards { display: flex; flex-direction: column; gap: 10px; } .m-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .m-card.clickable { cursor: pointer; } .m-card-head { display: flex; align-items: center; gap: 8px; font-size: 14px; } .m-card-head svg { margin-left: auto; color: var(--muted); } .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 11px; } .m-met { display: flex; flex-direction: column; gap: 1px; } .m-met-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .m-met-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .m-met .cell-growth { margin-left: 0; } /* Карточка видео */ .v-head { display: flex; align-items: center; gap: 8px; font-size: 12px; } .v-date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .v-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-link { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; margin-top: -6px; color: var(--accent); } .v-stats { display: flex; align-items: baseline; gap: 12px; margin-top: 7px; flex-wrap: wrap; } .v-views { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .v-views span { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 5px; } .v-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Чипы сортировки над карточками (touch-target ≥ 40px) */ .m-sort { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; } .m-chip { display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; min-height: 38px; font-size: 12.5px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); white-space: nowrap; } .m-chip.act { background: var(--grad); color: #fff; border-color: transparent; font-weight: 700; } .m-chip.act .sort-ar { color: #fff; opacity: 1; } /* Календарь и месяц — во всю ширину, удобные тач-цели */ .month-select { width: 100%; min-height: 44px; } .date-range { width: 100%; justify-content: space-between; padding: 2px 12px; } .date-range input[type="date"] { flex: 1; min-height: 44px; font-size: 14px; } #refresh-btn { min-height: 44px; } .period-tabs button { min-height: 38px; } } /* Кнопка «Показати ще» под списками видео */ .show-more { display: block; width: 100%; margin-top: 12px; padding: 11px; min-height: 42px; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 10px; color: var(--accent); font-weight: 600; } .show-more:hover { border-color: var(--accent); filter: none; } /* ── Синхронизация дат: кнопка, модалка, букмарклет ───────── */ .sync-btn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } body.viewer #sync-dates { display: none !important; } .modal-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); } .modal { width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px 22px; box-shadow: var(--shadow); } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .modal-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; } .modal-text { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; } .modal-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.5; } .modal-steps b { color: var(--text); } .bm-wrap { margin-top: 8px; } /* Перетаскиваемая «кнопка-закладка» */ .bm-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; background: var(--grad); color: #fff !important; font-weight: 700; font-size: 13px; text-decoration: none; cursor: grab; box-shadow: 0 4px 14px -6px rgba(110, 123, 242, 0.6); user-select: none; } .bm-link:active { cursor: grabbing; } .modal .form-hint { margin-top: 16px; } @media (max-width: 720px) { .modal { border-radius: 14px; } }