/* ───────────────────────────────────────────────────────────── CMEX.ai ADMIN — base.css Фундамент новой админки: шрифт, reset, токены тем (light/dark), типографика. Это ОТДЕЛЬНЫЙ от фронта файл (своё приложение Yii, свой webroot data/backend/www). Грузится только новыми layout'ами (main_new.php / auth_new.php) — старые страницы на Bootstrap не затрагивает. Токены 1:1 повторяют getAdminTheme(dark, '#FF6B35') из data/_disign/admin-shell.jsx. Механика темы — data-theme на (см. js/new/theme.js), ключ localStorage = admin_theme (тот же, что у старой админки, чтобы выбор юзера не сбросился при миграции). ───────────────────────────────────────────────────────────── */ /* Manrope — self-hosted (latin + cyrillic, woff2). Файлы скопированы из фронта: data/backend/www/fonts/manrope/. Никаких внешних запросов. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/manrope/manrope-400.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/manrope/manrope-500.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/manrope/manrope-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/manrope/manrope-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../../fonts/manrope/manrope-800.woff2') format('woff2'); } /* ── Reset ───────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scrollbar-gutter: stable; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* ── Токены: LIGHT (по умолчанию) ────────────────────────────── */ :root, :root[data-theme="light"] { --accent: #FF6B35; --accent-soft: #FF6B351A; /* accent + '1A' */ --accent-deep: #B8431C; /* для градиента аватаров */ --bg: #F4F6FB; --surface: #FFFFFF; --surface2: #F7F9FC; /* nested / hover */ --row-hover: #F7F9FC; --sidebar: #FFFFFF; --sidebar-text: #0E1A33; --sidebar-muted: #5C6B85; --sidebar-dim: #94A0B5; --sidebar-hover: #F0F3F8; --sidebar-border: #E7EBF2; --sidebar-user-bg: #F7F9FC; --text: #0E1A33; --text-muted: #5C6B85; --text-dim: #94A0B5; --border: #E7EBF2; --border-strong: #D7DDEA; --ok: #1F9D63; --ok-soft: rgba(31,157,99,0.12); --warn: #C7861B; --warn-soft: rgba(199,134,27,0.12); --danger: #D63C33; --danger-soft: rgba(214,60,51,0.12); --info: #2F6FE0; --info-soft: rgba(47,111,224,0.12); --purple: #7B4FE0; --purple-soft: rgba(123,79,224,0.12); /* альфа-рамки для health (JSX: ok@0x44, warn@0x66) */ --ok-border: rgba(31,157,99,0.27); --warn-border: rgba(199,134,27,0.4); --track: rgba(14,26,51,0.08); } /* ── Токены: DARK ────────────────────────────────────────────── */ :root[data-theme="dark"] { --accent: #FF6B35; --accent-soft: #FF6B3522; /* accent + '22' */ --accent-deep: #B8431C; --bg: #0A1020; --surface: #111A30; --surface2: #16213C; --row-hover: rgba(255,255,255,0.04); --sidebar: #0C1424; --sidebar-text: #FFFFFF; --sidebar-muted: rgba(255,255,255,0.7); --sidebar-dim: rgba(255,255,255,0.32); --sidebar-hover: rgba(255,255,255,0.06); --sidebar-border: rgba(255,255,255,0.06); --sidebar-user-bg: rgba(255,255,255,0.04); --text: #F2F5FB; --text-muted: rgba(242,245,251,0.58); --text-dim: rgba(242,245,251,0.34); --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --ok: #3FBF7F; --ok-soft: rgba(63,191,127,0.14); --warn: #E0A33B; --warn-soft: rgba(224,163,59,0.14); --danger: #E5544B; --danger-soft: rgba(229,84,75,0.14); --info: #4C8DF6; --info-soft: rgba(76,141,246,0.14); --purple: #9B6DF3; --purple-soft: rgba(155,109,243,0.16); /* альфа-рамки для health (JSX: ok@0x44, warn@0x66) */ --ok-border: rgba(63,191,127,0.27); --warn-border: rgba(224,163,59,0.4); --track: rgba(255,255,255,0.08); } /* ── База документа ──────────────────────────────────────────── */ /* min-height (не height:100%): длинные страницы (health и т.п.) должны расти и нормально скроллиться, а не клиппиться к высоте вьюпорта. */ html, body { min-height: 100%; } body { font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--text); background: var(--bg); /* плавный переход при смене темы (но не на загрузке — см. .no-anim ниже) */ transition: background-color 0.2s ease, color 0.2s ease; } /* На первый кадр (до того как theme.js снимет класс) гасим transition, чтобы не было видимого «проявления» темы. */ .acp-preload * { transition: none !important; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; color: var(--text); } input::placeholder, textarea::placeholder { color: var(--text-dim); } /* ── Фирменный логотип CMEX•ai (из ADLogo, admin-shell.jsx) ─────── Один источник для всех layout'ов админки (грузится из base.css). */ .acp-logo { display: inline-flex; align-items: baseline; gap: 1px; line-height: 1; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; cursor: pointer; transition: opacity 140ms ease; } a.acp-logo:hover { opacity: 0.7; } .acp-logo-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: inline-block; transform: translateY(-1px); } .acp-logo-ai { color: var(--accent); font-weight: 700; } /* Тонкий скроллбар в тёмной/светлой теме */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } /* ============ Реферальная статистика — стиль 1:1 со страницей «Авторы» ============ */ .ars-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } /* Заголовок секции — чистый, БЕЗ accent-подчёркивания (на странице «Авторы» подчёркнутых подзаголовков нет; подчёркивание давало «оранжевую полоску» под текстом). */ .ars-h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .ars-hint { font-size: 13.5px; color: var(--text-muted); margin: 0 0 14px; } /* Поиск автора — полная ширина, как .aau-search/.aau-sinput у поиска по email ниже. */ .ars-search { position: relative; width: 100%; } .ars-search .aau-sinput { width: 100%; box-sizing: border-box; } .ars-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); max-height: 300px; overflow-y: auto; padding: 5px; } .ars-menu[hidden] { display: none; } .ars-opt { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; cursor: pointer; } .ars-opt:hover { background: var(--surface2); } .ars-opt-email { font-size: 14px; font-weight: 600; color: var(--text); } .ars-opt-name { font-size: 12.5px; color: var(--text-muted); } .ars-opt-empty { padding: 11px 12px; font-size: 13.5px; color: var(--text-muted); } /* Выбранные авторы — чипы цвета акцента (оранжевые, как активные элементы админки). */ .ars-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; } .ars-chips:empty { margin: 0; } .ars-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 9px; padding: 7px 8px 7px 12px; } .ars-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; padding: 0; border: none; background: rgba(255,255,255,0.20); color: #fff; cursor: pointer; font-size: 15px; line-height: 1; border-radius: 5px; } .ars-chip-x:hover { background: rgba(255,255,255,0.36); } .ars-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; } .ars-bar [hidden] { display: none; } /* .aau-btn даёт display:inline-flex и перебивал бы [hidden] */ /* Таблица по источникам — 1:1 с шапкой/строками таблицы авторов (.aau-thead/.aau-row): padding 13px 18px, шапка 11px/800/uppercase/text-dim на surface2, строки 14px. */ .ars-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 18px; } .ars-thead, .ars-row { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 12px; align-items: center; padding: 13px 18px; } .ars-thead { background: var(--surface2); border-bottom: 1px solid var(--border); } .ars-thead > div { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } .ars-row { border-bottom: 1px solid var(--border); } .ars-row:last-child { border-bottom: none; } .ars-row > div { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; } .ars-row > div:first-child { font-weight: 700; } .ars-thead > div:not(:first-child), .ars-row > div:not(:first-child) { text-align: right; } .ars-foot { background: var(--surface2); border-top: 1px solid var(--border); } .ars-foot > div { font-weight: 800; color: var(--text); } .ars-rev { color: var(--ok); } /* Мобайл (≤768): 6-колоночная grid-таблица источников нечитаема — превращаем каждую строку в карточку «название источника + метрики списком (Подпись: значение)». Подписи берём из data-label ячеек. Один приём для обеих страниц (общий партиал: /users/authors сводка и /users/view карточка автора). Без горизонтального скролла. */ @media (max-width: 768px) { .ars-table { display: flex; flex-direction: column; gap: 10px; border: none; border-radius: 0; overflow: visible; margin-top: 14px; } .ars-thead { display: none; } .ars-row { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; } .ars-row > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 6px 0; text-align: right; } .ars-row > div:first-child { justify-content: flex-start; font-size: 15px; font-weight: 800; padding: 0 0 9px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .ars-row > div:not(:first-child)::before { content: attr(data-label); flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); text-align: left; } .ars-foot { background: var(--surface2); } }