/* ====== Base Reset ====== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --tooltip-bg: rgba(8, 12, 30, 0.96); --tooltip-text: var(--text); /* ── ЕДИНАЯ ТОЧКА УПРАВЛЕНИЯ ТЁМНОСТЬЮ ФОНА ── --bg-rgb задаёт базовый тон, от него считаются: сам --bg, полупрозрачный навбар, утопленные панели (.modal-box/.player-hero/.tab-panel/…) и всплывашки. Крутить ТОЛЬКО эти три строки; ниже по файлу оттенок фона не хардкодится. */ --bg-rgb: 18,22,42; --panel-rgb: 14,17,33; /* чуть темнее фона — утопленные плашки */ --popover: #1e2440; /* непрозрачные выпадашки/option — чуть светлее фона */ --bg: rgb(var(--bg-rgb)); --bg-2: #232a4a; /* Утопленная подложка: футер, фон под аватарками и картинками форума, инпуты, плитки статистики. Раньше переменной НЕ существовало, хотя на неё ссылались восемь мест: где стоял фолбэк — намертво прилипал хардкод (футер не менял цвет с темой), где не стояло — свойство молча игнорировалось и подложки не было вовсе. Считается от --panel-rgb, поэтому едет за темой сама. */ --bg-soft: rgba(var(--panel-rgb), 0.55); --surface: rgba(255,255,255,0.06); --surface-strong: rgba(255,255,255,0.10); --surface2: rgba(255,255,255,0.13); --border: rgba(255,255,255,0.11); --border-strong: rgba(255,255,255,0.18); --text: #f2f4fd; --text-dim: #9aa3c5; --text-faint: #6a7296; --accent: #3b82f6; /* vivid blue */ --accent-2: #8b5cf6; /* electric purple */ --accent-3: #22d3ee; /* cyan highlight */ --accent-soft: rgba(59,130,246,0.14); --accent-purple-soft: rgba(139,92,246,0.14); --gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); --gradient-soft: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.18)); --gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(59,130,246,0.35) 0%, transparent 70%); --gold: #fbbf24; --silver: #cbd5e1; --bronze: #fb923c; --green: #34d399; --red: #f87171; --yellow: #facc15; --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25); --shadow-glow: 0 10px 40px rgba(59,130,246,0.25); /* ── Размерная шкала: ЕДИНАЯ точка управления масштабом интерфейса ── Корневой font-size, от которого считается весь rem-based layout (шрифты, паддинги, гэпы, эмодзи-иконки). Чтобы сделать всё мельче на мобиле — меняем --fs-root в мобильном override ниже, в одном месте. Десктоп — 16px (rem = привычный размер). */ --fs-root: 16px; /* Поверх уже тёмной плашки (.player-hero / .tab-panel) кладутся плитки .tile — нужен чуть более светлый слой, иначе сливаются. */ --surface-elev: rgba(255,255,255,0.045); } /* ═══ ОФОРМЛЕНИЕ ═══════════════════════════════════════════════════════════ Единственное оформление — «Special One 2.0», четыре ступени тёмного (sofl-2 … sofl-2d). Выбирается в профиле, вешается как data-theme на инлайн-скриптом в index.html ДО первой отрисовки; без валидного значения скрипт ставит sofl-2. Значения в :root выше — только фолбэк. */ /* sofl-2 — «Special One 2.0»: деликатная полировка по SOFL_visual_polish_brief. Тот же синий вайб, но фон глубже, карточки плотнее, границы яснее, вторичный текст контрастнее, акцент — сдержанный фиолетовый вместо сине-фиолетового, glow кнопок приглушён. Без новых blur/анимаций. */ html[data-theme^="sofl-2"] { /* Тон (чернота): --s2-card-rgb карточки, --s2-nav-rgb шапка/меню, --s2-img видимость фоновой картинки. Ступени sofl-2b/c/d ниже. */ --s2-card-rgb: 30,34,54; --s2-nav-rgb: 21,24,40; --s2-img: 0.88; --bg-rgb: 15,18,32; --panel-rgb: 11,13,25; --popover: #1f2339; --bg-2: #151829; --text: #eff1fb; --text-dim: #a9aec8; --text-faint: #7d83a3; --surface: rgba(150,168,235,0.12); --surface-strong: rgba(150,165,235,0.17); --surface2: rgba(150,160,235,0.22); --surface-elev: rgba(150,168,235,0.09); --border: rgba(165,178,225,0.17); --border-strong: rgba(150,170,240,0.30); --accent: #8b6ce8; --accent-2: #9b72f0; --accent-3: #b49aff; --accent-hover: #b49aff; --link: #b49aff; --link-hover: #d9ccff; --accent-soft: rgba(139,108,232,0.18); --accent-purple-soft: rgba(155,114,240,0.16); --gradient: linear-gradient(135deg, #7a63ee 0%, #9b72f0 100%); --gradient-soft: linear-gradient(135deg, rgba(122,99,238,0.20), rgba(155,114,240,0.20)); --gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(139,108,232,0.30) 0%, transparent 70%); --shadow: 0 10px 28px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25); --shadow-glow: 0 8px 28px rgba(139,108,232,0.18); } /* Ступени «светлее» того же оформления: фиолетовый акцент общий, меняются только фон, карточки, шапка/меню и видимость картинки. */ html[data-theme="sofl-2b"] { --s2-card-rgb: 40,45,70; --s2-nav-rgb: 30,34,56; --s2-img: 0.88; --bg-rgb: 22,26,46; --panel-rgb: 16,19,36; --popover: #282d4c; --bg-2: #1f2340; } html[data-theme="sofl-2c"] { --s2-card-rgb: 51,57,88; --s2-nav-rgb: 40,45,72; --s2-img: 0.88; --bg-rgb: 31,36,62; --panel-rgb: 23,27,48; --popover: #343a5f; --bg-2: #2a2f52; } html[data-theme="sofl-2d"] { --s2-card-rgb: 64,71,106; --s2-nav-rgb: 51,57,90; --s2-img: 0.88; --bg-rgb: 42,48,78; --panel-rgb: 32,37,62; --popover: #424878; --bg-2: #363c66; } html[data-theme^="sofl-2"] body::before { background: radial-gradient(circle, rgba(139,108,232,0.10) 0%, transparent 60%); } html[data-theme^="sofl-2"] :focus-visible { outline-color: var(--accent-hover); } /* Шапка и меню: темнее и ровнее. */ /* Плотность слоёв: шапка 0.88, сайдбар 0.85, карточки 0.90 / боковые 0.93. Шапка без blur, фоновый слой — от top:0. */ html[data-theme^="sofl-2"] .navbar { background: rgba(var(--s2-nav-rgb),0.88); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme^="sofl-2"] .sidebar { background: rgba(var(--s2-nav-rgb),0.97); } /* Единый фон под сайдбаром: слой фона начинается от левого края, сайдбар — полупрозрачная подложка без blur. Только на десктопе: ниже 901px сайдбар — драуэр поверх контента и должен оставаться непрозрачным. */ @media (min-width: 901px) { html[data-theme^="sofl-2"] .owner-hero-bg-fixed { left: 0; } html[data-theme^="sofl-2"] .sidebar { background: linear-gradient(180deg, rgba(var(--s2-nav-rgb),0.95) 0%, rgba(var(--s2-nav-rgb),0.90) 30%, rgba(var(--s2-nav-rgb),0.85) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; } } html[data-theme^="sofl-2"] .sidebar .nav-link { color: #bab8d6; } html[data-theme^="sofl-2"] .sidebar .nav-link:hover { color: var(--text); } html[data-theme^="sofl-2"] .nav-link.active { color: #fff; background: rgba(139,108,232,0.18); box-shadow: inset 0 0 0 1px rgba(180,154,255,0.35); } /* Кнопки: градиент остаётся, ореол меньше. */ html[data-theme^="sofl-2"] .btn-primary { box-shadow: 0 3px 10px rgba(139,108,232,0.25); } /* Фоновые картинки страниц — как в оригинале: без затемнения, маски и тонировки. */ html[data-theme^="sofl-2"] .owner-hero-bg-fixed { top: 0; opacity: var(--s2-img); } html[data-theme^="sofl-2"]:not(.bg-tint-on) .owner-hero-bg-fixed::after { display: none; } /* Главная (/news). */ html[data-theme^="sofl-2"] .card, html[data-theme^="sofl-2"] .news-item { background: var(--block-glass); border-color: rgba(155,140,220,0.19); } html[data-theme^="sofl-2"] .news-side .card { background: var(--block-glass); border-color: rgba(155,140,220,0.22); } html[data-theme^="sofl-2"] .news-item-date { color: #9d9bc0; } html[data-theme^="sofl-2"] .news-item-body { color: #f5f6ff; } /* Ссылки: светло-фиолетовые, при наведении светлее (лавандовые). Классы, где ссылка в покое наследует цвет текста (имена в таблицах и т.п.), остаются как есть, но hover у них такой же. :where() — чтобы общее правило не перебивало кнопки и пункты меню. */ :where(html[data-theme^="sofl-2"]) a { color: var(--link); } :where(html[data-theme^="sofl-2"]) a:hover { color: var(--link-hover); } html[data-theme^="sofl-2"] .news-toggle, html[data-theme^="sofl-2"] .forum-post-link { color: var(--link); } html[data-theme^="sofl-2"] .news-toggle:hover, html[data-theme^="sofl-2"] .forum-post-link:hover, html[data-theme^="sofl-2"] .transfer-link:hover, html[data-theme^="sofl-2"] .name-link:hover, html[data-theme^="sofl-2"] .bio-link:hover, html[data-theme^="sofl-2"] .bio-link:focus-visible, html[data-theme^="sofl-2"] .forum-post-team-link:hover, html[data-theme^="sofl-2"] a.tournament-name.clickable:hover, html[data-theme^="sofl-2"] .referee-inline-link:hover { color: var(--link-hover); } html[data-theme^="sofl-2"] .manager-link:hover { color: var(--link-hover); } /* Единый стиль ссылок: без подчёркивания ни в покое, ни на hover. */ html[data-theme^="sofl-2"] .manager-link, html[data-theme^="sofl-2"] .manager-link:hover, html[data-theme^="sofl-2"] .forum-post-link, html[data-theme^="sofl-2"] .forum-post-link:hover, html[data-theme^="sofl-2"] .news-toggle:hover, html[data-theme^="sofl-2"] .referee-inline-link:hover, html[data-theme^="sofl-2"] .match-table .score-link:hover { text-decoration: none; } /* Состав на матч. */ html[data-theme^="sofl-2"] .squad-groups { background: rgba(var(--s2-card-rgb),0.92); } html[data-theme^="sofl-2"] .pool-item:hover { background: rgba(139,108,232,0.12); } html[data-theme^="sofl-2"] .pool-item.selected { background: rgba(139,108,232,0.18); box-shadow: inset 0 0 0 1px rgba(180,154,255,0.45); } html[data-theme^="sofl-2"] .tactic-tab { background: rgba(150,160,255,0.05); border-color: rgba(165,165,225,0.12); } html[data-theme^="sofl-2"] .tactic-tab:hover { background: rgba(139,108,232,0.12); } html[data-theme^="sofl-2"] .tactic-tab.active { background: rgba(139,108,232,0.16); border-color: var(--accent); box-shadow: none; } html[data-theme^="sofl-2"] .tactic-tab.is-start:not(.active) { border-color: rgba(139,108,232,0.5); } html[data-theme^="sofl-2"] .tactic-tab-save { box-shadow: 0 2px 8px rgba(139,108,232,0.22); } html { font-size: var(--fs-root); } html, body { height: 100%; } /* Место под вертикальный скроллбар держим всегда. Иначе вкладки с разной высотой контента (Лента длиннее остальных) то показывают скроллбар, то убирают — и вся страница дёргается по горизонтали при переключении. */ html { scrollbar-gutter: stable; } /* ⬇⬇⬇ ЕДИНАЯ ТОЧКА УПРАВЛЕНИЯ МОБИЛЬНЫМ МАСШТАБОМ ⬇⬇⬇ Меньше число — мельче весь интерфейс на телефоне (шрифты, отступы, эмодзи-иконки). 16px = десктопный размер, 13px ≈ −19%. Крутить тут. */ /* =========================================================================== БРЕЙКПОИНТЫ (канон). Мобильная адаптация КОНТЕНТА — два значения: ≤900px — планшет/узко: стеки в одну колонку, таблицы → карточки/скролл, боковое меню → драуэр. ≤600px — телефон: уменьшенный масштаб (--fs-root) + точечная полировка. Исключения (свой прогрессивный/многоколоночный ресайз — НЕ сводить к паре): • Навбар — пошаговый коллапс: 1300 → 1000 → 900 (драуэр) → 800 → 700. • Матч-реплей — 3 колонки >1700 → 2 колонки 1201–1700 → стек ≤1200. • Состав (squad-builder) — стек ≤1280. =========================================================================== */ @media (max-width: 600px) { :root { --fs-root: 12px; } } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; overflow-x: hidden; } /* Ambient background mesh */ body::before { content: ''; position: fixed; inset: -20% -10% auto auto; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, transparent 60%); filter: blur(60px); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; inset: auto auto -20% -10%; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(139,92,246,0.09) 0%, transparent 60%); filter: blur(60px); pointer-events: none; z-index: 0; } /* На широком экране те же 70vw дают ~1300px круг, размытие в 60px рядом с ним незаметно, и стоп «transparent 60%» читается как чёткий край — видно два диска. Растягиваем пятна в эллипсы по высоте экрана, уводим дальше за край и гасим плавнее: получается подсветка из углов, а не фигуры. На мобиле пропорции и так работают — там правило остаётся прежним. */ @media (min-width: 901px) { body::before { inset: -30% -20% auto auto; width: 80vw; height: 70vh; background: radial-gradient(ellipse at center, rgba(59,130,246,0.13) 0%, rgba(59,130,246,0.05) 40%, transparent 75%); filter: blur(110px); } body::after { inset: auto auto -30% -20%; width: 80vw; height: 70vh; background: radial-gradient(ellipse at center, rgba(139,92,246,0.11) 0%, rgba(139,92,246,0.045) 40%, transparent 75%); filter: blur(110px); } } #app { position: relative; z-index: 1; } a { color: var(--accent-3); text-decoration: none; transition: color .15s; } a:hover { color: #67e8f9; text-decoration: none; } ::selection { background: rgba(59,130,246,0.4); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); background-clip: padding-box; border: 2px solid transparent; } /* ====== App Loader (pre-Blazor) ====== */ .app-loader { position: fixed; inset: 0; background: linear-gradient(rgba(var(--bg-rgb),0.30), rgba(var(--bg-rgb),0.55)), url("/img/backgrounds/news-start.jpg?v=3") center top / cover no-repeat, radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg) 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; font-family: 'Inter', system-ui, sans-serif; color: var(--text); overflow: hidden; } .loader-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59,130,246,0.35) 0%, transparent 60%); filter: blur(60px); animation: pulse 3s ease-in-out infinite; } .loader-ball { width: 4rem; height: 4rem; display: block; animation: bounce 1.2s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(59,130,246,0.45)); z-index: 1; } .loader-prefix { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); z-index: 1; margin-bottom: -2px; } .loader-text { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.14em; background: linear-gradient(135deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; z-index: 1; text-transform: uppercase; } .loader-progress { width: 260px; height: 4px; margin-top: 0.4rem; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; z-index: 1; } .loader-progress-bar { height: 100%; width: var(--blazor-load-percentage, 0%); background: linear-gradient(90deg, #3b82f6, #8b5cf6, #22d3ee); background-size: 200% 100%; border-radius: 999px; transition: width 0.25s ease-out; animation: loader-shimmer 2s linear infinite; } .loader-progress-text { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); z-index: 1; min-height: 1em; } .loader-progress-text::after { content: var(--blazor-load-percentage-text, "0%"); } .loader-hint { margin-top: 0.6rem; max-width: 340px; text-align: center; font-size: 0.72rem; color: rgba(255,255,255,0.35); z-index: 1; padding: 0 1rem; } @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes pulse { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes loader-shimmer { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } } /* ====== Navbar ====== */ :root { --sat: env(safe-area-inset-top, 0px); } .navbar { display: grid; /* 2 колонки: левая (links) растягивается, правая занимает по контенту. Раньше было 3 колонки с navbar-center, но center-блок убран — SeasonStateBadge переехал в navbar-right (см. MainLayout.razor). */ grid-template-columns: 1fr auto; align-items: center; padding: var(--sat) 1.75rem 0; height: calc(76px + var(--sat)); background: rgba(var(--bg-rgb),0.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .navbar-left { display: flex; align-items: center; min-width: 0; } .navbar-center { display: flex; align-items: center; justify-content: center; } .navbar-right { display: flex; align-items: center; justify-content: flex-end; min-width: 0; } .navbar-brand { display: flex; align-items: center; gap: 0.75rem; margin-right: 2.5rem; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-prefix { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); } .brand-main { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; /* background-image, НЕ background-шорткат: шорткат сбрасывает background-clip на border-box у всех, кто его не указал явно — а он именно нужен ниже в .brand-shine-play, где через background: (шорткат) слетал clip и текст закрывался сплошным прямоугольником с бегущим по нему бликом вместо прозрачных букв с градиентом внутри. */ background-image: var(--gradient); background-size: 100% 100%; background-position: 0% 0%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-icon { font-size: 1.75rem; width: 1.75rem; height: 1.75rem; display: block; filter: drop-shadow(0 0 14px rgba(59,130,246,0.55)); } /* ── Блик по лого/названию (js/brandShine.js) ── JS раз в случайные 10-20с добавляет .brand-shine-play на .navbar-brand на время анимации, потом убирает — CSS сам умеет только фиксированный период (`animation: infinite`), а нужна именно "не по часам" случайность, отсюда таймер в JS. Пока класса нет — просто обычный статичный вид бренда (см. .brand-main/.brand-icon выше), ничего не проигрывается. */ .brand-icon-wrap { position: relative; display: block; width: 1.75rem; height: 1.75rem; /* НЕ overflow:hidden здесь: .brand-icon (img) несёт свой filter:drop-shadow(...) (свечение эмблемы), которое должно свободно растекаться ЗА пределы 28x28 — overflow:hidden на этом же контейнере резало бы его по прямому углу и давало ровно тот "квадрат другого оттенка", про который был баг-репорт. Клиппинг блика — на отдельном .brand-icon-glare ниже, у него overflow свой и до img/свечения ему дела нет (сосед в DOM, не родитель). */ } .brand-icon-glare { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; pointer-events: none; } .brand-icon-glare::after { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%); /* transform, не background-position: проценты здесь считаются от СОБСТВЕННОЙ ширины этого элемента (однозначно), а не от разницы между фоном и контейнером, где легко промахнуться со знаком. opacity:0 в покое — гарантия, что вне анимации не видно вообще ничего, независимо от того, куда встал transform. */ transform: translateX(-220%); opacity: 0; } /* Слева направо, сначала эмблема — потом (с чуть более длинной анимацией и задержкой) текст, будто один блик перетекает с иконки на надпись. */ .navbar-brand.brand-shine-play .brand-icon-glare::after { animation: brand-glare-icon 0.55s ease-in-out forwards; } @keyframes brand-glare-icon { 0% { opacity: 0; transform: translateX(-220%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(220%); } } .navbar-brand.brand-shine-play .brand-main { background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 35%, #ffffff 50%, var(--accent-2) 65%, var(--accent) 100%); background-size: 250% 100%; animation: brand-shine 0.65s ease-in-out 0.45s backwards; } /* Фон (250% ширины) шире контейнера, а на background-position ПРОЦЕНТ считается как (контейнер-фон)×процент — при фоне БОЛЬШЕ контейнера эта разница отрицательна, и рост процента двигает видимое окно по фону влево, а не вправо. Поэтому для движения СЛЕВА НАПРАВО начинаем со 100% и идём к 0% — раньше было наоборот, отсюда и блик "не туда". */ @keyframes brand-shine { 0% { background-position: 100% 0%; } 100% { background-position: 0% 0%; } } @media (prefers-reduced-motion: reduce) { .navbar-brand.brand-shine-play .brand-icon-glare::after, .navbar-brand.brand-shine-play .brand-main { animation: none; } } .navbar-links { display: flex; gap: 0.25rem; flex: 1; } .navbar-links .nav-link { white-space: nowrap; } .nav-short { display: none; } .nav-link { padding: 0.5rem 1rem; border-radius: 10px; text-decoration: none; color: var(--text-dim); font-weight: 600; font-size: 0.9rem; transition: color .15s, background .15s; position: relative; } .nav-link:hover { color: var(--text); background: var(--surface); text-decoration: none; } .nav-link.active { color: #fff; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px var(--border-strong); } .navbar-user { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--text-dim); } /* Группа правых кнопок (slot stale, vlad, vip, admin, messages, profile, exit). Сидит сразу справа от ИД. Вся navbar-user (ИД + эта группа) прижата к правому краю navbar через grid-template-columns: 1fr auto на .navbar. */ .navbar-right-group { display: flex; align-items: center; gap: 0.5rem; } /* Бейдж капитана / вице / 3-го в карточке игрока на /squad. `.primary` = капитан №1 (цветной); остальные — серые лейблы. */ .captain-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 0.25rem; border-radius: 4px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.7rem; font-weight: 800; line-height: 1; } .captain-badge.primary { background: rgba(251,191,36,0.18); border-color: rgba(251,191,36,0.6); color: var(--yellow); } /* Слот для бейджа «состав не сохранён» — фиксированная ширина даже когда иконки нет, чтобы соседняя информация (ИД) не прыгала. */ .lineup-stale-slot { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } /* Слот ИД — слева в navbar-user (правая группа отделена margin-left:auto). */ .season-badge-slot { display: inline-flex; align-items: center; } /* Бейдж в шапке: «Состав не сохранён» (после сыгранного матча менеджеру нужно зайти на /squad и нажать «Сохранить»). См. MainLayout.razor + 0072. */ .lineup-stale-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.45); color: var(--yellow); font-size: 1.05rem; font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s; } .lineup-stale-badge:hover { background: rgba(250,204,21,0.22); border-color: rgba(250,204,21,0.75); text-decoration: none; color: var(--yellow); } /* Парный бейдж: «Состав сохранён» — зелёная галка. */ .lineup-ok-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.45); color: var(--green); font-size: 1.05rem; font-weight: 700; text-decoration: none; transition: background .15s, border-color .15s; } .lineup-ok-badge:hover { background: rgba(52,211,153,0.22); border-color: rgba(52,211,153,0.75); text-decoration: none; color: var(--green); } .profile-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 1.05rem; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; } .profile-btn:hover { background: var(--surface2); border-color: var(--border-strong); text-decoration: none; } .profile-btn.admin-btn { border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.08); } .profile-btn.admin-btn:hover { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.7); } /* Тоггл «мобильная/полная версия» — подсветка активного состояния. */ .profile-btn.mobile-preview-on { background: rgba(59,130,246,0.18); border-color: var(--accent); color: var(--accent); } /* Кнопка нужна только на тач-устройствах (телефон/планшет). На десктопе (мышь, pointer:fine) viewport-мета всё равно игнорируется → всегда полная версия, переключать нечего — прячем. */ .mobile-toggle-btn { display: none; } @media (pointer: coarse) { .mobile-toggle-btn { display: inline-flex; } } /* Блок «Настройки» в профиле раньше был целиком mobile-only и прятался на десктопе. Появилась первая десктоп-настройка (выбор темы) — гейт снят с карточки и переехал на те строки, которые остаются только для тача: переключатель версии интерфейса и установка PWA. */ .settings-touch-only { display: none; } @media (pointer: coarse) { .settings-touch-only { display: flex; } button.settings-touch-only { display: block; } } /* Плитки выбора темы: сама плитка красится своей палитрой, внутри — полоска «карточки», чтобы было видно не только фон, но и как на нём читается блок. */ .theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.6rem; } .theme-swatch { position: relative; padding: 0; height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; overflow: hidden; transition: transform .12s, border-color .12s; } .theme-swatch:hover { transform: translateY(-2px); border-color: var(--border-strong); } .theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .theme-swatch-card { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 15px; border-radius: 4px; } .theme-swatch-dot { position: absolute; top: 6px; left: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .theme-row-label { color: var(--text-dim); font-size: 0.82rem; margin-top: 0.85rem; } @media (max-width: 600px) { .theme-swatch { height: 40px; } } .profile-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--yellow); color: #1a1300; font-size: 0.65rem; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(var(--bg-rgb),0.9); animation: badge-pulse 1.8s ease-in-out infinite; } /* Inline-вариант для мест, где бейдж должен идти ВНУТРИ текста, а не углом-оверлеем (sidebar nav, tab-button). Использовать в любых широких/inline контейнерах вместо .profile-badge. Box-shadow + glow дают читаемость на любом фоне; без ободка пилюля сливается с тёмно-синим sidebar и выглядит как обычная цифра. */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 0.45rem; border-radius: 999px; background: var(--accent-2); color: #fff; font-size: 0.65rem; font-weight: 700; /* line-height не выставляем — у inline-flex центрирование делает align-items, а явный line-height сдвигает текст у тяжёлых шрифтов. */ vertical-align: middle; box-shadow: 0 0 0 2px rgba(var(--bg-rgb),0.9), 0 0 6px rgba(139,92,246,0.3); animation: badge-pulse 1.8s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } /* ====== Sidebar ====== */ .sidebar { width: 260px; flex-shrink: 0; padding: 1.25rem 0.85rem; background: rgba(var(--bg-rgb),0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-right: 1px solid var(--border); position: sticky; top: calc(76px + var(--sat)); align-self: flex-start; max-height: calc(100vh - 76px - var(--sat)); overflow-y: auto; padding-bottom: 1.5rem; } .sidebar-links { display: flex; flex-direction: column; gap: 0.2rem; } /* Гамбургер и затемнение драуэра — по умолчанию (десктоп) скрыты, включаются в @media (max-width: 900px). См. боковое меню → драуэр ниже. */ .drawer-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 0.5rem; flex-shrink: 0; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; /* убираем синий квадрат тапа на мобиле */ -webkit-touch-callout: none; user-select: none; } .drawer-toggle:hover { background: var(--surface2); border-color: var(--border-strong); } /* На нажатии/фокусе стиль НЕ меняется (Влад): без focus-ринга и без active-сдвига. */ .drawer-toggle:focus, .drawer-toggle:focus-visible { outline: none; } .drawer-toggle:active { background: var(--surface); border-color: var(--border); } /* На тач-устройствах hover не должен «залипать» после тапа — держим базовый стиль. */ @media (hover: none) { .drawer-toggle:hover { background: var(--surface); border-color: var(--border); } } .drawer-backdrop { display: none; } /* Быстрые ссылки в драуэре — на десктопе они в навбаре, тут скрыты. */ .drawer-quick { display: none; } .sidebar-divider { height: 1px; background: var(--border, rgba(255,255,255,0.08)); margin: 0.6rem 0.4rem; } .sidebar .nav-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem; font-size: 0.92rem; white-space: nowrap; } /* Пункт меню-кнопка (не навигация) — «Поддержать». Сброс дефолтов button. appearance: none обязателен — мобильный Safari/Chrome рисуют белую подложку нативной кнопки поверх background: none. */ .nav-link-btn { appearance: none; -webkit-appearance: none; background: none; border: none; font-family: inherit; font-size: inherit; color: var(--text-dim); cursor: pointer; width: 100%; text-align: left; } .nav-icon { font-size: 1.05rem; width: 1.4rem; text-align: center; filter: grayscale(0.15); } /* ====== Layout ====== */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .app-body { display: flex; flex: 1; align-items: stretch; } .main-content { flex: 1; padding: 2rem 1.5rem 3rem; max-width: 1200px; margin: 0 auto; width: 100%; position: relative; min-width: 0; } /* Fade-in при переходе на новую страницу (MainLayout.razor — @key на путь пересоздаёт этот div, animation проигрывается заново). */ .page-fade { animation: page-fade-in 0.28s ease-out; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page-fade { animation: none; } } /* ====== Page Header ====== */ .page-header { margin-bottom: 1.75rem; } .page-footer-actions { display: flex; justify-content: flex-end; margin-top: 1rem; } .page-header h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.025em; background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { color: var(--text-dim); margin-top: 0.35rem; font-size: 0.95rem; } /* ====== Buttons ====== */ .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; padding: 0.65rem 1.4rem; border: none; border-radius: 10px; font-family: inherit; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: transform .12s, box-shadow .2s, filter .15s; color: #fff; position: relative; /* overflow не должен обрезать абсолютно позиционированные потомки (в т.ч. тултипы через data-tooltip). Подсветка через .btn::before уже скруглена по inherited border-radius и не вылезает сама. */ } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%); opacity: 0.6; pointer-events: none; border-radius: inherit; } /* color здесь нужен для : глобальный a:hover красит текст в голубой. */ .btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(59,130,246,0.35); filter: brightness(1.08); } .btn:active { transform: translateY(0); filter: brightness(0.95); } .btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); transform: none; box-shadow: none; } .btn-primary { background: var(--gradient); box-shadow: 0 6px 20px rgba(59,130,246,0.28); } .btn-success { background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); box-shadow: 0 6px 20px rgba(16,185,129,0.28); } .btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%); box-shadow: 0 6px 20px rgba(245,158,11,0.28); } .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); box-shadow: 0 6px 20px rgba(239,68,68,0.28); } .btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; } .btn-ghost::before { display: none; } .btn-ghost:hover { background: var(--surface-strong); color: var(--text); box-shadow: none; transform: translateY(-1px); } /* ====== Action bar ====== */ .action-bar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; } /* ====== Teams Grid ====== */ .teams-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; } .vs-badge { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: var(--accent-2); padding-top: 3rem; } /* ====== Glass Card Mixin (via shared selectors) ====== */ .team-card, .card, .fixture-row, .pitch-container, .stats-panel, .events-panel, .player-stats-block { background: var(--surface); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border: 1px solid var(--border); box-shadow: var(--shadow); } /* ====== Team Card ====== */ .team-card { border-radius: var(--radius); overflow: hidden; } .team-header { display: flex; flex-direction: column; padding: 1.1rem 1.25rem; color: #fff; position: relative; overflow: hidden; } .team-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 100%); pointer-events: none; } .team-header > * { position: relative; z-index: 1; } .team-label { font-size: 0.68rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; } .team-name { font-size: 1.35rem; font-weight: 800; margin-top: 0.1rem; letter-spacing: -0.01em; } .team-overall { font-size: 0.8rem; opacity: 0.9; margin-top: 0.25rem; } .squad-section { padding: 0.5rem 0.75rem 0.75rem; } .squad-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); padding: 0.75rem 0.5rem 0.4rem; font-weight: 700; } .bench-title { border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.9rem; } .player-table { width: 100%; border-collapse: collapse; } .player-table th { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); padding: 0.4rem 0.5rem; text-align: left; font-weight: 700; } .player-table td { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.87rem; } .player-table tr:last-child td { border-bottom: none; } /* Колонка игрового номера — фиксированная ширина под два знака. Без неё ширину задавал самый широкий номер в конкретной таблице, из-за чего имена начинались с разной позиции от ростера к ростеру, а на мобилке (ячейки там становятся flex-элементами и меряются по контенту) ряд «прыгал» на каждой строке между 1- и 2-значными номерами. tabular-nums выравнивает и сами цифры между собой. Ширина — как у .col-num в contracts/training-таблицах. */ .player-table th.cell-num, .player-table td.cell-num { width: 2.8rem; min-width: 2.8rem; font-variant-numeric: tabular-nums; } .clickable-row { cursor: pointer; } .clickable-row:hover { background: var(--accent-soft); } /* Ссылка в строке трансферной таблицы (имя игрока, продавец). Наследует цвет текста, без подчёркивания; hover — акцент. */ /* Единый стиль кликабельного текста: цвет наследуется, при наведении — акцентный (как «Судья»/«Турнир» на карточке матча и текст активной вкладки), без подчёркивания. */ .transfer-link { color: inherit; text-decoration: none; cursor: pointer; transition: color .15s; } .transfer-link:hover { color: var(--accent-3); text-decoration: none; } /* Кликабельное имя игрока внутри некликабельной строки (напр. вызов сборной). */ .name-link { cursor: pointer; transition: color .15s; } .name-link:hover { color: var(--accent-3); text-decoration: none; } /* Строка-как-ссылка (ростер, standings и т.п. — по всей строке @onclick): подсветка «табовым» акцентом, курсор-палец. */ .player-table tbody tr { cursor: pointer; transition: background .15s; } .player-table tbody tr:hover { background: var(--accent-soft); } /* Таблицы трансферов/аренд/агентов: строка НЕ кликабельна (в ячейках свои ссылки и кнопки). Даём лишь слабую подсветку-ориентир, без «клик-сигнала» и без курсора-пальца — акцентятся только сами ссылки при наведении. */ .player-table.transfer-table tbody tr { cursor: default; } .player-table.transfer-table tbody tr:hover { background: rgba(255,255,255,0.035); } /* Секция внутри вкладки (ростер: Общая информация / Статистика / Номера, история клуба). Таблица лежит прямо на .tab-panel — без вложенной .card. */ .roster-section { margin-top: 1.5rem; } .roster-section:first-child, nav.tabs + .roster-section { margin-top: 0.25rem; } .roster-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Рейтинги (Страны / Команды / Менеджеры): таблица во всю ширину, «Репутация» прижата к правому краю. Узкие колонки (#, Репутация) — по контенту, колонка имени забирает остаток. Карточный/скролл-режим тут не нужен — таблицы узкие и помещаются на телефон. */ .ratings-table { width: 100%; } .ratings-table .pos-col { width: 1%; white-space: nowrap; text-align: center; color: var(--text-dim); } .ratings-table th.num, .ratings-table td.num { width: 1%; white-space: nowrap; text-align: right; } .gk-row { background: rgba(139,92,246,0.08); } .gk-row:hover { background: rgba(139,92,246,0.14) !important; } .pos-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: #93c5fd; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid rgba(59,130,246,0.25); min-width: 3.2rem; text-align: center; box-sizing: border-box; } .pos-badge.large { font-size: 0.85rem; padding: 4px 10px; min-width: 4rem; } /* ── Судьи (миграция 0290) ─────────────────────────────────────────── */ .referee-personality { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; } .referee-personality.ref-neutral { background: rgba(148,163,184,0.15); color: #94a3b8; border-color: rgba(148,163,184,0.25); } .referee-personality.ref-bias { background: rgba(234,179,8,0.15); color: #eab308; border-color: rgba(234,179,8,0.3); } .referee-personality.ref-strict { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); } .referee-personality.ref-lenient { background: rgba(34,197,94,0.15); color: #4ade80; border-color: rgba(34,197,94,0.3); } .referee-personality.ref-retired { background: rgba(100,116,139,0.15); color: #64748b; border-color: rgba(100,116,139,0.3); } .referee-inline-link { background: none; border: none; padding: 0; color: var(--text-dim); cursor: pointer; font-size: inherit; font-family: inherit; text-decoration: none; transition: color 0.15s; } .referee-inline-link:hover { color: var(--accent); text-decoration: underline; } /* Столбец «Судья» в таблицах туров (лига/кубок/еврокубок). Адаптив: десктоп — правый столбец, мобилка — вторая строка под матчем (места на узком экране нет). Ширины колонок — через классы , чтобы media-query их переназначал, а скрытый на мобилке столбец схлопывался. */ .tours-table .col-side { width: 33%; } .tours-table .col-score { width: 6rem; } .tours-table .col-weather { width: 8%; } .tours-table .col-ref { width: 16%; } .tours-table .col-press { width: 3.5rem; } .tours-table .press-col { text-align: center; white-space: nowrap; } /* Плей-офф еврокубков: пара — отдельный с заголовком, матчи пары — строки как в обычном туре, между парами видимый разделитель. */ .ko-table .ko-tie-head td { padding: 0.7rem 0.5rem 0.3rem; font-size: 0.75rem; color: var(--text-dim); text-align: left; border-top: none; } .ko-table tbody.ko-tie + tbody.ko-tie .ko-tie-head td { border-top: 2px solid var(--border-strong); } .ko-table .ko-tie-mine .ko-tie-head td { color: var(--accent-3); } .weather-col { text-align: left; color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; } th.weather-col { color: var(--text-dim); font-weight: 600; } .mobile-weather { color: var(--text-dim); } .mobile-sep { margin: 0 0.4rem; color: var(--text-faint); } .referee-col { text-align: left; color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; } th.referee-col { color: var(--text-dim); font-weight: 600; } .referee-col-name { display: inline-block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Строка-под-матчем для мобилки — по умолчанию скрыта (десктоп). */ .referee-row-mobile { display: none; } .referee-row-mobile td { border-top: none !important; padding: 0 0 0.45rem; text-align: center; color: var(--text-dim); font-size: 0.78rem; } /* Обёртка для широких таблиц (список судей) — горизонтальный скролл. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 700px) { /* Прячем столбцы погоды и судьи (th + td), показываем строку под матчем. */ .referee-col-desktop { display: none !important; } .referee-row-mobile { display: table-row; } .tours-table .col-ref, .tours-table .col-weather, .tours-table .col-press { width: 0; } .tours-table .col-side { width: auto; } } .referee-avatar { display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; font-size: 4rem; background: var(--accent-soft); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.45); flex-shrink: 0; } .referee-hint { margin: 0.4rem 0 0; color: var(--text-dim); font-size: 0.85rem; } .referee-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } .referee-stat { display: flex; flex-direction: column; align-items: center; padding: 0.75rem 0.5rem; background: var(--bg-soft, rgba(148,163,184,0.06)); border-radius: 0.5rem; } .referee-stat .rs-num { font-size: 1.5rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .referee-stat .rs-lbl { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; } .referee-history-toggle { display: flex; gap: 0.25rem; } .referee-history-toggle .tab-btn { font-size: 0.78rem; padding: 0.2rem 0.6rem; } @media (max-width: 600px) { .referee-stat-grid { grid-template-columns: repeat(2, 1fr); } } /* Компактный «+N» индикатор кол-ва освоенных позиций возле pos-badge. Используется в сжатых местах (squad pool-item, lineup) где нет места на полные badge'и вторичных позиций. */ .pos-extra-count { display: inline-block; margin-left: 0.2rem; padding: 1px 5px; border-radius: 5px; background: rgba(168, 85, 247, 0.18); color: #c4b5fd; font-size: 0.65rem; font-weight: 700; line-height: 1.3; border: 1px solid rgba(168, 85, 247, 0.35); cursor: help; } /* В составе (.pool-item) и в ростерах (.cell-pos): на полной версии — все вторичные позиции бейджами, чип «+N» скрыт. На телефоне — бейджи прячем, показываем компактный «+N» (иначе 3 позиции съедают имя). */ .pool-item .pos-extra-count, .cell-pos .pos-extra-count { display: none; } @media (max-width: 600px) { .pool-item .pos-secondary, .cell-pos .pos-secondary { display: none; } .pool-item .pos-extra-count, .cell-pos .pos-extra-count { display: inline-block; } } .ovr-cell { font-weight: 800; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; } .ovr-high { color: #34d399; text-shadow: 0 0 12px rgba(16,185,129,0.4); } .ovr-mid { color: #f59e0b; } .ovr-low { color: #94a3b8; } .bench-table td { color: var(--text-dim); } /* ====== Card (generic) ====== */ .card { position: relative; border-radius: var(--radius); padding: 1.4rem; } /* ── Блик по верхнему краю блока (js/blockShine.js) ── На .card И на всех остальных классах с тем же визуальным языком «блока» (та же rgba-подложка/рамка/скругление, просто исторически другое имя класса на других страницах — .player-hero/.tab-panel на карточке команды/игрока, .fixture-row/.pitch-container/.stats-panel/.events-panel/ .player-stats-block в матч-вьюхах). Раньше блик был только на .card — на страницах без единой .card (например /​{id}/team) не срабатывал вообще, хотя выглядящие так же блоки там есть под другими классами. Тонкая полоска на самой границе, слева направо, opacity:0 в покое (та же гарантия, что и у .brand-icon-glare — не может быть видна вне анимации). JS раз в случайные 10-20с выбирает ОДИН случайный видимый блок на странице и проигрывает на нём — не на всех сразу. */ .card, .fixture-row, .pitch-container, .stats-panel, .events-panel, .player-stats-block, .player-hero, .tab-panel { position: relative; } .card::before, .fixture-row::before, .pitch-container::before, .stats-panel::before, .events-panel::before, .player-stats-block::before, .player-hero::before, .tab-panel::before { content: ''; position: absolute; /* Псевдоэлемент — на весь размер блока (не тонкая полоска сама по себе), и обрезан clip-path'ом ТОЧНО по его контуру (тот же радиус). Раньше полоску позиционировали руками (left/width) и подбирали диапазон так, чтобы не задеть дугу — не сошлось: ширина полоски (20%) не была учтена симметрично на обоих концах, и на правом краю она заезжала за скругление. Теперь дуга режет её сама, всегда точно, независимо от того, куда встанет background-position. */ inset: 0; clip-path: inset(0 round var(--radius)); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); background-repeat: no-repeat; background-size: 20% 1px; background-position: -60% 0%; opacity: 0; pointer-events: none; } .block-shine-play::before { animation: block-shine-top 0.9s ease-in-out forwards; } @keyframes block-shine-top { 0% { opacity: 0; background-position: -60% 0%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 160% 0%; } } @media (prefers-reduced-motion: reduce) { .card.block-shine-play::before { animation: none; } } .card-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 0.9rem; } /* Секции на панели вкладки (ростер, трансферы, статистика, судьи, сборы, зал славы и т.п. — всё, что переведено на .roster-section): заголовок подчёркнут линией, как в панели «Тактика» на экране состава. */ .roster-section > .card-title { border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } /* ====== Forms / Auth ====== */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(var(--bg-rgb),0.25), rgba(var(--bg-rgb),0.45)), url("/img/backgrounds/news-start.jpg?v=3") center top / cover no-repeat, var(--bg); padding: 1rem; position: relative; overflow: hidden; } .auth-card { background: rgba(var(--panel-rgb),0.6); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--border-strong); border-radius: 20px; padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03); position: relative; } .auth-card::before { content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(139,92,246,0.4), transparent 50%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .auth-title { font-size: 1.65rem; font-weight: 800; text-align: center; margin-bottom: 0.35rem; letter-spacing: -0.02em; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .auth-logo { width: 1.6rem; height: 1.6rem; flex-shrink: 0; } .auth-brand-full { text-align: center; color: var(--text-faint); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.75rem; width: 100%; display: block; } .auth-sub { text-align: center; color: var(--text-dim); margin-bottom: 1.75rem; font-size: 0.9rem; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-dim); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 1.5px; } .field input, .field select, .field textarea { width: 100%; padding: 0.75rem 0.95rem; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 0.95rem; background: rgba(255,255,255,0.04); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; font-family: inherit; } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } /* Когда канонический */ .checkbox { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; font-size: 0.85rem; color: var(--text); } .checkbox input[type="checkbox"], .checkbox-field input[type="checkbox"] { /* !important guards against .field input { width:100% } leaking in when the checkbox lives inside a .field wrapper (AdminPolls). */ appearance: none !important; -webkit-appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px; /* !important: .squad-settings .field input { padding: .55rem .8rem } иначе раздувает галку в прямоугольник (была «вытянутая» «Тянуть время»). */ padding: 0 !important; border: 1.5px solid var(--border-strong); border-radius: 4px; /* Dark fill — matches the surrounding panel, not a light accent tile. */ background: rgba(8, 12, 30, 0.75); cursor: pointer; transition: border-color 0.12s, background 0.12s; position: relative; margin: 0; padding: 0; flex-shrink: 0; } .checkbox input[type="checkbox"]:hover, .checkbox-field input[type="checkbox"]:hover { border-color: rgba(255, 255, 255, 0.35); } .checkbox input[type="checkbox"]:checked, .checkbox-field input[type="checkbox"]:checked { /* Keep the box dark when checked — only the tick signals state. Checkmark drawn via SVG background so it stays perfectly centered regardless of border width / box size. */ background: rgba(8, 12, 30, 0.9) url("data:image/svg+xml;utf8,") no-repeat center center; background-size: 70% 70%; border-color: var(--green); } .checkbox input[type="checkbox"]:focus-visible, .checkbox-field input[type="checkbox"]:focus-visible { outline: 2px solid rgba(52, 211, 153, 0.35); outline-offset: 2px; } .checkbox-field { align-self: end; } .checkbox-field label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text); } .direction-block { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); } .direction-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; font-weight: 700; color: var(--text-dim); margin-bottom: 0.4rem; } .direction-sum { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--text); } .direction-sum.bad { color: var(--red); } .direction-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.35rem; align-items: end; } .direction-grid .field { margin: 0; min-width: 0; } /* Компактный stepper внутри Лево/Центр/Право — правая колонка Squad ужимается на узких экранах, и кнопки −/+ при стандартных padding=0.75rem выпадают за пределы. */ .direction-grid .stepper-btn { padding: 0 0.35rem; font-size: 0.95rem; } .direction-grid .stepper-input { width: 2.5ch; font-size: 0.85rem; padding: 0.3rem 0.15rem; } .direction-grid .stepper-label { font-size: 0.72rem; } /* Shared stepper-field: label above, .stepper below. Used anywhere we want the Profile-style counter pattern in a form grid. */ .stepper-field { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; min-width: 0; } .stepper-field .stepper { width: 100%; justify-content: space-between; } .stepper-field .stepper-input { flex: 1; width: auto; } .stepper-label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; } .settings-status.bad { color: var(--red); } /* ====== Tactic tabs divider ====== */ .tactic-tabs-divider { height: 1px; background: var(--border); margin: 0.4rem 0; } /* Pushes the Save/Reset action block to the bottom of the sticky tabs column. */ .tactic-tabs-spacer { flex: 1 1 auto; min-height: 1rem; } /* Save button lives at the bottom of the left sticky tabs column so its position is independent of whichever sub-tab the user is on. */ .sidebar-save { padding: 0.55rem 0.9rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; margin-top: 0.2rem; } .sidebar-status { display: block; font-size: 0.72rem; color: var(--green); text-align: center; margin-top: 0.4rem; line-height: 1.3; } .sidebar-status.bad { color: var(--red); } /* Reset sits visually apart from the rest — bigger top gap + muted tone so it never competes with the primary action. */ .sidebar-reset { margin-top: 1.25rem; padding: 0.45rem 0.9rem; font-size: 0.8rem; color: var(--text-dim); border-style: dashed; justify-content: center; } .sidebar-reset:hover { color: var(--red); border-color: var(--red); } /* ====== Rule Editor ====== */ .rules-card { padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; } .rules-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .rules-title { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; color: var(--text); } .rules-empty { padding: 1rem 0.5rem; text-align: center; color: var(--text-faint); font-size: 0.85rem; font-style: italic; } .rule-card { background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 10px; padding: 0.65rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; } .rule-line-label { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; } .rule-conditions { display: flex; flex-direction: column; gap: 0.35rem; } /* Condition block — stacks vertically so labels never get squished in the narrow rules column. Layout: row 1: [========= TYPE dropdown (full width) ==========] row 2: [========= PLAYER dropdown (full width) ========] (PlayerRating/Fitness only) row 3: [ Op ] [ − value + ] [× delete] The surrounding `.rule-cond` box gets a subtle border so multiple conditions inside one rule stay visually separated. */ .rule-cond { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.55rem 0.65rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 8px; } .cond-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .cond-row .fd-wrap { min-width: 0; max-width: none; } /* Full-width row for the two wide dropdowns (type, player). */ .cond-row.cond-row-full .fd-wrap { flex: 1 1 auto; width: 100%; } .cond-row.cond-row-full .fd-trigger { width: 100%; } /* Compare row: op (fixed narrow) | stepper | delete-X pushed to the end. */ .cond-row.cond-row-compare .fd-wrap { flex: 0 0 4.6rem; } .cond-row.cond-row-compare .fd-trigger { width: 100%; } .cond-row.cond-row-compare .stepper { flex: 0 0 auto; } /* Wide enough for three digits (up to 120) + caret, in JetBrains Mono. */ .cond-row.cond-row-compare .stepper-input { width: 4.5ch; padding: 0.3rem 0.55rem; } .cond-row.cond-row-compare > .btn { margin-left: auto; } /* Legacy selectors kept for any remaining users (none now, but cheap to leave). */ .rule-cond select, .rule-cond input[type="number"] { padding: 0.3rem 0.5rem; font-size: 0.85rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); min-width: 0; } .rule-action { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-dim); } .rule-action select { padding: 0.3rem 0.5rem; font-size: 0.85rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .rule-action > .btn { margin-left: auto; } /* ==== Rule card header (delete button lives here instead of inside an action row, so the two "Уходит / Выходит" rows can span full width). Clicking the header toggles collapsed state; the × button stops propagation so it only deletes. ==== */ .rule-card-top { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.2rem 0.4rem; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; } .rule-card.collapsed .rule-card-top { border-bottom: none; padding-bottom: 0.15rem; } .rule-card-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; color: var(--text-dim); font-size: 0.85rem; flex-shrink: 0; transition: color .15s; } .rule-card-top:hover .rule-card-toggle { color: var(--accent); } .rule-card-title { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); } /* Inline summary shown only when collapsed, next to the title. */ .rule-card-summary { flex: 1 1 auto; min-width: 0; margin-left: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* When expanded, the delete button needs to be pushed to the right manually since there's no flex: 1 filler element between title and delete. */ .rule-card:not(.collapsed) .rule-card-title { flex: 1 1 auto; } .rule-card-delete { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 1.05rem; font-weight: 900; line-height: 1; padding: 0.15rem 0.45rem; border-radius: 6px; transition: background .12s; flex-shrink: 0; } .rule-card-delete:hover { background: rgba(248,113,113,0.15); } /* Rules-card header counter (e.g. "Замены (3 / 10)"). */ .rules-count { font-size: 0.78rem; font-weight: 600; color: var(--text-faint); margin-left: 0.35rem; letter-spacing: 0.02em; } /* ==== Substitution action block: one row per direction. Label (fixed width) + colored double-chevron icon + full-width dropdown. ==== */ .rule-action-stack { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.55rem; border-top: 1px solid var(--border); } .rule-action-row { display: flex; align-items: center; gap: 0.7rem; } .rule-action-label { flex: 0 0 5rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } /* CSS-rotated « » » so it reads as a double-chevron in the required direction without relying on less-common Unicode codepoints. */ .rule-action-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; font-size: 1.35rem; font-weight: 900; line-height: 1; } .rule-action-icon--out { color: var(--red); transform: rotate(90deg); } .rule-action-icon--in { color: var(--green); transform: rotate(-90deg); } .rule-action-select { flex: 1 1 auto; min-width: 0; } .rule-action-select .fd-wrap { max-width: none; } .rule-action-select .fd-trigger { width: 100%; } .btn.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.82rem; } .btn.btn-xs { padding: 0.18rem 0.5rem; font-size: 0.75rem; border-radius: 6px; } .btn.btn-xs.danger { color: var(--red); } .btn.btn-xs.danger:hover { background: rgba(248,113,113,0.12); } .btn.btn-xs:disabled { opacity: 0.35; cursor: not-allowed; } /* ====== Set-piece takers ====== */ .rules-hint { font-size: 0.82rem; color: var(--text-dim); padding: 0.1rem 0 0.3rem; line-height: 1.4; } .takers-card { gap: 0.4rem; } .taker-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } .taker-rank { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--text-dim); width: 1.6rem; text-align: right; } .taker-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .taker-actions { display: flex; gap: 0.2rem; margin-left: auto; } /* ====== reusable component ====== Custom-rendered popup (no native for takers) ====== Stacking rationale: `.card` has backdrop-filter → each card creates its own stacking context. Without lifting the rules-card, the later `.card` siblings (save-button card) AND the later `.takers-card` siblings paint on top of an absolutely-positioned dropdown. So we lift the open card chain above them (and above the click-catching backdrop) while the dropdown is open. */ .rules-card:has(.dropdown-panel) { z-index: 50; } .takers-card:has(.dropdown-panel) { z-index: 5; } .dropdown-wrap { /* Relative only so the absolute panel is anchored to this box. Deliberately NO z-index here: an unconditional z-index on every wrap would make closed dropdowns' wraps outrank the takers-card that holds the open panel (which rises to z:5 via :has below), and their trigger buttons would bleed through the open panel. The panel itself uses z-index within whichever takers-card :has() lifts. */ position: relative; margin-top: 0.2rem; } .taker-add-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.8rem; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--text-dim); font-size: 0.85rem; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .taker-add-trigger:hover { background: var(--surface2); border-color: var(--accent); color: var(--text); } .taker-add-trigger.open { background: var(--surface2); border-style: solid; border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); } .dropdown-caret { font-size: 0.7rem; line-height: 1; transition: transform .15s; color: var(--text-dim); } .taker-add-trigger.open .dropdown-caret { transform: rotate(180deg); color: var(--accent); } .dropdown-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 51; background: var(--popover); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.3rem; max-height: 260px; overflow-y: auto; box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.08); display: flex; flex-direction: column; gap: 0.15rem; animation: dropdown-in .12s ease-out; } @keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .dropdown-panel::-webkit-scrollbar { width: 8px; } .dropdown-panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .dropdown-panel::-webkit-scrollbar-thumb:hover { background: var(--accent); } .dropdown-option { display: flex; flex: 0 0 auto; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem; background: transparent; border: none; border-radius: 6px; color: var(--text); font-size: 0.86rem; font-weight: 500; font-family: inherit; text-align: left; cursor: pointer; transition: background .12s, color .12s; } .dropdown-option:hover, .dropdown-option:focus-visible { background: var(--accent-soft); outline: none; } .dropdown-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .dropdown-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; } .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .settings-grid .field { margin: 0; min-width: 0; } /* Single-column variant — each field on its own row. */ .settings-stack { display: flex; flex-direction: column; gap: 0.9rem; } .settings-stack .field { margin: 0; } .settings-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .settings-status { color: var(--green); font-weight: 600; font-size: 0.85rem; } /* Pitch stripes */ .slot { position: absolute; transform: translate(-50%, -50%); width: 56px; text-align: center; cursor: pointer; user-select: none; transition: transform .15s; } .slot:hover { transform: translate(-50%, -50%) scale(1.05); } .slot-avatar { width: 38px; height: 38px; border-radius: 50%; margin: 0 auto; position: relative; z-index: 2; /* фишка поверх стрелки */ background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #1e3a8a; font-size: 0.75rem; overflow: hidden; } .slot.empty .slot-avatar { background: rgba(255,255,255,0.12); border-style: dashed; border-color: rgba(255,255,255,0.5); color: #fff; box-shadow: none; } .slot.selected .slot-avatar { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 18px rgba(251,191,36,0.7); } .slot-label { color: #fff; font-size: 0.64rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.8); margin-top: 4px; margin-left: -14px; margin-right: -14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slot-pos { display: inline-block; background: rgba(0,0,0,0.5); color: #fff; font-size: 0.56rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-top: 2px; letter-spacing: 0.4px; border: 1px solid rgba(255,255,255,0.15); } /* ── Персональные индикаторы на тактической схеме (чисто визуально) ── */ /* Стрелка движения — пунктирная SVG-линия. absolute, низ стрелки на центре avatar; поворот вокруг этого центра — фишка НЕ смещается (Влад: кружочки всегда на месте). */ .slot-arrow { position: absolute; left: 50%; top: -36px; /* низ SVG (height 55) попадает на ~центр avatar (19px) */ transform-origin: 50% 100%; /* поворот вокруг низа = центра фишки */ color: #cbd5e1; /* нейтральный серый */ pointer-events: none; z-index: 1; /* ПОД фишкой (avatar выше) */ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); } /* Вторичные иконки — absolute под фишкой, НЕ влияют на высоту слота. */ .slot-icons { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 1px; flex-wrap: nowrap; margin-top: 1px; } .slot-ic { font-size: 0.62rem; line-height: 1.1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7)); } .squad-sidebar { display: flex; flex-direction: column; gap: 1rem; } .squad-groups { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 0.9rem; flex: 1; } /* The last visible group fills any remaining vertical space so the card's bottom lines up with the right-column settings card. */ .squad-groups .squad-group:last-child { flex: 1; min-height: 0; } .squad-groups .squad-group:last-child .squad-group-body { flex: 1; min-height: 0; } .squad-hint { font-size: 0.82rem; color: var(--text-dim); padding: 0.55rem 0.7rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 0.25rem; } .squad-hint b { color: var(--text); font-weight: 700; } .squad-group { display: flex; flex-direction: column; border-radius: 10px; background: rgba(255,255,255,0.025); border: 1px solid var(--border); overflow: hidden; } .squad-group-head { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.75rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .squad-group-head.clickable { cursor: pointer; transition: background .12s; } .squad-group-head.clickable:hover { background: var(--surface2); } .squad-group-title { color: var(--text); } .squad-group-count { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0; } .squad-group-body { display: flex; flex-direction: column; padding: 0.15rem 0.25rem; } .squad-empty { padding: 0.6rem 0.75rem; font-size: 0.8rem; color: var(--text-faint); text-align: center; font-style: italic; } .pool-item { display: grid; /* 8 колонок: №, имя, статус-бейджи (травма/дискв./школьник/СБ/U21), позиционные бейджи (капитан + pos), Физ., Мораль, OVR, кнопка инструкций. Статус и позиции — отдельные ячейки, чтобы статус не «слипался» с позиционным бейджем (см. PlayerBadges). */ grid-template-columns: 22px minmax(0, 1fr) auto auto 32px 32px 32px 22px; gap: 0.45rem; align-items: center; padding: 0.4rem 0.55rem; cursor: grab; transition: background .12s, transform .08s; border-radius: 8px; user-select: none; } .pool-status-cell { display: inline-flex; align-items: center; gap: 0.25rem; justify-content: flex-end; min-width: 0; } .pool-badge-cell { display: inline-flex; align-items: center; gap: 0.3rem; /* Pos-badge прижат к ПРАВОЙ границе ячейки — captain (если есть) уходит левее, не сдвигая колонок справа. Без этого добавление К-бейджа толкало позиционный бейдж вправо в одной строке. */ justify-content: flex-end; } /* На десктопе обёртка прозрачна для грида — статус и позиции остаются отдельными колонками 8-колоночного pool-item. На мобиле (см. медиа ниже) она становится второй строкой. */ .pool-tags { display: contents; } .pool-name-wrap { display: flex; align-items: center; gap: 4px; min-width: 0; } .pool-name-wrap .pool-name { flex: 1 1 auto; min-width: 0; } .pool-name-wrap .pool-move-btn { flex: 0 0 auto; } .pool-move-btn { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); font-size: 1rem; line-height: 1; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; } .pool-move-btn.plus { color: var(--green); border-color: var(--green); } .pool-move-btn.minus { color: var(--text-dim); } .pool-move-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text); } /* Trailing column: 🎯 instructions button on starters, blank spacer otherwise. */ .instr-btn { width: 22px; height: 22px; padding: 0; border: 1px solid transparent; background: transparent; border-radius: 6px; font-size: 0.82rem; cursor: pointer; opacity: 0.5; transition: opacity .12s, background .12s, border-color .12s; } .instr-btn:hover { opacity: 1; background: var(--surface2); border-color: var(--border); } .instr-btn.active { opacity: 1; background: var(--accent-soft); border-color: var(--accent); } .pool-item + .pool-item { border-top: 1px solid rgba(255,255,255,0.04); } .pool-item:hover { background: var(--surface2); } .pool-item:active { cursor: grabbing; transform: scale(0.99); } .pool-item.selected { background: var(--gradient-soft); box-shadow: inset 0 0 0 1px var(--accent); } .pool-num { color: var(--text-faint); font-weight: 700; font-size: 0.78rem; text-align: center; font-family: 'JetBrains Mono', monospace; } .pool-name { font-weight: 600; font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pool-metric { font-weight: 800; font-size: 0.82rem; font-family: 'JetBrains Mono', monospace; text-align: center; padding: 0 0.15rem; } /* Рейтинг игрока в составе на матч — клик открывает модалку (PlayerStatsModal) с полной разбивкой параметров, везде одинаково (десктоп/тач). Раньше тут был ещё hover-тултип с той же карточкой, но position:fixed внутри списка игроков конфликтовал с кликом (тултип перехватывал/терял клик) — Влад: "нажиматься не хочет нормально, давай только по нажатию". Убрали. */ .pool-ovr-clickable { cursor: pointer; } /* ====== Modal ====== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(7,10,21,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 200; display: flex; align-items: center; justify-content: center; animation: fade .2s ease-out; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .modal-box { background: rgba(var(--panel-rgb),0.95); backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 1.75rem; min-width: 320px; max-width: 440px; width: 90%; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 80px rgba(0,0,0,0.6); animation: slide-up .25s ease-out; } /* Wide variant used by the player card: 3-zone grid (info | stats / matches). */ .modal-box.player-card { max-width: 860px; } /* Wide modal for forms where each field needs its own row. */ .modal-box.modal-wide { max-width: 560px; } .player-card-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr); grid-template-areas: "info stats"; gap: 1.25rem; margin-top: 0.4rem; } .player-info { grid-area: info; } .player-stats { grid-area: stats; } .player-section-title { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 0.65rem; font-weight: 700; } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.88rem; color: var(--text-dim); } .info-row b { color: var(--text); font-weight: 700; } .info-row.ovr-row b { font-size: 1.1rem; color: #fbbf24; font-family: 'JetBrains Mono', monospace; } .info-row:last-of-type { border-bottom: none; } .empty-block { padding: 1rem; border: 1px dashed rgba(255,255,255,0.1); border-radius: 10px; color: var(--text-dim); text-align: center; font-size: 0.88rem; } @media (max-width: 900px) { .player-card-grid { grid-template-columns: 1fr; grid-template-areas: "info" "stats"; } } .modal-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.9rem; cursor: pointer; padding: 0.3rem 0.55rem; line-height: 1; border-radius: 8px; transition: color .12s, background .12s; } .modal-close:hover { color: var(--text); background: var(--surface-strong); } .modal-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; /* Reserve space for the absolutely-positioned close button (top-right). Close button is ~2.1rem wide, offset 0.9rem from the edge — reserve 3.5rem so even on narrow modals the header content never slides under. */ padding-right: 3.5rem; } .modal-num { color: var(--text-dim); font-weight: 600; font-family: 'JetBrains Mono', monospace; } .modal-name { font-size: 1.2rem; font-weight: 800; flex: 1; letter-spacing: -0.01em; } .modal-meta { display: flex; gap: 1rem; color: var(--text-dim); font-size: 0.83rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .stats-grid { display: flex; flex-direction: column; gap: 0.5rem; } .stat-row { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: 0.6rem; } .stat-label { font-size: 0.8rem; color: var(--text-dim); } .stat-value { font-size: 0.82rem; font-weight: 700; text-align: right; font-family: 'JetBrains Mono', monospace; color: var(--text); } .stat-bar-wrap { background: rgba(255,255,255,0.06); border-radius: 99px; height: 6px; overflow: hidden; } .stat-bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; } .bar-high { background: linear-gradient(90deg, #10b981, #059669); box-shadow: 0 0 8px rgba(16,185,129,0.3); } .bar-mid { background: linear-gradient(90deg, #fbbf24, #f59e0b); } .bar-low { background: linear-gradient(90deg, #94a3b8, #64748b); } /* ====== Match Page ====== */ .match-page { display: flex; flex-direction: column; gap: 1rem; } .scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; background: linear-gradient(135deg, rgba(59,130,246,0.9) 0%, rgba(139,92,246,0.9) 100%); color: #fff; border-radius: var(--radius); padding: 1.25rem 1.75rem; box-shadow: 0 20px 50px rgba(59,130,246,0.35); position: relative; overflow: hidden; } .scoreboard::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(255,255,255,0.2), transparent 60%); pointer-events: none; } .scoreboard > * { position: relative; z-index: 1; } .team-score { display: flex; flex-direction: column; } .team-score.home { align-items: flex-start; } .team-score.away { align-items: flex-end; } .score-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; } .score-ovr { font-size: 0.75rem; opacity: 0.85; font-family: 'JetBrains Mono', monospace; } .score-center { display: flex; flex-direction: column; align-items: center; } .score-digits { font-family: 'JetBrains Mono', monospace; font-size: 2.6rem; font-weight: 800; letter-spacing: 4px; line-height: 1; text-shadow: 0 4px 14px rgba(0,0,0,0.25); } .score-time { font-size: 0.85rem; opacity: 0.9; margin-top: 0.2rem; font-family: 'JetBrains Mono', monospace; } .score-final { font-size: 0.78rem; color: var(--gold); font-weight: 800; margin-top: 0.25rem; letter-spacing: 2px; text-transform: uppercase; } /* ====== Match Controls ====== */ .match-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .speed-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-dim); } .speed-slider { -webkit-appearance: none; width: 100px; height: 4px; background: var(--surface2); border-radius: 2px; outline: none; } .speed-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 10px rgba(59,130,246,0.6); } .pitch-and-stats { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; align-items: start; } .pitch-container, .stats-panel, .events-panel { border-radius: var(--radius); overflow: hidden; } .pitch-container { padding: 0.85rem; } .pitch-container canvas { max-width: 100%; height: auto; border-radius: 8px; } .stats-panel-title, .events-title { padding: 0.7rem 0.9rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); font-weight: 800; border-bottom: 1px solid var(--border); background: var(--surface-strong); } .stats-panel-body { padding: 0.3rem 0; } .srow { display: flex; align-items: center; padding: 0.4rem 0.9rem; gap: 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.03); } .srow:last-child { border-bottom: none; } .sv { flex: 1; font-size: 0.85rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .sv:first-child { text-align: right; } .sv:last-child { text-align: left; } .sl { font-size: 0.68rem; color: var(--text-faint); text-align: center; flex: 0 0 auto; min-width: 78px; padding: 0 0.2rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .srow.yellow .sv { color: var(--yellow); } .srow.red .sv { color: var(--red); } .srow-sep { height: 1px; background: var(--border); margin: 0.4rem 0; } .events-list { max-height: 320px; overflow-y: auto; padding: 0.35rem 0; } .event-item { padding: 0.5rem 1rem; font-size: 0.83rem; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text); } .event-item:last-child { border-bottom: none; } .event-goal { color: var(--gold); font-weight: 800; background: rgba(251,191,36,0.08); border-left: 3px solid var(--gold); padding-left: calc(1rem - 3px); } .event-save { color: #67e8f9; font-weight: 700; } .event-shot { color: #fb923c; } .event-tackle { color: var(--green); } .event-pass { color: #93c5fd; } .event-dribble { color: #c4b5fd; } .event-corner { color: #5eead4; font-weight: 700; } .event-throwin { color: var(--text-faint); } .event-goalkick { color: var(--text-faint); } .event-offside { color: #fca5a5; font-weight: 700; } .event-card-yellow{ color: var(--yellow); font-weight: 700; background: rgba(250,204,21,0.08); border-left: 3px solid var(--yellow); padding-left: calc(1rem - 3px); } .event-card-red { color: var(--red); font-weight: 800; background: rgba(248,113,113,0.1); border-left: 3px solid var(--red); padding-left: calc(1rem - 3px); } .event-penalty { color: #fb923c; font-weight: 800; background: rgba(251,146,60,0.08); border-left: 3px solid #fb923c; padding-left: calc(1rem - 3px); } .speed-select { background: var(--surface-strong); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.85rem; font-family: inherit; cursor: pointer; } .speed-select option { background: var(--popover); } /* ====== Player Stats Tables ====== */ .player-stats-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } .player-stats-block { border-radius: var(--radius); overflow: hidden; } .player-stats-title { padding: 0.7rem 0.95rem; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid var(--border); background: var(--surface-strong); } .player-stats-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .player-stats-table th, .player-stats-table td { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.03); } .player-stats-table thead th { color: var(--text-faint); font-weight: 700; text-transform: uppercase; font-size: 0.62rem; letter-spacing: 1px; background: var(--surface); } .player-stats-table tbody tr:hover { background: var(--surface2); } .player-stats-table .ps-num { width: 28px; color: var(--text-faint); font-weight: 700; font-family: 'JetBrains Mono', monospace; } .player-stats-table .ps-name { text-align: left; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .no-teams { text-align: center; padding: 3rem; color: var(--text-dim); } /* ====== Match team picker ====== */ .match-picker { max-width: 640px; margin: 2rem auto; padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; } .match-picker-title { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text); padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .match-picker-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0.9rem; } .match-picker-side { min-width: 0; } .match-picker-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.4rem; } .match-picker-tactic-label { margin-top: 0.6rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.35rem; } .match-picker-vs { font-size: 1.1rem; font-weight: 900; letter-spacing: 0.08em; color: var(--text-faint); padding: 0 0.4rem 0.4rem; align-self: end; } .match-picker-actions { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .match-picker-error { padding: 0.5rem 0.75rem; border-radius: 7px; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.35); color: #fca5a5; font-size: 0.85rem; } .match-picker-hint { padding: 0.4rem 0.65rem; font-size: 0.82rem; color: var(--text-faint); text-align: center; } /* ====== Flag Icon ====== */ .flag-icon { display: inline-block; width: 22px; height: 16.5px; /* 4:3 aspect of the source SVG */ object-fit: cover; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); vertical-align: middle; flex-shrink: 0; } .flag-icon.lg { width: 32px; height: 24px; border-radius: 4px; } .flag-icon.xl { width: 48px; height: 36px; border-radius: 5px; } .nation-cell { display: inline-flex; align-items: center; gap: 0.5rem; } /* Ростер: фото → имя → флаг. На мобиле фото нет, флаг первым (см. @media 900px ниже). */ .roster-nation .roster-avatar { order: 0; position: relative; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: rgba(155,140,220,0.16); color: var(--text-faint); font-size: 0.62rem; font-weight: 700; } .roster-nation .roster-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Десктоп: национальность — отдельный столбец; флаг внутри имени нужен только мобильной карточке. */ .roster-nation .roster-flag { display: none; } .player-table .cell-nat { text-align: center; width: 3.5rem; } @media (max-width: 900px) { .roster-nation .roster-avatar { display: none; } .roster-nation .roster-flag { display: inline-flex; } .roster-mobile-cards tbody td.cell-nat { display: none; } } /* ====== Free Teams ====== */ .country-section { margin-bottom: 1.75rem; } /* Флаг страны в кнопке подвкладки. */ .tab-btn .flag-icon { margin-right: 0.4rem; margin-top: -2px; } .team-dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); vertical-align: middle; } .team-crest-sm { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); } /* Свободный агент в ростере сборной: держит колонку имён выровненной. */ .crest-none { display: inline-block; border-radius: 50%; filter: none; box-shadow: inset 0 0 0 1px var(--border); } .team-crest-img { position: relative; z-index: 1; width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); } /* ====== Responsive ====== */ @media (max-width: 1280px) { /* 1000 → 1280: после расширения pool до 600 layout не помещается на стандартных ноутбуках, стэкаем заранее. */ .squad-builder { grid-template-columns: 1fr; } .pitch-and-stats { grid-template-columns: 1fr; } .tactic-tabs.vertical { flex-direction: row; flex-wrap: wrap; width: auto; position: static; } } /* ====== Squad (Состав на матч) на мобиле ====== */ @media (max-width: 900px) { /* Панель тактик — все кнопки (Тактика 1/2/…, иконки, Сохранить, Сбросить) в одну линию с горизонтальным скроллом (свайп). Скролл — на внутреннем .tactic-tabs-row, чтобы overflow не обрезал абсолютные статус/алерт, висящие над панелью. */ .tactic-tabs-row { display: flex; align-items: center; gap: 0.3rem; flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .tactic-tabs-row::-webkit-scrollbar { display: none; } .tactic-tabs.horizontal .tactic-tabs-spacer { display: none; } .tactic-tab, .tactic-tab-icon, .tactic-tab-save-wrap, .tactic-tab-reset { flex: 0 0 auto; } .tactic-tab-save-wrap { margin-left: 0.4rem; } .tactic-tab-reset { margin-left: 0.4rem; } /* Статус «Сохранено» / алерт о недоступных. На десктопе они abs-позицией висят НАД панелью (bottom:100%), что на телефоне наезжает на заголовок «Состав на матч». На мобиле возвращаем их в поток — отдельной строкой под кнопками (flex-wrap), без наложения. */ .tactic-tabs.horizontal .sidebar-status, .tactic-tabs.horizontal .unavailable-alert { position: static; flex: 1 1 100%; max-width: none; margin-top: 0.6rem; } /* Настройки тактики — в одну колонку */ .settings-grid { grid-template-columns: 1fr; } /* Строки игроков: ужать метрики и зазор, чтобы имени осталось место */ .pool-item { grid-template-columns: 20px minmax(0, 1fr) auto auto 26px 26px 26px 20px; gap: 0.3rem; padding: 0.4rem 0.4rem; } } @media (max-width: 900px) { .player-stats-wrap { grid-template-columns: 1fr; } } @media (max-width: 900px) { /* Боковое меню → выезжающий драуэр: на узком экране не ест ширину. Сайдбар уходит из потока (position:fixed), main-content занимает всю ширину; открывается гамбургером в навбаре, закрывается тапом по ссылке или по затемнению (Влад). */ .sidebar { position: fixed; top: 0; left: 0; height: 100dvh; width: 272px; max-width: 82vw; padding: calc(1rem + var(--sat)) 0.85rem 2rem; border-right: 1px solid var(--border); border-bottom: none; z-index: 1300; transform: translateX(-100%); transition: transform .22s ease; max-height: none; } .sidebar.drawer-open { transform: translateX(0); box-shadow: 0 0 48px rgba(0,0,0,0.55); } .sidebar-links { flex-direction: column; } .drawer-quick { display: flex; flex-direction: column; gap: 0.2rem; } .drawer-toggle { display: inline-flex; } .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1290; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } .drawer-backdrop.open { opacity: 1; visibility: visible; } /* ── Чистка навбара на мобиле: убираем то, что переполняет строку ── */ .navbar { padding: var(--sat) 0.6rem 0; height: calc(60px + var(--sat)); gap: 0.4rem; } .navbar-links { display: none; } /* быстрые ссылки уехали в драуэр */ .brand-text { display: none; } /* оставляем только логотип */ .navbar-brand { margin-right: 0; } /* У админа иконок на одну больше, и с кнопкой музыки строка не сходится — режем корону ВИП: статус виден в профиле. Только на мобиле, на десктопе места хватает и корона остаётся. */ .navbar-right-group.has-admin .vip-badge { display: none; } /* ИД на мобиле — компактная плашка «N · dd.MM»: только номер игрового дня + короткая дата. Убираем часы ⏱, слово «ИД», S{N} и «/78» — иначе не влезает рядом с иконками (у админа их 5). Плашку (рамку/фон) оставляем — красивее. */ .season-badge-slot { flex: 0 0 auto; } .season-badge { gap: 0.28rem; padding: 0.26rem 0.5rem; border-radius: 10px; } .season-badge-icon { display: none; } /* часы ⏱ */ .season-badge-day-label { display: none; } /* слово «ИД» */ .season-badge-day { font-size: 0.8rem; } .season-badge-of { display: none; } /* «/78» */ .season-badge-date { display: none; } /* вербозную «ср 3 июн» */ /* Специфичность .season-badge .x выше базового .x — иначе базовое display:none (ниже в файле) перебивало бы и дата не показывалась. */ .season-badge .season-badge-date-short { display: inline; font-size: 0.76rem; } .navbar-user { gap: 0.4rem; min-width: 0; } .navbar-right-group { gap: 0.35rem; } .profile-btn, .drawer-toggle { width: 36px; height: 36px; font-size: 1rem; } } @media (max-width: 700px) { .navbar { padding: var(--sat) 1rem 0; height: calc(64px + var(--sat)); } .navbar-brand { margin-right: 1rem; gap: 0.5rem; } .brand-prefix { display: none; } .brand-main { font-size: 0.92rem; letter-spacing: 0.05em; } .brand-icon { font-size: 1.4rem; } .navbar-links { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .navbar-links::-webkit-scrollbar { display: none; } .teams-grid { grid-template-columns: 1fr; } .vs-badge { padding-top: 0; } .scoreboard { padding: 1rem; } .score-digits { font-size: 2rem; letter-spacing: 2px; } .page-header h1 { font-size: 1.5rem; } .main-content { padding: 1.25rem 1rem 2rem; } .fixture-row { grid-template-columns: 1fr; gap: 0.5rem; } } /* ====== Player Page ====== */ .player-page { display: flex; flex-direction: column; gap: 0.75rem; } .back-btn { align-self: flex-start; padding: 0.3rem 0.7rem; font-size: 0.85rem; } .player-hero { display: grid; grid-template-columns: 160px 1fr; gap: 1.1rem; background: rgba(var(--panel-rgb),0.72); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; } /* /team — две колонки: фото + bio. Правый блок KPI-плиток удалён 2026-05-28, статы Средний рейтинг / Сезонная задача переехали в bio-list как обычные строки. */ .player-hero.team-hero { grid-template-columns: 160px minmax(0, 1fr); } .team-hero-kpis { align-self: stretch; min-width: 0; display: flex; } .team-hero-kpis .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; align-content: stretch; } .player-photo-block { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 140px; /* фикс — фото игрока = размер эмблемы клуба, веб и мобилка */ } .player-photo { width: 140px; height: 175px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,0,0,0.45); position: relative; overflow: hidden; } .player-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.35)); } .photo-initials { font-size: 2.6rem; font-weight: 800; color: rgba(255,255,255,0.92); letter-spacing: -0.04em; position: relative; text-shadow: 0 4px 18px rgba(0,0,0,0.45); } /* Аватар менеджера на странице /manager/{id} — без team color, нейтральный фон. */ .player-photo.manager-photo { background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%); } .photo-caption { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint); } .player-bio { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .bio-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .bio-num { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-weight: 700; font-size: 0.95rem; } /* Stadium chip — sits on the right side of the bio-top row on the /team page (right of the team name, which is the "emblem" area for a club). Compact, pill-shaped. */ .team-stadium-chip { margin-left: auto; display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.35rem 0.75rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; } .team-stadium-chip-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .team-stadium-chip-name { font-weight: 700; color: var(--text); } .team-stadium-chip-cap { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-weight: 600; } /* ====== Stadium tab ====== */ .stadium-card { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem 1.3rem; background: rgba(var(--panel-rgb),0.5); border: 1px solid var(--border); border-radius: 12px; } .stadium-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); } .stadium-name { font-size: 1.25rem; font-weight: 800; color: var(--text); } .stadium-meta { font-size: 0.88rem; color: var(--text-dim); margin-top: 0.2rem; } .stadium-cash { text-align: right; } .stadium-cash-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } .stadium-cash-value { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.25rem; color: var(--text); margin-top: 0.15rem; } .stadium-section { display: flex; flex-direction: column; gap: 0.6rem; } .stadium-section-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .stadium-section-sub { font-size: 0.83rem; color: var(--text-faint); } /* ====== Training tab ====== */ .training-card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.2rem 1.2rem; background: rgba(var(--panel-rgb),0.5); border: 1px solid var(--border); border-radius: 12px; } .training-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .training-hint { font-size: 0.85rem; color: var(--text-dim); line-height: 1.45; max-width: 42rem; } .training-hint.bad { color: var(--red); } .training-hint b { color: var(--text); font-weight: 700; } .training-actions { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; margin-left: auto; } .training-footer { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; margin-top: 1rem; } .schedule-status { font-size: 0.85rem; color: var(--green); } .schedule-status.bad { color: var(--red); } .training-table-wrap { overflow-x: auto; } .training-table { width: 100%; border-collapse: collapse; } .training-table th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding: 0.5rem 0.5rem; text-align: left; font-weight: 800; border-bottom: 1px solid var(--border); } .training-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; } .training-table .col-num { width: 2.8rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; } .training-table .col-name { min-width: 9rem; max-width: 15rem; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .training-table .col-pos { width: 4.2rem; } .training-table .col-day { width: 10.5rem; min-width: 8.5rem; } .training-table .col-day .fd-wrap { width: 100%; } .training-table .col-day .fd-trigger { width: 100%; } .training-table tr:hover { background: rgba(255,255,255,0.03); } .training-table .col-risk { width: 4rem; text-align: center; } .training-table tr.training-risk-row:hover { background: transparent; } /* Раскрывающийся список скиллов игрока: уровень и давность тренировки. */ .skill-risk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem 0.6rem; padding: 0.4rem 0.2rem; } .skill-risk { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; grid-template-areas: "name lvl" "note note"; align-items: baseline; padding: 0.3rem 0.5rem; border-radius: 0.4rem; border: 1px solid var(--border); border-left-width: 3px; font-size: 0.82rem; } .skill-risk-name { grid-area: name; font-weight: 600; } .skill-risk-lvl { grid-area: lvl; text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; } .skill-risk-note { grid-area: note; font-size: 0.72rem; color: var(--text-dim); } .skill-risk-ok { border-left-color: var(--green); } .skill-risk-mid { border-left-color: #f59e0b; background: rgba(245,158,11,0.08); } .skill-risk-high { border-left-color: var(--red); background: rgba(239,68,68,0.10); } .skill-risk-high .skill-risk-note { color: var(--red); } .skill-risk-mid .skill-risk-note { color: #f59e0b; } .skill-risk-none { border-left-color: var(--border-strong); } .skill-risk-legend { font-size: 0.74rem; color: var(--text-faint); padding: 0 0.2rem 0.4rem; } /* Chips under each day's dropdown show which stats the chosen training touches. Kept tiny so 3–4 fit next to each other in the narrow column. */ .training-stats { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.3rem; min-height: 1.2rem; } .training-stat-chip { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.1rem 0.38rem; border-radius: 999px; background: var(--accent-soft); color: #93c5fd; border: 1px solid rgba(59,130,246,0.25); white-space: nowrap; } .training-stats-empty { font-size: 0.7rem; color: var(--text-faint); font-style: italic; } /* ---- Совмещения (combos) ---- */ .combos-table .col-age { width: 3.5rem; color: var(--text-faint); } .combos-table .col-combo-list { display: flex; gap: 0.3rem; flex-wrap: wrap; padding: 0.5rem; } .pos-list { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; } .combos-table .col-combo-progress { min-width: 12rem; } .combos-table .col-combo-actions { width: 9rem; text-align: right; } .combo-badge { background: rgba(139, 92, 246, 0.18); border: 1px solid rgba(139, 92, 246, 0.35); color: var(--accent-2); } .combo-badge.training { background: rgba(251, 191, 36, 0.18); border: 1px solid rgba(251, 191, 36, 0.35); color: #fbbf24; } /* ---- Динамика (изменения статов за сезон) ---- */ .dynamics-kpi-row { grid-template-columns: repeat(3, 1fr); margin-bottom: 0.75rem; } .dynamics-kpi-row .fin-kpi-value { font-size: 1.25rem; } .dynamics-kpi-row2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; } .dynamics-kpi-name .fin-kpi-value { font-size: 0.95rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dynamics-kpi-name.good .fin-kpi-value { color: var(--green); } .dynamics-kpi-name.bad .fin-kpi-value { color: var(--red); } .dynamics-kpi-name.clickable { cursor: pointer; } .dynamics-kpi-name.clickable:hover { border-color: var(--border-strong); } @media (max-width: 720px) { .dynamics-kpi-row, .dynamics-kpi-row2 { grid-template-columns: 1fr; } } .dynamics-wrap { display: flex; gap: 1rem; align-items: flex-start; } .dynamics-list-wrap { flex: 0 0 21rem; min-width: 0; max-height: 34rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; } .dynamics-list { display: flex; flex-direction: column; } .dyn-row { display: grid; grid-template-columns: 1.6rem 1.4rem minmax(0, 1fr) auto 0.9rem; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem; font-size: 0.82rem; color: var(--text-dim); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); } .dyn-row.dyn-head { position: sticky; top: 0; z-index: 1; background: rgb(var(--panel-rgb)); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--text-faint); cursor: default; } .dyn-row:not(.dyn-head):hover { background: rgba(255,255,255,0.04); } .dyn-row.active { background: var(--accent-soft); color: var(--text); } .dyn-num { font-family: 'JetBrains Mono', monospace; color: var(--text-faint); text-align: right; } .dyn-flag { display: flex; } .dyn-flag .flag-icon { display: block; } .dyn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .dyn-dot { display: flex; justify-content: center; } .dp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); } .dp-dot.up { background: var(--green); } .dp-dot.down { background: var(--red); } .dp-dot.flat { background: var(--text-faint); } .dynamics-detail { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem 1rem; } .dynamics-empty { color: var(--text-faint); font-style: italic; padding: 1rem 0; } .dynamics-detail-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .dynamics-detail-head .dyn-detail-name { font-size: 1rem; font-weight: 700; color: var(--text); } .dynamics-detail-head .muted { font-size: 0.78rem; color: var(--text-faint); } .dynamics-stats { width: 100%; border-collapse: collapse; } .dynamics-stats td { padding: 0.32rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; font-size: 0.85rem; } .dynamics-stats .ds-label { color: var(--text-dim); } .dynamics-stats .ds-cur { width: 2.8rem; text-align: center; } .dynamics-stats .ds-delta { width: 3rem; text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; } .dynamics-stats .ds-delta .up { color: var(--green); } .dynamics-stats .ds-delta .down { color: var(--red); } .dynamics-stats .ds-causes { padding-left: 0.8rem; } .ds-causes-row { display: flex; flex-wrap: wrap; gap: 0.3rem; } .ds-cause { font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--text-faint); white-space: nowrap; } .ds-cause.up { color: var(--green); } .ds-cause.down { color: var(--red); } @media (max-width: 720px) { .dynamics-wrap { flex-direction: column; } .dynamics-list-wrap { flex: 0 0 auto; width: 100%; max-height: 20rem; } .dynamics-detail { width: 100%; } .dynamics-stats .ds-causes { padding-left: 0.3rem; } } .combo-progress { display: flex; flex-direction: column; gap: 0.25rem; } .combo-progress-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-dim); } .combo-progress-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; } .combo-progress-fill { height: 100%; background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); transition: width 0.3s; } /* Modal — пяти-рядная сетка позиций, визуально имитирующая поле. */ .combo-grid { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 0.4rem; margin-top: 0.6rem; background: linear-gradient(rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02)), repeating-linear-gradient( to bottom, transparent 0 40px, rgba(255,255,255,0.02) 40px 80px ); border: 1px solid var(--border); border-radius: 10px; } .combo-grid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; } .combo-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; min-height: 3.2rem; padding: 0.35rem 0.2rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.03); color: var(--text); cursor: pointer; transition: background .12s, border-color .12s, transform .08s; } .combo-cell:hover:not(:disabled) { background: rgba(59,130,246,0.12); border-color: var(--accent); } .combo-cell:disabled { cursor: not-allowed; opacity: 0.55; } .combo-cell.empty { background: transparent; border: 1px dashed rgba(255,255,255,0.06); cursor: default; pointer-events: none; } .combo-cell.main { background: rgba(59,130,246,0.22); border-color: var(--accent); color: #93c5fd; cursor: not-allowed; } .combo-cell.sec { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); color: var(--accent-2); cursor: not-allowed; } .combo-cell.picked { background: rgba(251, 191, 36, 0.22); border-color: #f59e0b; color: #fbbf24; transform: scale(1.02); } .combo-cell-pos { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.03em; } .combo-cell-days { font-size: 0.65rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; } .combo-cell.picked .combo-cell-days { color: #fbbf24; } /* Слот, выбранный под замену в модалке совмещений — подсветка «будет перезаписан» (красноватая, в отличие от янтарного picked = новая позиция). */ .combo-replace-btn.active { background: rgba(248, 113, 113, 0.18); border-color: var(--red); color: #fca5a5; box-shadow: inset 0 0 0 1px var(--red); } /* Ticket price row — uses the shared .stepper pattern from Profile/Squad. */ .ticket-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* 3-digit prices (up to 200) need more room than the default 3ch. */ .ticket-row .stepper-input { width: 5ch; padding: 0.3rem 0.5rem; } .ticket-currency { color: var(--text-dim); font-weight: 700; } .ticket-status { font-size: 0.83rem; color: var(--green); } .ticket-status.bad { color: var(--red); } /* Upgrade offer / in-progress */ .upgrade-offer { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.85rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; } .upgrade-offer-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; } .upgrade-label { font-size: 0.75rem; font-weight: 700; color: var(--text-dim); letter-spacing: 0.03em; } .upgrade-value { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--text); } .upgrade-value.bad { color: var(--red); } .upgrade-delta { font-size: 0.8rem; color: var(--green); margin-left: 0.3rem; font-weight: 600; } .upgrade-warn { margin-top: 0.3rem; padding: 0.45rem 0.6rem; font-size: 0.82rem; color: #fcd34d; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); border-radius: 8px; } .upgrade-actions { display: flex; align-items: center; gap: 0.7rem; padding-top: 0.5rem; border-top: 1px solid var(--border); margin-top: 0.25rem; flex-wrap: wrap; } .upgrade-status { font-size: 0.85rem; color: var(--green); } .upgrade-status.bad { color: var(--red); } .upgrade-progress { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; } .upgrade-progress-head { font-size: 0.95rem; color: var(--text); } .upgrade-progress-bar { height: 10px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; } .upgrade-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%); transition: width .25s; } .upgrade-progress-stats { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-dim); } /* Variants used by the new Staff upgrade flow */ .upgrade-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .upgrade-progress-remaining { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; } .upgrade-progress-hint { font-size: 0.75rem; color: var(--text-faint); } .upgrade-proposal { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; } .upgrade-proposal-body { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.88rem; color: var(--text); } .upgrade-proposal-line.bad { color: var(--red); } /* Compact stat chip stack shown on the Staff tab header */ .stadium-stats { display: flex; gap: 0.75rem; } .stat-chip-stack { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-end; } .stat-chip-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .stat-chip-value { font-size: 0.95rem; font-weight: 800; color: var(--text); } .bio-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; margin: 0; } .bio-name-edit { background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: 0.9rem; line-height: 1; opacity: 0.55; transition: opacity .15s, background .15s; margin-left: auto; display: inline-block; transform: rotate(90deg); transform-origin: center; } .bio-name-edit:hover { opacity: 1; background: rgba(255,255,255,0.08); } .bio-list { display: flex; flex-direction: column; } .bio-line { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.82rem; } .bio-line:last-child { border-bottom: none; } .bio-line span { color: var(--text-dim); } .bio-line b { color: var(--text); font-weight: 700; } .bio-line b.bad { color: var(--red); } .bio-line.ovr b { color: var(--gold); font-size: 1.05rem; font-family: 'JetBrains Mono', monospace; } /* Ссылка на турнир в шапке команды. Выглядит ровно как обычное значение строки (та же типографика, что у .bio-line b) — меняется только цвет на наведении, подчёркивания нет ни в одном состоянии. */ .bio-link { color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; transition: color .15s ease; } .bio-link:hover, .bio-link:focus-visible { color: var(--accent); text-decoration: none; } .tabs { display: flex; gap: 0.25rem; padding: 0 0.25rem; /* Единый отступ до контента/панели под вкладками — раньше половина страниц лепила таб-панель вплотную (см. фидбек). Инлайновые margin-bottom на конкретных nav'ах перебивают это значение. */ margin-bottom: 0.6rem; flex-wrap: wrap; } .tab-btn { background: transparent; border: none; border-radius: 8px; color: var(--text-dim); font-size: 0.82rem; font-weight: 600; padding: 0.5rem 0.9rem; cursor: pointer; transition: color .15s, background .15s; } .tab-btn:hover { color: var(--text); } /* Было: 2px нижняя линия под активной вкладкой — лишний ряд по высоте и местами "прилипала" (см. фидбек). Теперь только цвет + мягкая заливка таблеткой, без своей полосы. */ .tab-btn.active { color: var(--accent-3); background: var(--accent-soft); } .tab-panel { background: rgba(var(--panel-rgb),0.72); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1.1rem; min-height: 120px; } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2em; height: 1.2em; padding: 0 0.3em; margin-left: 0.35rem; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 0.7rem; font-weight: 700; line-height: 1; vertical-align: middle; } .stat-list { display: flex; flex-direction: column; padding: 0 0.25rem; } .stat-line { display: grid; /* [название] [чип 28px] [слот стрелки 1.5rem]. Слот стрелки фиксирован — чипы выровнены даже у строк без стрелки. */ grid-template-columns: 1fr 28px 1.5rem; align-items: center; gap: 0.6rem; padding: 0.3rem 0.25rem; border-bottom: 1px solid var(--border); } .stat-line:last-child { border-bottom: none; } .stat-trend-slot { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; } .stat-line-label { font-size: 0.82rem; color: var(--text-dim); font-weight: 500; } .stat-chip { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 0.82rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); line-height: 1; color: var(--text); flex-shrink: 0; } /* 5-tier stat-chip градация (шкала 1-20). Пороги и классы синхронизированы с StatTier.ClassFor в Services/. См. UI_GUIDELINES §3.10 и PLAYER_IMPORT_DESIGN §3. Градиент: grey → light-yellow → amber → light-green → emerald (по саnасыщению и тону). */ .stat-chip.tile-high { /* 16-20: bright emerald — элита */ background: linear-gradient(160deg, rgba(16,185,129,0.22), rgba(5,150,105,0.1)); border-color: rgba(16,185,129,0.45); color: #34d399; } .stat-chip.tile-above { /* 14-15: light emerald — выше среднего */ background: linear-gradient(160deg, rgba(110,231,183,0.2), rgba(52,211,153,0.08)); border-color: rgba(110,231,183,0.4); color: #6ee7b7; } .stat-chip.tile-mid { /* 11-13: bright amber — средняя зона (мода распределения) */ background: linear-gradient(160deg, rgba(245,158,11,0.22), rgba(217,119,6,0.1)); border-color: rgba(245,158,11,0.5); color: #f59e0b; } .stat-chip.tile-below { /* 8-10: light amber — ниже среднего */ background: linear-gradient(160deg, rgba(252,211,77,0.2), rgba(234,179,8,0.08)); border-color: rgba(252,211,77,0.4); color: #fcd34d; } .stat-chip.tile-low { /* 1-7: slate — провальный стат (редко; обычно <8 не встречается) */ background: linear-gradient(160deg, rgba(148,163,184,0.22), rgba(100,116,139,0.1)); border-color: rgba(148,163,184,0.4); color: #94a3b8; } /* Чип в ячейке таблицы (показатели в «Общей информации», оценка в «Статистике»). Для дробной оценки — авто-ширина, для целых статов — квадрат из .stat-chip. */ .stat-chip-wide { width: auto; min-width: 28px; padding: 0 0.4rem; font-size: 0.78rem; } .stat-cell { text-align: center; padding-left: 0.3rem; padding-right: 0.3rem; } .stat-cell .stat-chip { display: inline-flex; } /* «Статистика» турнира: чип оценки не выше эмблемы клуба (22px) — иначе строка «Ср. оценка» выше, чем на остальных вкладках, где её задаёт эмблема. */ .tournament-stats-table .stat-chip { height: 22px; min-width: 40px; border-radius: 6px; } .tstats-player { display: inline-flex; align-items: center; gap: 0.45rem; } .stat-dash { color: var(--text-faint); } /* Широкая таблица показателей (17-20 колонок) — чипы поменьше, чтобы влезало. */ .roster-full-table .stat-cell { padding: 0.3rem 0.2rem; } .roster-full-table .stat-chip { width: 25px; height: 25px; font-size: 0.74rem; border-radius: 7px; } .roster-full-table th { text-align: center; } .roster-full-table th:nth-child(-n+2) { text-align: left; } @media (max-width: 900px) { .player-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .bio-top { justify-content: center; } /* bio тянем на всю ширину независимо от длины контента. Иначе из-за justify-items:center grid-item ужимается до ширины своего контента: на клубах с длинным текстом (Founder Pack, длинное имя менеджера) карточка раздувается, а на обычных остаётся узкой. */ .player-bio { justify-self: stretch; } /* /team — та же вертикальная шапка, что и на странице чужого клуба (эмблема сверху, инфо во всю ширину снизу). Перебиваем десктопную фиксированную 140px-колонку .player-hero.team-hero (её специфичность 0,2,0 иначе бьёт мобильный override). */ .player-hero.team-hero { grid-template-columns: 1fr; } /* Табы (10 штук на /team) ломались в 4 ряда. На мобиле — один ряд с горизонтальным скроллом (свайп), как навбар. Скроллбар скрыт. */ .tabs { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { flex: 0 0 auto; white-space: nowrap; } } /* ====== Profile page ====== */ .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .profile-col { display: flex; flex-direction: column; gap: 1rem; } .profile-card { padding: 1rem 1.1rem; } /* Настройки: воздух внутри карточек. */ .profile-card .checkbox { display: flex; margin: 0.6rem 0; } .profile-card .theme-row-label { margin-top: 1.1rem; } .profile-card > summary + .theme-row-label { margin-top: 0.4rem; } .profile-card-hint { margin: 0 0 0.6rem; color: var(--text-dim); font-size: 0.85em; } /* Карточки профиля — сворачиваемые через нативный
/ (без своего JS/состояния на каждую из 7 штук). Настройки закрыты по умолчанию (нет open в разметке), остальные открыты. */ .profile-card > summary { cursor: pointer; user-select: none; list-style: none; } .profile-card > summary::-webkit-details-marker { display: none; } .profile-card-chevron { display: inline-block; margin-left: 0.35rem; font-size: 0.65rem; color: var(--text-faint); transition: transform .15s; } .profile-card:not([open]) .profile-card-chevron { transform: rotate(-90deg); } .coach-stats-edit { display: flex; flex-direction: column; gap: 0.55rem; } .coach-stat-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem; } .coach-stat-label { font-size: 0.92rem; color: var(--text); font-weight: 600; } /* ====== Форма rename школьника (миграция 0166) ====== */ .rename-form { display: grid; gap: 0.75rem; } .rename-field { display: flex; flex-direction: column; gap: 0.25rem; } .rename-label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; } .rename-input { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.92rem; padding: 0.55rem 0.75rem; font-family: inherit; outline: none; transition: border-color .12s, box-shadow .12s; } .rename-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } /* ====== Stepper (custom number input) ====== */ .stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); user-select: none; } .stepper:hover { border-color: var(--border-strong); } .stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .stepper-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 0 0.75rem; font-size: 1.05rem; font-weight: 700; line-height: 1; transition: background .12s, color .12s; } .stepper-btn:hover:not(:disabled) { background: var(--surface2); color: var(--text); } .stepper-btn:active:not(:disabled) { background: var(--gradient-soft); color: #fff; } .stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; } .stepper-input { width: 3ch; text-align: center; background: transparent; border: none; color: var(--text); font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; padding: 0.3rem 0.25rem; appearance: textfield; -moz-appearance: textfield; outline: none; } .stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .coach-stats-total { margin-top: 0.85rem; padding-top: 0.6rem; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-dim); } .coach-stats-total b.ok { color: var(--green); } .coach-stats-total b.bad { color: var(--red); } .coach-stats-view { display: flex; flex-direction: column; gap: 0.4rem; } /* ====== Register two-column helper ====== */ .auth-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .auth-two-col .field { margin-bottom: 0.75rem; } .required { color: var(--red); font-weight: 700; } @media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } .auth-two-col { grid-template-columns: 1fr; } } /* ====== Admin hub ====== */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } /* ====== Admin: ticks page ====== */ .tick-card { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; } .tick-card-primary { border: 2px solid var(--accent, #3b82f6); background: linear-gradient(180deg, rgba(59,130,246,0.08) 0%, transparent 100%); box-shadow: 0 0 0 1px rgba(59,130,246,0.25), 0 4px 16px rgba(59,130,246,0.12); margin-bottom: 1.5rem; } .tick-card-primary .tick-title { font-size: 1.25rem; font-weight: 700; } .btn-tick-primary { min-width: 180px; font-size: 1.05rem; font-weight: 600; padding: 0.7rem 1.2rem; } .tick-section-divider { margin: 2rem 0 0.5rem; border: 0; border-top: 1px solid var(--border, #2a2f3a); } .tick-section-label { color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .tick-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; } .tick-title { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; color: var(--text); } .tick-sub { font-size: 0.86rem; color: var(--text-dim); line-height: 1.45; margin-top: 0.25rem; max-width: 40rem; } .tick-report { padding: 0.9rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 0.6rem; } .tick-report-empty { padding: 0.9rem 1rem; font-size: 0.85rem; color: var(--text-faint); font-style: italic; background: rgba(255,255,255,0.02); border: 1px dashed var(--border); border-radius: 10px; text-align: center; } .tick-report-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .tick-report-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .tick-report-time { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-faint); } .tick-report-summary { font-size: 0.9rem; color: var(--text); } .tick-report-errors { color: var(--red); margin-left: 0.25rem; } .tick-report-log { display: flex; flex-direction: column; gap: 0.2rem; max-height: 320px; overflow-y: auto; padding-top: 0.2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; } .tick-report-line { padding: 0.2rem 0.35rem; color: var(--text-dim); border-radius: 4px; } .tick-report-line:hover { background: rgba(255,255,255,0.04); color: var(--text); } .admin-tile { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem; color: var(--text); text-decoration: none; transition: transform .12s, border-color .12s; border: 1px solid var(--border); } .admin-tile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--border-strong); } .admin-tile-icon { font-size: 1.8rem; } .admin-tile-title { font-weight: 800; font-size: 1.05rem; color: var(--text); } .admin-tile-sub { color: var(--text-dim); font-size: 0.85rem; } /* ====== Личные сообщения ====== */ .pm-inbox { padding: 0; overflow: hidden; } .pm-inbox-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name time" "preview preview"; column-gap: 0.75rem; row-gap: 0.2rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: background .12s; } .pm-inbox-row:last-child { border-bottom: none; } .pm-inbox-row:hover { background: var(--surface); } .pm-inbox-row.has-unread { background: var(--surface-strong); } .pm-inbox-name { grid-area: name; display: flex; align-items: center; gap: 0.5rem; } .pm-inbox-time { grid-area: time; color: var(--text-faint); font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; } .pm-inbox-preview { grid-area: preview; color: var(--text-dim); font-size: 0.86rem; } .pm-inbox-preview .pm-prefix { color: var(--text-faint); margin-right: 0.3rem; } .pm-unread-pill { display: inline-block; background: var(--accent-2); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .pm-thread { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; } .pm-bubble { max-width: 70%; padding: 0.5rem 0.8rem; border-radius: 12px; font-size: 0.9rem; word-wrap: break-word; white-space: pre-wrap; } .pm-bubble.mine { align-self: flex-end; background: var(--accent-soft); color: var(--text); border: 1px solid rgba(59,130,246,0.3); } .pm-bubble.their { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--border); } .pm-bubble-body { line-height: 1.4; } .pm-bubble-time { color: var(--text-faint); font-size: 0.7rem; margin-top: 0.25rem; font-family: 'JetBrains Mono', monospace; text-align: right; } .pm-danger-zone { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; } .pm-ticks { margin-left: 0.6rem; letter-spacing: -0.1em; } .pm-inbox-time .pm-ticks { margin-left: 0; margin-right: 0.6rem; } .pm-ticks.read { color: var(--accent-3); } .pm-compose { margin-top: 0.75rem; padding: 0.75rem 1rem; } .pm-compose-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font: inherit; font-size: 0.9rem; padding: 0.6rem 0.75rem; resize: vertical; } .pm-compose-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .pm-compose-bar { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } .pm-compose-count { color: var(--text-faint); font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; } .pm-compose-error { color: var(--red); font-size: 0.82rem; flex: 1; } .pm-compose-bar .btn { margin-left: auto; } /* Mobile: thread сжимается, compose липнет к низу — поле ввода всегда видно без скролла. Минимальная высота треда — две-три «пузырьки». */ @media (max-width: 900px) { .pm-thread { max-height: calc(100vh - 320px); min-height: 160px; } .pm-compose { position: sticky; bottom: 0; z-index: 5; background: var(--surface); box-shadow: 0 -6px 14px rgba(0,0,0,0.35); } } /* ====== Сезонная задача — обычный текст в bio-list, чуть приглушённый ====== */ .season-task { color: var(--text-dim); font-weight: 500; } /* ====== Тосты (ToastService/ToastHost) ====== Взамен инлайн-сообщений в формах (цветной текст под кнопкой, вёрстка "прыгала" при появлении/исчезновении) — плавающее уведомление снизу-справа, само пропадает через 4с (ToastService.AutoRemoveAsync). */ .toast-host { position: fixed; right: 1.25rem; bottom: 1.25rem; display: flex; flex-direction: column-reverse; gap: 0.5rem; z-index: 2000; pointer-events: none; max-width: min(340px, calc(100vw - 2rem)); } .toast { background: var(--popover); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 10px; padding: 0.7rem 1rem; box-shadow: var(--shadow); font-size: 0.85rem; font-weight: 600; color: var(--text); pointer-events: auto; animation: toast-in 0.2s ease-out; } .toast-success { border-left-color: var(--green); } .toast-error { border-left-color: var(--red); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } @media (max-width: 600px) { .toast-host { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; max-width: none; } } /* ====== Skeleton (Shared/Skeleton.razor) ====== Единый паттерн загрузки по всему сайту — мерцающие полосы вместо "Загрузка..."-текста. */ .skeleton-block { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.2rem 0; } .skeleton-line { height: 0.9rem; border-radius: 6px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-strong) 50%, var(--surface) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } } /* Owner-only online-users bar (видна над legal-footer) */ .online-users-bar { background: var(--surface); border-top: 1px solid var(--border); padding: 0.4rem 1.2rem; font-size: 0.82rem; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } .online-users-bar .online-dot { color: #2ea043; font-size: 0.7rem; line-height: 1; } .online-users-bar .online-label { font-weight: 600; color: var(--text); } .online-users-bar .online-user { color: var(--text); } .online-users-bar .online-sep { color: var(--text-faint); } .online-users-bar.birthday-bar { border-top: none; padding-top: 0; } .online-users-bar.birthday-bar .online-dot { color: inherit; font-size: 0.85rem; } .season-task.achieved { color: rgba(52,211,153,0.75); } .season-task.failed { color: rgba(248,113,113,0.75); } .season-task .season-task-status { margin-left: 0.25rem; color: var(--text-faint); font-size: 0.78rem; } /* ====== Admin Transfers (модерация ставок) ====== */ .admin-transfer-card { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.75rem; } .admin-transfer-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .admin-transfer-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .admin-transfer-name .player-name { font-weight: 700; color: var(--text); font-size: 1rem; } .admin-transfer-meta { display: flex; gap: 1.25rem; color: var(--text-dim); font-size: 0.88rem; } .admin-forecast { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; padding: 0.35rem 0.55rem; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); color: var(--text-dim); } .admin-forecast b { color: var(--accent); } .admin-bids-table { width: 100%; font-size: 0.85rem; } .admin-bids-table th { color: var(--text-faint); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; } .bid-status-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; border: 1px solid var(--border); background: var(--surface); } .bid-status-good { color: var(--green); border-color: rgba(52,211,153,0.3); } .bid-status-bad { color: var(--red); border-color: rgba(248,113,113,0.3); } .bid-status-neutral { color: var(--accent); border-color: rgba(59,130,246,0.3); } .bid-status-muted { color: var(--text-faint); } /* ====== Applications list (admin review) ====== */ .applications-list { display: flex; flex-direction: column; gap: 0.75rem; } .application-card { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .application-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .application-team { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; flex: 1; min-width: 0; } .application-team .team-name { color: var(--text); } .application-team .team-meta { color: var(--text-dim); font-weight: 500; font-size: 0.9rem; } .application-date { color: var(--text-faint); font-size: 0.82rem; white-space: nowrap; } .application-applicant { font-size: 0.9rem; color: var(--text-dim); } .application-applicant b { color: var(--text); } .application-applicant .muted { color: var(--text-faint); } .coach-inline { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-faint); } .application-reason .reason-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-dim); } .application-reason blockquote { margin: 0.35rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; color: var(--text); font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; } .application-actions { display: flex; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .btn.danger { color: var(--red); } .btn.danger:hover { background: rgba(248,113,113,0.12); color: var(--red); } /* Right-aligned wrapper around the "apply for team" CTA. */ .apply-cta { margin-top: 1rem; display: flex; justify-content: flex-end; } /* Кнопки действий на странице чужого ростера: тов.матч слева, заявка справа. Если показывается только одна — она занимает свою сторону. */ .team-roster-actions { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .team-roster-actions .action-slot-left { margin-right: auto; } .team-roster-actions .action-slot-right { margin-left: auto; } /* ====== Manager card modal ====== */ .manager-link { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 3px; transition: color 0.12s; } .manager-link:hover { color: var(--accent); text-decoration-color: var(--accent); } .modal-sub { color: var(--text-dim); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .manager-modal-body { padding: 1rem 1.25rem 1.25rem; } .manager-coach-title { margin-top: 1rem; margin-bottom: 0.5rem; font-weight: 700; color: var(--text); } /* ====== Apply modal ====== */ .apply-modal-body { padding: 1rem 1.25rem 1.25rem; } .apply-reason { width: 100%; padding: 0.65rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 0.95rem; resize: vertical; min-height: 110px; outline: none; } .apply-reason:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .apply-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; flex-wrap: nowrap; } /* Split variant: leftmost button (e.g. "Reset") pushed to the left edge via margin-right: auto, the remaining buttons stay grouped on the right. All three buttons are direct children of a single flex row — no wrapper div, so nothing can wrap independently. */ .apply-modal-actions.split > .btn:first-child { margin-right: auto; } /* ====== Копирование тактики (Squad) ====== */ .copy-tactic-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .copy-tactic-row > label { flex: 0 0 5rem; color: var(--text-dim); font-size: 0.9rem; } /* Ширину даёт flex, вид — общий .fancy-select. */ .copy-tactic-row > select { flex: 1 1 auto; min-width: 0; } /* ====== Finance tab (MyTeam) ====== */ .finance-layout { display: flex; flex-direction: column; gap: 1.25rem; } .finance-layout .mono { font-family: 'JetBrains Mono', monospace; } /* ---- KPI strip (4 tiles) ---- */ .fin-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } .fin-kpi { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.1rem; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 55%), rgba(8, 12, 30, 0.55); border: 1px solid var(--border); border-radius: 14px; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; } .fin-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: 0.75; } .fin-kpi.good::before { background: var(--green); } .fin-kpi.bad::before { background: var(--red); } .fin-kpi.warn::before { background: var(--yellow); } .fin-kpi:hover { border-color: var(--border-strong); } .fin-kpi-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; } .fin-kpi-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; } .fin-kpi-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .fin-kpi-value { font-size: 1.45rem; font-weight: 800; color: var(--text); line-height: 1.1; } .fin-kpi.bad .fin-kpi-value { color: var(--red); } .fin-kpi.good .fin-kpi-value { color: var(--green); } .fin-kpi.warn .fin-kpi-value { color: var(--yellow); } .fin-kpi-sub { font-size: 0.72rem; color: var(--text-faint); } .fin-kpi-bar { margin-top: 0.3rem; height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; } .fin-kpi-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-3)); transition: width .25s; } /* ---- Section titles ---- */ .fin-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-weight: 800; margin-top: 0.25rem; } /* ---- Sponsor deal cards ---- */ .fin-deals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .fin-deal { --deal-accent: var(--accent); background: linear-gradient(145deg, color-mix(in srgb, var(--deal-accent) 18%, transparent) 0%, rgba(8,12,30,0.6) 70%), rgba(8, 12, 30, 0.6); border: 1px solid color-mix(in srgb, var(--deal-accent) 35%, var(--border)); border-radius: 14px; padding: 1rem 1.1rem; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "icon title" "icon sub" "value weekly"; column-gap: 0.75rem; row-gap: 0.15rem; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; } .fin-deal::after { content: ""; position: absolute; top: -30%; right: -30%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--deal-accent) 30%, transparent), transparent 70%); pointer-events: none; } .fin-deal:hover { transform: translateY(-1px); border-color: var(--deal-accent); } .fin-deal-icon { grid-area: icon; font-size: 1.8rem; align-self: start; } .fin-deal-title { grid-area: title; font-size: 0.78rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; } .fin-deal-sub { grid-area: sub; font-size: 0.75rem; color: var(--text-faint); } .fin-deal-value { grid-area: value; font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 800; color: var(--text); margin-top: 0.5rem; } .fin-deal-per { grid-area: value; align-self: end; justify-self: start; font-size: 0.7rem; color: var(--text-faint); margin-left: 0.1rem; margin-bottom: 0.1rem; display: none; /* weekly line is enough — keep the card compact */ } .fin-deal-weekly { grid-area: weekly; align-self: end; justify-self: end; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-dim); } /* ---- Compact inline hint in finance ---- */ .fin-hint { font-size: 0.82rem; color: var(--text-dim); padding: 0.6rem 0.85rem; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 10px; } /* ---- Staff tab: slot cards ---- */ .staff-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; } .staff-slot { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; background: rgba(8, 12, 30, 0.45); border: 1px solid var(--border); border-radius: 12px; } .staff-slot-icon { font-size: 1.6rem; } .staff-slot-body { display: flex; flex-direction: column; gap: 0.2rem; } .staff-slot-title { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .staff-slot-count { font-size: 1.3rem; font-weight: 800; color: var(--text); } @media (max-width: 600px) { .staff-slots { grid-template-columns: 1fr; } } /* ---- Income / Expenses split panels ---- */ .fin-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .fin-panel { background: rgba(8, 12, 30, 0.45); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; } .fin-panel.income { border-top: 3px solid color-mix(in srgb, var(--green) 70%, transparent); } .fin-panel.expense { border-top: 3px solid color-mix(in srgb, var(--red) 70%, transparent); } .fin-panel-head { display: flex; justify-content: space-between; align-items: baseline; } .fin-panel-title { font-size: 0.85rem; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; } .fin-panel-sum { font-size: 0.95rem; font-weight: 800; color: var(--text); } .fin-panel.income .fin-panel-sum { color: var(--green); } .fin-panel.expense .fin-panel-sum { color: var(--red); } .fin-line { display: flex; flex-direction: column; gap: 0.35rem; } .fin-line-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; } .fin-line-icon { font-size: 1.05rem; } .fin-line-label { font-size: 0.88rem; color: var(--text); font-weight: 600; } .fin-line-pct { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-dim); font-weight: 700; } .fin-line-bar { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; } .fin-line-bar-fill { height: 100%; border-radius: 3px; transition: width .25s; box-shadow: 0 0 10px color-mix(in srgb, currentColor 30%, transparent); } .fin-line-foot { display: flex; justify-content: space-between; font-size: 0.75rem; } .fin-line-weekly { color: var(--text); } .fin-line-annual { color: var(--text-dim); } /* ---- Net result summary ---- */ .fin-net { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: 14px; position: relative; overflow: hidden; } .fin-net.good { background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(8, 12, 30, 0.6)); border: 1px solid rgba(52, 211, 153, 0.4); } .fin-net.bad { background: linear-gradient(135deg, rgba(248, 113, 113, 0.14), rgba(8, 12, 30, 0.6)); border: 1px solid rgba(248, 113, 113, 0.4); } .fin-net-icon { font-size: 2rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .fin-net.good .fin-net-icon { background: rgba(52, 211, 153, 0.2); color: var(--green); border: 1.5px solid rgba(52, 211, 153, 0.5); } .fin-net.bad .fin-net-icon { background: rgba(248, 113, 113, 0.2); color: var(--red); border: 1.5px solid rgba(248, 113, 113, 0.5); } .fin-net-body { display: flex; flex-direction: column; gap: 0.3rem; } .fin-net-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .fin-net-row { display: flex; align-items: baseline; gap: 0.6rem; } .fin-net-sub { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; min-width: 5ch; } .fin-net-row b { font-size: 1.05rem; } .fin-net-row b.big { font-size: 1.4rem; } .fin-net.good .fin-net-row b { color: var(--green); } .fin-net.bad .fin-net-row b { color: var(--red); } /* ── Финансовый журнал: аккордеон по ИД (по умолчанию всё свёрнуто) ── */ .fin-journal { display: flex; flex-direction: column; } .fin-journal .mono { font-family: 'JetBrains Mono', monospace; } .fin-journal-head, .fin-day-head { display: flex; align-items: center; gap: 0.5rem; } .fin-journal-head { padding: 0 0.9rem 0.5rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 700; border-bottom: 1px solid var(--border); } .fin-jh-day { flex: 1; } .fin-jh-delta, .fin-day-delta { width: 8.5rem; text-align: right; flex: 0 0 auto; } .fin-jh-balance,.fin-day-balance { width: 11rem; text-align: right; flex: 0 0 auto; } .fin-jh-delta { margin-left: auto; } .fin-day { border-top: 1px solid var(--border); } .fin-day:first-child { border-top: none; } .fin-day:last-child { border-bottom: 1px solid var(--border); } .fin-day-head { width: 100%; background: none; border: none; color: var(--text); padding: 0.7rem 0.9rem; cursor: pointer; font: inherit; text-align: left; transition: background .14s; } .fin-day-head:hover, .fin-day.open .fin-day-head { background: var(--accent-soft); } .fin-day-chevron { color: var(--accent-3); transition: transform .15s; flex: 0 0 auto; } .fin-day.open .fin-day-chevron { transform: rotate(90deg); } .fin-day-id { font-weight: 700; flex: 0 0 auto; } .fin-day-count { margin-right: auto; min-width: 1.4rem; padding: 0.02rem 0.4rem; border-radius: 999px; background: var(--surface2); color: var(--text-faint); font-size: 0.72rem; font-weight: 700; text-align: center; flex: 0 0 auto; } .fin-day-delta.pos, .fin-entry-amount.pos { color: var(--green); } .fin-day-delta.neg, .fin-entry-amount.neg { color: var(--red); } .fin-day-balance { color: var(--text-dim); } .fin-day-body { padding: 0.1rem 0.9rem 0.6rem 2.1rem; } .fin-entry { display: grid; grid-template-columns: 8.5rem 1fr 8rem; gap: 0.75rem; align-items: baseline; padding: 0.28rem 0; font-size: 0.85rem; border-top: 1px solid var(--border); } .fin-entry:first-child { border-top: none; } .fin-entry-amount { text-align: right; } .fin-entry-label { color: var(--text); min-width: 0; overflow-wrap: anywhere; } .fin-entry-balance { text-align: right; color: var(--text-faint); } @media (max-width: 700px) { .fin-journal-head { font-size: 0.58rem; gap: 0.35rem; } .fin-jh-delta, .fin-day-delta { width: 6rem; } .fin-jh-balance,.fin-day-balance { width: 7.5rem; } .fin-day-head { padding: 0.7rem 0.55rem; gap: 0.35rem; } .fin-day-body { padding-left: 1.4rem; } .fin-entry { grid-template-columns: 6rem 1fr; } .fin-entry-balance { display: none; } } @media (max-width: 1000px) { .fin-kpi-row { grid-template-columns: 1fr 1fr; } .fin-deals { grid-template-columns: 1fr; } .fin-budgets { grid-template-columns: 1fr; } .fin-split { grid-template-columns: 1fr; } .fin-net { grid-template-columns: auto 1fr; } } @media (max-width: 600px) { .fin-kpi-row { grid-template-columns: 1fr; } } /* ====== Hired staff table (team → staff tab) ====== */ .hired-staff-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.75rem; } .hired-staff-table th { text-align: left; font-size: 0.68rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem; border-bottom: 1px solid var(--border); } .hired-staff-table td { padding: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .hired-staff-table .fin-num { text-align: right; font-family: 'JetBrains Mono', monospace; } .hired-staff-table .bad { color: var(--red); font-weight: 700; } .hired-staff-table .btn-ghost.danger { color: var(--red); border-color: rgba(248, 113, 113, 0.35); } .hired-staff-table .btn-ghost.danger:hover { background: rgba(248, 113, 113, 0.12); } /* ====== Сетка выбора предсезонных сборов (вкладка «Сборы») ====== */ .camps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } /* ====== Карточка клуба на мобиле: широкие таблицы → горизонтальный скролл, сетки → одна колонка. Подвкладки уже скроллятся (общий .tabs ≤720px). ====== */ @media (max-width: 900px) { /* GitHub-стиль: таблица — блок по ширине контента, обрезанный вьюпортом, со скроллом по горизонтали. Колонки не схлопываются. Касается Персонала/Школы (hired-staff-table), журнала финансов и таблиц «Переходов» (только внутри карточки клуба — .tab-panel). */ .hired-staff-table, .transfer-table, .table-scroll-x, .match-replay-team-stats .player-table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Тип/Уровень сборов — в одну колонку */ .camps-grid { grid-template-columns: 1fr; } /* Шапка стадиона/инфраструктуры — стек вместо распора по краям */ .stadium-head { flex-wrap: wrap; } /* Модалки — переносим кнопки действий; фильтры трансферов — на всю ширину */ .apply-modal-actions { flex-wrap: wrap; } .transfer-filter, .transfer-filter select { width: 100%; min-width: 0; } .transfer-filter-actions { margin-left: 0; } } /* ====== Tooltip (сайт-wide) ====== Базовый стиль для всплывающей подсказки. Любой элемент с атрибутом `data-tooltip="текст"` показывает тёмную плашку над собой по hover — без JS, без ручной сборки элементов. Пустой data-tooltip="" не рендерит подсказку (чтобы можно было условно отключать из Blazor через data-tooltip="@(cond ? "text" : "")"). Использование: 👑 Положение по умолчанию — сверху. Для других сторон добавьте data-tooltip-placement="bottom|left|right" (поддержка ниже). */ [data-tooltip]:not([data-tooltip=""]) { position: relative; } /* Обёртка для тултипа над disabled-элементом: сама кнопка гасится opacity/filter из .btn:disabled, а это тянет и её ::after — текст подсказки становится нечитаемым. data-tooltip вешаем на .tip-wrap. */ .tip-wrap { display: inline-flex; } [data-tooltip]:not([data-tooltip=""]):hover::after, [data-tooltip]:not([data-tooltip=""]):focus-visible::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-text); padding: 0.4rem 0.7rem; border-radius: 6px; border: 1px solid var(--border-strong); font-size: 0.78rem; font-weight: 500; line-height: 1.4; text-align: center; white-space: normal; max-width: 260px; width: max-content; pointer-events: none; z-index: 1000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); animation: tooltip-in 0.12s ease-out; } [data-tooltip]:not([data-tooltip=""]):hover::before, [data-tooltip]:not([data-tooltip=""]):focus-visible::before { content: ""; position: absolute; /* Reset любых чужих ::before (например, .btn::before c inset: 0) — иначе наши bottom/left не перекроют top/right от inset. */ inset: auto; top: auto; right: auto; width: 0; height: 0; background: transparent; border-radius: 0; opacity: 1; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--tooltip-bg); pointer-events: none; z-index: 1000; animation: tooltip-in 0.12s ease-out; } @keyframes tooltip-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Для элементов над которыми мало места — подсказка снизу. */ [data-tooltip][data-tooltip-placement="bottom"]:hover::after, [data-tooltip][data-tooltip-placement="bottom"]:focus-visible::after { bottom: auto; top: calc(100% + 8px); } [data-tooltip][data-tooltip-placement="bottom"]:hover::before, [data-tooltip][data-tooltip-placement="bottom"]:focus-visible::before { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--tooltip-bg); } /* Для элементов у правого края экрана: тултип прижимается к правому краю элемента (правый край тултипа == правый край элемента), не центрируется. Стрелка тоже сдвигается, чтобы указывать на элемент. */ [data-tooltip][data-tooltip-placement="right"]:hover::after, [data-tooltip][data-tooltip-placement="right"]:focus-visible::after { left: auto; right: 0; transform: none; } [data-tooltip][data-tooltip-placement="right"]:hover::before, [data-tooltip][data-tooltip-placement="right"]:focus-visible::before { left: auto; right: 12px; transform: none; } [data-tooltip][data-tooltip-placement="right"]:hover::after { animation: tooltip-in-right 0.12s ease-out; } [data-tooltip][data-tooltip-placement="right"]:hover::before { animation: tooltip-in-right 0.12s ease-out; } @keyframes tooltip-in-right { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Аналогично у левого края: прижать к левому краю элемента. */ [data-tooltip][data-tooltip-placement="left"]:hover::after, [data-tooltip][data-tooltip-placement="left"]:focus-visible::after { left: 0; transform: none; } [data-tooltip][data-tooltip-placement="left"]:hover::before, [data-tooltip][data-tooltip-placement="left"]:focus-visible::before { left: 12px; transform: none; } [data-tooltip][data-tooltip-placement="left"]:hover::after { animation: tooltip-in-right 0.12s ease-out; } [data-tooltip][data-tooltip-placement="left"]:hover::before { animation: tooltip-in-right 0.12s ease-out; } /* Все тултипы внутри верхней панели — всегда снизу: сверху viewport, стандартный «над элементом» обрезается. Распространяется и на вложенные .profile-badge внутри .profile-btn. Покрывает будущие иконки в шапке без ручной разметки data-tooltip-placement. */ .navbar [data-tooltip]:not([data-tooltip=""]):hover::after, .navbar [data-tooltip]:not([data-tooltip=""]):focus-visible::after { bottom: auto; top: calc(100% + 8px); } .navbar [data-tooltip]:not([data-tooltip=""]):hover::before, .navbar [data-tooltip]:not([data-tooltip=""]):focus-visible::before { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--tooltip-bg); } /* ====== Форум ====== */ .forum-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; overflow: hidden; } .forum-block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem; background: rgba(59, 130, 246, 0.08); border-bottom: 1px solid var(--border); } .forum-block-title { font-size: 1rem; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; } .forum-block-sub { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.2rem; } .forum-block-empty { padding: 0.9rem 1.1rem; color: var(--text-faint); font-size: 0.85rem; } .forum-block-actions { display: flex; gap: 0.3rem; align-items: center; } /* Админские кнопки управления (↑↓ ✏️ 🗑 + Раздел) на узких экранах — отдельной строкой под названием блока/раздела, чтобы не теснить заголовок. У обычных пользователей этих кнопок нет — их вид не меняется. */ @media (max-width: 900px) { .forum-block-head { flex-direction: column; align-items: stretch; gap: 0.5rem; } .forum-block-actions { flex-wrap: wrap; } .forum-section-row-wrap { flex-direction: column; align-items: stretch; } .forum-section-actions { justify-content: flex-start; flex-wrap: wrap; padding: 0 0.85rem 0.7rem; } } .forum-sections { display: flex; flex-direction: column; } .forum-section-row-wrap { display: flex; align-items: stretch; border-top: 1px solid var(--border); } .forum-section-row-wrap:first-child { border-top: none; } .forum-section-row-wrap:hover { background: rgba(255,255,255,0.04); } .forum-section-row-wrap .forum-section-row { border-top: none; flex: 1; } .forum-section-actions { display: flex; gap: 0.3rem; align-items: center; padding: 0 0.9rem; } .forum-section-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; border-top: 1px solid var(--border); text-decoration: none; transition: background .14s; } .forum-section-row:first-child { border-top: none; } .forum-section-row:hover { background: rgba(59,130,246,0.05); } .forum-section-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.18)); border: 1px solid rgba(59,130,246,0.25); color: #93c5fd; transition: background .14s, border-color .14s, color .14s; } .forum-section-row:hover .forum-section-icon { background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(139,92,246,0.28)); border-color: rgba(139,92,246,0.45); color: #c4b5fd; } .forum-section-icon svg { width: 18px; height: 18px; } .forum-section-body { flex: 1; min-width: 0; } .forum-section-title { font-size: 0.95rem; font-weight: 700; color: var(--text); } .forum-section-sub { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.15rem; } /* Непрочитанное (0305): раздел на главной и тема в списке. Насыщенный цвет вместо приглушённого — прочитанное «гаснет», непрочитанное остаётся ярким. */ .forum-unread { color: var(--accent); font-weight: 800; } .forum-section-arrow { flex: 0 0 auto; color: var(--text-faint); display: flex; align-items: center; transition: color .14s, transform .14s; } .forum-section-arrow svg { width: 16px; height: 16px; } .forum-section-row:hover .forum-section-arrow { color: var(--accent); transform: translateX(2px); } .forum-toolbar { margin-bottom: 0.9rem; display: flex; gap: 0.5rem; } .forum-topics-table .clickable-row { cursor: pointer; } .forum-topics-table tr:hover td { background: rgba(255,255,255,0.04); } /* ---- тема: посты ---- */ .forum-posts { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.25rem; } .forum-post { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; } .forum-post-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.82rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); } .forum-post-head-left { display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.25rem; gap: 0.4rem; } .forum-post-head-right { display: flex; align-items: baseline; gap: 0.5rem; flex-shrink: 0; } .forum-post-author { font-weight: 700; color: var(--accent-3); } .forum-post-team { color: var(--text-dim); margin-left: 0.35rem; } .forum-post-team-dot { /* Символ "·" в большинстве шрифтов сидит визуально ниже центра строки даже с vertical-align:middle (это метрика самого глиффа, не baseline). Рисуем точку CSS-кружком вместо текстового символа — гарантированно по центру независимо от шрифта; сам "·" гасим до нулевого размера. */ display: inline-flex; align-items: center; justify-content: center; width: 0.6em; font-size: 0; vertical-align: middle; } .forum-post-team-dot::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; } .forum-post-team-link { color: inherit; text-decoration: none; } .forum-post-team-link:hover { color: var(--accent-3); } .forum-post-team-link { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle; } .forum-post-team-crest { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .forum-post-team-flag { display: inline-flex; align-items: center; } @media (max-width: 900px) { .forum-post-team-crest, .forum-post-team-flag { display: none; } } .forum-post-banned { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.35rem; font-size: 0.8rem; } .forum-post-karma { color: var(--text-dim); font-size: 0.78rem; display: inline-flex; gap: 0.5rem; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; } .forum-post-karma .karma-like { color: #7ee787; } .forum-post-karma .karma-dislike { color: #ffa198; } .forum-post-date { color: var(--text-faint); font-family: 'JetBrains Mono', monospace; } /* Дата+"(изменено)" — отдельная строка под текстом сообщения (и подписью), прижата вправо, с пунктирной линией под ней перед кнопками реакций. Одинаково на вебе и мобиле — просто разметка, без media-query. */ .forum-post-date-row { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.5rem; font-size: 0.78rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border, rgba(255,255,255,0.1)); } .forum-post-pinned { border-left: 3px solid var(--accent, #4ea1ff); /* Лёгкий синий оттенок поверх --surface: голый rgba с 4% альфы делал пост прозрачным, и фоновая картинка страницы просвечивала сквозь текст. */ background: linear-gradient(rgba(78, 161, 255, 0.06), rgba(78, 161, 255, 0.06)), var(--surface); } /* "Последнее сообщение" в карточке раздела (Forum.razor) */ .forum-last-post { flex-shrink: 0; width: 220px; padding: 0.4rem 0.6rem; margin-right: 0.4rem; border-left: 1px solid var(--border, rgba(255,255,255,0.08)); cursor: pointer; overflow: hidden; } .forum-last-post:hover { background: rgba(255,255,255,0.03); } .forum-last-post-topic { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forum-last-post-meta { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.2rem; } .forum-last-post-meta b { color: var(--accent-3); font-weight: 600; } /* Блок «Мои темы» (Forum.razor): статус ответов справа от названия темы. */ .forum-mine-row .forum-section-sub { display: block; } .forum-mine-status { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; min-width: 150px; } .forum-mine-badge { padding: 0.1rem 0.55rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; color: var(--accent-3); font-size: 0.75rem; font-weight: 700; } .forum-mine-none { font-size: 0.78rem; color: var(--text-faint); } .forum-mine-status .forum-last-post-meta { margin-top: 0; } /* Колонка "последнее сообщение" в таблице тем раздела (ForumSection.razor) */ .forum-last-post-cell { line-height: 1.35; } .forum-last-post-preview { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; } .forum-post-pin-mark { font-size: 0.95rem; margin-right: 0.2rem; } .forum-post-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); border: 1px solid var(--border, rgba(255,255,255,0.08)); } .forum-inline-img { max-width: 100%; max-height: 480px; border-radius: 6px; margin: 0.4rem 0; display: block; background: var(--bg-soft); } .forum-img-prompt { display: flex; gap: 0.5rem; margin: 0.5rem 0; align-items: center; } .forum-img-prompt input { flex: 1; padding: 0.45rem 0.6rem; background: var(--bg-soft); border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 6px; color: var(--text); } .avatar-preview { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border, rgba(255,255,255,0.08)); display: flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; } /* Бейдж роли — кружок с иконкой слева от логина */ .forum-post-role { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.78rem; line-height: 1; flex-shrink: 0; } .forum-post-role.user { background: rgba(255,255,255,0.08); } .forum-post-role.moderator { background: rgba(34,211,238,0.18); } /* accent-3 cyan */ .forum-post-role.admin { background: rgba(250,204,21,0.20); } /* yellow */ .forum-post-edited { color: var(--text-faint); font-size: 0.75rem; font-style: italic; } /* «(изменено)» на десктопе, «(изм.)» на мобиле — экономим место. */ .edited-short { display: none; } /* ====== Форум на мобиле ====== */ @media (max-width: 600px) { /* Свап подписи редактирования */ .edited-full { display: none; } .edited-short { display: inline; } /* Шапка поста: с добавлением счётчика сообщений в .forum-post-karma (0313) правый блок стал шире — разрешаем ряду перенестись на вторую строку вместо сжатия карточки, если авторская часть слева уже заняла всю ширину (аватар+роль+ник+клуб). */ .forum-post-head { flex-wrap: wrap; } .forum-post-head-right { margin-left: auto; } /* Карточка раздела: название отдельной строкой, описание убираем, «последнее сообщение» уезжает на свою строку под названием — иначе фикс-ширина 220px распирала ряд за край экрана. */ .forum-section-row { flex-wrap: wrap; gap: 0.4rem 0.7rem; padding: 0.7rem 0.85rem; } .forum-section-sub { display: none; } .forum-last-post { order: 3; width: 100%; flex: 1 1 100%; border-left: none; border-top: 1px solid var(--border); margin-right: 0; padding: 0.4rem 0 0; } /* Список тем раздела: таблица → карточки в столбик, чтобы ничего не уезжало вбок (превью последнего сообщения раньше распирало 280px). */ .forum-topics-table thead { display: none; } .forum-topics-table, .forum-topics-table tbody { display: block; width: 100%; } .forum-topics-table tbody tr { display: block; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .forum-topics-table tbody td { display: block; border: none; padding: 0; text-align: left !important; } /* Тема — заголовок строки */ .forum-topics-table tbody td:first-child { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; } /* Кол-во сообщений — компактный чип */ .forum-topics-table tbody td.mono { display: inline-block; color: var(--text-dim); font-size: 0.78rem; margin-bottom: 0.15rem; } .forum-topics-table tbody td.mono::before { content: "💬 "; } /* Превью последнего сообщения больше не распирает строку */ .forum-last-post-preview { max-width: 100%; } } .forum-post-body { font-size: 0.92rem; line-height: 1.55; color: var(--text); word-wrap: break-word; } .forum-post-link { color: var(--accent-3); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .forum-post-link:hover { color: var(--accent); } .forum-post-signature { /* Была своя пунктирная линия сверху — теперь эту роль играет граница .forum-post-date-row (дата всегда сразу под сообщением, ДО подписи), вторая линия тут была бы лишней. */ color: var(--text-faint); font-size: 0.8rem; font-style: italic; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; } .forum-post-quote { background: rgba(139, 92, 246, 0.08); border-left: 3px solid var(--accent-2); padding: 0.6rem 0.8rem; border-radius: 4px; margin: 0; } .forum-post-quote-head { font-size: 0.78rem; font-weight: 700; color: var(--accent-2); margin-bottom: 0.25rem; } .forum-post-quote-body { font-size: 0.85rem; color: var(--text-dim); white-space: pre-wrap; } .forum-post-foot { display: flex; gap: 0.4rem; flex-wrap: wrap; } .forum-post-foot .btn.active { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--accent); } .forum-inline-quote { background: rgba(139, 92, 246, 0.06); border-left: 3px solid var(--accent-2); padding: 0.4rem 0.7rem; border-radius: 4px; font-size: 0.85rem; color: var(--text-dim); margin: 0.3rem 0; } /* ---- ответ / форма ---- */ .forum-reply { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; } .forum-reply-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--text); font-size: 0.9rem; } .forum-reply-body { width: 100%; background: rgba(8, 12, 30, 0.6); border: 1px solid var(--border-strong); color: var(--text); border-radius: 8px; padding: 0.6rem 0.8rem; font-family: inherit; font-size: 0.92rem; resize: vertical; min-height: 180px; max-height: 70vh; field-sizing: content; outline: none; } .forum-reply-body:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .forum-reply-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .ban-choices { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; } /* ---- Tournaments page ---- */ .tournaments-block { margin-bottom: 2rem; } .tournaments-block-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-faint); margin-bottom: 0.85rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .tournaments-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; } .country-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .14s, transform .08s; } .country-card:hover { border-color: rgba(59,130,246,0.35); } .country-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; background: rgba(59, 130, 246, 0.08); border-bottom: 1px solid var(--border); } .country-name { font-size: 0.92rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .country-card-body { display: flex; flex-direction: column; } .tournament-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; border: none; background: transparent; color: var(--text); text-align: left; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background .12s; width: 100%; } .tournament-row:last-child { border-bottom: none; } .tournament-row:hover:not(.tournament-row-disabled) { background: rgba(59,130,246,0.06); } .tournament-row-disabled { cursor: not-allowed; color: var(--text-faint); } .tournament-tier { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.45rem; border-radius: 6px; background: rgba(139, 92, 246, 0.18); color: var(--accent-2); border: 1px solid rgba(139, 92, 246, 0.3); min-width: 1.7rem; text-align: center; } .tournament-tier:has(.tournament-crest-img) { background: transparent; border: none; padding: 0; min-width: 0; } .tournament-crest-img { width: 22px; height: 22px; object-fit: contain; display: block; } .tournament-crest-head-img { width: 32px; height: 32px; object-fit: contain; display: block; } /* ── Owner-only hero-фоны на нескольких страницах (EUROCUP_DESIGN) ── .owner-hero-bg-fixed — position:fixed на всю app-body (за вычетом сайдбара/навбара), а НЕ background на .main-content: у .main-content max-width:1200px + margin:auto, поэтому обычный CSS-background всегда упирался в ширину колонки с контентом и не доставал до края окна на широких экранах. fixed игнорирует эту границу. top/left синхронизированы с реальными размерами .navbar/.sidebar (app.css: sidebar width 260px/top 76px; navbar height 76 → 60 (≤900px, сайдбар уходит в drawer) → 64 (≤700px)) — держать в паре при правке вёрстки шапки/сайдбара. Картинка — общий слой, background-image даёт конкретная страница через модификатор (.bg-ucl/.bg-news/.bg-team). */ .owner-hero-bg-fixed { position: fixed; top: calc(76px + var(--sat)); left: 260px; right: 0; bottom: 0; /* Отрицательный z-index — намеренно: .online-users-bar и .legal-footer обычные статичные (position не задан) элементы в конце .app-shell. Позиционированные потомки (в т.ч. fixed) стекуются НАД статикой независимо от DOM-порядка — с z-index:0 картинка перекрывала обе нижние плашки. Отрицательный z-index кладёт её под статичный слой страницы (но выше собственного фона body), и текст/карточки страницы (тоже статика либо .card/.tab-panel с z-index:auto) остаются поверх. */ z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: cover; /* Просто силуэт, не чёткая сцена — на масштабе исходников (~1700px) неизбежно немного мылится, полупрозрачность это маскирует. */ opacity: 0.35; } .owner-hero-bg-fixed.bg-ucl { background-image: url("/img/backgrounds/eurocup-ucl.jpg?v=2"); background-position: right top; } .owner-hero-bg-fixed.bg-uel { background-image: url("/img/backgrounds/eurocup-uel.jpg?v=2"); background-position: right top; } .owner-hero-bg-fixed.bg-ucfl { background-image: url("/img/backgrounds/eurocup-ucfl.jpg?v=2"); background-position: right top; } /* Фон по умолчанию: MainLayout всегда кладёт этот слой (для залогиненных), а страница со своим OwnerPageBg (.owner-bg-page) его скрывает — две картинки друг на друга не накладываются. Стили слоя (тема, тонировка, left/top) общие. */ .owner-hero-bg-fixed.bg-default { background-image: url("/img/backgrounds/news-start.jpg?v=3"); background-position: center top; } .app-shell:has(.owner-bg-page) > .owner-hero-bg-fixed.bg-default { display: none; } .owner-hero-bg-fixed.bg-news { background-image: url("/img/backgrounds/news-start.jpg?v=3"); background-position: center top; } .owner-hero-bg-fixed.bg-mynews { background-image: url("/img/backgrounds/my-news.jpg"); background-position: center top; } .owner-hero-bg-fixed.bg-team { background-image: url("/img/backgrounds/team-hq.jpg"); background-position: right top; } .owner-hero-bg-fixed.bg-calendar { background-image: url("/img/backgrounds/calendar-office.jpg"); background-position: right top; } .owner-hero-bg-fixed.bg-schedule { background-image: url("/img/backgrounds/schedule.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-squad { background-image: url("/img/backgrounds/squad-locker.jpg"); background-position: right top; } .owner-hero-bg-fixed.bg-championship { background-image: url("/img/backgrounds/league-championship.jpg"); background-position: right top; } .owner-hero-bg-fixed.bg-nationalcup { background-image: url("/img/backgrounds/national-cup.jpg"); background-position: center top; } .owner-hero-bg-fixed.bg-national { background-image: url("/img/backgrounds/national-team.jpg"); background-position: right top; } .owner-hero-bg-fixed.bg-tournaments { background-image: url("/img/backgrounds/tournaments.jpg"); background-position: center top; } .owner-hero-bg-fixed.bg-forum { background-image: url("/img/backgrounds/forum.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-friendlies { background-image: url("/img/backgrounds/free-teams.jpg?v=2"); background-position: right top; } .owner-hero-bg-fixed.bg-friends { background-image: url("/img/backgrounds/friends.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-messages { background-image: url("/img/backgrounds/messages.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-profile { background-image: url("/img/backgrounds/profile.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-rankings { background-image: url("/img/backgrounds/reputation.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-reputation { background-image: url("/img/backgrounds/reputation.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-rules { background-image: url("/img/backgrounds/rules.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-search { background-image: url("/img/backgrounds/search.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-transfers { background-image: url("/img/backgrounds/transfers.jpg?v=2"); background-position: right top; } .owner-hero-bg-fixed.bg-vip { background-image: url("/img/backgrounds/vip.jpg"); background-position: center top; } .owner-hero-bg-fixed.bg-match { background-image: url("/img/backgrounds/match-day.jpg"); background-position: center top; } .owner-hero-bg-fixed.bg-replay { background-image: url("/img/backgrounds/match-replay.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-freeteams { background-image: url("/img/backgrounds/free-teams.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-freenat { background-image: url("/img/backgrounds/free-national-teams.jpg?v=2"); background-position: center top; } .owner-hero-bg-fixed.bg-newspaper { background-image: url("/img/backgrounds/newspaper.jpg?v=2"); background-position: center top; } /* Оттенок под выбранную ступень темы — mix-blend-mode:color переносит hue+saturation оверлея на картинку, сохраняя её яркость/контраст (не плоская заливка). По умолчанию выключен (см. sofl-2 выше), включается галкой «Подкрашивать картинки» в профиле (html.bg-tint-on). */ .owner-hero-bg-fixed::after { content: ""; position: absolute; inset: 0; background: rgb(var(--bg-rgb)); mix-blend-mode: color; pointer-events: none; } @media (max-width: 900px) { .owner-hero-bg-fixed { top: calc(60px + var(--sat)); left: 0; } } @media (max-width: 700px) { .owner-hero-bg-fixed { top: calc(64px + var(--sat)); } } /* .owner-bg-page — не несёт картинку сама (это делает фикс-слой выше), только скоупит прозрачность контента над ним, чтобы фон был виден: .tab-panel/.player-hero НЕ стеклянные, как .card (--surface ~6-9%) — это «утопленные плашки», background: rgba(--panel-rgb, 0.72), почти сплошной по дизайну везде в проекте. Снижаю именно тут, не трогая их глобально. БЕЗ z-index: раньше он тут был (z-index:1) и создавал СВОЙ стек-контекст — любой .modal-backdrop (z-index:200) внутри страницы с этой обёрткой сравнивался только локально и никогда не перебивал .navbar (z-index:100), реально стоящий СНАРУЖИ этого контекста — модалка "заползала" под шапку, кнопка закрыть становилась недоступна. position:relative один, без z-index, НЕ создаёт новый контекст — контент .owner-bg-page и так рисуется поверх .owner-hero-bg-fixed (у неё z-index отрицательный, красится первой независимо от контекста), а .modal-backdrop корректно сравнивается с .navbar в общем контексте. */ .owner-bg-page { position: relative; } .owner-bg-page .tab-panel, .owner-bg-page .player-hero { background: rgba(var(--panel-rgb), 0.38); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); } /* DimCards/OpaqueCards (OwnerPageBg) — на «шумных» картинках (толпа/яркие плашки на весь кадр) обычная прозрачность --surface (~6-9%) даёт фону перебивать текст. Десятки разных классов блоков по всему сайту (.card, .forum-block, .country-card, .np-article-card и т.д.) держат фон именно через background: var(--surface) — вместо того чтобы гоняться за каждым именем класса, переопределяю САМУ переменную на обёртке страницы: любой потомок, использующий var(--surface), подхватывает новое значение автоматически, независимо от класса. */ html:not(.bg-images-off) .owner-bg-page-dim { --surface: rgba(var(--panel-rgb), 0.55); --surface-strong: rgba(var(--panel-rgb), 0.65); --bg-soft: rgba(var(--panel-rgb), 0.7); } html:not(.bg-images-off) .owner-bg-page-opaque { --surface: rgba(var(--panel-rgb), 0.85); --surface-strong: rgba(var(--panel-rgb), 0.9); --bg-soft: rgba(var(--panel-rgb), 0.92); } /* Форум (и Пресс-центр на том же фоне): картинка со сценой на весь кадр — блоки плотнее обычных «OpaqueCards». */ html:not(.bg-images-off) .owner-hero-bg-fixed.bg-forum + .owner-bg-page { --surface: rgba(var(--panel-rgb), 0.93); --surface-strong: rgba(var(--panel-rgb), 0.96); --bg-soft: rgba(var(--panel-rgb), 0.97); } /* Кнопки на форуме (реакции, «Цитировать», PM): на плотных блоках берут --surface панели и выглядят чёрными — здесь светлая полупрозрачная заливка. */ html:not(.bg-images-off) .owner-hero-bg-fixed.bg-forum + .owner-bg-page :is(.btn-ghost, .reaction-btn):not(.active):not(.mine) { background: rgba(255,255,255,0.09); } html:not(.bg-images-off) .owner-hero-bg-fixed.bg-forum + .owner-bg-page :is(.btn-ghost, .reaction-btn):not(.active):not(.mine):hover:not(:disabled) { background: rgba(255,255,255,0.16); } html[data-theme^="sofl-2"]:not(.bg-images-off) .owner-hero-bg-fixed.bg-forum + .owner-bg-page :is(.btn-ghost, .reaction-btn):not(.active):not(.mine) { background: rgba(150,168,235,0.16); border-color: rgba(150,120,240,0.35); } html[data-theme^="sofl-2"]:not(.bg-images-off) .owner-hero-bg-fixed.bg-forum + .owner-bg-page :is(.btn-ghost, .reaction-btn):not(.active):not(.mine):hover:not(:disabled) { background: rgba(150,168,235,0.26); } /* Настройка профиля «Фоновые картинки» (по умолчанию ВКЛ — см. bgImages.js, sofl-bg-images в localStorage). Класс on html ставится ДО рендера Blazor (как mobile-preview), поэтому по умолчанию (класс отсутствует, например пока JS ещё не отработал) картинки видны — выключение это явное действие, не наоборот. Переопределение --surface выше уже само гасится через :not(.bg-images-off), отдельный revert не нужен. */ html.bg-images-off .owner-hero-bg-fixed { display: none; } html.bg-images-off .owner-bg-page .tab-panel, html.bg-images-off .owner-bg-page .player-hero { background: rgba(var(--panel-rgb), 0.72); backdrop-filter: none; -webkit-backdrop-filter: none; } .tournament-row-disabled .tournament-tier { background: rgba(255,255,255,0.04); color: var(--text-faint); border-color: var(--border); } .tournament-name { flex: 1; font-size: 0.88rem; font-weight: 600; } a.tournament-name.clickable { color: inherit; text-decoration: none; cursor: pointer; transition: color .15s; } a.tournament-name.clickable:hover { color: var(--accent-3); } .tournament-meta { flex: 0 0 auto; font-size: 0.74rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; } /* Placeholder-блоки для пока-не-готовых разделов */ .placeholder-block { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem; } .placeholder-icon { font-size: 2.5rem; opacity: 0.5; } .placeholder-text { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; } .placeholder-text b { color: var(--text); } .placeholder-text code { background: rgba(255,255,255,0.06); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.78rem; } /* ---- Emoji picker ---- */ .emoji-picker-wrap { position: relative; display: inline-block; } .emoji-picker-popup { position: absolute; bottom: calc(100% + 0.5rem); left: 0; background: rgba(8, 12, 30, 0.96); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.2rem; z-index: 500; } .emoji-btn { background: transparent; border: none; color: var(--text); font-size: 1.1rem; padding: 0.3rem; cursor: pointer; border-radius: 6px; transition: background .1s; } .emoji-btn:hover { background: var(--surface2); } /* ====== VIP ====== */ .vip-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 1.05rem; color: var(--yellow); background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.3); border-radius: 10px; cursor: default; user-select: none; } /* ====== Player card: Действия tab ====== */ .actions-panel { display: flex; flex-direction: column; gap: 1rem; } .actions-section { background: rgba(8, 12, 30, 0.45); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; } .actions-section-title { font-size: 0.78rem; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; } .actions-section-sub { font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; } .min-bid-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; } .min-bid-row label { color: var(--text-dim); font-weight: 600; } .min-bid-row.muted { color: var(--text-faint); } .min-bid-row.muted b { color: var(--text); } .min-bid-hint { font-size: 0.75rem; color: var(--text-faint); line-height: 1.4; } .min-bid-hint b { color: var(--text-dim); } .min-bid-hint.bad { color: var(--red); } .min-bid-hint.bad b { color: var(--red); } .min-bid-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .transfer-status-banner { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border-radius: 8px; font-size: 0.85rem; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); } .transfer-status-banner.bids_open { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.3); } .transfer-status-banner.review { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); } .transfer-status-banner.moving { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); } .transfer-status-sub { color: var(--text-dim); font-size: 0.8rem; margin-left: 0.2rem; } .transfer-locked { color: var(--text-faint); font-size: 0.82rem; } /* ====== Transfers: fee stepper ====== Переиспользуем общий .stepper (см. «Stepper» ниже в файле) — но ширину инпута расширяем, чтобы влезали миллионы. */ .fee-stepper .stepper-input { width: 11ch; text-align: right; padding-right: 0.6rem; } .my-bid-hint { font-size: 0.72rem; color: var(--accent-3); margin-top: 0.2rem; font-family: 'JetBrains Mono', monospace; } /* ====== Transfers page (coaches / physios) ====== */ .transfer-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .transfer-head-stats { font-size: 0.88rem; color: var(--text-dim); } .transfer-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; } .transfer-filter { display: flex; flex-direction: column; gap: 0.25rem; } /* Apply-button cell sits flush with the bottom of the filter selects. */ .transfer-filter-actions { justify-content: flex-end; margin-left: auto; } .transfer-filter label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; } .transfer-filter select { background: rgba(8,12,30,0.6); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.6rem; border-radius: 8px; font-family: inherit; font-size: 0.88rem; min-width: 10rem; } .transfer-filter select option { background: var(--popover); } .transfer-footer { margin-top: 1rem; font-size: 0.82rem; color: var(--text-faint); text-align: center; } .pager { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 1.25rem; flex-wrap: wrap; } .transfer-table .mono { font-family: 'JetBrains Mono', monospace; } .transfer-table td { vertical-align: middle; } .transfer-table .staff-stars { letter-spacing: 1px; font-size: 0.85rem; } /* ===== Переговоры о контракте ===== */ .neg-stack { display: flex; flex-direction: column; gap: 1rem; } .neg-head { display: flex; flex-wrap: wrap; gap: 1.75rem 2rem; justify-content: space-between; padding: 1.75rem; } .neg-head-player { display: flex; gap: 1.25rem; align-items: center; min-width: 0; } .neg-head-photo { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: var(--surface-strong); } .neg-head-photo-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.9rem; color: var(--text-dim); } .neg-head-name { font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .neg-head-sub { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.35rem; line-height: 1.55; } .neg-head-sub b { color: var(--text); } /* Строка с флагом — флекс с gap, чтобы флаг и текст были по центру и пробелы не съедались */ .neg-nat { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .neg-nat .nation-cell { gap: 0.35rem; } .neg-head-deal { text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .neg-deal-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); } .neg-deal-club { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0.35rem 0 0.15rem; font-size: 1.15rem; font-weight: 700; } .neg-deal-crest { width: 40px; height: 40px; object-fit: contain; } .neg-price { margin-top: 0.6rem; font-size: 0.78rem; color: var(--text-faint); } .neg-price b { color: var(--text-dim); font-weight: 600; } .np-help.neg-stats { margin-top: 0; } /* в .neg-stack отступ даёт gap, не нужен собственный */ .neg-stats .np-help-body { padding-top: 0.4rem; } /* На широком блоке параметры в 2-3 колонки на всю ширину */ .neg-stats .stat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); column-gap: 2rem; align-content: start; } .neg-locked { opacity: 0.55; } @media (max-width: 600px) { .neg-head { padding: 1.1rem; gap: 1.1rem; } .neg-head-deal { text-align: left; align-items: flex-start; } .neg-head-player { gap: 0.9rem; } .neg-head-photo { width: 72px; height: 72px; } .neg-head-name { font-size: 1.15rem; } .neg-row .fancy-select, .neg-row .stepper { flex-basis: 12.5rem; width: 12.5rem; } } .neg-panel { display: flex; flex-direction: column; gap: 0.7rem; min-height: 16rem; } .neg-fields { display: flex; flex-direction: column; gap: 0.55rem; } .neg-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; } .neg-row > span:first-child { color: var(--text-dim); } /* Все 4 контрола Блока 1 одной ширины */ .neg-row .fancy-select, .neg-row .stepper { flex: 0 0 15rem; width: 15rem; min-width: 0; min-height: 2.5rem; } .neg-row .stepper-btn { display: flex; align-items: center; padding: 0 0.9rem; font-size: 1.15rem; } .neg-val { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; padding: 0 0.4rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.92rem; } .neg-bar-wrap { margin-top: 1.1rem; } .neg-bar-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.25rem; } .neg-bar { height: 10px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; } .neg-bar-fill { height: 100%; border-radius: 999px; transition: width .18s ease; } .neg-bar-fill.red { background: linear-gradient(90deg, #dc2626, #ef4444); } .neg-bar-fill.yellow { background: linear-gradient(90deg, #d97706, #facc15); } .neg-bar-fill.green { background: linear-gradient(90deg, #16a34a, #4ade80); } /* Фиксированная высота — чтобы модалка не дёргалась при появлении ответа */ .neg-note { font-size: 0.82rem; color: var(--text-dim); min-height: 2.2rem; display: flex; align-items: center; } .neg-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .neg-rounds { font-size: 0.85rem; color: var(--text-dim); } .neg-rounds b { color: var(--text); } .neg-verdict { padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 0.9rem; } .neg-verdict.ok { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.4); color: var(--text); } .neg-verdict.fail { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.35); color: var(--text-dim); } /* ===== Газета ===== */ .np-section-author { color: var(--text-faint); font-weight: 400; font-size: 0.9em; } .forum-section-row .forum-section-arrow { font-size: 1.3rem; line-height: 1; } .np-article-list { display: flex; flex-direction: column; gap: 0.75rem; } .np-article-card { display: flex; gap: 0.9rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; } .np-article-card:hover { border-color: var(--border-strong); background: var(--surface-strong); } .np-article-cover { width: 112px; height: 84px; object-fit: fill; border-radius: 8px; flex: 0 0 auto; } .np-article-card { align-items: center; } .np-article-card-body { min-width: 0; } .np-article-card-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.25rem; line-height: 1.3; } .np-article-card-meta { font-size: 0.8rem; color: var(--text-faint); } .np-article-card-meta b { color: var(--text-dim); font-weight: 700; } .np-markup-hint { margin-top: 0.35rem; font-size: 0.78rem; color: var(--text-faint); } .np-markup-hint code, .np-help code { font-family: 'JetBrains Mono', monospace; background: var(--surface-strong); padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.85em; } .np-help { margin-top: 1.25rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .np-help-toggle { width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; } .np-help-toggle:hover { color: var(--text); } .np-help-chevron { transition: transform .15s; flex: 0 0 auto; color: var(--text-faint); } .np-help.open .np-help-chevron { transform: rotate(90deg); } .np-help-body { padding: 0 0.9rem 0.9rem; font-size: 0.86rem; } .np-help-lead { margin: 0 0 0.75rem; color: var(--text-dim); } .np-help-table { width: 100%; border-collapse: collapse; } .np-help-table td { padding: 0.35rem 0.5rem 0.35rem 0; vertical-align: top; border-top: 1px solid var(--border); } .np-help-table tr:first-child td { border-top: none; } .np-help-table td:first-child { white-space: nowrap; width: 1%; } .np-help-table td:last-child { color: var(--text-dim); } .np-help-note { margin: 0.85rem 0 0; color: var(--text-faint); font-size: 0.82rem; line-height: 1.5; } @media (max-width: 600px) { .np-help-table, .np-help-table tbody, .np-help-table tr, .np-help-table td { display: block; } .np-help-table td { padding: 0.15rem 0; border-top: none; } .np-help-table tr { padding: 0.5rem 0; border-top: 1px solid var(--border); } .np-help-table tr:first-child { border-top: none; } .np-help-table td:first-child { white-space: normal; width: auto; overflow-wrap: anywhere; } } .np-article { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; } .np-article-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .np-article-tools { display: flex; gap: 0.4rem; } .np-article-title { font-size: 1.8rem; line-height: 1.25; margin: 0 0 0.5rem; } .np-article-byline { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .np-article-hero { width: 100%; height: auto; border-radius: 12px; margin-bottom: 1.25rem; } .np-article-body { font-size: 1.02rem; line-height: 1.75; } .np-article-body p { margin: 0 0 1rem; } .np-article-body strong { color: var(--text); font-weight: 700; } .np-article-body .np-h { font-size: 1.22rem; line-height: 1.3; font-weight: 700; margin: 1.9rem 0 0.7rem; color: var(--text); } .np-article-body .np-h:first-child { margin-top: 0; } .np-preview .np-h { font-size: 1.1rem; } .np-article-reactions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } .np-table-wrap { overflow-x: auto; margin: 1.1rem 0; border: 1px solid var(--border); border-radius: 10px; } .np-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; line-height: 1.4; } .np-table th, .np-table td { padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; } .np-table th.num, .np-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .np-table thead th { background: var(--accent-soft); color: var(--text); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; border-bottom: 1px solid var(--border-strong); } .np-table tbody td { border-top: 1px solid var(--border); } .np-table tbody tr:first-child td { border-top: none; } .np-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); } .np-table tbody tr:hover td { background: var(--accent-soft); } .np-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .np-panel { margin-bottom: 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .np-panel-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.55rem; } .np-panel .field { margin-bottom: 0.5rem; } .np-panel .field label { font-size: 0.66rem; margin-bottom: 0.25rem; } .np-panel .field input { padding: 0.45rem 0.7rem; font-size: 0.88rem; } .np-panel-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; } .np-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.7rem; } .np-steppers { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.6rem; } .np-steppers .stepper-field { align-items: flex-start; } .np-steppers .stepper { width: auto; } .np-panel .stepper-input, .np-panel .stepper-input:focus { width: 3ch; padding: 0.3rem 0.25rem; border: none; border-radius: 0; background: transparent; box-shadow: none; font-size: 0.9rem; } .np-steppers .stepper-btn { padding: 0 0.6rem; } .np-tb-scroll { overflow-x: auto; margin: 0.25rem 0 0.4rem; padding: 0.3rem; } .np-tb-grid { border-collapse: separate; border-spacing: 0.3rem; margin: -0.3rem; } .np-tb-grid td { padding: 0; min-width: 7.5rem; } .np-tb-grid .field { margin: 0; } .np-tb-grid .field input { padding: 0.35rem 0.55rem; font-size: 0.84rem; } .np-tb-grid tr.head .field input { font-weight: 700; } .np-submit-hint { margin-left: auto; font-size: 0.85rem; color: var(--red); } .np-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--border); } @media (max-width: 600px) { .np-fields-2 { grid-template-columns: 1fr; } } .np-write .field { margin-bottom: 0.85rem; } .np-char-count { font-size: 0.8rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; } .np-char-count.over { color: var(--red); font-weight: 700; } .np-preview { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--border); } .np-preview-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 0.6rem; } @media (max-width: 600px) { .np-article-cover { width: 92px; height: 69px; } .np-article-title { font-size: 1.4rem; } } /* ===== Архив трансферов ===== */ .archive-day { margin-bottom: 0.85rem; } .archive-id-selector { margin-bottom: 0.9rem; } .archive-id-selector .archive-id-btn { width: auto; min-width: 2.4rem; padding: 0 0.7rem; } .player-table.archive-table tbody tr.archive-row { cursor: pointer; } .player-table.archive-table tbody tr.archive-row:hover { background: var(--accent-soft); } .player-table.archive-table tbody tr.archive-row.open { background: var(--accent-soft); } .player-table.archive-table tbody tr.archive-bids-row:hover { background: transparent; } .player-table.archive-table tbody tr.archive-bids-row td { padding: 0; } .archive-chevron { display: inline-block; color: var(--text-dim); transition: transform .15s; } .archive-row.open .archive-chevron { transform: rotate(90deg); } .archive-bids { padding: 0.5rem 0.9rem 0.7rem 1.4rem; background: var(--surface); border-left: 2px solid var(--border); margin: 0 0 0.2rem 0.6rem; } .archive-bids-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 0.35rem; } .archive-player { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; } .archive-bid { display: grid; grid-template-columns: 1fr 9rem 1.25rem 5rem; align-items: center; gap: 0.5rem; padding: 0.28rem 0; font-size: 0.86rem; border-top: 1px solid var(--border); } .archive-bid:first-of-type { border-top: none; } .archive-bid.win { font-weight: 700; } .archive-bid-fee { text-align: right; } .archive-bid-mark { color: var(--green); text-align: center; font-weight: 700; } .archive-bid-day { text-align: right; color: var(--text-faint); font-size: 0.78rem; } @media (max-width: 700px) { .archive-bid { grid-template-columns: 1fr auto 1.25rem; row-gap: 0.15rem; } .archive-bid-day { display: none; } } .pager-info { margin: 0 0.5rem; font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; } .pager-info b { color: var(--text); font-weight: 700; } .staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; } .staff-card { background: rgba(8,12,30,0.55); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color .15s, transform .15s; } .staff-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .staff-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .staff-card-name { font-weight: 700; font-size: 0.98rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .staff-stars { font-size: 0.85rem; letter-spacing: 1px; flex-shrink: 0; } .staff-stars .star { color: rgba(255,255,255,0.2); } .staff-stars .star.on { color: var(--yellow); } /* Половина звезды — градиент по тексту: левая половина — жёлтая (заполнено), правая — серая (как у пустых). Даёт 11 ступеней (0..10 половинок). */ .staff-stars .star.half { background: linear-gradient(90deg, var(--yellow) 50%, rgba(255,255,255,0.2) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } .staff-card-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-dim); } .staff-card-age { font-family: 'JetBrains Mono', monospace; } .staff-card-spec { margin-top: 0.15rem; } .staff-card-wage { font-weight: 800; font-size: 1.05rem; color: var(--accent-3); margin-top: auto; padding-top: 0.3rem; } .staff-card-action { align-self: stretch; justify-content: center; } /* ====== Contracts tab ====== */ .contracts-table-wrap { overflow-x: auto; } .contracts-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .contracts-table th { text-align: left; font-size: 0.68rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--border); } .contracts-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; } .contracts-table .col-num { width: 2.5rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; } .contracts-table .col-name { font-weight: 600; white-space: nowrap; } .contracts-table .col-pos { width: 4rem; } .contracts-table .col-age { width: 3rem; text-align: center; } .contracts-table .col-wage { width: 8.5rem; font-family: 'JetBrains Mono', monospace; } .contracts-table .col-wage .wage-weekly { font-size: 0.72rem; color: var(--text-faint); } .contracts-table .col-signed, .contracts-table .col-expires { width: 5.5rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; } .contracts-table .col-left { width: 5rem; font-family: 'JetBrains Mono', monospace; } .contracts-table .col-left.bad { color: var(--red); font-weight: 700; } .contracts-table .col-actions { text-align: right; white-space: nowrap; } .contracts-table .col-actions .btn + .btn, .contracts-table .col-actions .tip-wrap + .btn { margin-left: 0.35rem; } .contracts-table .btn-ghost.danger { color: var(--red); border-color: rgba(248, 113, 113, 0.35); } .contracts-table .btn-ghost.danger:hover { background: rgba(248, 113, 113, 0.12); } .contracts-table .bad { color: var(--red); } /* Modal preview body (renew / terminate) */ .contract-preview { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0; } .contract-preview-title { font-size: 0.78rem; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; } .contract-preview-title.warn { color: var(--red); } .contract-preview-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; padding: 0.25rem 0; } .contract-preview-row span { color: var(--text-dim); } .contract-preview-row b { color: var(--text); font-weight: 700; } .contract-preview-row.muted span, .contract-preview-row.muted b { color: var(--text-faint); } .contract-preview-row.cost b { color: var(--yellow); } .contract-preview-row .bad { color: var(--red); } .contract-preview-sep { height: 1px; background: var(--border); margin: 0.4rem 0; } /* ====== News layout (feed + poll sidebar) ====== */ .news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; } .news-feed { min-width: 0; } .news-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.5rem; /* Без min-width:0 grid-колонка распирается nowrap-текстом превью и сайдбар становится шире ленты. */ min-width: 0; } .news-side > * { min-width: 0; } /* Карточка "Форум" на главной: последние темы с сообщениями. */ .home-forum-list { display: flex; flex-direction: column; } .home-forum-row { padding: 0.55rem 0; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); cursor: pointer; } .home-forum-row:first-child { border-top: none; padding-top: 0; } .home-forum-row:hover .home-forum-topic { color: var(--accent); } .home-forum-topic { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-forum-meta { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.15rem; } /* Специфичнее .forum-unread — иначе color этого правила перебил бы подсветку. */ .home-forum-topic.forum-unread { color: var(--accent); font-weight: 800; } .home-forum-meta b { color: var(--accent-3); font-weight: 600; } .home-forum-preview { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Свёрнутый опрос: после голосования карточка ужимается в одну строку. Только на мобиле (<=900px) — на десктопе колонка всегда полная. */ .poll-collapsed { display: none; } .poll-collapse-btn { display: none; } @media (max-width: 900px) { .poll-wrap.is-collapsed .poll-full { display: none; } .poll-wrap.is-collapsed .poll-collapsed { display: block; } .poll-collapse-btn { display: inline; } /* На узком экране карточка форума короче: 3 темы вместо 5. */ .home-forum-row:nth-child(n+4) { display: none; } } .poll-collapsed { padding: 0.8rem 1rem; cursor: pointer; } .poll-collapsed-row { display: flex; align-items: center; gap: 0.5rem; } .poll-collapsed-label { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); } .poll-collapsed-q { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .poll-collapsed:hover .poll-collapsed-q { color: var(--text); } .poll-collapsed-chevron { flex: 0 0 auto; font-size: 0.75rem; color: var(--text-faint); } .poll-collapse-btn { background: none; border: none; padding: 0; margin-left: auto; font-size: 0.78rem; color: var(--text-dim); cursor: pointer; } .poll-collapse-btn:hover { color: var(--text); } .news-list { display: flex; flex-direction: column; gap: 0.85rem; } .news-list-pinned { margin-bottom: 0.85rem; } .news-item { padding: 0.9rem 1.1rem; } .news-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.45rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .news-item-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -0.01em; } .news-item-date { color: var(--text-faint); font-size: 0.8rem; white-space: nowrap; font-family: 'JetBrains Mono', monospace; } .news-item-body { color: var(--text); line-height: 1.55; white-space: pre-wrap; font-size: 0.92rem; } .news-toggle { margin-top: 0.5rem; background: transparent; border: none; color: var(--accent, #4ea1ff); cursor: pointer; padding: 0.25rem 0; font-size: 0.9rem; font-weight: 500; } .news-toggle:hover { text-decoration: underline; } /* ====== Реакции и комментарии к новостям ====== */ .news-social { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .news-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .reaction-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.95rem; cursor: pointer; transition: background .12s, border-color .12s, transform .08s; } .reaction-btn:hover:not(:disabled) { background: var(--surface2); transform: translateY(-1px); } .reaction-btn:disabled { opacity: 0.6; cursor: default; } .reaction-btn.mine { background: rgba(59,130,246,0.16); border-color: var(--accent); color: var(--text); } .reaction-emoji { line-height: 1; } .reaction-count { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; } .news-comments-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 0.85rem; cursor: pointer; } .news-comments-toggle:hover, .news-comments-toggle.open { background: var(--surface2); color: var(--text); } .news-comments { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; } .news-comments-empty { color: var(--text-faint); font-size: 0.88rem; margin: 0; } .news-comment { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; } .news-comment-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .news-comment-author { font-weight: 700; font-size: 0.85rem; color: var(--text); } .news-comment-time { font-size: 0.75rem; color: var(--text-faint); } .news-comment-del { margin-left: auto; background: transparent; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.85rem; padding: 0 0.2rem; } .news-comment-del:hover { color: var(--red); } .news-comment-body { color: var(--text); font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; } .news-comment-form { display: flex; flex-direction: column; gap: 0.4rem; } .news-comment-input { width: 100%; padding: 0.55rem 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 0.9rem; resize: vertical; min-height: 110px; max-height: 60vh; field-sizing: content; } .news-comment-input:focus { outline: none; border-color: var(--accent); } .news-comment-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; } .news-comment-error { color: var(--red); font-size: 0.82rem; margin-right: auto; } /* ====== Ростер на мобиле: таблица → компактные карточки ====== */ /* Разделитель строк мобильной карточки. На десктопе таблицы он не нужен — прячем, чтобы не появлялась лишняя колонка. В мобильном блоке ниже он оживает как flex-перенос на всю ширину. */ td.card-break { display: none; } @media (max-width: 900px) { .roster-mobile-cards thead { display: none; } .roster-mobile-cards td.card-break { display: block; } .roster-mobile-cards, .roster-mobile-cards tbody, .roster-mobile-cards tfoot { display: block; width: 100%; } .roster-mobile-cards tfoot td { display: block; border: none; padding-top: 0.5rem; } .roster-mobile-cards tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.55rem 0.7rem; margin-bottom: 0.45rem; background: var(--block-solid, var(--surface)); border: 1px solid rgba(155,140,220,0.19); border-radius: 10px; } .roster-mobile-cards tbody td { display: inline-flex; align-items: center; gap: 0.25rem; border: none; padding: 0; font-size: 0.85rem; } /* подпись из data-label перед значением (Возр/Физ/Мор/OVR) */ .roster-mobile-cards tbody td[data-label]::before { content: attr(data-label); color: var(--text-faint); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; } /* ── Первая строка: № · Имя (обрезается) · Позиция · OVR ── */ /* flex-basis, а не width: в карточке ячейка — flex-элемент, и без фиксированного базиса имя съезжало вслед за длиной номера. */ .roster-mobile-cards td.cell-num { order: 1; flex: 0 0 1.5rem; min-width: 0; color: var(--text-faint); font-weight: 700; font-variant-numeric: tabular-nums; } /* Имя обрезается многоточием, чтобы позиция и OVR не уезжали при длинных именах (flex:1 1 0 + min-width:0 по всей цепочке). */ .roster-mobile-cards td.cell-name { order: 2; flex: 1 1 0; min-width: 0; font-weight: 700; font-size: 0.98rem; } .roster-mobile-cards td.cell-name .nation-cell { flex: 1 1 auto; min-width: 0; max-width: 100%; } .roster-mobile-cards td.cell-name .name-text { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .roster-mobile-cards td.cell-pos { order: 3; flex: 0 0 auto; } .roster-mobile-cards td.ovr-cell { order: 4; flex: 0 0 auto; font-weight: 800; } /* Принудительный перенос: всё, что дальше, уходит на вторую строку независимо от ширины экрана и числа позиционных бейджей. */ .roster-mobile-cards td.card-break { order: 5; flex-basis: 100%; height: 0; padding: 0; margin: 0; } /* ── Вторая строка: Возр · Физ · Мораль · Статусы ── */ /* Статусы больше НЕ занимают отдельную строку — встают в конец второй, переносятся только если реально не влезли. Пустой статус схлопывается. */ .roster-mobile-cards td[data-label="Возр"] { order: 6; } .roster-mobile-cards td[data-label="Физ"] { order: 7; } .roster-mobile-cards td[data-label="Мор"] { order: 8; } .roster-mobile-cards td.cell-status { order: 9; } .roster-mobile-cards td.cell-status:empty { display: none; } /* ── Третья строка (опционально): кнопка действия (Вызов игроков) ── */ .roster-mobile-cards td.cell-action { order: 10; flex-basis: 100%; justify-content: flex-end; margin-top: 0.3rem; } } .news-body { width: 100%; padding: 0.65rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 0.95rem; resize: vertical; min-height: 110px; outline: none; } .news-body:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .news-body-preview { color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; max-height: 10em; overflow: hidden; position: relative; } /* Панель фильтров новостей: категории — одной строкой с горизонтальным скроллом (не переносятся уродливо на мобиле), действия — строкой ниже. */ .news-filter-bar { display: flex; flex-direction: column; gap: 0.6rem; } .news-cat-scroll { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .news-cat-scroll::-webkit-scrollbar { display: none; } .news-cat-scroll > * { flex-shrink: 0; } .news-cat-label { color: var(--text-dim); } .news-filter-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .news-filter-actions .btn { margin-left: auto; } /* Отступ между новостями (несколько новостей в одном ИД иначе слипаются — у .card нет собственного margin). */ .news-item { margin-bottom: 0.7rem; } /* ====== Pagination ====== */ .pagination { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 1rem; flex-wrap: wrap; } .page-btn { min-width: 34px; padding: 0.35rem 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .page-btn:hover:not(:disabled):not(.active) { background: var(--surface2); color: var(--text); border-color: var(--border-strong); } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-btn.active { background: var(--gradient-soft); color: #fff; border-color: var(--accent); } .page-gap { color: var(--text-faint); padding: 0 0.15rem; } .page-btn-arrow { min-width: 38px; } /* Строка пагинации всегда в одну линию: «← 1 … 4 5 6 … 20 →» — до 7 цифр + 2 стрелки. */ @media (max-width: 600px) { .pagination { gap: 0.25rem; flex-wrap: nowrap; } .page-btn { min-width: 30px; padding: 0.35rem 0.45rem; } .page-btn-arrow { min-width: 34px; } } /* ====== Poll widget ====== */ .poll-card { padding: 0.9rem 1rem; } .poll-question { font-size: 1rem; font-weight: 800; margin-bottom: 0.75rem; color: var(--text); } .poll-options { display: flex; flex-direction: column; gap: 0.4rem; } .poll-option { position: relative; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; overflow: hidden; transition: border-color .12s, background .12s; } .poll-option:hover { border-color: var(--border-strong); background: var(--surface2); } .poll-option.mine { border-color: var(--accent); background: var(--accent-soft); } .poll-option-bar { position: absolute; top: 0; left: 0; bottom: 0; background: var(--gradient-soft); z-index: 0; transition: width .35s ease; } .poll-option-content { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .poll-option-text { color: var(--text); font-weight: 600; font-size: 0.9rem; } .poll-option-pct { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .poll-footer { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.82rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* ====== Poll admin ====== */ .poll-option-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; margin-bottom: 0.35rem; } .active-tag { display: inline-block; padding: 0.1rem 0.5rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; background: linear-gradient(135deg, rgba(52,211,153,0.22), rgba(16,185,129,0.12)); color: var(--green); border: 1px solid rgba(52,211,153,0.4); border-radius: 999px; margin-left: 0.5rem; } @media (max-width: 900px) { .news-layout { grid-template-columns: 1fr; } /* Опрос (сайдбар) поднимаем НАД лентой новостей — иначе при стэке в одну колонку он уезжает в самый низ после всех новостей и его не видят. */ .news-side { position: static; order: -1; } .news-feed { order: 0; } } /* ===== SeasonStateBadge — однострочная плашка в центре navbar ===== */ .season-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); white-space: nowrap; transition: background .15s, border-color .15s; } .season-badge:hover { background: var(--surface2); border-color: var(--border-strong); } .season-badge-icon { font-size: 1.15rem; filter: drop-shadow(0 0 6px rgba(34,211,238,0.5)); line-height: 1; } .season-badge-day { font-size: 1rem; font-weight: 800; color: var(--accent-3); letter-spacing: 0.01em; } .season-badge-of { font-size: 0.82rem; color: var(--text-faint); font-weight: 600; } .season-badge-season { color: var(--text); font-weight: 700; font-size: 0.85rem; } .season-badge-phase { color: var(--text-dim); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } .season-badge-dot { color: var(--text-faint); font-size: 0.7rem; } /* Короткая дата «dd.MM» — только на мобиле (на десктопе показываем вербозную). */ .season-badge-date-short { display: none; } /* Средние экраны: компактный режим — оставляем только «ИД X/78», прячем «Сезон N · Межсезонье». При max-width:1200px было display:none на всю плашку — теперь до 800px показываем сжатую, ниже скрываем целиком. */ @media (max-width: 1300px) { .season-badge-season, .season-badge-phase, .season-badge-dot { display: none; } .season-badge { gap: 0.35rem; padding: 0.4rem 0.8rem; } } /* Узкие экраны (мобилка) — прячем плашку целиком чтобы освободить место для меню и команды-селектора. */ @media (max-width: 800px) { .navbar { grid-template-columns: 1fr auto; } .navbar-center { display: none; } } /* Средние экраны: уменьшаем padding навбар-ссылок + сокращаем длинный текст. */ @media (max-width: 1000px) { .navbar-links .nav-link { padding: 0.4rem 0.6rem; font-size: 0.85rem; } .nav-full { display: none; } .nav-short { display: inline; } } /* ===== Formation picker ===== */ .formation-pick-btn { width: 100%; padding: 0.55rem 0.8rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; text-align: center; } .formation-pick-btn:hover { background: var(--surface2); border-color: var(--accent); } /* Поле «Название» в карточке тактики — выровнять под размер дропдауна */ .squad-settings .field input { padding: 0.55rem 0.8rem; font-size: 0.88rem; border-radius: 8px; } .modal-sub { color: var(--accent); font-size: 0.82rem; font-weight: 600; margin-left: 0.75rem; opacity: 0.85; } .modal-formation-picker { /* override modal-box defaults */ max-width: 1080px !important; width: min(1080px, 96vw) !important; overflow: hidden !important; padding: 0 !important; display: flex; flex-direction: column; max-height: 92vh; } .modal-formation-picker .modal-header { padding: 1.1rem 3rem 1rem 1.5rem; /* right gap for ✕ button */ border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-formation-picker .formation-picker-body { display: grid; grid-template-columns: 510px auto; gap: 1.25rem; /* Раньше было фиксированное height:600px → на ноут-экранах ~720px тело пропихивало футер «Применить» за пределы max-height:92vh, и кнопка не было видна. Теперь шринкаем (flex:1 в колонке flex), но не растём выше 600px. */ min-height: 0; flex: 1 1 auto; max-height: 600px; overflow: hidden; padding: 1.25rem 1.5rem; justify-content: start; } .modal-formation-picker .apply-modal-actions { padding: 0.75rem 1.5rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; } .formation-list { display: flex; flex-direction: column; gap: 0.5rem; padding-right: 0.6rem; border-right: 1px solid var(--border); overflow: hidden; } .formation-group-divider { height: 1px; background: var(--border); margin: 0.25rem 0; } .formation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } /* Кнопка тактики — стиль под .tactic-tab (как табы тактик в сайдбаре страницы) */ .formation-list-item { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); padding: 0.5rem 0.6rem; border-radius: 8px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .formation-list-item:hover { background: var(--surface2); color: var(--text); } .formation-list-item.active { background: var(--gradient-soft); color: #fff; border-color: var(--border-strong); box-shadow: inset 0 0 0 1px var(--accent); } /* Пич справа — соотношение 4:5 как у основного, заполняет высоту тела модалки */ .modal-formation-picker .formation-preview-pitch { height: 100%; width: auto; aspect-ratio: 4 / 5; } /* Мобайл: окно выбора схемы — в одну колонку со скроллом. Иначе список схем (фикс. 510px) не влезал, обрезался без прокрутки, а превью-поле сжималось в ноль. Теперь список сверху (скроллится), поле — снизу по центру. */ @media (max-width: 900px) { .modal-formation-picker .formation-picker-body { grid-template-columns: 1fr; max-height: none; overflow-y: auto; gap: 1rem; } .formation-list { border-right: none; padding-right: 0; overflow: visible; } .modal-formation-picker .formation-preview-pitch { height: auto; width: min(62%, 230px); margin: 0 auto; } } /* Превью совпадает с .formation-pitch (полосы, штрафные не рисуются — только рамка и средняя линия) */ .formation-preview-pitch { position: relative; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 28px, rgba(0,0,0,0.05) 28px, rgba(0,0,0,0.05) 56px), radial-gradient(ellipse at center, #15803d 0%, #064e3b 100%); box-shadow: var(--shadow), inset 0 0 60px rgba(0,0,0,0.35); border: 1px solid var(--border-strong); } .formation-preview-pitch::before { content: ''; position: absolute; inset: 4%; border: 2px solid rgba(255,255,255,0.3); border-radius: 4px; pointer-events: none; } .formation-preview-pitch::after { content: ''; position: absolute; top: 50%; left: 4%; right: 4%; height: 2px; background: rgba(255,255,255,0.3); } .preview-slot { position: absolute; transform: translate(-50%, -50%); width: 40px; text-align: center; user-select: none; pointer-events: none; } .preview-slot-avatar { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto; background: rgba(255,255,255,0.12); border: 2px dashed rgba(255,255,255,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.6rem; } /* .preview-slot-label / .preview-slot-pos удалены — подписи под кружком в превью тактики убраны (позиция написана прямо в кружке). */ /* Мобилка: кружки игроков поменьше — на узком поле 38px великоваты и наезжают на подписи. Действует и на поле «Состав на матч» (.slot), и на превью в форме выбора тактики (.preview-slot). Блок стоит ПОСЛЕ базовых наборов (.slot ~2113, .preview-slot ~6628) — иначе при одинаковой специфичности базовое правило, что ниже в файле, перебило бы мобильное. */ @media (max-width: 700px) { /* Поле «Состав на матч» — кружки 30px (подписи остаются). */ .slot { width: 46px; } .slot-avatar { width: 30px; height: 30px; font-size: 0.6rem; border-width: 1.5px; } .slot-label { font-size: 0.56rem; margin-left: -8px; margin-right: -8px; } .slot-pos { font-size: 0.5rem; padding: 0 4px; } /* Форма выбора тактики — кружки ещё меньше (подписи под ними убраны, позиция написана прямо в кружке). */ .preview-slot { width: 28px; } .preview-slot-avatar { width: 24px; height: 24px; font-size: 0.5rem; border-width: 1px; } } /* ===== MatchView replay layout ===== Слева — текстовая трансляция (полная высота пича), в центре — пич, справа — командная сводная статистика. Внизу на всю ширину — две таблицы per-player (home + away). */ /* /match/{id} — на всех трёх табах (pitch / events / stats) даём .main-content больше воздуха. .match-view-wide — обёртка вокруг всего экрана матча, ставится в MatchView.razor. */ .main-content:has(.match-view-wide) { max-width: 1600px; } /* Шапка и tabs матча — центрируются по всей ширине .main-content, чтобы счёт и переключатели визуально стояли посередине, а не у левого края. */ .match-view-header { text-align: center; } .match-view-tabs { justify-content: center; } /* Карточка матч-статистики (таб «Статистика») — компактная 3-колоночная таблица, выглядит лучше в узкой центрированной колонке, чем растянутая на всю ширину. */ /* Подложка общей статистики — на всю ширину (как таблицы игроков ниже). Саму таблицу держим центрированной прежней шириной (текст не растягиваем), и добавляем отступ снизу, чтобы верхний блок не слипался с нижними. */ .match-stats-card { margin: 0 0 1rem; } .match-stats-card table { width: 100%; table-layout: fixed; } /* Те же пропорции, что у боковой таблицы на «На поле»: значения по краям, подпись показателя посередине. Раньше здесь стоял max-width 720px c центрированием — в широкой карточке таблица висела зажатой посередине, а колонка «Показатель» распирала соседние. */ .match-stats-card .player-table th, .match-stats-card .player-table td { text-align: center; } .match-stats-card .player-table th:first-child, .match-stats-card .player-table td:first-child, .match-stats-card .player-table th:last-child, .match-stats-card .player-table td:last-child { width: 30%; } .match-stats-card .player-table th:nth-child(2), .match-stats-card .player-table td:nth-child(2) { width: 40%; } /* Layout через grid-template-areas: устойчивее чем явные grid-column/row, потому что при смене template-columns в hide-2d Side явно остаётся в правильной колонке (а не уезжает в implicit grid). */ .match-replay-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr) 320px; /* Первая строка — ЖЁСТКИЙ потолок (--pitch-max-h), а не auto: у auto-трека высота считается по max-content потомков, и на некоторых движках она игнорировала max-height ленты, если событие оказывалось длинным (перенос на 2-3 строки) — карточка "прыгала" по высоте вместе с текстом. minmax с фиксированным верхом гарантирует стабильность трека независимо от содержимого; сама лента скроллится внутри (overflow-y на .match-replay-feed). */ grid-template-rows: minmax(0, var(--pitch-max-h, 560px)) auto auto; /* side снова спанит строки 1-2 (одна карточка вровень с полем+плеером) — без span столбец под ней в строке controls пустовал дырой (Влад: "место где плеер пустеет справа"). Раздувание строки controls под "хвост" статистики (из-за чего было-то убрано) лечится не отказом от span, а min-height:0 на .match-replay-side ниже — тот же приём, что у ленты слева: без него grid считает "естественный" (по контенту) размер даже для overflow:auto элемента и всё равно раздувает трек. */ grid-template-areas: "feed main side" "controls controls side" "players players players"; gap: 1rem; align-items: stretch; } .match-replay-feed { grid-area: feed; overflow-y: auto; min-height: 0; /* Общий потолок с полем (--pitch-max-h, задан на .match-replay-layout) — раньше строка грида была auto-высоты и росла вместе с числом событий в ленте по ходу матча, из-за чего поле "прыгало" по вертикали. Теперь лента просто скроллится внутри того же потолка, что и канвас. */ max-height: var(--pitch-max-h, 560px); } .match-replay-main { grid-area: main; display: flex; align-items: center; justify-content: center; } .match-replay-main > div { width: 100%; } .match-replay-side { grid-area: side; /* min-height:0, БЕЗ max-height — карточка растягивается (align-items: stretch) на всю отведённую площадь (обе строки, row1+gap+row2), а не на свой min-content, и не раздувает вторую строку через span. Если статистика когда-нибудь станет длиннее этой площади — скролл внутри. */ min-height: 0; overflow-y: auto; } .match-replay-controls-bar { grid-area: controls; align-self: start; } .match-replay-layout.replay-hide-2d { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "feed side" "controls side" "players players"; } .match-replay-side .player-table th, .match-replay-side .player-table td { white-space: nowrap; text-align: center; } .match-replay-side .player-table { table-layout: fixed; } .match-replay-side .player-table th:first-child, .match-replay-side .player-table td:first-child, .match-replay-side .player-table th:last-child, .match-replay-side .player-table td:last-child { width: 30%; } .match-replay-side .player-table th:nth-child(2), .match-replay-side .player-table td:nth-child(2) { width: 40%; } .match-replay-players { grid-area: players; display: grid; /* minmax(0, 1fr), НЕ голый 1fr: у 1fr неявный min-width:auto, и широкая 13-колоночная таблица игрока (её собственный .stats-table-scroll) распирала колонку сетки шире экрана вместо того, чтобы скроллиться внутри своей карточки — на 14" ноутбуках (~1280-1366px) вторая таблица либо чуть-чуть, либо (на вкладке «Статистика», где эта сетка не зажата между двумя 320px-колонками матч-вьюшки) сильно вылезала за подложку. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .match-replay-team-stats .player-table th, .match-replay-team-stats .player-table td { text-align: center; padding: 0.3rem 0.25rem; } .match-replay-team-stats .player-table td:nth-child(2) { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; } /* Длинные названия команд (Bayer 04 Леверкузен / Боруссия Менхенгладбах и т.п.) уезжали за границу карточки из-за letter-spacing:2px+uppercase на .card-title. Сжимаем интервал, разрешаем перенос — теперь имя разворачивается на две строки, если не помещается. */ .match-replay-team-stats .card-title { letter-spacing: 1px; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } /* Таблица статы игроков — 13 колонок. На телефон не влезает: даём ей жить в натуральную ширину и скроллиться по горизонтали ВНУТРИ карточки (а не распирать страницу). Имя обрезается многоточием (max-width td:nth-child(2) выше), остальное — узкие числовые колонки. */ .stats-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .stats-table-scroll > table { min-width: max-content; } .stats-table-scroll th, .stats-table-scroll td { white-space: nowrap; } .match-replay-controls { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; } .match-replay-events { list-style: none; padding: 0; margin: 0; } .match-replay-events li { display: flex; gap: 0.3rem; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .match-replay-events li:last-child { border-bottom: none; } .match-replay-events .ev-min { font-family: 'JetBrains Mono', monospace; min-width: 2.1rem; color: var(--text-dim); flex-shrink: 0; } .match-replay-events .ev-icon { width: 1.2rem; text-align: center; flex-shrink: 0; } .match-replay-events .ev-text { line-height: 1.45; } /* Промежуточный layout 1201–1700: события слева, поле справа, общая статистика уезжает на всю ширину под поле. 3-колоночный режим оставлен только для очень широких мониторов (>1700px) — иначе поле зажато между двумя 320px-колонками и выглядит крошечным. */ @media (min-width: 1201px) and (max-width: 1700px) { .match-replay-layout { grid-template-columns: 320px minmax(0, 1fr); /* Тот же жёсткий потолок первой строки, что и в 3-колоночном режиме — см. комментарий там. */ grid-template-rows: minmax(0, var(--pitch-max-h, 560px)) auto auto auto; grid-template-areas: "feed main" "controls controls" "side side" "players players"; } .match-replay-layout.replay-hide-2d { grid-template-columns: minmax(0, 1fr); grid-template-areas: "feed" "controls" "side" "players"; } } /* На узких экранах — стэкаем в одну колонку. */ @media (max-width: 1200px) { .match-replay-layout { /* minmax(0,1fr) вместо 1fr: у 1fr неявный min-width:auto, и широкий контент (канвас поля, плотные таблицы) распирал колонку шире экрана → весь блок уезжал за край. rows:auto — снимаем десктопный пин 540px с ленты, чтобы на телефоне она была по контенту. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "main" "controls" "feed" "side" "players"; } .match-replay-layout.replay-hide-2d { /* ОБЯЗАТЕЛЬНО переопределяем колонки: базовое .replay-hide-2d (десктоп) задаёт «minmax(0,1fr) 320px» и по специфичности (0,2,0) перебивает мобильный .match-replay-layout (0,1,0). Без этой строки при «Скрыть 2D» на телефоне оставались 2 колонки — 320px съедала почти всю ширину, контент вжимался в полоску слева (bug72). */ grid-template-columns: minmax(0, 1fr); grid-template-areas: "feed" "controls" "side" "players"; } .match-replay-players { grid-template-columns: minmax(0, 1fr); } /* Поле держит пропорцию 800/520 (aspect-ratio на самом canvas) и просто ужимается по ширине контейнера. min-height не задаём — иначе на телефоне канвас распирало по вертикали в почти квадрат. */ .match-replay-feed { height: 15rem; max-height: none; overflow-anchor: none; } .match-replay-layout.replay-hide-2d .match-replay-feed { height: 30rem; } } /* ===== Тепловые карты матча (вкладка «Карта») ===== */ .heat-controls { margin-bottom: 1rem; max-width: 320px; } .heat-boards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .heat-board-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; font-weight: 700; font-size: 0.9rem; } .heat-board-dir { font-size: 0.72rem; font-weight: 600; letter-spacing: 1px; color: var(--text-dim); white-space: nowrap; } .heat-pitch { display: block; width: 100%; height: auto; aspect-ratio: 120 / 80; border-radius: 0.5rem; } /* Газон фиксированно зелёный в обеих темах: шкала «зелёный → жёлтый → красный» читается только на нём, на тёмной подложке горячее и холодное сливаются. */ .heat-turf { fill: #4e8f3e; } .heat-lines * { fill: none; stroke: #ffffff; stroke-width: 0.45; opacity: 0.55; } .heat-spots circle { fill: #ffffff; opacity: 0.55; } .heat-empty { color: var(--text-dim); margin: 0; } @media (max-width: 900px) { /* Два поля в ряд на телефоне дают по 150px на поле — пятна перестают читаться. Ниже 900px раскладываем в колонку. */ .heat-boards { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .heat-controls { max-width: none; } } /* ===== Полноэкранный вьювер реплея ===== Три статичных блока фиксированной геометрии: события | поле | статистика, снизу плеер. Никаких скроллов: размеры блоков задаёт сетка, шрифты считаются от высоты сцены (cqh), строки статистики и слоты событий делят высоту поровну. */ .replay-fs { position: fixed; inset: 0; z-index: 1500; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; color: var(--text); background: #0b1020; } .replay-fs::backdrop { background: #0b1020; } .replay-fs-stage { position: absolute; inset: 0; container-type: size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26%); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.4rem; padding: 0.4rem 0.6rem; box-sizing: border-box; font-size: 0.7rem; font-size: clamp(0.5rem, 3.4cqh, 0.85rem); } /* Телефон в портрете → форсим горизонталь: оверлей повёрнут на 90°, размеры свопнуты. На десктопе (широкое окно) не крутим. */ @media (orientation: portrait) and (max-width: 900px) { .replay-fs-stage { top: 0; left: 100vw; width: 100vh; height: 100vw; width: 100dvh; height: 100dvw; transform: rotate(90deg); transform-origin: top left; } } .replay-fs-events, .replay-fs-stats, .replay-fs-pitch { min-height: 0; min-width: 0; overflow: hidden; box-sizing: border-box; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.4rem; } .replay-fs-events { grid-column: 1 / -1; display: flex; flex-direction: column; height: 4.2em; padding: 0.2rem 0.5rem; } .replay-fs-ev { flex: 1 1 0; min-height: 0; white-space: nowrap; display: flex; align-items: center; gap: 0.3rem; line-height: 1.15; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); } .replay-fs-ev:last-child { border-bottom: none; } .replay-fs-ev:nth-child(2) { opacity: 0.7; } .replay-fs-ev:nth-child(3) { opacity: 0.45; } .replay-fs-ev .ev-min { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); flex-shrink: 0; } .replay-fs-ev .ev-icon { flex-shrink: 0; } .replay-fs-ev .ev-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .replay-fs-pitch { display: flex; align-items: center; justify-content: center; position: relative; padding: 0.3rem; } .replay-fs-pitch canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; aspect-ratio: 800 / 520; border-radius: 0.4rem; display: block; } .replay-fs-stats { display: flex; flex-direction: column; padding: 0.25rem 0.4rem; } .replay-fs-stats-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; margin-bottom: 0.15rem; } .replay-fs-stats-head .team-crest-sm { width: 1.7em; height: 1.7em; } .replay-fs-score { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.25em; color: var(--accent); } .replay-fs-stat-list { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; } .replay-fs-stat-row { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: 0.2rem; line-height: 1; font-size: 0.9em; } .replay-fs-stat-row .h { text-align: center; font-weight: 700; } .replay-fs-stat-row .a { text-align: center; font-weight: 700; } .replay-fs-stat-row .l { text-align: center; color: var(--text-dim); font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .replay-fs-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4rem; } .replay-fs-min { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-size: 0.9em; white-space: nowrap; } .replay-fs-seek { flex: 1 1 auto; min-width: 60px; } /* Метки событий над полосой перемотки (голы, карточки, замены). */ .replay-seek-wrap { position: relative; padding-top: 1.15rem; } .replay-seek-marks { position: absolute; left: 0.45rem; right: 0.45rem; top: 0; height: 1.1rem; } .replay-seek-mark { position: absolute; top: 0; transform: translateX(-50%); padding: 0; border: 0; background: none; font-size: 0.8rem; line-height: 1; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); transition: transform 0.12s ease; } .replay-seek-mark:hover { transform: translateX(-50%) scale(1.35); } /* ===== Match-table (расширение .player-table для матч-листов) ===== */ .match-table th.num, .match-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; } .match-table td.score-cell { font-weight: 800; } .match-table td.score-cell.scheduled { color: var(--text-faint); font-weight: 400; } .match-table tr.today { background: var(--surface-strong); } .match-table tr.today td:first-child { box-shadow: inset 3px 0 0 var(--accent-3); } .match-table tr.scheduled td { color: var(--text-dim); } .match-table .mine-team { color: var(--accent-3); font-weight: 700; } .match-table .result-win { color: var(--green); font-weight: 700; } .match-table .result-loss { color: var(--red); font-weight: 700; } .match-table .result-draw { color: var(--yellow); font-weight: 700; } /* Кликабельный счёт в Календаре — открывает /match/{id}. Наследует цвет от .result-win/loss/draw на td.score-cell. */ .match-table .score-link { background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; font-family: 'JetBrains Mono', monospace; } .match-table .score-link:hover { text-decoration: underline; } .match-kind-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface); border: 1px solid var(--border); } /* Пометка «команда играла автосоставом» (бандл не выставлен/протух). */ /* ИД матча красным = команда играла автосоставом (см. Calendar.razor). */ .cell-gd.auto-id { color: #ef4444; font-weight: 700; } .match-kind-badge.league { color: var(--accent); border-color: var(--accent); } .match-kind-badge.cup { color: var(--yellow); border-color: var(--yellow); } .match-kind-badge.eurocup_group, .match-kind-badge.eurocup_ko { color: var(--accent-2); border-color: var(--accent-2); } .match-kind-badge.national_team { color: var(--accent-3); border-color: var(--accent-3); } .match-kind-badge.friendly { color: var(--text-dim); } .match-kind-badge.winter_cup, .match-kind-badge.summer_cup { color: var(--green); border-color: var(--green); } /* Туры лиги — статичная ширина колонок, чтобы при переключении между турами таблица не «прыгала» из-за разной длины имён команд. */ .tours-table { table-layout: fixed; width: 100%; } .tours-table td, .tours-table th { overflow: hidden; } .tours-table .opponent-cell { max-width: 100%; } .tours-table .opponent-cell > span:not([class]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Хвостик под счётом в кубковых матчах: «пен. 4:3» / «доп. время». */ .score-suffix { font-size: 0.66rem; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } /* Кнопка раунда кубка (1/16 / 1/8 / Финал) — шире чем числовая 36×36 для лиги. */ .round-btn[data-tooltip*="/"], .round-btn { /* default стиль уже задан */ } .round-selector .round-btn { min-width: 56px; width: auto; padding: 0 0.65rem; } /* Дом / в гостях — пилюля во второй половине .match-table */ .venue-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface); border: 1px solid var(--border); } .venue-badge.home { color: var(--green); border-color: var(--green); white-space: nowrap; } .venue-badge.away { color: var(--accent-3); border-color: var(--accent-3); white-space: nowrap; } .venue-badge.neutral { color: var(--yellow); border-color: var(--yellow); white-space: nowrap; } /* Календарь (таблица): плашки «Турнир» и «Поле» одной ширины — под самую длинную подпись («Summer Cup», «В гостях»), а не по длине слова. */ @media (min-width: 901px) { .cell-kind .match-kind-badge, .cell-venue .venue-badge { display: block; box-sizing: border-box; text-align: center; white-space: nowrap; } .cell-kind .match-kind-badge { width: 9em; } .cell-venue .venue-badge { width: 7.6em; } } /* ====== Календарь → вкладка «Следующий матч» ====== */ /* .card сам по себе не флекс-контейнер (только padding/radius) — gap тут был бы no-op. Явно делаем колонку, иначе строки меты слипаются без отступа (на /match те же строки разнесены inline margin-top). */ .next-match-card { display: flex; flex-direction: column; gap: 0.45rem; } .next-match-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; color: var(--text-dim); font-size: 0.85rem; text-align: center; } .next-match-meta .tournament-tier { font-size: 0.7rem; } .next-match-meta .tournament-name { font-size: 0.85rem; color: var(--text); } /* Общая сетка «домашние | vs | гости», разделяемая шапкой с гербами и строками травм/дисквалификаций ниже — так обе половины таблицы статуса гарантированно стоят строго под своими гербами (это не две независимые раскладки, которые могло бы разъехать). */ .next-match-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 2.5rem; row-gap: 0.5rem; margin-top: 0.5rem; } .next-match-team { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 0.6rem 1.1rem; cursor: pointer; color: inherit; font-family: inherit; } .next-match-crest { width: 56px; height: 56px; object-fit: contain; } .next-match-team-name { font-weight: 700; text-align: center; } .team-form { display: flex; gap: 0.3rem; margin-top: 0.5rem; } .form-dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--border); } .form-dot.win { background: var(--green); } .form-dot.loss { background: var(--red); } .form-dot.draw { background: var(--yellow); } /* Полоска формы на «Следующем матче» — скрыта под тумблером (спойлер), раскрывается влево/вправо от кнопки. */ .next-match-form-block { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 0.6rem; } .next-match-form-toggle { flex: 0 0 auto; background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); font: inherit; font-size: 0.74rem; font-weight: 600; padding: 0.22rem 0.9rem; cursor: pointer; } .next-match-form-toggle:hover, .next-match-form-toggle.open { color: var(--text); border-color: var(--text-faint); } .nm-form-wing { display: flex; } .nm-form-wing .team-form { margin-top: 0; } .nm-form-wing.left { justify-content: flex-end; animation: nm-wing-l .18s ease-out; } .nm-form-wing.right { justify-content: flex-start; animation: nm-wing-r .18s ease-out; } @keyframes nm-wing-l { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } @keyframes nm-wing-r { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 600px) { .next-match-form-block { gap: 0.4rem; } .nm-form-wing .team-form { gap: 0.22rem; } } .next-match-vs-label { align-self: center; color: var(--text-faint); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; } .next-match-status-title { grid-column: 1 / -1; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); text-align: center; color: var(--text-dim); font-size: 0.8rem; font-weight: 600; } .next-match-status-val { text-align: center; font-size: 0.85rem; } .nm-player-list { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .nm-player { display: inline-flex; align-items: center; gap: 0.35rem; } .nm-player .name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Отступ от карточки следующего матча — иначе слипается с историей встреч. */ @media (max-width: 600px) { .next-match-grid { column-gap: 0.75rem; } .next-match-team { padding: 0.5rem 0.4rem; } .next-match-team-name { font-size: 0.85rem; } .next-match-status-title, .next-match-status-val { font-size: 0.78rem; } } /* Команда-соперник в .match-table — герб + название одной строкой. */ .opponent-cell { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; background: transparent; border: none; padding: 0; color: inherit; font-family: inherit; font-size: inherit; text-align: left; } .opponent-cell.clickable { cursor: pointer; transition: color .15s; } .opponent-cell.clickable:hover { color: var(--accent-3); } .opponent-cell.clickable:hover .team-crest-fallback-sm { transform: scale(1.05); } /* Маркер «*» (как сноска) для клубов без менеджера в таблице чемпионата — намёк менеджерам что можно подать заявку. На менеджерских командах не рендерится. */ .team-free-mark { font-size: 0.85rem; color: var(--text-faint); margin-left: 0.1rem; cursor: help; } /* Зеркальный вариант для колонки «Хозяева» — герб справа от названия. */ .opponent-cell.home-side { flex-direction: row; } td[style*="text-align:right"] .opponent-cell { float: right; } /* Заглушка эмблемы для inline-таблиц (мини-вариант .player-photo — прямоугольник 22×22 со скруглением 4px, как в TeamRoster). */ .team-crest-fallback-sm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: rgba(255,255,255,0.92); font-size: 0.62rem; font-weight: 800; letter-spacing: -0.02em; background: var(--surface-strong); border: 1px solid var(--border-strong); text-shadow: 0 1px 2px rgba(0,0,0,0.4); flex-shrink: 0; transition: transform .15s; } /* ===== Матч-листы на мобиле: широкая таблица → карточки матчей ===== Общий «каркас» карточки для Календаря (.match-mobile-cards, матчи моей команды) и Расписания (.matchday-mobile-cards, все матчи дня). */ @media (max-width: 900px) { .match-mobile-cards thead, .matchday-mobile-cards thead { display: none; } .match-mobile-cards, .match-mobile-cards tbody, .matchday-mobile-cards, .matchday-mobile-cards tbody { display: block; width: 100%; } .match-mobile-cards tbody tr, .matchday-mobile-cards tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .match-mobile-cards tbody td, .matchday-mobile-cards tbody td { display: inline-flex; align-items: center; border: none; padding: 0; font-size: 0.85rem; } /* ── Календарь: дата · турнир … счёт / соперник / ИД · стадия ── */ .match-mobile-cards td.cell-date { order: 1; color: var(--text-dim); font-size: 0.8rem; } .match-mobile-cards td.cell-kind { order: 2; } .match-mobile-cards td.cell-score { order: 3; margin-left: auto; font-size: 1.05rem; } .match-mobile-cards td.cell-opp { order: 4; flex: 1 1 100%; font-weight: 700; } .match-mobile-cards td.cell-opp .opponent-cell { font-size: 0.95rem; } .match-mobile-cards td.cell-venue { order: 5; } .match-mobile-cards td.cell-gd { order: 6; color: var(--text-faint); font-size: 0.72rem; } .match-mobile-cards td.cell-gd.auto-id { color: #ef4444; } .match-mobile-cards td.cell-gd::before { content: "ИД\00a0"; } .match-mobile-cards td.cell-stage { order: 7; color: var(--text-faint); font-size: 0.72rem; } .match-mobile-cards td.cell-stage:not(:empty)::before { content: "· "; padding-right: 0.25rem; } /* Текущий ИД: подсветка всей карточки, а не псевдо-border на первой ячейке */ .match-mobile-cards tr.today { background: var(--surface-strong); box-shadow: inset 3px 0 0 var(--accent-3); } .match-mobile-cards tr.today td:first-child { box-shadow: none; } /* ── Расписание (матчи дня): хозяева — счёт — гости сверху, под ними мелкая мета «турнир · стадия». ── */ .matchday-mobile-cards td.cell-home { order: 1; flex: 1 1 0; min-width: 0; display: block; text-align: right; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .matchday-mobile-cards td.cell-score { order: 2; flex: 0 0 auto; justify-content: center; padding: 0 0.5rem; font-size: 1.05rem; } .matchday-mobile-cards td.cell-away { order: 3; flex: 1 1 0; min-width: 0; display: block; text-align: left; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .matchday-mobile-cards td.cell-kind { order: 4; } .matchday-mobile-cards td.cell-stage { order: 5; color: var(--text-faint); font-size: 0.72rem; } .matchday-mobile-cards td.cell-stage:not(:empty)::before { content: "· "; padding-right: 0.25rem; } } /* ===== 78-ИД сезонная сетка ===== */ .season-grid { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; } .season-grid-row { display: grid; grid-template-columns: 56px repeat(3, 1fr); gap: 0.4rem; } .season-grid-week { align-self: center; color: var(--text-dim); font-weight: 700; font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; } .season-grid-cell-head { text-align: center; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 800; padding-bottom: 0.25rem; } .season-grid-cell { appearance: none; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.5rem; min-height: 56px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; color: var(--text); transition: transform .15s, border-color .15s, background .15s; } .season-grid-cell:hover { border-color: var(--border-strong); transform: translateY(-1px); } .season-grid-cell .day-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.35rem; } .season-grid-cell .day-date { font-size: 0.68rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0.01em; } .season-grid-cell .day-num { font-size: 0.8rem; color: var(--text-dim); font-weight: 700; } .season-grid-cell .day-icon { font-size: 1.1rem; text-align: right; line-height: 1; } .season-grid-cell.current { border-color: var(--accent-3); box-shadow: 0 0 0 2px rgba(34,211,238,0.25); } .season-grid-cell.current .day-num { color: var(--accent-3); } .season-grid-cell.selected { background: var(--surface-strong); } .season-grid-cell.phase-preseason { background: rgba(34,211,238,0.06); } .season-grid-cell.phase-first_half { background: rgba(59,130,246,0.08); } .season-grid-cell.phase-winter_break { background: rgba(139,92,246,0.08); } .season-grid-cell.phase-second_half { background: rgba(59,130,246,0.08); } .season-grid-cell.phase-post_season { background: rgba(250,204,21,0.06); } .season-grid-legend { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; color: var(--text-dim); font-size: 0.78rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .legend-item { display: inline-flex; align-items: center; gap: 0.35rem; } .legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); } /* ===== Стрелочки прогресса/деградации стат игрока (PlayerCard) ===== Используем тот же стиль chevron что у sub-rules в Squad: один символ («›» одинарный / «»» двойной) + CSS-rotate. Up = rotate(-90deg) зелёный, down = rotate(90deg) красный. С одним символом нет проблемы сдвига, которая была у пары «»»/«▼▼». */ .stat-trend { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: 1.05rem; font-weight: 900; line-height: 1; user-select: none; } .stat-trend.trend-up-1, .stat-trend.trend-up-2 { color: var(--green); transform: rotate(-90deg); } .stat-trend.trend-down-1, .stat-trend.trend-down-2 { color: var(--red); transform: rotate(90deg); } /* ===== Round selector — горизонтальный список 30 кнопок туров ===== */ .round-selector { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.25rem 0; } /* Карточка-селектор стадии не должна липнуть к списку матчей под ней (лига / кубок / еврокубки — везде одинаково). */ .card:has(> .round-selector) { margin-bottom: 1rem; } .round-btn { appearance: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: transform .12s, border-color .12s, background .12s, color .12s; } .round-btn:hover { transform: translateY(-1px); border-color: var(--border-strong); color: var(--text); } .round-btn.played { color: var(--text); background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.35); } .round-btn.partial { color: var(--yellow); background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.35); } .round-btn.scheduled { /* default */ } .round-btn.active { color: var(--text); background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.20); } .round-btn:disabled { opacity: 0.4; cursor: not-allowed; } .round-btn:disabled:hover { transform: none; border-color: var(--border); color: var(--text-dim); } /* Плей-офф еврокубков/кубка: подписи "1/4"/"1/2"/"Финал" шире круглых цифр матчдеев — фиксированный квадрат 36px их обрезал бы. */ .round-selector-wide .round-btn { width: auto; min-width: 36px; padding: 0 0.7rem; } /* ===== Таблица чемпионата ===== */ .standings-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .standings-table th, .standings-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); } .standings-table th { text-align: left; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 800; color: var(--text-dim); } .standings-table .num { text-align: right; } .standings-table td.num { font-family: 'JetBrains Mono', monospace; } .standings-table .pos-col { width: 36px; text-align: center; color: var(--text-dim); } /* Цветовые зоны строк (см. EUROCUP_DESIGN §3) — фон + левая полоска. */ .standings-table tr.zone-ucl { background: rgba(34,211,238,0.08); box-shadow: inset 3px 0 0 var(--accent-3); } .standings-table tr.zone-uel { background: rgba(139,92,246,0.08); box-shadow: inset 3px 0 0 var(--accent-2); } .standings-table tr.zone-ucfl { background: rgba(52,211,153,0.07); box-shadow: inset 3px 0 0 var(--green); } .standings-table tr.zone-promote { background: rgba(52,211,153,0.10); box-shadow: inset 3px 0 0 var(--green); } .standings-table tr.zone-relegation { background: rgba(248,113,113,0.08); box-shadow: inset 3px 0 0 var(--red); } /* Свой клуб в длинной таблице турнира по заявкам — иначе его не найти глазами. */ .standings-table tr.my-team-row { background: rgba(245,158,11,0.10); box-shadow: inset 3px 0 0 var(--accent); } /* Турнирная таблица на мобиле: компактим, чтобы все 10 колонок влезли без горизонтального скролла; имя команды обрезаем многоточием. Касается лиг, кубков и еврокубков (общий класс .standings-table). */ @media (max-width: 900px) { .standings-table { font-size: 0.78rem; } .standings-table th, .standings-table td { padding: 0.4rem 0.18rem; } .standings-table th:first-child, .standings-table td:first-child { padding-left: 0.3rem; } .standings-table .pos-col { width: 18px; } .standings-table td:nth-child(2) .opponent-cell { max-width: 42vw; gap: 0.3rem; } .standings-table td:nth-child(2) .opponent-cell > span:not([class]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Телефон: в турнирной таблице убираем «забито/пропущено» — разница (±) их уже суммирует, а В/Н/П и Очки важнее. Освобождаем ширину под имя команды. */ @media (max-width: 600px) { .standings-table .col-goals { display: none; } } .standings-legend { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 0.25rem 0.25rem; border-top: 1px solid var(--border); margin-top: 0.5rem; color: var(--text-dim); font-size: 0.78rem; } .standings-legend .legend-item { display: inline-flex; align-items: center; gap: 0.4rem; } .legend-zone { display: inline-block; width: 14px; height: 14px; border-radius: 3px; } .legend-zone.zone-ucl { background: rgba(34,211,238,0.5); } .legend-zone.zone-uel { background: rgba(139,92,246,0.5); } .legend-zone.zone-ucfl { background: rgba(52,211,153,0.5); } .legend-zone.zone-promote { background: rgba(52,211,153,0.6); } .legend-zone.zone-relegation { background: rgba(248,113,113,0.55); } /* Заголовок страницы лиги: флаг + название с правильным gap. */ .league-title { display: inline-flex; align-items: center; gap: 0.65rem; } .league-title-name { line-height: 1; } /* ===== Кубок — bracket viz ===== */ .cup-bracket { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 0.5rem; } .cup-bracket-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 220px; } .cup-bracket-col-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--text-dim); margin-bottom: 0.25rem; } .cup-bracket-pair { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; } .cup-bracket-pair.tbd { opacity: 0.55; } .cup-bracket-pair.mine { border-color: var(--accent); } .cup-bracket-line { display: grid; grid-template-columns: 1fr 28px; align-items: center; } .cup-bracket-line.winner { font-weight: 700; color: var(--text); } .cup-bracket-line.loser { color: var(--text-faint); text-decoration: line-through; } .cup-bracket-score { text-align: right; font-family: 'JetBrains Mono', monospace; } .cup-bracket-meta { color: var(--text-faint); font-size: 0.72rem; } /* ===== Rules page ===== */ .rules-layout { display: grid; grid-template-columns: minmax(14rem, 16rem) 1fr; gap: 1rem; align-items: start; } .rules-toc { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .rules-toc-link { display: block; width: 100%; text-align: left; padding: 0.45rem 0.6rem; border-radius: 0.4rem; color: var(--text-dim); text-decoration: none; font-size: 0.92rem; background: none; border: none; cursor: pointer; font-family: inherit; } .rules-toc-link:hover { background: var(--surface-strong); color: var(--text); } .rules-toc-group { font-weight: 700; color: var(--text); margin-top: 0.35rem; } .rules-toc-child { padding-left: 1.5rem; font-size: 0.87rem; } .rules-content { display: flex; flex-direction: column; gap: 1rem; } .rules-content ul { padding-left: 1.2rem; } .rules-content li { margin: 0.25rem 0; } .rules-content p { margin: 0.5rem 0; line-height: 1.55; } .rules-bulk { display: flex; gap: 0.5rem; justify-content: flex-end; } /* Заголовок-переключатель: кнопка, но выглядит как строка заголовка. */ .rules-head { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0; background: none; border: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; } .rules-head-title { flex: 1; margin: 0; } .rules-chevron { color: var(--text-dim); font-size: 0.85rem; width: 1rem; flex: none; } .rules-head-count { color: var(--text-faint); font-size: 0.8rem; flex: none; } .rules-group-body { color: var(--text-dim); margin-bottom: 0.35rem; } .rules-sub { border-top: 1px solid var(--border); padding: 0.6rem 0 0.1rem; } .rules-head-sub { font-weight: 600; } .rules-sub.open .rules-head-sub { color: var(--accent, var(--text)); } .rules-sub-body { padding: 0.1rem 0 0.5rem 1.5rem; } @media (max-width: 900px) { .rules-layout { grid-template-columns: 1fr; } .rules-toc { position: static; } .rules-sub-body { padding-left: 0.6rem; } } /* ===== Player badges (PlayerBadges.razor) ===== */ /* Перечёркнутая иконка через ::after — для дисквалификаций. Эмодзи рендерится как обычно, поверх диагональная красная линия. */ .badge-strike { position: relative; display: inline-block; font-size: 0.95rem; line-height: 1; padding: 0 1px; } .badge-strike::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #ef4444; transform: rotate(-22deg); transform-origin: center center; border-radius: 1px; pointer-events: none; } /* Текст-чип для вызова в молодёжку */ .badge-text-chip { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; } .badge-youth { background: #92400e; color: #fef3c7; } /* ====== Search page ====== */ .search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .search-row { width: 100%; display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 0.4rem; color: var(--text); cursor: pointer; text-align: left; transition: background 0.15s; } .search-row:hover { background: var(--surface-hover); } .search-row-icon { font-size: 1.1rem; } .search-row-name { font-weight: 500; } .search-row-meta { color: var(--text-dim); font-size: 0.85rem; } .search-hint { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 0.5rem 0; font-style: italic; } /* ============================================================ FM26-style tiles (UI_GUIDELINES §3.7) Универсальная вложенная плашка для KPI/сниппетов. Кладётся ПОВЕРХ уже тёмной плашки (.player-hero / .tab-panel / .card), поэтому фон чуть светлее (--surface-elev). Группируем через .tile-grid — CSS Grid auto-fit с min ~150px. ============================================================ */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; align-content: start; } .tile { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 12px; padding: 0.65rem 0.85rem 0.7rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; transition: background .15s, border-color .15s, transform .15s; } .tile.clickable { cursor: pointer; } .tile.clickable:hover { background: var(--surface-strong); border-color: var(--border-strong); transform: translateY(-1px); } .tile-header { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .tile-value { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1.2; word-break: break-word; } .tile-value.bad { color: var(--red); } .tile-value.good { color: var(--green); } .tile-sub { font-size: 0.7rem; color: var(--text-faint); } /* Тонкая полоска слева для статусной окраски, без перекраски фона. */ .tile.accent { border-left: 3px solid var(--accent); padding-left: calc(0.85rem - 2px); } .tile.accent-success { border-left: 3px solid var(--green); padding-left: calc(0.85rem - 2px); } .tile.accent-danger { border-left: 3px solid var(--red); padding-left: calc(0.85rem - 2px); } .tile.accent-warn { border-left: 3px solid var(--yellow); padding-left: calc(0.85rem - 2px); } /* tile-text — для значений из обычного текста, а не моноширинных чисел (например, лейбл сезонной задачи). */ .tile.tile-text .tile-value { font-family: inherit; font-size: 0.92rem; font-weight: 700; line-height: 1.25; } /* Размерные модификаторы */ .tile.tile-wide { grid-column: span 2; } .tile.tile-tall { grid-row: span 2; } /* ====== Друзья (страница /friends) ====== */ .friends-list { display: flex; flex-direction: column; gap: 1.2rem; } .friend-card { max-width: 780px; } .friend-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .friend-logo { width: 72px; height: 72px; border-radius: 14px; border: 1px solid var(--border-strong); flex-shrink: 0; } .friend-title { min-width: 0; } .friend-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; } .friend-tagline { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.15rem; } .friend-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .friend-chip { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); } .friend-text { line-height: 1.6; margin: 0 0 1.1rem; } .friend-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; } @media (max-width: 600px) { .friend-head { gap: 0.75rem; } .friend-logo { width: 56px; height: 56px; border-radius: 12px; } .friend-name { font-size: 1.1rem; } .friend-actions .btn { flex: 1 1 100%; } } /* ====== Админка → Новости: группы pinned/обычные ====== */ .admin-news-group { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0.35rem 0 0.1rem; } .admin-news-group:not(:first-child) { margin-top: 1rem; } .admin-news-pin-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; margin-right: 0.4rem; padding: 0 0.3rem; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border-strong); font-size: 0.72rem; font-weight: 700; color: var(--text-dim); } /* ───────────────────────── Матч: вкладка «Лента» ───────────────────────── Вертикальная ось времени: минута в кружке по центру, события хозяев слева, гостей справа. Сторона решается grid-колонкой, поэтому в разметке нет пустых распорок. На узких экранах ось уезжает влево (см. медиазапрос). */ .mtl { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .25rem 0; } /* Сама ось — по центру контейнера, под кружками минут. */ .mtl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--border); } .mtl-row { display: grid; /* minmax(0, 1fr), а не 1fr: у 1fr неявный min-width:auto, и длинное имя распирает колонку за пределы экрана (грабли из мобильного канона). */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: .6rem; position: relative; min-height: 2.6rem; } /* grid-row обязателен обоим: у гостей .mtl-content явно уходит в колонку 3, а идущий следом .mtl-min — в колонку 2, то есть «назад». Авто-размещение курсор назад не отматывает и переносит минуту на новую строку — из-за этого имя и иконка гостей оказывались выше минуты. */ .mtl-content { grid-row: 1; } .mtl-min { grid-column: 2; grid-row: 1; z-index: 1; min-width: 2.9rem; padding: .2rem .1rem; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: .78rem; text-align: center; } .mtl-home .mtl-content { grid-column: 1; justify-self: end; text-align: right; } .mtl-away .mtl-content { grid-column: 3; justify-self: start; text-align: left; } .mtl-item { display: flex; align-items: center; gap: .45rem; min-width: 0; } /* У гостей блок читается слева направо — зеркалим порядок иконки и имени. */ .mtl-away .mtl-item { flex-direction: row-reverse; } .mtl-names { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .mtl-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Отступ ВСЕГДА слева: row-reverse у .mtl-away переставляет только прямых детей .mtl-item (имена / фото / иконку), а внутри .mtl-main порядок всегда «имя, потом счёт». Зеркалить margin здесь — значит склеить имя со счётом у гостей, что и было до 2026-07-30. */ .mtl-score { margin-left: .35rem; color: var(--accent); font-family: 'JetBrains Mono', monospace; } /* (П) / (А) / (Ш) у фамилии — чем забит гол. Приглушено: это уточнение к имени, а не отдельная величина. */ .mtl-mark { margin-left: .2rem; color: var(--text-dim); font-size: .82em; } /* Незабитый пенальти — мяч, перечёркнутый красным. Линия рисуется поверх эмодзи псевдоэлементом: готового «зачёркнутого мяча» в юникоде нет. */ .mtl-ico-miss { position: relative; display: inline-block; } .mtl-ico-miss::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: var(--red); border-radius: 2px; transform: rotate(-45deg); transform-origin: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); } /* Голевая передача — второй строкой под автором гола. Приглушена, чтобы не спорить с бомбардиром, но крупнее подписи типа события. */ .mtl-assist { font-size: .76rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mtl-kind { font-size: .72rem; color: var(--text-dim); } /* Клуб показывается только на узких экранах: там колонка одна и сторона больше не говорит, чьё событие. На десктопе избыточен. */ .mtl-team { display: none; } .mtl-in { color: var(--green); font-weight: 600; white-space: nowrap; } .mtl-out { color: var(--red); font-size: .82rem; white-space: nowrap; } /* Фиксированная ширина: «⇄» у замены — текстовый символ и заметно уже эмодзи (⚽/🟨/🚑), из-за чего её блок съезжал к оси, а вместе с ним и фото. */ .mtl-ico { font-size: 1.05rem; flex: 0 0 auto; width: 1.5rem; text-align: center; } .mtl-ico-sub { color: var(--green); } .mtl-photo { width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex: 0 0 auto; background: var(--surface); } /* Место под фото резервируется всегда: без этого строки без фотографии короче, и колонка иконок/имён у них не совпадает с соседними. */ .mtl-photo-empty { border-color: transparent; background: transparent; } /* Узкий экран: ось прижата влево, все события — одной колонкой справа от неё. Иначе два столбца по 1fr схлопываются и имена рвутся по буквам. */ /* ≤900px — канон проекта для «стек в одну колонку» (600 оставлен под масштаб). Два столбца по обе стороны оси на телефоне не помещаются: ось уезжает влево, все события идут одной колонкой справа от неё. */ @media (max-width: 900px) { .mtl::before { left: 2.1rem; margin-left: 0; } .mtl-row { grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; } .mtl-min { grid-column: 1; } .mtl-home .mtl-content, .mtl-away .mtl-content { grid-column: 2; justify-self: start; text-align: left; } /* Иконка снова слева от имени — зеркалить незачем, сторона теперь одна. Клуб различается цветом имени (см. ниже). */ /* Одна колонка — порядок для всех одинаковый и как на десктопе у гостей: иконка → фото → фамилия. Задаём order'ом, а не row-reverse: reverse инвертирует главную ось и прижимает блок к правому краю. */ .mtl-home .mtl-item, .mtl-away .mtl-item { flex-direction: row; } .mtl-item > .mtl-ico { order: 1; } .mtl-item > .mtl-photo { order: 2; } .mtl-item > .mtl-names { order: 3; } .mtl-team { display: inline; } /* У замены клуб идёт отдельной строкой под именами. */ .mtl-names > .mtl-team { font-size: .72rem; color: var(--text-dim); } } /* ===== История клуба / менеджера (вкладка «История», карточка менеджера) ===== */ /* Таблица истории лежит прямо на панели вкладки, без вложенной .card-плашки — тот же приём, что в ростере (см. rost-скрины). */ .history-block { margin-top: 0.25rem; } .history-empty { color: var(--text-dim); padding: 0.75rem 0.25rem; margin: 0; } .history-note { color: var(--text-faint); font-size: 0.8rem; margin: 0.7rem 0 0; } .history-table th.num, .history-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; } .history-table th, .history-table td { white-space: nowrap; } .history-table td { padding-top: 0.6rem; padding-bottom: 0.6rem; } .history-table tbody tr { cursor: default; } .history-table tbody tr:hover { background: transparent; } .history-table tfoot .history-total td { border-top: 2px solid var(--border-strong); font-weight: 700; color: var(--text); } /* Место в лиге — медальный бейдж для подиума, как позиционные бейджи в ростере. */ .history-place { display: inline-block; min-width: 1.7rem; padding: 1px 6px; border-radius: 5px; font-weight: 700; font-size: 0.8rem; } .history-place.place-1 { background: rgba(251,191,36,0.18); color: var(--gold); } .history-place.place-2 { background: rgba(203,213,225,0.16); color: #cbd5e1; } .history-place.place-3 { background: rgba(217,160,102,0.18); color: #d9a066; } /* Бейдж «N раз» — контурный акцент вместо серой заливки. */ .history-badge { margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-3); border: 1px solid rgba(59,130,246,0.3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; } .history-club { display: inline-flex; align-items: center; gap: 0.4rem; } .history-crest { width: 18px; height: 18px; object-fit: contain; } /* Строка с разбивкой по турнирам раскрывается по клику — канон подсветки строк-ссылок (accent-soft, как ростер/standings), не серый surface2. */ .history-table tbody tr.history-expandable { cursor: pointer; } .history-table tbody tr.history-expandable:hover, .history-table tbody tr.history-expandable.is-open { background: var(--accent-soft); } .history-chevron { display: inline-block; margin-right: 0.35rem; color: var(--accent-3); transition: transform .15s; } .history-chevron.open { transform: rotate(90deg); } /* Подстроки турниров: вложенность — левой акцент-полосой и отступом, без серой заливки. */ .history-table tbody tr.history-sub td { padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.82rem; color: var(--text-dim); border-bottom: none; } .history-table tbody tr.history-sub td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .history-table tbody tr.history-sub:last-child td { padding-bottom: 0.55rem; } .history-table tbody tr.history-sub td:nth-child(2) { padding-left: 1.4rem; } /* Сезон объединяет свои турниры одной ячейкой — читается как заголовок группы. */ .history-table tbody tr.history-season-start td { border-top: 1px solid var(--border); } /* Итоги сезона: кнопка «Подробнее» в ячейке сезона открывает экран ?sub=season-N. */ .history-more { display: block; margin-top: 0.35rem; padding: 0.15rem 0.55rem; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--accent-3); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .history-more:hover { border-color: var(--accent); color: var(--text); } .history-more-wait { display: block; margin-top: 0.35rem; font-size: 0.68rem; font-weight: 500; color: var(--text-faint); white-space: normal; } /* Экран итогов сезона */ .hl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 0.8rem; } .hl-head .history-more { margin-top: 0; } .hl-title { margin: 0; font-size: 1.15rem; } .hl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .hl-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; background: var(--surface-elev); border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; } .hl-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .hl-section { margin: 1.1rem 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.7rem; align-items: start; } .hl-card { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 12px; padding: 0.65rem 0.85rem 0.5rem; min-width: 0; } .hl-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; font-size: 0.85rem; } .hl-card .tile-header + .hl-row { margin-top: 0.35rem; } .hl-row:hover .hl-name { color: var(--accent-3); } .hl-rank { width: 1rem; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; } .hl-score { min-width: 2.4rem; font-weight: 700; } .hl-score.win { color: var(--green); } .hl-score.loss { color: var(--red); } .hl-score.draw { color: var(--yellow); } .hl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-val { color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; } .hl-form { display: flex; flex-wrap: wrap; gap: 0.35rem; } .hl-form-dot { width: 0.9rem; height: 0.9rem; display: inline-block; } .history-table tbody tr.history-season-start:first-child td { border-top: none; } .history-season-cell { font-weight: 800; font-size: 0.95rem; color: var(--accent-3); vertical-align: top; } /* ====== Гимн: кнопка в шапке + мини-плеер ====== */ /* Слот сидит первым в .navbar-right-group — отступы даёт её gap. */ .anthem-slot { position: relative; display: inline-flex; flex: 0 0 auto; } /* ♪/♫ — текстовые глифы, а не эмодзи: «чернил» у них меньше кегля, и рядом с 🛡️/✉/👤 нота кажется мелкой. Поэтому кегль здесь заведомо крупнее соседних кнопок. Эмодзи-нота решила бы это сама, но она не красится в var(--accent-2) при проигрывании. */ .anthem-btn { font-size: 1.3rem; line-height: 1; } .anthem-btn.anthem-on { background: rgba(139,92,246,0.18); border-color: var(--accent-2); color: var(--accent-2); } .anthem-btn.anthem-on:hover { background: rgba(139,92,246,0.28); } /* Панель видна ровно пока играет музыка — отдельного «закрыть» нет, выключение и есть закрытие. */ .anthem-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; width: 260px; max-width: calc(100vw - 1.5rem); display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.8rem; background: var(--popover); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(139,92,246,0.10); animation: dropdown-in .12s ease-out; } /* Прозрачная подложка: ловит клик мимо панели, чтобы свернуть её. */ .anthem-backdrop { position: fixed; inset: 0; z-index: 119; } .anthem-head { display: flex; align-items: center; gap: 0.5rem; } /* Пара старт/пауза — те же .btn btn-sm btn-primary/btn-ghost, что в реплее матча. Ширина ЖЁСТКАЯ, а не min-width: глифы ▶ и ⏸ разной ширины, и на переключении кнопка меняла размер, дёргая название трека вправо-влево. */ .anthem-play { flex: 0 0 34px; width: 34px; padding-left: 0; padding-right: 0; } /* Треугольник и две палки на бордерах: шрифт не участвует, цвет всегда currentColor — белый на градиенте btn-primary, текстовый на btn-ghost. */ .anthem-ic-play { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; /* оптический центр: у треугольника масса слева */ } .anthem-ic-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .anthem-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; } .anthem-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anthem-artist { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anthem-time { flex: 0 0 auto; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--text-faint); } .anthem-vol-row { display: flex; align-items: center; gap: 0.5rem; } .anthem-vol-icon { font-size: 0.85rem; line-height: 1; } .anthem-vol-value { flex: 0 0 auto; min-width: 2.6em; text-align: right; font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--text-faint); } .anthem-range { -webkit-appearance: none; appearance: none; flex: 1; width: 100%; height: 4px; background: var(--surface2); border-radius: 2px; outline: none; cursor: pointer; } .anthem-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); cursor: pointer; box-shadow: 0 0 10px rgba(139,92,246,0.6); } .anthem-range::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--accent-2); cursor: pointer; } /* Кнопка живёт в правой группе, а там на мобиле тесно: панель, привязанная к её правому краю, уезжала левым краем за экран. Отвязываем от кнопки и тянем на всю ширину экрана с полями. top в пикселях, а не calc(100% + …): у .navbar есть backdrop-filter, и она становится containing block для fixed-потомков — проценты считались бы от высоты шапки там, где фильтр поддержан, и от вьюпорта там, где нет. */ @media (max-width: 900px) { /* Соседние кнопки на мобиле ужимаются до 1rem, а нота на фолбэк-шрифте тонкая — добавляем ей ещё кегля, иначе выглядит мельче остальных. */ .anthem-btn { font-size: 1.5rem; } .anthem-panel { position: fixed; top: 68px; /* шапка 60px + 8 */ left: 0.6rem; right: 0.6rem; width: auto; max-width: none; } } @media (max-width: 700px) { .anthem-panel { top: 72px; } /* здесь шапка 64px */ } /* ── Награды лиги: игрок тура / команда тура ── */ /* Разъединяем блоки на вкладке «Туры» — раньше слипались. */ .totr-gap { margin-top: 1.1rem; } /* «Поделиться» на странице матча: последняя кнопка внутри плашки вкладок, у правого края. Выпадающая панель привязана к строке, а не к nav.tabs: на телефоне вкладки скроллятся по горизонтали и обрезали бы её. */ .match-view-tabs-row { position: relative; margin-bottom: var(--gap-block, 1rem); } html .match-view-tabs-row > nav.tabs.match-view-tabs { width: 100%; box-sizing: border-box; margin-bottom: 0 !important; } .match-view-tabs > .tab-btn:first-child { margin-left: auto; } .match-view-tabs > .match-share-btn { margin-left: auto; min-width: 3.2rem; justify-content: center; font-size: 1.05rem; } .match-share-panel { left: auto; right: 0; width: 15rem; } /* Карточка матча в сообщении форума / комментарии ([match=id]). */ .match-embed { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; box-sizing: border-box; margin: 0.4rem 0; padding: 0.8rem 1rem; border-radius: 12px; text-decoration: none; color: var(--text); background: linear-gradient(180deg, var(--surface2), var(--surface)); border: 1px solid var(--border-strong); box-shadow: 0 4px 14px rgba(0,0,0,0.30), inset 0 1px 0 var(--border-strong); transition: border-color .15s, transform .15s; } .match-embed.open { border-color: var(--accent); } .match-embed.loading, .match-embed.missing { min-height: 3rem; justify-content: center; color: var(--text-dim); font-size: 0.85rem; } .match-embed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-dim); } .match-embed-meta .match-kind-badge { font-size: 0.68rem; } .match-embed-dim { color: var(--text-faint); } .match-embed-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.8rem; } .match-embed-team { display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--text); text-decoration: none; } .match-embed-team:hover .match-embed-name { color: var(--accent-3); } .match-embed-team.home { flex-direction: row-reverse; text-align: right; } .match-embed-crest { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; display: flex; align-items: center; justify-content: center; } .match-embed-name { font-weight: 800; font-size: 1rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; } .match-embed-score { display: flex; flex-direction: column; align-items: center; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); padding: 0.15rem 0.7rem; border-radius: 10px; background: var(--surface-strong); } .match-embed-score.muted { color: var(--text-dim); } .match-embed-suffix { font-size: 0.68rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0; } .match-embed-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; font-size: 0.8rem; } .match-embed-goals .home { text-align: right; } .match-embed-goals > div { display: flex; flex-direction: column; gap: 0.1rem; } .match-embed-goals .home { align-items: flex-end; } .match-embed-scorer { color: var(--text); white-space: nowrap; } .match-embed-stats { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.2rem 0; } .match-embed-stat { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; align-items: center; row-gap: 0.2rem; } .match-embed-stat .v { font-size: 0.85rem; font-weight: 700; color: var(--text-dim); } .match-embed-stat .v:first-child { text-align: left; } .match-embed-stat .v:nth-child(3) { text-align: right; } .match-embed-stat .v.lead { color: var(--text); } .match-embed-stat .label { text-align: center; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .match-embed-stat .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--accent-3); overflow: hidden; } .match-embed-stat .bar i { display: block; height: 100%; background: var(--accent); } .match-embed-reveal { padding: 0.45rem 0.8rem; border-radius: 10px; cursor: pointer; white-space: nowrap; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--text); background: var(--surface-strong); border: 1px dashed var(--border-strong); } .match-embed-reveal:hover { border-color: var(--accent); color: var(--accent-3); } .match-embed-foot { display: flex; justify-content: center; align-items: center; gap: 1.2rem; } .match-embed-collapse { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.75rem; color: var(--text-dim); } .match-embed-collapse:hover { color: var(--text); } .match-embed-cta { font-size: 0.78rem; font-weight: 700; color: var(--accent-3); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; } .match-embed-cta:hover { color: var(--text); } @media (max-width: 700px) { .match-embed { padding: 0.6rem 0.7rem; } .match-embed-crest { width: 30px; height: 30px; flex-basis: 30px; } .match-embed-name { font-size: 0.85rem; } .match-embed-score { font-size: 1.25rem; padding: 0.1rem 0.5rem; } } /* Статистика тура (Лига → Туры, под командой тура): тур и нарастающий итог. */ .round-sum-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.1rem; } .round-sum-col { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .round-sum-head { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.78rem; color: var(--text); margin-bottom: 0.2rem; } .round-sum-sub { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.3rem; } .round-sum-empty { font-size: 0.85rem; color: var(--text-faint); } .round-sum-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .round-sum-minor span, .round-sum-minor b { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; } .res-w { color: var(--green); } .res-d { color: var(--yellow); } .res-l { color: var(--red); } .round-sum-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; width: 100%; padding: 0.3rem 0.5rem; border-radius: 8px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text); font: inherit; } .round-sum-match:hover { background: var(--surface-strong); } .round-sum-side { display: flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.85rem; font-weight: 600; } .round-sum-side span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .round-sum-side.home { justify-content: flex-end; text-align: right; } .round-sum-score { font-weight: 800; padding: 0.05rem 0.45rem; border-radius: 6px; background: var(--surface2); } .round-sum-round { font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; } .round-sum-streaks .bio-line b { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; } .round-sum-team { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; padding: 0; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; } .round-sum-team:hover { color: var(--accent-3); } .round-sum-len { padding: 0.05rem 0.45rem; border-radius: 6px; background: var(--surface2); } @media (max-width: 700px) { .round-sum-cols { grid-template-columns: 1fr; gap: 0.9rem; } } .potr-body { display: flex; gap: 1rem; align-items: center; color: inherit; text-decoration: none; } .potr-body:hover .potr-name { color: var(--accent-3); } .potr-avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; overflow: hidden; border: 2px solid rgba(255,255,255,0.5); } .potr-avatar img { width: 100%; height: 100%; object-fit: cover; } .potr-info { min-width: 0; flex: 1 1 auto; } .potr-name { display: flex; align-items: center; gap: 0.4rem; font-size: 1.05rem; font-weight: 700; transition: color .15s; } .potr-club { display: flex; align-items: center; gap: 0.35rem; color: var(--text-dim); font-size: 0.85rem; margin-top: 0.15rem; } .potr-crest { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; } .potr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.4rem; } .potr-stat { font-size: 0.8rem; color: var(--text-dim); } /* Бейдж оценки — «пилюля» с цветом по тиру. */ .rating-badge { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 3.1rem; padding: 0.35rem 0.4rem; border-radius: 12px; font-family: 'JetBrains Mono', monospace; border: 1px solid transparent; } .rating-badge-val { font-size: 1.05rem; font-weight: 800; line-height: 1; } .rating-elite { background: rgba(16,185,129,0.18); border-color: rgba(16,185,129,0.5); color: #34d399; } .rating-great { background: rgba(110,231,183,0.15); border-color: rgba(110,231,183,0.4); color: #6ee7b7; } .rating-good { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.45); color: #f59e0b; } .rating-ok { background: rgba(255,255,255,0.06); border-color: var(--border); color: var(--text-dim); } /* Статус игрока в составе (squad_status, миграция 0323). */ .sqst-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; } .sqst-key { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.5); color: #34d399; } .sqst-first { background: rgba(59,130,246,0.16); border-color: rgba(59,130,246,0.5); color: #60a5fa; } .sqst-rotation { background: rgba(148,163,184,0.16); border-color: var(--border); color: var(--text-dim); } .sqst-backup { background: rgba(148,163,184,0.10); border-color: var(--border); color: var(--text-faint); } .sqst-none { color: var(--text-faint); } .mood-badge, .wealth-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; } .mood-good { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.5); color: #34d399; } .mood-warn { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.45); color: #f59e0b; } .mood-bad { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.45); color: #f87171; } /* Финансовая плашка клуба (ClubWealthInfo) — 3 тона, по 2 оттенка на тон: красный (Банкрот / В минусе), янтарь (Скромный / Стабильный), зелёный (Обеспеченный / Богатый). Насыщенный оттенок — к краям шкалы. */ .wealth-bankrupt { background: rgba(239,68,68,0.30); border-color: rgba(239,68,68,0.70); color: #fecaca; } .wealth-debt { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #f87171; } .wealth-modest { background: rgba(245,158,11,0.28); border-color: rgba(245,158,11,0.68); color: #fde68a; } .wealth-stable { background: rgba(245,158,11,0.11); border-color: rgba(245,158,11,0.32); color: #fbbf24; } .wealth-secure { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.34); color: #34d399; } .wealth-rich { background: rgba(16,185,129,0.30); border-color: rgba(16,185,129,0.70); color: #a7f3d0; } .totr-card .card-title .totr-form { font-size: 0.7rem; font-weight: 700; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.5rem; } .totr-pitch { margin: 0.5rem auto 0; } .totr-slot { width: 4.6rem; cursor: default; } .totr-slot:hover { transform: translate(-50%, -50%); } .totr-slot-link { display: block; text-decoration: none; color: inherit; cursor: pointer; } .totr-slot-link:hover .totr-name-row { color: var(--accent-3); } /* Лицо игрока в кружке. */ .totr-face { width: 42px; height: 42px; border-radius: 50%; margin: 0 auto; overflow: hidden; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.7rem; position: relative; z-index: 2; } .totr-face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .totr-face.empty { background: rgba(255,255,255,0.12); border-style: dashed; border-color: rgba(255,255,255,0.5); color: #fff; box-shadow: none; } /* Эмблема клуба + фамилия под лицом. */ .totr-name-row { display: flex; align-items: center; justify-content: center; gap: 0.2rem; margin-top: 3px; max-width: 100%; color: #fff; font-size: 0.6rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.9); white-space: nowrap; transition: color .15s; } .totr-name-crest { width: 12px; height: 12px; object-fit: contain; flex: 0 0 auto; } .totr-name-row span { overflow: hidden; text-overflow: ellipsis; } .totr-slot .totr-slot-rating { margin: 2px auto 0; width: fit-content; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 0.6rem; line-height: 1; padding: 0.08rem 0.28rem; border-radius: 5px; border: 1px solid transparent; } @media (max-width: 480px) { .totr-slot { width: 3.9rem; } .totr-face { width: 34px; height: 34px; } .totr-name-row { font-size: 0.55rem; } } /* ── Карточка игрока: Зал славы ── */ .hall-list { list-style: none; margin: 0; padding: 0; } .hall-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--border); } .hall-item:last-child { border-bottom: none; } .hall-ic { font-size: 1.15rem; flex: 0 0 auto; width: 1.6rem; text-align: center; } .hall-txt { flex: 1 1 auto; min-width: 0; font-weight: 600; } .hall-season { flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.8rem; color: var(--text-faint); } /* ── Зал славы лиги: команда сезона ── */ .hof-tos-season { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .hof-tos-season:last-child { border-bottom: none; } .hof-tos-tag { font-weight: 700; min-width: 3.5rem; flex: 0 0 auto; } .hof-tos-names { line-height: 1.7; } .hof-tos-names a { margin-right: 0.15rem; } .hof-tos-names a::after { content: "·"; margin-left: 0.35rem; color: var(--text-faint); } .hof-tos-names a:last-child::after { content: ""; } /* Вкладка «Судьи» — имя не переносим (таблица и так скроллится вправо). */ .refs-table td:first-child, .refs-table th:first-child { white-space: nowrap; } .refs-table td:first-child .opponent-cell { white-space: nowrap; } @media (max-width: 640px) { .refs-table td:first-child { min-width: 11rem; } } /* ── Зал славы лиги: карточки победителей ── */ .hof-winners { display: flex; flex-direction: column; gap: 0.5rem; } .hof-winner { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: inherit; text-decoration: none; transition: border-color .15s; } .hof-winner:hover { border-color: var(--border-strong); } .hof-winner:hover .hof-winner-name > span:first-of-type { color: var(--accent-3); } .hof-winner-face { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; overflow: hidden; border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-weight: 800; } .hof-winner-face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .hof-winner-body { min-width: 0; flex: 1 1 auto; } .hof-winner-name { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.95rem; } .hof-winner-name > span:first-of-type { transition: color .15s; } .hof-winner-season { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--text-faint); } .hof-winner-club { display: flex; align-items: center; gap: 0.35rem; color: var(--text-dim); font-size: 0.8rem; margin-top: 0.15rem; } .hof-winner-crest { width: 15px; height: 15px; object-fit: contain; flex: 0 0 auto; } .hof-winner-stats { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: baseline; margin-top: 0.3rem; font-size: 0.75rem; color: var(--text-faint); } .hof-winner-rating { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--green); font-size: 0.85rem; } .archive-kind { display: inline-block; } .archive-kind .fd-wrap { width: 14rem; } /* ===== Пресс-центр (миграция 0365) ===== */ .news-comment-badge { font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .press { display: flex; flex-direction: column; gap: 0.9rem; } .press-window { font-size: 0.85rem; color: var(--text-dim); } .press-window-open { color: var(--green, #3fb950); } .press-phase { display: flex; flex-direction: column; gap: 0.5rem; } .press-phase-title, .press-comments-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .press-editor-caption { font-size: 0.8rem; color: var(--text-dim); } .press-page { display: flex; flex-direction: column; gap: 1rem; } .press-filters { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .press-list { display: flex; flex-direction: column; gap: 0.5rem; } .press-row { cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; } .press-row:hover { border-color: var(--border-strong); } .press-row-teams { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 700; } .press-row-vs { color: var(--text-faint); } .press-row-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-dim); } .press-row-state-open { color: var(--green, #3fb950); } /* Чекбокс в сетке настроек без обёртки .field: внутри .field label получает uppercase/display:block и галка рисуется иначе, чем у «Стартовая». */ .settings-check-cell { align-self: end; padding-bottom: 0.6rem; min-width: 0; } .next-match-actions { display: flex; justify-content: center; margin-top: 0.9rem; } /* Заявление менеджера: карточка с эмблемой, названием клуба и менеджером. */ .press-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--team-color, var(--accent)); border-radius: 12px; padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; } .press-card-head { display: flex; align-items: center; gap: 0.75rem; } .press-card-crest { flex: 0 0 auto; display: flex; align-items: center; } .press-crest { width: 44px; height: 44px; object-fit: contain; } .press-crest-fallback { width: 44px; height: 44px; font-size: 1rem; } .press-card-id { flex: 1 1 auto; min-width: 0; } .press-card-team { font-weight: 800; font-size: 1.05rem; } .press-card-sub { font-size: 0.8rem; color: var(--text-dim); } .press-card-body { margin: 0; padding: 0.2rem 0 0 0.9rem; border-left: 3px solid var(--team-color, var(--accent)); font-size: 1rem; line-height: 1.55; white-space: pre-wrap; } .press-card-phase { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .press-card-phase-post { background: rgba(52, 211, 153, 0.15); color: var(--green); } /* Непрочитанная пресс-конференция в списке Пресс-центра: синяя подсветка. */ .press-row-unread { border-color: var(--accent); background: var(--accent-soft); } .press-row-new { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--accent); color: #fff; } /* Плашка «Доступна новая версия» (service worker ждёт согласия на обновление). */ .update-banner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.9rem; background: var(--surface-strong, #1b2340); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); color: var(--text); font-size: 0.9rem; } .update-banner button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 0.35rem 0.8rem; font-weight: 700; cursor: pointer; } .update-banner button:disabled { opacity: 0.6; cursor: default; } .press-list-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.12s; } /* Комментарии пресс-центра в оформлении поста форума: реакций нет, поэтому у строки даты нет пунктира и нижнего отступа под кнопки. */ .press-comment-date { border-bottom: none; padding-bottom: 0; } /* ====== Карточка игрока v2 (/player-v2, только новое оформление sofl-*) ====== Стекло из SOFL Offline (App.axaml .glass + Colors.axaml): заливка ТЕМНЕЕ сцены, но не чёрная, а фирменная сине-фиолетовая, с коротким белым бликом сверху (светлая только верхняя грань), рамка — градиент (яркая грань сверху, растворяется книзу), радиус 18, тень «0 10 30 -10». Вложенные плашки плотнее карточки. Без backdrop-filter. Заливка и грань — токены. */ :root { --pv2-fill: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(56,50,116,0.32) 6%, rgba(42,37,92,0.44) 100%); --pv2-edge: linear-gradient(180deg, rgba(196,182,255,0.42) 0%, rgba(196,182,255,0.10) 100%); --pv2-tile: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(70,62,130,0.38) 100%); --pv2-hairline: rgba(255,255,255,0.11); --pv2-shadow: 0 10px 30px -10px rgba(0,0,0,0.42); } html[data-theme] .pv2-hero.card, .pv2-card { border: 1px solid transparent; background: var(--pv2-fill) padding-box, var(--pv2-edge) border-box; border-radius: 18px; box-shadow: var(--pv2-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; } .pv2-card { padding: 1.1rem 1.25rem; min-width: 0; } .pv2-card .card-title { margin-bottom: 0.6rem; } .pv2-card .bio-line, .pv2-card .stat-line { border-color: var(--pv2-hairline); } .pv2-hero { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 1.25rem; padding: 1rem 1.25rem; margin-bottom: 1rem; } .pv2-photo { position: relative; border-radius: var(--radius-sm); overflow: hidden; align-self: start; } .pv2-num { position: absolute; left: 0.6rem; bottom: 0.6rem; min-width: 2.7rem; padding: 0.1rem 0.55rem; border-radius: 10px; background: rgba(12,16,38,0.88); color: #fff; font-size: 1.6rem; font-weight: 800; text-align: center; line-height: 1.35; } .pv2-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .pv2-top { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .pv2-name { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--text); } .pv2-nation { display: flex; align-items: center; gap: 0.4rem; color: var(--text-dim); margin: 0.2rem 0 0.6rem; } .pv2-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } .pv2-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 1.5rem; align-content: start; } .pv2-facts span, .pv2-bottom span { display: block; color: var(--text-dim); font-size: 0.75rem; } .pv2-facts b { font-size: 1.15rem; font-weight: 700; color: var(--text); } .pv2-facts b.pv2-ovr { color: var(--accent-3); } .pv2-bottom { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--pv2-hairline); } .pv2-bottom b { font-size: 1.05rem; font-weight: 700; color: var(--text); } .pv2-bottom b.bad { color: var(--red); } .pv2-bottom small { display: block; color: var(--text-dim); font-size: 0.75rem; } .pv2-club { display: flex; gap: 0.7rem; align-items: center; } .pv2-crest { width: 44px; height: 44px; object-fit: contain; } .pv2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .pv2-more { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; } /* Поле — то же, что на «Составе» (канвас рисует matchCanvas.staticPitch). */ .pv2-fpitch { max-width: 260px; margin: 0.25rem auto 0; } .pv2-fpitch .pv2-dot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; letter-spacing: 0.01em; z-index: 2; } .pv2-fpitch .pv2-dot.main { width: 30px; height: 30px; z-index: 3; font-size: 0.62rem; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.45); } .pv2-fpitch .pv2-dot.sec { width: 22px; height: 22px; font-size: 0.5rem; opacity: 0.85; border: 1.5px solid rgba(255,255,255,0.75); box-shadow: 0 2px 6px rgba(0,0,0,0.4); } /* Текущий сезон: мелкие плотные плашки внутри стекла. */ .pv2-season { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; text-align: center; } .pv2-season > div { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem 0.2rem; border-radius: 12px; border: 1px solid transparent; background: var(--pv2-tile) padding-box, var(--pv2-edge) border-box; } .pv2-season i { font-style: normal; font-size: 1.05rem; line-height: 1; } .pv2-season b { font-size: 1rem; font-weight: 800; color: var(--text); line-height: 1; } .pv2-career { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .pv2-career th { color: var(--text-dim); text-align: left; font-weight: 600; padding: 0.25rem 0.3rem; } .pv2-career td { padding: 0.3rem; border-top: 1px solid var(--pv2-hairline); color: var(--text); } .pv2-career .num { text-align: right; } .pv2-form { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.2rem; } @media (max-width: 1100px) { .pv2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .pv2-hero { grid-template-columns: 1fr; } .pv2-photo { max-width: 220px; } .pv2-facts { grid-template-columns: repeat(2, auto); } .pv2-bottom { grid-template-columns: 1fr; } .pv2-grid { grid-template-columns: 1fr; } } /* Фото игрока: без прямоугольной рамки и виньетки в цвет страницы — края мягко растворяются в стекле карточки (маска по эллипсу). */ .pv2-photo { overflow: visible; border-radius: 0; } .pv2-photo .faded-image { background: transparent; border-radius: 0; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 46%, #000 62%, transparent 100%); } .pv2-photo .faded-image-vignette { display: none; } /* «+N»: в v2 все дополнительные позиции показаны бейджами, счётчик лишний. */ .pv2 .pos-extra-count, .pv2-hero .pos-extra-count { display: none; } /* Остальные вкладки страницы игрока — тоже стекло: панель как карточка, вложенные карточки — плотные плашки, таблицы прозрачные, вкладки — плашка. */ html[data-theme] .pv2 .tab-panel { border: 1px solid transparent; background: var(--pv2-fill) padding-box, var(--pv2-edge) border-box; border-radius: 18px; box-shadow: var(--pv2-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 1.1rem 1.25rem; } html[data-theme] .pv2 .tab-panel .card { border: 1px solid transparent; background: var(--pv2-tile) padding-box, var(--pv2-edge) border-box; border-radius: 14px; box-shadow: none; } html[data-theme] .pv2 .tab-panel :is(.player-table, .match-table, .standings-table) { background: transparent; } .pv2 .tab-panel :is(.bio-line, .stat-line, td, th) { border-color: var(--pv2-hairline); } html[data-theme] .pv2 nav.tabs { border: 1px solid transparent; background: var(--pv2-tile) padding-box, var(--pv2-edge) border-box; border-radius: 14px; box-shadow: var(--pv2-shadow); padding: 0.3rem; } /* ====== Объём блоков (только новое оформление sofl-*) ====== Цвет/прозрачность блоков не трогаем: поверх них — лёгкая «выпуклость»: градиент (блик сверху → затемнение к низу), светлая верхняя и тёмная нижняя внутренние грани, мягкая тень. Карточка игрока v2 имеет своё стекло и сюда не входит. */ html[data-theme^="sofl-2"] :is( .card:not(.pv2-hero), .news-item, .team-card, .fixture-row, .stats-panel, .events-panel, .player-stats-block, .player-hero, .tab-panel, .stadium-card, .training-card, .forum-block, .forum-post, .country-card, .np-article-card, .np-panel, .press-card, .cup-bracket-pair, .tile, .fin-panel, .fin-kpi, .fin-deal, .staff-card, .staff-slot, .actions-section, .forum-reply, .news-comment, .placeholder-block, .np-help, .admin-forecast) { background-image: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0.12) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.28), 0 10px 26px -10px rgba(0,0,0,0.5); } /* Нижние плашки (менеджеры онлайн, оферта/соглашение) и переключатели вкладок: на яркой картинке без своей заливки сливаются с фоном. */ html[data-theme^="sofl-2"] .online-users-bar { background: rgba(var(--s2-nav-rgb), 0.92); border-top-color: rgba(150,120,240,0.28); } html[data-theme^="sofl-2"] .legal-footer { background: rgba(var(--s2-nav-rgb), 0.95); border-top-color: rgba(150,120,240,0.28); } /* Пагинация: кнопки на яркой картинке не должны просвечивать. */ html[data-theme^="sofl-2"] .page-btn { background: rgba(var(--s2-card-rgb), 0.95); border-color: rgba(150,120,240,0.28); box-shadow: 0 2px 6px rgba(0,0,0,0.28); } html[data-theme^="sofl-2"] .page-btn:hover:not(:disabled):not(.active) { background: rgba(var(--s2-nav-rgb), 0.95); border-color: rgba(150,120,240,0.55); } html[data-theme^="sofl-2"] .page-btn.active { background: linear-gradient(rgba(139,108,232,0.35), rgba(139,108,232,0.35)), rgba(var(--s2-card-rgb), 0.95); } /* Два вида блоков в «Special One 2.0» — на всех страницах, без правок по одной: --block-glass (слегка прозрачный, по умолчанию) и --block-solid (почти непрозрачный). Solid включается либо страницей целиком (OwnerPageBg OpaqueCards), либо классом .block-solid на отдельном блоке; .block-glass возвращает прозрачный вариант внутри solid-страницы. Вложенные карточки не меняют вид относительно родителя: заливка одна. */ html[data-theme^="sofl-2"] { --block-glass: rgba(var(--s2-card-rgb), 0.90); --block-solid: rgba(var(--s2-card-rgb), 0.97); } html[data-theme^="sofl-2"] :is( .tab-panel, .player-hero, .team-card, .stats-panel, .events-panel, .player-stats-block, .stadium-card, .training-card, .forum-block, .forum-post, .country-card, .np-article-card, .np-panel, .press-card, .fin-panel, .staff-card, .actions-section, .forum-reply, .news-comment) { background-color: var(--block-glass); } html[data-theme^="sofl-2"] .owner-bg-page :is(.tab-panel, .player-hero) { backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme^="sofl-2"]:not(.bg-images-off) .owner-bg-page-opaque :is( .card, .news-item, .tab-panel, .player-hero, .team-card, .stats-panel, .events-panel, .player-stats-block, .stadium-card, .training-card, .forum-block, .forum-post, .country-card, .np-article-card, .np-panel, .press-card, .fin-panel, .staff-card, .actions-section, .forum-reply, .news-comment), html[data-theme^="sofl-2"] .block-solid { background-color: var(--block-solid); } html[data-theme^="sofl-2"]:not(.bg-images-off) .owner-bg-page .block-glass.block-glass { background-color: var(--block-glass); } /* Единый отступ между блоками в «Special One 2.0»: заголовок → плашка вкладок → панель — везде --gap-block. Инлайновые margin у nav.tabs на страницах (0.6/0.8/1rem) перебиваются !important. */ html[data-theme^="sofl-2"] { --gap-block: 1rem; } html[data-theme^="sofl-2"] .page-header { margin-bottom: var(--gap-block); } html[data-theme^="sofl-2"] nav.tabs { margin: 0 0 var(--gap-block) !important; } html[data-theme^="sofl-2"] :is(.card, .player-hero, .stats-panel) + nav.tabs { margin-top: var(--gap-block) !important; } html[data-theme^="sofl-2"] nav.tabs.match-view-tabs { margin-left: auto !important; margin-right: auto !important; } html[data-theme^="sofl-2"] nav.tabs { width: 100%; box-sizing: border-box; padding: 0.3rem; background: rgba(var(--s2-card-rgb), 0.92); border: 1px solid rgba(150,120,240,0.28); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 8px rgba(0,0,0,0.30), 0 12px 26px -10px rgba(0,0,0,0.55); } html[data-theme^="sofl-2"] nav.tabs .tab-btn { border-radius: 5px; } html[data-theme^="sofl-2"] .pv2 nav.tabs { border-radius: 8px; } /* Тёмное оформление: тонкая фиолетовая обводка блоков и более глубокая тень. */ html[data-theme^="sofl-2"] :is( .card:not(.pv2-hero), .news-item, .team-card, .stats-panel, .events-panel, .player-stats-block, .tab-panel, .stadium-card, .training-card, .forum-block, .forum-post, .np-panel, .press-card, .fin-panel, .staff-card) { border-color: rgba(150,120,240,0.28); } html[data-theme^="sofl-2"] .news-side .card { border-color: rgba(150,120,240,0.28); } html[data-theme^="sofl-2"] :is( .card:not(.pv2-hero), .news-item, .team-card, .fixture-row, .stats-panel, .events-panel, .player-stats-block, .player-hero, .tab-panel, .stadium-card, .training-card, .forum-block, .forum-post, .country-card, .np-article-card, .np-panel, .press-card, .cup-bracket-pair, .tile, .fin-panel, .fin-kpi, .fin-deal, .staff-card, .staff-slot, .actions-section, .forum-reply, .news-comment, .placeholder-block, .np-help, .admin-forecast) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.28), 0 3px 8px rgba(0,0,0,0.30), 0 16px 34px -10px rgba(0,0,0,0.62); } /* ====== Фото с растворяющимися краями (новое оформление sofl-*) ====== В базе FadedImage красит края виньеткой в цвет страницы (var(--bg)) — на блоках с градиентом/объёмом/стеклом это читается прямоугольной рамкой. Здесь края растворяются по прозрачности (маска), поэтому фото сливается с тем, что под ним, независимо от цвета. Заглушка без фото (.is-empty) не трогается. */ html[data-theme^="sofl-2"] .faded-image:not(.is-empty) { background: transparent; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); mask-composite: intersect; } html[data-theme^="sofl-2"] .faded-image-vignette { display: none; } /* Вкладки матча (кроме пресс-конференции): без общей подложки, только отдельные блоки (.card). !important — тема sofl-2 красит .tab-panel заливкой, градиентом, рамкой и тенью через селекторы специфичностью до (0,4,1) (в т.ч. .owner-bg-page-opaque). */ .tab-panel.tab-panel-flat { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; padding: 0; min-height: 0; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .tab-panel.tab-panel-flat::before { display: none; } /* Вкладки матча на узком экране скроллятся (.tabs ≤900px: nowrap + overflow-x). При justify-content:center переполнение уходит влево за край, и первые вкладки недоступны. */ @media (max-width: 900px) { .match-view-tabs { justify-content: flex-start; } } /* Панель тактик/замен/стандартов на «Составе на матч» — на той же «линии», что и nav.tabs в теме sofl-2: у самих кнопок фон почти прозрачный и без линии они сливаются. */ html[data-theme^="sofl-2"] .tactic-tabs.horizontal { width: 100%; box-sizing: border-box; padding: 0.3rem; margin-bottom: var(--gap-block); background: rgba(var(--s2-card-rgb), 0.92); border: 1px solid rgba(150,120,240,0.28); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 8px rgba(0,0,0,0.30), 0 12px 26px -10px rgba(0,0,0,0.55); } html[data-theme^="sofl-2"] .tactic-tabs.horizontal .tactic-tab { border-radius: 5px; } /* ====== Графики финансов (Shared/FinanceCharts.razor) ====== Палитра — проверенная валидатором (dataviz): 6 категориальных слотов в фиксированном порядке, тёмный набор (все темы тёмные). Текст — токенами сайта, не цветом серии; цвет серии несёт только метка рядом (ключ/точка). */ .fin-viz { --viz-c1: #3987e5; --viz-c2: #d95926; --viz-c3: #199e70; --viz-c4: #c98500; --viz-c5: #d55181; --viz-c6: #008300; --viz-pos: #3987e5; --viz-neg: #e66767; --viz-ink: var(--text, #e8ebf7); --viz-muted: var(--text-dim, #9aa3c5); --viz-grid: rgba(255,255,255,0.07); --viz-axis: rgba(255,255,255,0.22); --viz-hover: rgba(255,255,255,0.05); --viz-zero: rgba(255,255,255,0.10); --viz-surface: rgb(var(--panel-rgb, 20,24,44)); display: flex; flex-direction: column; gap: 1rem; } .fin-viz .viz-card { margin: 0; } .fin-viz .viz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .fin-viz .viz-sub { font-size: 0.8rem; color: var(--viz-muted); margin-top: 0.1rem; } .fin-viz .viz-seg { display: flex; gap: 0.25rem; } .fin-viz .viz-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .fin-viz .viz-pair .viz-svg { min-width: 440px; } @media (max-width: 900px) { .fin-viz .viz-pair { grid-template-columns: 1fr; } } .fin-viz .viz-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.3rem 0 0.4rem; font-size: 0.8rem; color: var(--viz-ink); } .fin-viz .viz-key { display: inline-flex; align-items: center; gap: 0.4rem; } .fin-viz .viz-key .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .fin-viz .viz-key .ln { width: 16px; height: 3px; border-radius: 2px; display: inline-block; } .fin-viz .sw1, .fin-viz .ln-c1 { background: var(--viz-c1); } .fin-viz .sw2, .fin-viz .ln-c2 { background: var(--viz-c2); } .fin-viz .sw3 { background: var(--viz-c3); } .fin-viz .sw4 { background: var(--viz-c4); } .fin-viz .sw5 { background: var(--viz-c5); } .fin-viz .sw6 { background: var(--viz-c6); } .fin-viz .sw-pos, .fin-viz .ln-pos { background: var(--viz-pos); } .fin-viz .sw-neg { background: var(--viz-neg); } .fin-viz .sw-zero { background: var(--viz-zero); } .fin-viz .ln-ink { background: var(--viz-ink); opacity: 0.7; } .fin-viz .viz-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fin-viz .viz-svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: inherit; } /* Оси и сетка — рецессивные волоски */ .fin-viz .viz-grid { stroke: var(--viz-grid); stroke-width: 1; } .fin-viz .viz-axis { stroke: var(--viz-axis); stroke-width: 1; } .fin-viz .viz-tick { fill: var(--viz-muted); font-size: 9px; font-variant-numeric: tabular-nums; } .fin-viz .viz-val { fill: var(--viz-ink); font-size: 9.5px; font-weight: 700; } .fin-viz .viz-cat { fill: var(--viz-ink); font-size: 10.5px; } .fin-viz .viz-cell { fill: var(--viz-ink); font-size: 11px; opacity: 0.85; } /* Марки: столбцы заливкой, линии 2px, точки с кольцом цвета поверхности */ .fin-viz .b-pos { fill: var(--viz-pos); } .fin-viz .b-neg { fill: var(--viz-neg); } .fin-viz .c1 { fill: var(--viz-c1); } .fin-viz .c2 { fill: var(--viz-c2); } .fin-viz .c3 { fill: var(--viz-c3); } .fin-viz .c4 { fill: var(--viz-c4); } .fin-viz .c5 { fill: var(--viz-c5); } .fin-viz .c6 { fill: var(--viz-c6); } .fin-viz .viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .fin-viz .viz-line.thin { stroke-width: 1.5; } .fin-viz .l-pos { stroke: var(--viz-pos); } .fin-viz .l-neg { stroke: var(--viz-neg); } .fin-viz .l-c1 { stroke: var(--viz-c1); } .fin-viz .l-c2 { stroke: var(--viz-c2); } .fin-viz .l-ink { stroke: var(--viz-ink); opacity: 0.7; } .fin-viz .viz-area { stroke: none; } .fin-viz .a-pos { fill: var(--viz-pos); fill-opacity: 0.10; } .fin-viz .a-neg { fill: var(--viz-neg); fill-opacity: 0.10; } .fin-viz .viz-dot { stroke: var(--viz-surface); stroke-width: 2; } .fin-viz .d-pos { fill: var(--viz-pos); } .fin-viz .d-neg { fill: var(--viz-neg); } .fin-viz .dc1 { fill: var(--viz-c1); } .fin-viz .dc2 { fill: var(--viz-c2); } /* Карта ИД: яркость клетки = сила дня, шаги непрозрачности ставит код */ /* Подсказка: чистый CSS по :hover/:focus на hit-области, тот же результат с клавиатуры */ .fin-viz .viz-hit { fill: transparent; cursor: pointer; outline: none; } .fin-viz .viz-hit:hover, .fin-viz .viz-hit:focus { fill: var(--viz-hover); } .fin-viz .viz-tip { display: none; } .fin-viz .viz-hit:hover + .viz-tip, .fin-viz .viz-hit:focus + .viz-tip { display: block; } .fin-viz .viz-cross { stroke: var(--viz-axis); stroke-width: 1; } .fin-viz .viz-tipbg { fill: var(--tooltip-bg, #0e1121); stroke: var(--border-strong, rgba(255,255,255,0.2)); stroke-width: 1; } .fin-viz .viz-tip-title { fill: var(--tooltip-text, #fff); font-size: 10.5px; font-weight: 700; } .fin-viz .viz-tip-label { fill: var(--tooltip-text, #fff); font-size: 10px; opacity: 0.78; } .fin-viz .viz-tip-value { fill: var(--tooltip-text, #fff); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .fin-viz .k-pos { fill: var(--viz-pos); } .fin-viz .k-neg { fill: var(--viz-neg); } .fin-viz .k1 { fill: var(--viz-c1); } .fin-viz .k2 { fill: var(--viz-c2); } .fin-viz .k3 { fill: var(--viz-c3); } .fin-viz .k4 { fill: var(--viz-c4); } .fin-viz .k5 { fill: var(--viz-c5); } .fin-viz .k6 { fill: var(--viz-c6); } /* ====== Профиль игрока: радары (Shared/PlayerProfileCharts.razor) ====== */ .fin-viz .prof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .fin-viz .prof-grid.one { grid-template-columns: minmax(0, 520px); } @media (max-width: 900px) { .fin-viz .prof-grid { grid-template-columns: 1fr; } } .fin-viz .viz-radar { min-width: 0; width: 100%; max-width: 440px; margin: 0 auto; } .fin-viz .rad-me { fill: var(--viz-pos); fill-opacity: 0.16; stroke: var(--viz-pos); stroke-width: 2; stroke-linejoin: round; } .fin-viz .rad-avg { fill: var(--viz-ink); fill-opacity: 0.06; stroke: var(--viz-ink); stroke-opacity: 0.55; stroke-width: 1.5; stroke-linejoin: round; } .fin-viz .prof-delta { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; border-top: 1px solid var(--viz-grid); font-size: 0.88rem; } .fin-viz .prof-delta:first-of-type { border-top: none; } .fin-viz .prof-delta-mark.up { color: var(--green, #34d399); } .fin-viz .prof-delta-mark.down { color: var(--red, #f87171); } /* Календарь: на телефоне строки таблицы уже отдельные карточки (.match-mobile-cards) — общая обёртка вокруг них была бы вторым слоем подложки. */ @media (max-width: 900px) { .cal-table-card { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .cal-table-card::before { display: none; } } /* Календарь, вид «Месяц»: сетка Пн–Вс, в днях с матчем — карточка матча. */ .cal-view-switch { display: flex; gap: 0.25rem; justify-content: flex-end; margin-bottom: 0.6rem; } .cal-month-card { padding: 0.9rem; } .cal-month-head { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.9rem; } .cal-month-title { min-width: 11rem; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.95rem; } .cal-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.45rem; } .cal-dow { text-align: center; padding: 0.2rem 0; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 0.72rem; color: var(--text-dim); } .cal-day { min-height: 7.5rem; padding: 0.45rem 0.5rem; border-radius: 10px; background: linear-gradient(180deg, var(--surface2), var(--surface)); border: 1px solid var(--border-strong); box-shadow: 0 4px 10px rgba(0,0,0,0.30), inset 0 1px 0 var(--border-strong); display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .cal-day.out { background: none; border-color: transparent; box-shadow: none; } .cal-day.has-match { background: linear-gradient(180deg, var(--surface2), var(--surface-strong)); } .cal-day.is-next { border-color: var(--accent-3); box-shadow: 0 4px 12px rgba(0,0,0,0.30), inset 0 0 0 1px var(--accent-3); } .cal-day.is-today .cal-day-num { background: var(--accent); color: var(--text); border-radius: 999px; padding: 0 0.45rem; align-self: flex-start; } .cal-day-num { font-size: 0.8rem; font-weight: 700; color: var(--text-dim); line-height: 1.45; } .cal-match { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; } .cal-match + .cal-match { border-top: 1px solid var(--border); padding-top: 0.4rem; } .cal-match-head { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; } .cal-match-head .match-kind-badge { font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cal-match-head .venue-badge { font-size: 0.68rem; padding: 0 0.35rem; font-weight: 800; } .cal-kind-short { display: none; } .cal-match-team { display: flex; align-items: center; gap: 0.5rem; min-width: 0; background: none; border: none; padding: 0; color: var(--text); cursor: pointer; font: inherit; text-align: left; text-decoration: none; } .cal-match-crest { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; font-size: 0.75rem; } .cal-match-flag { display: flex; align-items: center; justify-content: center; } .cal-match-name { flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cal-match-team:hover .cal-match-name { color: var(--accent-3); } .cal-match-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; margin-top: auto; } .cal-match-stage { font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cal-score { margin-left: auto; padding: 0.12rem 0.55rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text); background: var(--surface2); border: 1px solid var(--border-strong); } .cal-score:hover { background: var(--surface-strong); } .cal-score.result-win { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); } .cal-score.result-loss { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); } .cal-score.result-draw { color: var(--yellow); border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 16%, transparent); } .cal-score.hidden-score { color: var(--text-dim); } .cal-day-date { display: flex; align-items: center; gap: 0.35rem; } .cal-day-dow { display: none; } /* Телефон: вместо сетки 7×N — список, каждый день отдельной строкой. Пустые дни тонкие и приглушённые, день с матчем — полноценная строка. */ @media (max-width: 700px) { .cal-month-card { padding: 0.5rem; } .cal-month-grid { grid-template-columns: 1fr; gap: 0.25rem; } .cal-dow, .cal-day.out { display: none; } .cal-day { min-height: 0; flex-direction: row; align-items: center; gap: 0.7rem; padding: 0.5rem 0.65rem; border-radius: 8px; } .cal-day:not(.has-match) { padding: 0.2rem 0.65rem; background: none; box-shadow: none; border-color: var(--border); opacity: 0.6; } .cal-day-date { flex: 0 0 3.2rem; } .cal-day-dow { display: inline; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; } .cal-match { flex-direction: row; align-items: center; gap: 0.55rem; min-width: 0; } .cal-match + .cal-match { border-top: none; padding-top: 0; border-left: 1px solid var(--border); padding-left: 0.55rem; } .cal-match-head { flex-direction: column; align-items: flex-start; gap: 0.2rem; flex: 0 0 auto; } .cal-kind-full, .cal-match-stage { display: none; } .cal-kind-short { display: inline; } .cal-match-head .match-kind-badge { font-size: 0.62rem; padding: 0 0.3rem; } .cal-match-team { flex: 1; min-width: 0; } .cal-match-crest { width: 26px; height: 26px; flex-basis: 26px; } .cal-match-name { font-size: 0.88rem; -webkit-line-clamp: 1; } .cal-match-foot { margin-top: 0; flex: 0 0 auto; } .cal-score { font-size: 0.82rem; } } /* Пресс-центр: рамка заявления — в цвет клуба. Общее правило темы sofl-2 красит border-color всех блоков в фиолетовый и сбивало --team-color; вернули верхнюю полосу и подкрасили остальные грани клубным цветом (удвоенный класс — чтобы перебить :is(...) темы). */ html[data-theme^="sofl-2"] .press-card.press-card { border-color: color-mix(in srgb, var(--team-color, var(--accent)) 38%, transparent); border-top-color: var(--team-color, var(--accent)); } /* «История встреч» на телефоне: тот же каркас карточки, что в календаре. Соперника в истории нет, поэтому «Сезон N», турнир и счёт идут в первой строке, а перед «Дома/В гостях · ИД · стадия» принудительный перенос строки. */ @media (max-width: 900px) { .h2h-cards td.cell-season::before { content: "Сезон\00a0"; } .h2h-cards tbody tr::after { content: ""; order: 4; flex: 1 1 100%; height: 0; } } /* Blazor FocusOnNavigate (App.razor) после загрузки страницы переносит фокус на h1 — для скринридеров это нужно, но браузер рисует вокруг заголовка рамку фокуса. Гасим её только у заголовков: у кнопок, ссылок и полей ввода фокус для клавиатуры остаётся видимым. */ h1:focus, h1:focus-visible, h1[tabindex="-1"] { outline: none; } /* Аналитика финансов: графики внутри fin-panel (как «Сводка»), невысокие и без крупных подписей. */ .fin-viz .fin-panel .viz-sub { margin: -0.45rem 0 0; } .fin-viz .fin-panel .viz-legend { margin: -0.4rem 0 0; } .fin-viz .fin-panel .viz-scroll { margin-top: -0.2rem; } .fin-viz .viz-seg .btn { padding: 0.18rem 0.55rem; } .fin-viz .viz-rank { min-width: 0; } .fin-viz .fin-split { align-items: start; } .fin-viz .viz-radar .viz-cat { font-size: 13px; } /* @упоминания на форуме */ .forum-mention { color: var(--accent); font-weight: 600; text-decoration: none; padding: 0 0.25em; border-radius: 5px; background: var(--accent-soft); } .forum-mention:hover { text-decoration: underline; } .forum-post-target { box-shadow: 0 0 0 2px var(--accent); } .mention-wrap { position: relative; } .mention-hints { position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 30; display: flex; flex-direction: column; min-width: 200px; max-width: calc(100% - 1rem); background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); overflow: hidden; } .mention-hint { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.7rem; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; } .mention-hint:hover { background: var(--accent-soft); } .mention-hint-name { color: var(--text-dim); font-size: 0.8rem; }