/* ============================================================================ Constructor Hub — core.css Единственный фундамент оформления на все приложения домена: конструкторы баннеров и видео (оба бренда), HR-конструктор, хаб. Порядок подключения на любой странице: 1. core.css — этот файл 2. .css — только то, что своё у конкретного экрана Бренд переключается атрибутом data-brand на . Ни один компонент не имеет права зашивать цвет мимо токена: иначе ColdBet ломается молча. Чистый CSS, custom properties, никаких препроцессоров. ========================================================================= */ /* ============================================================================ 1. ТОКЕНЫ ========================================================================= */ :root { color-scheme: light; /* --- нейтральная шкала ------------------------------------------------ */ --bg: #ffffff; /* холст: карточка, таблица, модалка, поле */ --bg-soft: #f6f7f9; /* фон рабочих страниц, шапка таблицы, подвал модалки */ --bg-sunken: #eef0f4; /* утопленное: дорожка сегмента, пилюля, плашка кода */ --line: #e2e6ec; /* граница по умолчанию */ --line-strong: #c9d0da; /* граница нажимаемого и заполняемого */ --text: #10131a; /* основной текст */ /* Оба серых проверены на контраст к трём подложкам (#fff, --bg-soft, --bg-sunken). Прежний --text-faint #98a0ad давал 2.3–2.6 — метаданные на нём читались через раз. Сейчас: muted 4.6–5.2, faint 3.6–4.1. */ --text-muted: #656d7b; /* подписи, вторичный текст, неактивная вкладка */ --text-faint: #767e8c; /* служебные метки, плейсхолдеры, метаданные */ --ink-overlay: rgba(16, 19, 26, .5); /* затемнение под модалкой */ /* --- акценты: SpinBetter по умолчанию --------------------------------- */ --accent: #c2d715; /* «в чьём кабинете я»: активная вкладка, тег размера */ --accent-ink: #2c3406; /* текст поверх --accent */ --accent-soft: #f3ff94; /* мягкая заливка: подвкладка, чип-метка */ --accent-deep: #4c5a0c; /* текст поверх --accent-soft */ --primary: #063730; /* «главное действие»: Скачать, Сохранить, Выдать */ --primary-hover: #0a4f45; --secondary: #bf1be4; /* «с чем взаимодействую»: фокус, выбор, ход */ --secondary-hover:#a812c9; --secondary-soft: #faf0fe; /* кольцо фокуса и подложка выбранного */ /* --- статусы: одинаковы у обоих брендов ------------------------------- Пара: насыщенный — иконка/рамка/кнопка, -soft — заливка, -ink — текст. */ --danger: #d93a3a; --danger-soft: #fdeceb; --danger-ink: #a02a2a; --success: #0f917e; --success-soft: #e3f4f1; --success-ink: #0a6d5e; --warning: #d98324; --warning-soft: #fdf0e0; --warning-ink: #9a5a10; /* волосяная рамка плашки: тот же цвет, приглушённый до линии */ --success-line: rgba(15, 145, 126, .24); --warning-line: rgba(217, 131, 36, .32); --danger-line: rgba(217, 58, 58, .28); /* --- шрифты ------------------------------------------------------------ */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; /* --- типографическая шкала: девять ролей -------------------------------- */ --fz-display: 24px; /* экран-одиночка: вход, служебные */ --fz-h1: 20px; /* заголовок экрана */ --fz-h2: 16px; /* заголовок модалки */ --fz-h3: 15px; /* заголовок блока, панели */ --fz-h4: 14px; /* название сущности, имя человека */ --fz-body: 14px; /* тело, значения таблиц */ --fz-sm: 13px; /* подписи полей, кнопки, вкладки */ --fz-xs: 12px; /* метаданные, подсказки, счётчики */ --fz-2xs: 11px; /* служебная метка капсом, шапка таблицы */ --fz-mono: 12px; /* машинное: логины, ключи, IP, даты журнала */ --lh-tight: 1.25; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.6; /* --- отступы: шаг 4, два дробных только внутри компонента --------------- */ --sp-2xs: 2px; --sp-1: 4px; --sp-xs: 6px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* --- форма -------------------------------------------------------------- */ --r-xs: 6px; /* вкладыш сегмента, мини-бейдж, чекбокс */ --r-sm: 8px; /* кнопка, поле, кнопка-иконка, плашка */ --r-md: 12px; /* карточка, панель, меню, превью */ --r-lg: 16px; /* модалка, крупная панель, обёртка таблицы */ --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 19, 26, .06); --shadow-md: 0 4px 16px rgba(16, 19, 26, .08); --shadow-lg: 0 12px 40px rgba(16, 19, 26, .16); --ring: 0 0 0 3px var(--secondary-soft); --ring-danger: 0 0 0 3px var(--danger-soft); /* --- высоты: одна на элементы управления -------------------------------- */ --h-ctl: 36px; /* кнопка, поле, селект, поиск, кнопка-иконка, вкладка */ --h-sub: 32px; /* подвкладка — своя полоса, свой уровень */ --h-row: 48px; /* строка таблицы: 36 + 6 + 6 */ --h-bar: 56px; /* лента разделов */ --h-subbar: 44px;/* полоса подвкладок */ /* --- сетка и колонка ---------------------------------------------------- */ --colw: 1440px; /* списки и сетки */ --colw-narrow: 1040px; /* профиль, роли, формы */ --colw-client: 1180px; /* конструктор-клиент */ --colw-admin: 1680px; /* админка конструктора */ --page-x: 22px; --cell-preview: 150px; --cell-tile: 158px; --cell-tile-sm: 180px; --cell-card: 232px; --cell-card-wide: 310px; /* --- движение ------------------------------------------------------------ */ --dur-1: 120ms; /* нажатие, смена фона */ --dur-2: 160ms; /* цвет, рамка, прозрачность, тень */ --dur-3: 220ms; /* раскрытие, модалка, тост */ --ease: cubic-bezier(.2, .8, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); /* --- слои ---------------------------------------------------------------- */ --z-raised: 10; --z-sticky: 40; --z-header: 200; --z-menu: 300; --z-overlay:900; --z-modal: 1000; --z-toast: 1100; --z-tip: 1200; } /* ColdBet — синий бренд с оранжевым цветом взаимодействия */ :root[data-brand="coldbet"] { --accent: #2196f3; --accent-ink: #ffffff; --accent-soft: #dcefff; --accent-deep: #10467f; --primary: #0b3c6b; --primary-hover: #14508b; --secondary: #f5851f; --secondary-hover:#dc7212; --secondary-soft: #fff2e2; } /* ============================================================================ 2. БАЗА ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg-soft); color: var(--text); font-family: var(--font); font-size: var(--fz-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Конструктор-клиент — единственное место, где фон белый: он работает холстом под превью, и серый подкрашивал бы креативы. */ body.on-white { background: var(--bg); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: var(--r-xs); } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } /* Кириллица: длинные составные слова не режем многоточием — обрезанная роль ничего не сообщает. Разрешаем перенос по любому месту там, где тесно. */ .wrap-any { overflow-wrap: anywhere; white-space: normal; } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .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; } .scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .scroll-y::-webkit-scrollbar { width: 6px; } .scroll-y::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); } .scroll-y::-webkit-scrollbar-track { background: transparent; } /* ============================================================================ 3. ТИПОГРАФИЧЕСКИЕ РОЛИ ========================================================================= */ .t-display { font-size: var(--fz-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.02em; } .t-h1 { font-size: var(--fz-h1); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -.015em; } .t-h2 { font-size: var(--fz-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -.01em; } .t-h3 { font-size: var(--fz-h3); font-weight: 700; line-height: var(--lh-snug); } .t-h4 { font-size: var(--fz-h4); font-weight: 600; line-height: 1.4; } .t-body { font-size: var(--fz-body); font-weight: 400; line-height: var(--lh-normal); } .t-sm { font-size: var(--fz-sm); font-weight: 500; line-height: 1.45; } .t-xs { font-size: var(--fz-xs); font-weight: 400; line-height: 1.4; color: var(--text-muted); } /* Служебная метка: только короткое, до 16 знаков — русский капс с разрядкой длиннее латинского на треть и не помещается в столбец. */ .section-label { font-size: var(--fz-2xs); font-weight: 700; line-height: var(--lh-snug); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } .text-muted { color: var(--text-muted); } .text-faint { color: var(--text-faint); } .hint { font-size: var(--fz-xs); line-height: 1.45; color: var(--text-faint); } /* Вторая половина подписи: «Метки — по ним потом искать». Не отдельная строка, поэтому не .hint, а более светлое продолжение той же строки */ .field-note { font-weight: 400; color: var(--text-muted); } .prose { max-width: 72ch; text-wrap: pretty; } /* ============================================================================ 4. КАРКАС СТРАНИЦЫ ========================================================================= */ .page { max-width: var(--colw); margin-inline: auto; padding: var(--sp-4) var(--page-x) var(--sp-7); } .page-narrow { max-width: var(--colw-narrow); } .page.page-client { max-width: var(--colw-client); } .page.page-admin { max-width: var(--colw-admin); } /* Заголовок экрана нужен только там, где нет полосы подвкладок: иначе он повторяет активную вкладку и забирает 60 пикселей. */ .page-head { display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: var(--sp-5); } .page-title { font-size: var(--fz-h1); font-weight: 700; letter-spacing: -.015em; } .page-sub { font-size: var(--fz-sm); color: var(--text-muted); } .block { display: flex; flex-direction: column; gap: var(--sp-4); } .block + .block { margin-top: var(--sp-6); } .section + .section { margin-top: var(--sp-7); } .row { display: flex; align-items: center; gap: var(--sp-2); } .row-wrap{ flex-wrap: wrap; } .spacer { flex: 1 1 auto; } .stack { display: flex; flex-direction: column; gap: var(--sp-3); } /* Поверхность — белый прямоугольник с рамкой, из которого собираются строка человека, карточка сервиса, панель конструктора, обёртка таблицы. Раньше эти четыре вещи были четырьмя разными наборами правил. */ .surface { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .surface-flat { box-shadow: none; } .surface-quiet { background: var(--bg-soft); box-shadow: none; } .surface-off { background: var(--bg-soft); } .surface-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); } .surface-body { padding: var(--sp-4); } .surface-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--bg-soft); border-radius: 0 0 var(--r-lg) var(--r-lg); } .surface-split { border-top: 1px solid var(--line); } /* --- лента разделов: печатается hubkit, живёт во всех приложениях -------- */ .hb { position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: 18px; height: var(--h-bar); padding: 0 var(--page-x); background: var(--bg); border-bottom: 1px solid var(--line); } .hb-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .hb-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--primary); display: grid; place-items: center; flex-shrink: 0; } .hb-mark i{ width: 11px; height: 11px; border-radius: var(--r-xs); background: var(--accent); display: block; } .hb-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .hb-brand-text b { font-size: var(--fz-h4); font-weight: 700; letter-spacing: -.01em; } .hb-brand-text i { font-size: 11.5px; font-style: normal; color: var(--text-faint); } .hb-nav { display: flex; align-items: center; gap: var(--sp-2xs); margin-right: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .hb-nav::-webkit-scrollbar { display: none; } .hb-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } /* --- полоса подвкладок --------------------------------------------------- */ .subbar { position: sticky; top: var(--h-bar); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-1); height: var(--h-subbar); padding: 0 var(--page-x); background: var(--bg); border-bottom: 1px solid var(--line); } /* Полоса тянется во всю ширину экрана, а вкладки стоят в той же колонке, что и содержимое страницы — иначе на 1920 они уезжают к самому краю */ .subbar-in { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; width: 100%; max-width: var(--colw); margin-inline: auto; } .subbar-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); } /* --- фильтры слева, результат справа ------------------------------------- */ .split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-5); align-items: start; } .split-narrow { grid-template-columns: 300px minmax(0, 1fr); } .side { position: sticky; top: calc(var(--h-bar) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-3); padding: 18px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); } .side-divider { height: 1px; background: var(--line); } /* ============================================================================ 5. КНОПКА — одна высота 36, семь вариантов, ноль размеров ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--h-ctl); padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--font); font-size: var(--fz-sm); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .btn > svg { width: 17px; height: 17px; flex-shrink: 0; } .btn:active:not(:disabled) { transform: scale(.97); } .btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--secondary); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); } .btn-secondary { background: var(--secondary); color: #fff; } .btn-secondary:hover:not(:disabled) { background: var(--secondary-hover); } .btn-accent { background: var(--accent); color: var(--accent-ink); } .btn-accent:hover:not(:disabled) { filter: brightness(.95); } .btn-ghost { background: var(--bg); color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover:not(:disabled) { background: var(--bg-soft); } .btn-quiet { background: var(--bg-sunken); color: var(--text); } .btn-quiet:hover:not(:disabled) { background: var(--line); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(.93); } .btn-danger-ghost { background: var(--bg); color: var(--danger); border-color: var(--line-strong); } .btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); } .btn-block { width: 100%; } /* Кнопка только с иконкой — тот же квадрат 36 */ .btn-icon { width: var(--h-ctl); padding: 0; } /* Пунктирная рамка — вход в служебный режим: админка раздела */ .btn-dashed { border-style: dashed; color: var(--text-muted); } /* Кнопка в работе: ширина не меняется — текст заменяют равным по длине */ .btn[data-busy] { pointer-events: none; } .spinner { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .32); border-top-color: #fff; animation: spin .8s linear infinite; } .spinner-dark { border-color: rgba(16, 19, 26, .14); border-top-color: var(--secondary); } @keyframes spin { to { transform: rotate(360deg); } } /* --- кнопка-иконка -------------------------------------------------------- */ .ibtn { display: inline-grid; place-items: center; width: var(--h-ctl); height: var(--h-ctl); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--text-muted); cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .ibtn > svg { width: 18px; height: 18px; } .ibtn:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); } .ibtn:active:not(:disabled){ background: var(--bg-sunken); transform: scale(.94); } .ibtn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--secondary); } .ibtn:disabled { opacity: .45; cursor: not-allowed; } /* Внутри строки и карточки — без рамки: она спорила бы с рамкой контейнера */ .ibtn-bare { border-color: transparent; background: transparent; } .ibtn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } /* ============================================================================ 6. ПОЛЯ ВВОДА ========================================================================= */ .field { display: flex; flex-direction: column; gap: var(--sp-xs); } .field > label, .field-label { font-size: var(--fz-sm); font-weight: 500; color: var(--text-muted); } .input, input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="date"], input[type="number"], input[type="password"], input[type="tel"], select, textarea { width: 100%; height: var(--h-ctl); padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fz-body); line-height: 1.4; outline: none; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } textarea { height: auto; min-height: 74px; padding: 9px var(--sp-3); resize: vertical; line-height: var(--lh-normal); } .input:hover:not(:disabled), input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--text-faint); } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--secondary); box-shadow: var(--ring); } .input:disabled, input:disabled, select:disabled, textarea:disabled, .input[aria-disabled="true"] { background: var(--bg-soft); border-color: var(--line); color: var(--text-faint); cursor: not-allowed; } ::placeholder { color: var(--text-faint); } .is-error .input, .input.is-error, input.is-error, select.is-error, textarea.is-error { border-color: var(--danger); } .is-error .input:focus, .input.is-error:focus, input.is-error:focus { box-shadow: var(--ring-danger); } /* Сообщение под полем: одна строка, не всплывающая. Текст --danger-ink, а не --danger: 12-й кегль насыщенным по мягкому не читается. */ .field-msg { display: flex; align-items: flex-start; gap: 5px; font-size: var(--fz-xs); line-height: 1.4; color: var(--text-faint); } .field-msg > svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; } .field-msg-error { color: var(--danger-ink); } .field-msg-ok { color: var(--success-ink); } /* --- селект: своя стрелка, SVG в data-URI ------------------------------- */ select, .select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7382' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } select:disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a0ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } select.select-auto { width: auto; min-width: 150px; } /* --- поиск ---------------------------------------------------------------- */ .search { position: relative; } .search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; } .search input { padding-left: 34px; padding-right: 32px; } .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg-sunken); color: var(--text-muted); cursor: pointer; } .search-clear > svg { width: 13px; height: 13px; } /* Поиск в полосе подвкладок — 32, по высоте полосы */ .subbar .search input { height: var(--h-sub); background: var(--bg-soft); border-color: var(--line); font-size: var(--fz-sm); } /* ============================================================================ 7. ВЫБОР: чекбокс, переключатель, сегмент ========================================================================= */ .chk { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none; } .chk input { position: absolute; width: 1px; height: 1px; opacity: 0; } .chk-box { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--line-strong); border-radius: var(--r-xs); background: var(--bg); display: grid; place-items: center; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .chk-box > svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity var(--dur-1) var(--ease); } .chk:hover .chk-box { border-color: var(--text-faint); } .chk input:checked + .chk-box, .chk input:indeterminate + .chk-box { background: var(--secondary); border-color: var(--secondary); } .chk input:checked + .chk-box > svg, .chk input:indeterminate + .chk-box > svg { opacity: 1; } .chk input:focus-visible + .chk-box { box-shadow: var(--ring); border-color: var(--secondary); } .chk input:disabled + .chk-box { background: var(--bg-soft); border-color: var(--line); } .chk input:disabled ~ * { color: var(--text-faint); } /* Серая галка — «даёт роль»: снять можно, но это станет личным исключением */ .chk-from-role input:checked + .chk-box { background: var(--line-strong); border-color: var(--line-strong); } .chk-note { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); } .sw { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fz-sm); color: var(--text-muted); cursor: pointer; user-select: none; } .sw input { position: absolute; width: 1px; height: 1px; opacity: 0; } .sw-track { position: relative; flex-shrink: 0; width: 30px; height: 18px; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .sw-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-2) var(--ease); } .sw input:checked + .sw-track { background: var(--secondary); } .sw input:checked + .sw-track::after { transform: translateX(12px); } .sw input:focus-visible + .sw-track { box-shadow: var(--ring); } .sw input:disabled ~ * , .sw:has(input:disabled) { opacity: .45; cursor: not-allowed; } .seg { display: inline-flex; gap: var(--sp-2xs); padding: var(--sp-2xs); background: var(--bg-sunken); border-radius: var(--r-sm); } .seg-grow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; } .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs); height: 32px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-xs); background: transparent; font-family: var(--font); font-size: var(--fz-sm); font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .seg-btn > svg { width: 16px; height: 16px; } .seg-btn:hover { color: var(--text); } .seg-btn.is-on { background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm); } .seg-btn:focus-visible { outline: none; box-shadow: var(--ring); } .seg-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--line-strong); color: var(--text-muted); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .seg-btn.is-on .seg-count { background: var(--accent); color: var(--accent-ink); } /* ============================================================================ 8. НАВИГАЦИЯ ========================================================================= */ /* Вкладка ленты: заливка акцентом — она отвечает на «в чьём кабинете я» */ .tab { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-ctl); padding: 0 13px; border-radius: var(--r-sm); font-size: var(--fz-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .tab > svg { width: 18px; height: 18px; flex-shrink: 0; } .tab:hover { background: var(--bg-soft); color: var(--text); } .tab.is-on { background: var(--accent); color: var(--accent-ink); } .tab:focus-visible { outline: none; box-shadow: var(--ring); } .tab-soon { color: var(--text-faint); cursor: default; } .tab-soon:hover { background: none; color: var(--text-faint); } .tab-soon i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--text-faint); } /* Подвкладка: тот же акцент, но тише — уровень ниже */ .sub { display: inline-flex; align-items: center; gap: 7px; height: var(--h-sub); padding: 0 var(--sp-3); border-radius: var(--r-pill); font-size: var(--fz-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .sub > svg { width: 16px; height: 16px; flex-shrink: 0; } .sub u { text-decoration: none; font-family: var(--mono); font-size: var(--fz-2xs); opacity: .65; font-variant-numeric: tabular-nums; } .sub:hover { background: var(--bg-soft); color: var(--text); } .sub.is-on { background: var(--accent-soft); color: var(--accent-deep); } .sub:focus-visible { outline: none; box-shadow: var(--ring); } /* Переключатель брендов */ .brands { display: inline-flex; align-items: center; gap: var(--sp-2xs); padding: var(--sp-2xs); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); } .brand-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: var(--r-pill); font-size: var(--fz-sm); font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; } .brand-btn:hover { color: var(--text); } .brand-btn.is-on { background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm); } .brand-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .brand-dot-spinbetter { background: #c2d715; } .brand-dot-coldbet { background: #2196f3; } /* Чип пользователя в шапке */ .user-chip { display: flex; align-items: center; gap: 9px; height: var(--h-ctl); padding: 0 var(--sp-3) 0 var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-soft); max-width: 240px; text-decoration: none; } .user-chip:hover { background: var(--bg-sunken); } .user-chip-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .user-chip-text b { font-size: var(--fz-sm); font-weight: 600; } .user-chip-text i { font-size: var(--fz-2xs); font-style: normal; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================================ 9. МЕТКИ И СЧЁТЧИКИ ========================================================================= */ /* Чип — метка-факт. Нажимаемый фильтр это кнопка 36, а не чип. */ .chip { display: inline-flex; align-items: center; gap: var(--sp-xs); min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--text-muted); font-size: var(--fz-xs); font-weight: 600; line-height: var(--lh-snug); } .chip > svg { width: 13px; height: 13px; flex-shrink: 0; } .chip-line { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); } .chip-accent { background: var(--accent-soft); color: var(--accent-deep); } .chip-ok { background: var(--success-soft); color: var(--success-ink); } .chip-warn { background: var(--warning-soft); color: var(--warning-ink); } .chip-danger { background: var(--danger-soft); color: var(--danger-ink); } .chip-off { background: var(--danger-soft); color: var(--danger-ink); text-decoration: line-through; } .chip-dash { background: none; border: 1px dashed var(--line-strong); color: var(--text-faint); } /* Длинная роль переносится, а не обрезается */ .chip-wrap { max-width: 160px; overflow-wrap: anywhere; white-space: normal; text-align: left; } .chip-x { width: 18px; height: 18px; margin-right: -5px; border: 0; border-radius: 50%; background: none; color: currentColor; opacity: .55; display: grid; place-items: center; cursor: pointer; } .chip-x:hover { opacity: 1; } .chip-x > svg { width: 11px; height: 11px; } .count { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: 28px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--text-muted); font-size: var(--fz-xs); font-weight: 700; font-variant-numeric: tabular-nums; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .count b { color: var(--text); font-weight: 700; } .count .of { color: var(--text-faint); font-weight: 500; } .count-on { background: var(--secondary); color: #fff; } .count-on b, .count-on .of { color: #fff; } .count-accent { background: var(--accent); color: var(--accent-ink); } .avatar { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--bg-sunken); color: var(--text-muted); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; } .avatar-md { width: 34px; height: 34px; font-size: var(--fz-sm); } .avatar-lg { width: 56px; height: 56px; font-size: 20px; } .avatar-solid { background: var(--primary); color: #fff; } .avatar-off { background: var(--bg-soft); color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line); } .avatar-stack { display: flex; } .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg); margin-left: -8px; } .avatar-stack .avatar:first-child { margin-left: 0; } /* Тег-переключатель: высота элемента управления, потому что его нажимают. Теги размеров в конструкторе, метки в мастере, лиги в лого команд. */ .tag { display: inline-flex; align-items: center; gap: var(--sp-xs); height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg); font-family: var(--font); font-size: var(--fz-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .tag u { text-decoration: none; font-family: var(--mono); font-size: var(--fz-2xs); opacity: .6; font-variant-numeric: tabular-nums; } .tag:hover { border-color: var(--text-faint); color: var(--text); } .tag:active { transform: scale(.97); } .tag.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .tag.is-on u { opacity: .75; } .tag:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--secondary); } /* Рабочая метка «доработать» — своя расцветка, чтобы не путать с выбором */ .tag-flag { background: var(--warning-soft); border-color: var(--warning-soft); color: var(--warning-ink); } .tag-flag.is-on { background: var(--warning); border-color: var(--warning); color: #fff; } /* Ряд тегов и фильтров-чипов: их всегда много и они всегда переносятся */ .tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs); } /* ============================================================================ 10. ДАННЫЕ: превью, карточка, таблица ========================================================================= */ /* Сетки: всегда auto-fill, никогда фиксированное число колонок */ .grid-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell-preview), 1fr)); gap: var(--sp-3); } .grid-tile { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell-tile), 1fr)); gap: var(--sp-3); } .grid-tile-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell-tile-sm), 1fr)); gap: var(--sp-3); } .grid-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell-card), 1fr)); gap: var(--sp-4); } .grid-card-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell-card-wide), 1fr)); gap: var(--sp-4); } /* Поля прокручиваемой сетки: иначе край срезает тень и кольцо фокуса */ .grid-scroll { padding: 4px 12px 4px 4px; } .grid-sep { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-1); font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); } .grid-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* Превью с выбором: кружок в углу, а не рамка вокруг */ .tile { position: relative; padding: var(--sp-2); aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); cursor: pointer; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .tile-9x16 { aspect-ratio: 9 / 16; } .tile-auto { aspect-ratio: auto; } .tile > img, .tile > canvas { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); display: block; } .tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); } .tile:active { transform: scale(.99); } .tile.is-on { border-color: var(--secondary); box-shadow: inset 0 0 0 1px var(--secondary); } .tile.is-on::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); background: var(--secondary); opacity: .07; pointer-events: none; } /* Кружок выбора: кольцо внутренней тенью, а не border — 2px рамка на 26-м круге выглядит грубо и съедает место под галку */ .tile-pick { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: var(--z-raised); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 3px rgba(16, 19, 26, .18), inset 0 0 0 1px rgba(16, 19, 26, .12); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .tile-pick > svg { width: 14px; height: 14px; color: var(--text-faint); transform: translateY(-.5px); } .tile:hover .tile-pick { box-shadow: 0 1px 3px rgba(16, 19, 26, .18), inset 0 0 0 1.5px var(--secondary); } .tile:hover .tile-pick > svg { color: var(--secondary); } .tile.is-on .tile-pick { background: var(--secondary); box-shadow: 0 1px 3px rgba(16, 19, 26, .22), 0 0 0 2px rgba(255, 255, 255, .9); } .tile.is-on .tile-pick > svg { color: #fff; } .tile-pick:focus-visible { outline: none; box-shadow: var(--ring); } .tile-caption { position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); z-index: 2; padding: 5px var(--sp-2); border-radius: 0 0 var(--r-sm) var(--r-sm); background: rgba(16, 19, 26, .78); color: #fff; font-size: var(--fz-2xs); font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* ============================================================================ Карточка-сущность: одна основа, две формы. Плитка (.card-tile) — витрина: обложка почти во всю карточку, название лежит на ней. Строка (.card-row) — работа: превью 76, всё остальное текстом. Переключаются на месте, разметка внутри общая. ========================================================================= */ .card { display: flex; flex-direction: column; position: relative; /* Карточка почти всегда