/* ============================================================================ «Управление разговорами» — Новотелс Дизайн-система «форест-люкс» (СВЕТЛАЯ тема, светлый сайдбар). Общая тема для всех поверхностей (admin/lk). Импортирует /shared/api.js не нужно — это чистый CSS. Шрифты грузятся в каждой страницы, плюс @import ниже как страховка (обычный &, НЕ &). ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* --- Палитра (роли) --- */ --canvas: #FAFAF7; --paper: #FFFFFF; --line: #ECEFEC; --ink: #1F2A24; --muted: #6B7672; --green: #47764A; /* заливка кнопок / активное — белый текст AA */ --green-d: #3C6440; --green-vivid: #1FA85F; /* ТОЛЬКО не-текст: статус-точки / иконки-индикаторы */ --green-tint: #EAF3EC; --coral: #E8665A; --coral-tint: #FBEDED; --coral-700: #B23A2E; /* коралл как текст на светлом (AA) */ /* --- Производные оттенки --- */ --btn-hover: #29A867; --btn-active: #239A5D; --btn-secondary-border: #D8DEDB; --btn-secondary-active: #E8ECE8; --field-hover-border: #C9D1CD; --hover-row: #F7F9F7; /* hover строки таблицы */ --hover-nav: #F2F4F2; /* hover пункта меню */ --dot-off: #C9D1CD; /* статус-точка «выключено» */ /* --- Геометрия (радиусы) --- */ --r-card: 12px; --r-control: 6px; /* кнопки / поля */ --r-nav: 8px; /* активный пункт меню */ --r-pill: 999px; /* --- Отступы (шаг 4) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* --- Размеры каркаса --- */ --sidebar-w: 240px; --topbar-h: 64px; /* --- Тени (минимальны) --- */ --lift: 0 4px 12px rgba(31, 42, 36, .08); /* --- Шрифты --- */ --font-head: "Manrope", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --focus-ring: 0 0 0 2px rgba(71, 118, 74, .4); } /* ============================================================================ Сброс ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; /* мобильный закон: горизонтальный скролл запрещён */ } body { font-family: var(--font-body); font-size: 16px; /* база ≥16 (мобильный закон) */ line-height: 24px; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-head); color: var(--ink); margin: 0; } h1 { font-size: 28px; line-height: 36px; font-weight: 700; } h2 { font-size: 24px; line-height: 32px; font-weight: 600; } h3 { font-size: 20px; line-height: 28px; font-weight: 600; } p { margin: 0; } a { color: var(--green-d); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .label-micro { font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } /* Линейные иконки 1.5px (инлайн-SVG) — наследуют currentColor */ .ico { display: block; flex: 0 0 auto; } /* ============================================================================ Кнопки ========================================================================= */ .btn { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 24px; border-radius: var(--r-control); padding: 10px 18px; border: 1px solid transparent; cursor: pointer; min-height: 44px; /* зона нажатия ≥44 */ display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 90ms ease-out, box-shadow 160ms ease-out; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Главная — зелёная заливка, белый текст */ .btn-primary { background: var(--green); color: #fff; } .btn-primary:hover { background: var(--btn-hover); box-shadow: var(--lift); } .btn-primary:active { background: var(--btn-active); transform: translateY(1px); box-shadow: none; } .btn-primary:disabled { background: rgba(71, 118, 74, .4); cursor: not-allowed; box-shadow: none; transform: none; } /* Вторичная — белая, контур */ .btn-secondary { background: var(--paper); border-color: var(--btn-secondary-border); color: var(--ink); font-size: 14px; padding: 8px 14px; min-height: 40px; } .btn-secondary:hover { background: var(--green-tint); border-color: var(--field-hover-border); } .btn-secondary:active { background: var(--btn-secondary-active); } .btn-secondary:disabled { color: var(--muted); cursor: not-allowed; background: var(--canvas); } .btn-block { width: 100%; } /* ============================================================================ Поля ========================================================================= */ .field { margin-bottom: var(--sp-4); } .field-label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: var(--sp-2); color: var(--ink); } .input { width: 100%; font-family: var(--font-body); font-size: 16px; /* ≥16: иначе авто-зум iOS */ line-height: 24px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 12px; min-height: 44px; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; } .input::placeholder { color: var(--muted); } .input:hover { border-color: var(--field-hover-border); } .input:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); } .input:disabled { background: var(--canvas); color: var(--muted); } .input.is-error { border-color: var(--coral); } .field-error { display: none; font-size: 14px; line-height: 20px; color: var(--coral-700); margin-top: var(--sp-2); } .field-error.is-shown { display: block; } /* Форменная ошибка (над формой логина) */ .form-error { display: none; font-size: 14px; line-height: 20px; color: var(--coral-700); background: var(--coral-tint); border-radius: var(--r-control); padding: 10px 12px; margin-bottom: var(--sp-4); } .form-error.is-shown { display: block; } /* ============================================================================ Карточка ========================================================================= */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-6); } /* ============================================================================ Пилюли-бейджи ========================================================================= */ .pill { display: inline-block; font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600; border-radius: var(--r-pill); padding: 4px 10px; background: var(--green-tint); color: var(--green-d); white-space: nowrap; } .pill-coral { background: var(--coral-tint); color: var(--coral-700); } /* ============================================================================ Каркас: сайдбар + контент ========================================================================= */ .layout { display: flex; min-height: 100vh; } /* --- Светлый сайдбар --- */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--sp-6) var(--sp-3); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-logo { height: 28px; width: auto; margin: 0 var(--sp-3) var(--sp-6); display: block; } .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); } /* --- Пункт навигации --- */ .navlink { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--ink); background: transparent; border: 0; border-radius: var(--r-nav); padding: 10px 12px; min-height: 44px; cursor: pointer; text-decoration: none; transition: background-color 120ms ease-out, color 120ms ease-out; } .navlink .ico { color: var(--muted); transition: color 120ms ease-out; } .navlink:hover { background: var(--hover-nav); } .navlink:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* АКТИВНЫЙ пункт — залитый зелёный блок, белые текст и иконка */ .navlink.active { background: var(--green); color: #fff; } .navlink.active .ico { color: #fff; } .navlink.active:hover { background: var(--green-d); } /* Низ сайдбара: Справка / Настройки */ .nav-bottom { margin-top: auto; padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); } /* Настройки — зелёный залитый блок */ .navlink.solid { background: var(--green); color: #fff; } .navlink.solid .ico { color: #fff; } .navlink.solid:hover { background: var(--green-d); } /* --- Контент --- */ .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); } /* ============================================================================ Топбар ========================================================================= */ .topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); padding: 12px var(--sp-6); position: sticky; top: 0; z-index: 30; } .crumb { font-family: var(--font-body); font-size: 15px; line-height: 20px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .crumb-root { color: var(--muted); } .crumb-sep { color: var(--muted); } .crumb-current { color: var(--green); font-weight: 600; } .topbar-spacer { flex: 1 1 auto; } .topbar-user { color: var(--muted); font-size: 14px; line-height: 20px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Иконка-кнопка (выход) 44×44 */ .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--btn-secondary-border); border-radius: var(--r-control); color: var(--ink); cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out; } .icon-btn:hover { background: var(--green-tint); border-color: var(--field-hover-border); } .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Бургер — виден только ≤768px */ .burger { width: 44px; height: 44px; flex: 0 0 44px; display: none; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--btn-secondary-border); border-radius: var(--r-control); color: var(--ink); cursor: pointer; } .burger:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ============================================================================ Контент-область + заголовок раздела ========================================================================= */ .content { padding: var(--sp-6); flex: 1 1 auto; } .page-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-6); flex-wrap: wrap; } .page-count { color: var(--muted); font-size: 14px; } /* Тулбар над таблицей (поиск справа) */ .table-tools { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; } .search { position: relative; margin-left: auto; flex: 0 1 280px; min-width: 200px; } .search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); } .search .input { padding-left: 40px; } /* ============================================================================ Таблица ========================================================================= */ .tbl { width: 100%; border-collapse: collapse; font-size: 15px; } .tbl thead th { text-align: left; font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl tbody td { padding: 14px 8px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; } .tbl tbody tr:hover { background: var(--hover-row); } .tbl tbody tr:last-child td { border-bottom: 0; } /* Первая ячейка: статус-точка + основной текст + суб-id */ .cell-primary { display: flex; align-items: center; gap: var(--sp-3); } .dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--dot-off); } .dot-on { background: var(--green-vivid); } .dot-off { background: var(--dot-off); } .cell-stack { display: flex; flex-direction: column; min-width: 0; } .cell-main { font-weight: 500; color: var(--ink); } .cell-sub { font-size: 12px; line-height: 16px; color: var(--muted); } /* Состояния (пусто / ошибка / загрузка) */ .state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-6); color: var(--muted); } .state .ico { color: var(--dot-off); } .state.is-error .ico { color: var(--coral); } .state h3 { color: var(--ink); } /* Скелет загрузки строк */ .skel-row { height: 20px; border-radius: var(--r-control); background: linear-gradient(90deg, var(--line) 25%, #F4F6F4 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; margin: 14px 8px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============================================================================ Логин (без сайдбара) ========================================================================= */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); background: var(--canvas); } .login-card { width: 100%; max-width: 380px; } .login-logo { height: 28px; width: auto; display: block; margin: 0 auto var(--sp-6); } .login-card h1 { font-size: 22px; line-height: 28px; text-align: center; margin-bottom: var(--sp-2); } .login-sub { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: var(--sp-6); } /* ============================================================================ Утилиты ========================================================================= */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: spin 700ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Затемнение под off-canvas меню (≤768px) */ .scrim { position: fixed; inset: 0; background: rgba(31, 42, 36, .4); opacity: 0; transition: opacity 200ms ease-out; z-index: 35; } .scrim.is-open { opacity: 1; } /* ============================================================================ Мобильный закон (≤768px) ========================================================================= */ @media (max-width: 768px) { .burger { display: inline-flex; } /* Сайдбар уезжает off-canvas, открывается бургером */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 40; transform: translateX(-100%); transition: transform 220ms ease-out; box-shadow: var(--lift); } .sidebar.is-open { transform: translateX(0); } .content { padding: var(--sp-4); } .topbar { padding: 12px var(--sp-4); } .topbar-user { display: none; } /* экономим место на узком топбаре */ /* .tbl -> карточки */ .tbl thead { display: none; } .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; } .tbl tbody tr { border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--paper); } .tbl tbody tr:hover { background: var(--paper); } .tbl tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border-bottom: 1px solid var(--line); padding: 12px 0; } .tbl tbody tr td:last-child { border-bottom: 0; } .tbl tbody td::before { content: attr(data-label); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); flex: 0 0 auto; } /* Кнопка действия в карточке — на всю ширину */ .tbl tbody td .btn-block-mobile { width: 100%; } .search { flex: 1 1 100%; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }