/* * game-modern.css — глос/світлий пастельний overlay для ігрових сторінок. * * Активується класом .theme-modern на (виставляється в layout/game.html.twig). * Щоб вимкнути — прибрати клас або закоментувати імпорт у assets/app.js. * * Етап 1: глобальний хром — навбар, сайдбар, базова сітка, картки, таблиці, * кнопки, бейджі, форми. Решта (сквад/лайнап, дашборд клубу, транзакційні * сторінки) — у наступних ітераціях. */ .theme-modern { /* Палітра */ --tm-bg-1: #f6f8fd; --tm-bg-2: #eef1fa; --tm-bg-3: #e8ecf6; --tm-surface: rgba(255, 255, 255, 0.72); --tm-surface-strong: rgba(255, 255, 255, 0.88); --tm-surface-soft: rgba(255, 255, 255, 0.45); --tm-text: #1f2937; --tm-text-muted: #64748b; --tm-text-soft: #94a3b8; --tm-border: rgba(15, 23, 42, 0.08); --tm-border-strong: rgba(15, 23, 42, 0.14); --tm-hairline: rgba(255, 255, 255, 0.7); /* Акценти */ --tm-mint: #5fd3a9; --tm-mint-soft: #d4f4e7; --tm-mint-strong: #2fae87; --tm-lavender: #a48af5; --tm-lavender-soft: #e6dffd; --tm-amber: #f6b73c; --tm-amber-soft: #fde9c2; --tm-rose: #f08aa8; --tm-rose-soft: #fbdde6; --tm-sky: #7ec1f5; --tm-sky-soft: #dceefb; /* Тіні */ --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --tm-shadow: 0 4px 12px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04); --tm-shadow-lg: 0 18px 38px rgba(15, 23, 42, 0.08), 0 8px 12px rgba(15, 23, 42, 0.04); --tm-ring: 0 0 0 4px rgba(95, 211, 169, 0.18); /* Радіуси */ --tm-radius-sm: 10px; --tm-radius: 14px; --tm-radius-lg: 20px; --tm-radius-pill: 999px; /* Bootstrap variable overrides — на рівні теми */ --bs-primary: var(--tm-mint-strong); --bs-primary-rgb: 47, 174, 135; --bs-link-color: var(--tm-mint-strong); --bs-link-hover-color: #1e8b6b; --bs-border-color: var(--tm-border); --bs-border-radius: var(--tm-radius-sm); --bs-border-radius-sm: 8px; --bs-border-radius-lg: var(--tm-radius); --bs-body-color: var(--tm-text); --bs-secondary-color: var(--tm-text-muted); --bs-tertiary-color: var(--tm-text-soft); } /* ============================================================ Базовий фон + типографіка ============================================================ */ .theme-modern body, body.theme-modern { background: radial-gradient(1100px 600px at 0% -10%, var(--tm-lavender-soft), transparent 60%), radial-gradient(900px 500px at 100% 0%, var(--tm-sky-soft), transparent 55%), linear-gradient(180deg, var(--tm-bg-1), var(--tm-bg-2)); color: var(--tm-text); min-height: 100vh; } .theme-modern h1, .theme-modern h2, .theme-modern h3, .theme-modern h4, .theme-modern h5, .theme-modern h6 { letter-spacing: -0.01em; color: var(--tm-text); } .theme-modern .text-muted, .theme-modern .text-body-secondary { color: var(--tm-text-muted) !important; } /* ============================================================ Навбар (глос: напівпрозорий + blur, без зеленого градієнта) ============================================================ */ .theme-modern .bd-navbar { background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--tm-border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .theme-modern .bd-navbar::after { background-image: none !important; display: none; } /* Бренд: на світлій склянці logo_title.png має малий контраст — додаємо тонкий чіп під ним з мʼякою тінню для розбірливості. */ .theme-modern .bd-navbar .navbar-brand { padding: 4px 10px; border-radius: var(--tm-radius-sm); background: linear-gradient(135deg, rgba(95, 211, 169, 0.14), rgba(126, 193, 245, 0.14)); border: 1px solid var(--tm-border); box-shadow: var(--tm-shadow-sm); } .theme-modern .bd-navbar .navbar-brand img { filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25)) drop-shadow(0 0 1px rgba(15, 23, 42, 0.18)); } .theme-modern .bd-navbar .nav-link, .theme-modern .bd-navbar .navbar-toggler { color: var(--tm-text) !important; border-radius: var(--tm-radius-sm); transition: background-color 0.15s ease, color 0.15s ease; } .theme-modern .bd-navbar .nav-link:hover, .theme-modern .bd-navbar .nav-link:focus { background-color: rgba(95, 211, 169, 0.12); color: var(--tm-mint-strong) !important; } .theme-modern .bd-navbar .nav-link.active { background-color: rgba(95, 211, 169, 0.18); color: var(--tm-mint-strong) !important; } .theme-modern .bd-navbar .vr { color: var(--tm-border-strong) !important; opacity: 0.6; } /* День/баланс/корисні бейджі в шапці */ .theme-modern .bd-navbar .text-white { color: var(--tm-text) !important; } .theme-modern .bd-navbar .badge.text-bg-success { background-color: var(--tm-mint-soft) !important; color: var(--tm-mint-strong) !important; border: 1px solid rgba(47, 174, 135, 0.18); box-shadow: var(--tm-shadow-sm); } .theme-modern .bd-navbar .badge.text-bg-warning { background-color: var(--tm-amber-soft) !important; color: #8a5a00 !important; border: 1px solid rgba(246, 183, 60, 0.25); box-shadow: var(--tm-shadow-sm); } .theme-modern .bd-navbar .badge { border-radius: var(--tm-radius-pill); padding: 0.35em 0.7em; font-weight: 600; } /* Аватар/випадайки в шапці */ .theme-modern .bd-navbar .dropdown-menu { background: var(--tm-surface-strong); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-lg); padding: 0.5rem; } .theme-modern .bd-navbar .dropdown-menu .dropdown-item { border-radius: var(--tm-radius-sm); padding: 0.5rem 0.75rem; color: var(--tm-text); } .theme-modern .bd-navbar .dropdown-menu .dropdown-item:hover, .theme-modern .bd-navbar .dropdown-menu .dropdown-item:focus { background-color: rgba(95, 211, 169, 0.12); color: var(--tm-mint-strong); } .theme-modern .bd-navbar .dropdown-menu .dropdown-divider { border-color: var(--tm-border); opacity: 1; } /* Offcanvas (мобільний навбар) — на lg+ показ inline. */ .theme-modern .bd-navbar .offcanvas-lg { background-color: var(--tm-surface-strong) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .theme-modern .bd-navbar .offcanvas-header .offcanvas-title { color: var(--tm-text) !important; } .theme-modern .bd-navbar .btn-close-white { filter: none; } /* Захист: на lg+ навбар-офканвас-хедер ХОВАЄМО (Bootstrap робить це за замовчуванням, але дублюємо, щоб бейджі сезону/балансу не «випадали» орфанами в DOM, якщо специфічність кудись зʼїде). */ @media (min-width: 992px) { .theme-modern .bd-navbar .offcanvas-lg .offcanvas-header { display: none !important; } } /* ============================================================ Sidebar — фростова панель з акцентом на активному пункті ============================================================ */ .theme-modern .bd-sidebar { border-right: none; } .theme-modern .bd-sidebar::after { background-image: none !important; display: none; } @media (min-width: 992px) { .theme-modern .bd-sidebar > .offcanvas-lg { background: var(--tm-surface); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); padding: 0.75rem 0.5rem; position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; } } .theme-modern .bd-links-heading { color: var(--tm-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; } .theme-modern .bd-links-link { border-radius: var(--tm-radius-sm) !important; padding: 0.45rem 0.75rem !important; color: var(--tm-text) !important; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; position: relative; } .theme-modern .bd-links-link:hover, .theme-modern .bd-links-link:focus { background-color: rgba(95, 211, 169, 0.10) !important; color: var(--tm-mint-strong) !important; } .theme-modern .bd-links-link.active { background-color: rgba(95, 211, 169, 0.16) !important; color: var(--tm-mint-strong) !important; font-weight: 600; } .theme-modern .bd-links-link.active::before { content: ""; position: absolute; left: -0.5rem; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 2px; background: linear-gradient(180deg, var(--tm-mint), var(--tm-mint-strong)); } .theme-modern .bd-links-link .badge { border-radius: var(--tm-radius-pill); background-color: var(--tm-bg-3) !important; color: var(--tm-text-muted) !important; font-weight: 600; } /* ============================================================ Загальна сітка / основний контент ============================================================ */ .theme-modern .bd-content { color: var(--tm-text); } .theme-modern .bd-content > h1, .theme-modern .bd-content > h2 { margin-bottom: 1rem; } /* Контейнерні відступи на десктопі */ @media (min-width: 992px) { .theme-modern .container-xxl.bd-layout { padding-top: 0.5rem; } } /* ============================================================ Картки (cards) — гласморфізм з тонкою рамкою ============================================================ */ .theme-modern .card { background: var(--tm-surface); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; } .theme-modern .card.bg-light, .theme-modern .card.bg-body-tertiary, .theme-modern .card.bg-body-secondary { background: var(--tm-surface-strong) !important; } .theme-modern .card-header { background-color: transparent; border-bottom: 1px solid var(--tm-border); font-weight: 600; padding: 0.85rem 1.1rem; } .theme-modern .card-body { padding: 1.1rem; } .theme-modern .card-footer { background-color: transparent; border-top: 1px solid var(--tm-border); } /* ============================================================ Кнопки ============================================================ */ .theme-modern .btn { border-radius: var(--tm-radius-sm); font-weight: 500; transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .theme-modern .btn:focus-visible { box-shadow: var(--tm-ring); } .theme-modern .btn-primary { --bs-btn-bg: var(--tm-mint-strong); --bs-btn-border-color: var(--tm-mint-strong); --bs-btn-hover-bg: #259077; --bs-btn-hover-border-color: #259077; --bs-btn-active-bg: #1e8b6b; --bs-btn-active-border-color: #1e8b6b; box-shadow: 0 2px 6px rgba(47, 174, 135, 0.25); } .theme-modern .btn-outline-primary { --bs-btn-color: var(--tm-mint-strong); --bs-btn-border-color: rgba(47, 174, 135, 0.45); --bs-btn-hover-bg: var(--tm-mint-strong); --bs-btn-hover-border-color: var(--tm-mint-strong); } .theme-modern .btn-secondary { --bs-btn-bg: #e2e8f0; --bs-btn-border-color: #e2e8f0; --bs-btn-color: var(--tm-text); --bs-btn-hover-bg: #cbd5e1; --bs-btn-hover-border-color: #cbd5e1; --bs-btn-hover-color: var(--tm-text); --bs-btn-active-bg: #94a3b8; --bs-btn-active-border-color: #94a3b8; } .theme-modern .btn-outline-secondary { --bs-btn-color: var(--tm-text-muted); --bs-btn-border-color: var(--tm-border-strong); --bs-btn-hover-bg: var(--tm-text-muted); --bs-btn-hover-border-color: var(--tm-text-muted); --bs-btn-hover-color: #fff; } .theme-modern .btn-sm { border-radius: 8px; } .theme-modern .btn-lg { border-radius: var(--tm-radius); } .theme-modern .btn:hover { transform: translateY(-1px); } .theme-modern .btn:active { transform: translateY(0); } /* ============================================================ Таблиці — без агресивних рамок, м'який hover ============================================================ */ .theme-modern .table { --bs-table-bg: transparent; --bs-table-color: var(--tm-text); --bs-table-border-color: var(--tm-border); --bs-table-striped-bg: rgba(95, 211, 169, 0.04); --bs-table-hover-bg: rgba(95, 211, 169, 0.10); } .theme-modern .table > :not(caption) > * > * { padding: 0.65rem 0.75rem; border-bottom-color: var(--tm-border); } .theme-modern .table > thead > tr > th { background-color: rgba(15, 23, 42, 0.025); color: var(--tm-text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--tm-border-strong); } .theme-modern .table > tbody > tr { transition: background-color 0.12s ease; } .theme-modern .table.table-hover > tbody > tr:hover > * { background-color: rgba(95, 211, 169, 0.08); } .theme-modern .table-responsive { border-radius: var(--tm-radius); background: var(--tm-surface); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border: 1px solid var(--tm-border); box-shadow: var(--tm-shadow-sm); overflow-x: auto; } .theme-modern .table-responsive > .table { margin-bottom: 0; } .theme-modern .table-responsive > .table > :not(caption) > *:first-child > * { border-top: 0; } /* Збереження зеленої підкладки для рядка-у-старті */ .theme-modern .table-main > tbody > tr.row-in-lineup { --bs-table-bg: rgba(95, 211, 169, 0.10); --bs-table-striped-bg: rgba(95, 211, 169, 0.14); --bs-table-hover-bg: rgba(95, 211, 169, 0.18); } /* ============================================================ Бейджі — пілюлі з пастельним фоном ============================================================ */ .theme-modern .badge { border-radius: var(--tm-radius-pill); font-weight: 600; padding: 0.35em 0.7em; letter-spacing: 0.01em; } .theme-modern .badge.text-bg-success, .theme-modern .badge.bg-success { background-color: var(--tm-mint-soft) !important; color: var(--tm-mint-strong) !important; } .theme-modern .badge.text-bg-warning, .theme-modern .badge.bg-warning { background-color: var(--tm-amber-soft) !important; color: #8a5a00 !important; } .theme-modern .badge.text-bg-danger, .theme-modern .badge.bg-danger { background-color: var(--tm-rose-soft) !important; color: #b03660 !important; } .theme-modern .badge.text-bg-primary, .theme-modern .badge.bg-primary { background-color: rgba(95, 211, 169, 0.18) !important; color: var(--tm-mint-strong) !important; } .theme-modern .badge.text-bg-secondary, .theme-modern .badge.bg-secondary { background-color: #eef2f7 !important; color: var(--tm-text-muted) !important; } .theme-modern .badge.text-bg-info, .theme-modern .badge.bg-info { background-color: var(--tm-sky-soft) !important; color: #2772b3 !important; } .theme-modern .badge.text-bg-light, .theme-modern .badge.bg-light { background-color: #f1f5f9 !important; color: var(--tm-text) !important; } .theme-modern .badge.bg-dark { background-color: #334155 !important; color: #fff !important; } /* ============================================================ Форми / інпути ============================================================ */ .theme-modern .form-control, .theme-modern .form-select { background-color: var(--tm-surface-strong); border: 1px solid var(--tm-border-strong); border-radius: var(--tm-radius-sm); color: var(--tm-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .theme-modern .form-control:focus, .theme-modern .form-select:focus { border-color: var(--tm-mint); box-shadow: var(--tm-ring); } .theme-modern .form-label { font-weight: 500; color: var(--tm-text-muted); font-size: 0.85rem; } .theme-modern .input-group-text { background-color: var(--tm-bg-3); border-color: var(--tm-border-strong); color: var(--tm-text-muted); } /* ============================================================ Прогрес-бари ============================================================ */ .theme-modern .progress { background-color: var(--tm-bg-3); border-radius: var(--tm-radius-pill); overflow: hidden; } .theme-modern .progress-bar { background: linear-gradient(90deg, var(--tm-mint), var(--tm-mint-strong)); } .theme-modern .progress-bar.bg-primary { background: linear-gradient(90deg, var(--tm-mint), var(--tm-mint-strong)) !important; } .theme-modern .progress-bar.bg-warning { background: linear-gradient(90deg, var(--tm-amber), #d99520) !important; } .theme-modern .progress-bar.bg-danger { background: linear-gradient(90deg, var(--tm-rose), #d6557f) !important; } /* ============================================================ Сповіщення (alerts) — мʼякі підкладки ============================================================ */ .theme-modern .alert { border-radius: var(--tm-radius); border: 1px solid var(--tm-border); background-color: var(--tm-surface-strong); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); box-shadow: var(--tm-shadow-sm); } .theme-modern .alert-success { background-color: var(--tm-mint-soft); color: var(--tm-mint-strong); border-color: rgba(47, 174, 135, 0.18); } .theme-modern .alert-warning { background-color: var(--tm-amber-soft); color: #8a5a00; border-color: rgba(246, 183, 60, 0.25); } .theme-modern .alert-danger { background-color: var(--tm-rose-soft); color: #b03660; border-color: rgba(240, 138, 168, 0.30); } .theme-modern .alert-info { background-color: var(--tm-sky-soft); color: #2772b3; border-color: rgba(126, 193, 245, 0.30); } /* ============================================================ Pagination ============================================================ */ .theme-modern .pagination .page-link { border-radius: var(--tm-radius-sm) !important; margin: 0 2px; border: 1px solid var(--tm-border); color: var(--tm-text); background-color: var(--tm-surface); } .theme-modern .pagination .page-item.active .page-link { background-color: var(--tm-mint-strong); border-color: var(--tm-mint-strong); color: #fff; } /* ============================================================ Модалки ============================================================ */ .theme-modern .modal-content { background: var(--tm-surface-strong); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); box-shadow: var(--tm-shadow-lg); } .theme-modern .modal-header, .theme-modern .modal-footer { border-color: var(--tm-border); } /* ============================================================ Tabs / nav-pills ============================================================ */ .theme-modern .nav-tabs { border-bottom: 1px solid var(--tm-border); } .theme-modern .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--tm-text-muted); font-weight: 500; border-radius: 0; padding: 0.6rem 1rem; } .theme-modern .nav-tabs .nav-link:hover { color: var(--tm-text); background-color: transparent; } .theme-modern .nav-tabs .nav-link.active { background-color: transparent; color: var(--tm-mint-strong); border-bottom-color: var(--tm-mint-strong); } .theme-modern .nav-pills .nav-link { border-radius: var(--tm-radius-pill); color: var(--tm-text-muted); font-weight: 500; } .theme-modern .nav-pills .nav-link.active { background-color: var(--tm-mint-strong); color: #fff; } /* ============================================================ Pause banner / notifications wrap — лишаємо існуючу поведінку, тільки причепурюємо. ============================================================ */ .theme-modern .alerts-wrap .alert { border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-lg); } /* ============================================================ Card-headers з насиченим фоном (.bg-primary/.bg-info/.bg-success/.bg-secondary + .text-white) — на пастелі вони занадто крикливі. Перебиваємо м'якішими акцентами та темним текстом. Зачіпає дашборд клубу, конструкції, тренування, трансфери, гайди — фактично всі ігрові розділи. ============================================================ */ .theme-modern .card-header.bg-primary, .theme-modern .card-header.bg-success { background: linear-gradient(135deg, var(--tm-mint-soft), rgba(95, 211, 169, 0.18)) !important; color: var(--tm-mint-strong) !important; border-bottom: 1px solid rgba(47, 174, 135, 0.18); } .theme-modern .card-header.bg-info { background: linear-gradient(135deg, var(--tm-sky-soft), rgba(126, 193, 245, 0.20)) !important; color: #2772b3 !important; border-bottom: 1px solid rgba(126, 193, 245, 0.25); } .theme-modern .card-header.bg-secondary { background: linear-gradient(135deg, #eef2f7, #e2e8f0) !important; color: var(--tm-text) !important; border-bottom: 1px solid var(--tm-border-strong); } .theme-modern .card-header.bg-warning { background: linear-gradient(135deg, var(--tm-amber-soft), rgba(246, 183, 60, 0.22)) !important; color: #8a5a00 !important; border-bottom: 1px solid rgba(246, 183, 60, 0.25); } .theme-modern .card-header.bg-danger { background: linear-gradient(135deg, var(--tm-rose-soft), rgba(240, 138, 168, 0.22)) !important; color: #b03660 !important; border-bottom: 1px solid rgba(240, 138, 168, 0.28); } .theme-modern .card-header.bg-light { background: rgba(255, 255, 255, 0.55) !important; color: var(--tm-text) !important; border-bottom: 1px solid var(--tm-border); } .theme-modern .card-header.bg-success-subtle { background: var(--tm-mint-soft) !important; color: var(--tm-mint-strong) !important; border-bottom: 1px solid rgba(47, 174, 135, 0.18); } /* .bg-purple — використовується в club.html.twig для картки гравців. Оригінал — насичений #6610f2; мапимо на лавандовий пастель. */ .theme-modern .card-header.bg-purple, .theme-modern .card-header.bg-purple.text-white { background: linear-gradient(135deg, var(--tm-lavender-soft), rgba(164, 138, 245, 0.20)) !important; color: #6a4ed4 !important; border-bottom: 1px solid rgba(164, 138, 245, 0.25); } .theme-modern .card-header.bg-purple .badge.bg-light { background-color: rgba(255, 255, 255, 0.65) !important; color: inherit !important; border: 1px solid rgba(15, 23, 42, 0.06); } /* .bg-purple як утиліта (поза card-header) — для бейджів/чіпсів. */ .theme-modern .bg-purple { background-color: var(--tm-lavender) !important; } /* Картка має тут білий текст за умовчанням — повертаємо темний для нової заливки */ .theme-modern .card-header.bg-primary.text-white, .theme-modern .card-header.bg-success.text-white { color: var(--tm-mint-strong) !important; } .theme-modern .card-header.bg-info.text-white { color: #2772b3 !important; } .theme-modern .card-header.bg-secondary.text-white { color: var(--tm-text) !important; } .theme-modern .card-header.bg-warning.text-white { color: #8a5a00 !important; } .theme-modern .card-header.bg-danger.text-white { color: #b03660 !important; } /* .btn-outline-light, .btn-close-white всередині перефарбованих хедерів */ .theme-modern .card-header.bg-primary .btn-outline-light, .theme-modern .card-header.bg-success .btn-outline-light, .theme-modern .card-header.bg-info .btn-outline-light, .theme-modern .card-header.bg-secondary .btn-outline-light { --bs-btn-color: currentColor; --bs-btn-border-color: currentColor; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: currentColor; --bs-btn-hover-border-color: currentColor; } .theme-modern .card-header .btn-close-white { filter: none; } /* "L1/L5" та інші світлі бейджі всередині перефарбованих хедерів — переграти контраст */ .theme-modern .card-header.bg-primary .badge.bg-light, .theme-modern .card-header.bg-success .badge.bg-light, .theme-modern .card-header.bg-info .badge.bg-light, .theme-modern .card-header.bg-secondary .badge.bg-light { background-color: rgba(255, 255, 255, 0.6) !important; color: inherit !important; border: 1px solid rgba(15, 23, 42, 0.06); } /* ============================================================ Дашборд клубу — герой-банер 3×2 + сітка карток ============================================================ */ /* Банер — менш насичений «водяний» градієнт; KPI-блоки з чіткими хейрлайнами. */ .theme-modern .dashboard-banner { background: linear-gradient(135deg, rgba(95, 211, 169, 0.08) 0%, rgba(126, 193, 245, 0.06) 60%, rgba(164, 138, 245, 0.07) 100%), rgba(255, 255, 255, 0.55); border-radius: var(--tm-radius); margin: -0.5rem; position: relative; } /* Лівий акцентний бар банера — щоб око одразу зачіпалось */ .theme-modern .dashboard-banner::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--tm-mint), var(--tm-mint-strong)); } .theme-modern .card.bg-light:has(.dashboard-banner) { background: var(--tm-surface-strong) !important; overflow: hidden; border: 1px solid var(--tm-border); box-shadow: var(--tm-shadow); } .theme-modern .dashboard-banner > [class*="col-"] { padding: 1.1rem 1.25rem !important; transition: background-color 0.15s ease; } .theme-modern .dashboard-banner > [class*="col-"]:hover { background-color: rgba(255, 255, 255, 0.45); } .theme-modern .dashboard-banner > [class*="col-"]:not(:last-child) { border-bottom: 1px solid var(--tm-border) !important; } @media (min-width: 768px) { .theme-modern .dashboard-banner > [class*="col-"]:nth-last-child(-n+2) { border-bottom: 0 !important; } .theme-modern .dashboard-banner > [class*="col-"]:nth-child(2n) { border-left: 1px solid var(--tm-border) !important; } } .theme-modern .dashboard-banner .text-uppercase { color: var(--tm-text-muted) !important; font-weight: 600; letter-spacing: 0.06em; font-size: 0.72rem; } /* Великі числа в банері — увиразнюємо */ .theme-modern .dashboard-banner .fw-bold { color: var(--tm-text); } .theme-modern .dashboard-banner .fs-5 { font-weight: 700; } /* ============================================================ List groups — flush + action items (upcoming matches на дашборді) ============================================================ */ .theme-modern .list-group { border-radius: var(--tm-radius-sm); overflow: hidden; } .theme-modern .list-group-flush > .list-group-item { background-color: transparent; border-color: var(--tm-border); padding: 0.7rem 1rem; } .theme-modern .list-group-flush > .list-group-item:last-child { border-bottom: 0; } .theme-modern .list-group-item-action { color: var(--tm-text); transition: background-color 0.12s ease, color 0.12s ease; } .theme-modern .list-group-item-action:hover, .theme-modern .list-group-item-action:focus { background-color: rgba(95, 211, 169, 0.10); color: var(--tm-mint-strong); } .theme-modern .list-group-item-action:active { background-color: rgba(95, 211, 169, 0.18); color: var(--tm-mint-strong); } /* ============================================================ Сквад / лайнап — варіант 1 (FUT-стиль, 5×7 grid) Замінюємо темно-зелене поле на мʼякий сапфірно-зелений градієнт із субтильним патерном стрибків, картки гравців — гласморфізм. ============================================================ */ .theme-modern .field-v1 { background: repeating-linear-gradient( 180deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 40px, rgba(255, 255, 255, 0.02) 40px, rgba(255, 255, 255, 0.02) 80px ), linear-gradient(180deg, #4a9b7a 0%, #3a8466 50%, #2f7158 100%); border-radius: var(--tm-radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.15), var(--tm-shadow); padding: 1.5rem 1rem; } .theme-modern .field-v1__cell { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--tm-radius-sm); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .theme-modern .field-v1__cell:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30); border-color: rgba(255, 255, 255, 0.32); } .theme-modern .field-v1__cell--fit-exact-b { border-bottom: 3px solid var(--tm-mint) !important; } .theme-modern .field-v1__cell--fit-similar-b { border-bottom: 3px solid var(--tm-amber) !important; } .theme-modern .field-v1__cell--fit-foreign-b { border-bottom: 3px solid var(--tm-rose) !important; } .theme-modern .field-v1__pos { background: rgba(255, 255, 255, 0.92); padding: 1px 6px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; } .theme-modern .field-v1__rating { background: linear-gradient(135deg, rgba(95, 211, 169, 0.9), rgba(47, 174, 135, 0.9)); color: #fff; font-weight: 700; border-radius: 5px; } .theme-modern .field-v1__name { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); font-weight: 600; } .theme-modern .field-v1__select select { background-color: rgba(255, 255, 255, 0.95); border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.1); color: var(--tm-text); } /* ============================================================ Сквад / лайнап — варіант 2 (sofifa-style, баскети) ============================================================ */ .theme-modern .field-v2__pitch { background: repeating-linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 8%, rgba(255, 255, 255, 0.01) 8%, rgba(255, 255, 255, 0.01) 16% ), linear-gradient(180deg, #5fb38a 0%, #3a8466 50%, #2f7158 100%); border-radius: var(--tm-radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 80px rgba(0, 0, 0, 0.18), var(--tm-shadow); } .theme-modern .field-v2__pos { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 6px; padding: 1px 6px; font-size: 0.7rem; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .theme-modern .field-v2__avatar { background: linear-gradient(135deg, #ffffff, #e6ecf5) !important; color: var(--tm-text) !important; border: 2px solid rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.05); width: 42px; height: 42px; } .theme-modern .field-v2__rating { background: linear-gradient(135deg, rgba(95, 211, 169, 0.92), rgba(47, 174, 135, 0.95)) !important; color: #fff !important; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); /* Перекриваємо .high-rating/.medium-rating, які проставляють старі кольори */ } .theme-modern .field-v2__rating.high-rating { background: linear-gradient(135deg, #4cc38a, #2fae87) !important; } .theme-modern .field-v2__rating.medium-high-rating { background: linear-gradient(135deg, #82d09c, #5fb87a) !important; } .theme-modern .field-v2__rating.medium-rating { background: linear-gradient(135deg, #7ec1f5, #4f9ee0) !important; } .theme-modern .field-v2__rating.medium-low-rating { background: linear-gradient(135deg, #f6b73c, #d99520) !important; color: #4a2f00 !important; } .theme-modern .field-v2__rating.low-rating { background: linear-gradient(135deg, #f08aa8, #d6557f) !important; color: #fff !important; } .theme-modern .field-v2__name { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); font-weight: 600; } .theme-modern .field-v2__select select { background-color: rgba(255, 255, 255, 0.96); border-radius: 5px; color: var(--tm-text); } /* Старі помічники для рейтингу — пом'якшуємо у звичайних таблицях */ .theme-modern td.low-rating { background-color: #fde0e6 !important; } .theme-modern td.medium-low-rating { background-color: #fdebc7 !important; } .theme-modern td.medium-rating { background-color: #dceefb !important; } .theme-modern td.medium-high-rating { background-color: #d4f4e7 !important; color: #1e8b6b !important; } .theme-modern td.high-rating { background-color: rgba(47, 174, 135, 0.85) !important; color: #fff !important; } /* ============================================================ Транзакційні картки — будівлі, тренування, трансфери Більшість використовують `.card` + `.card-header.bg-primary` — це вже причепурили вище. Додаємо: hover-лифт, dashed-стани, стани прогресу, форми всередині карток. ============================================================ */ .theme-modern .card.border-primary { border-color: rgba(47, 174, 135, 0.35) !important; box-shadow: 0 0 0 1px rgba(47, 174, 135, 0.06), var(--tm-shadow-sm); } .theme-modern .card.border-secondary.border-dashed, .theme-modern .card.border-dashed { border-style: dashed !important; border-color: var(--tm-border-strong) !important; background: var(--tm-surface-soft); } .theme-modern .card.border-dashed .card-body { color: var(--tm-text-soft); } /* Список листингу трансферів (transfer-listings — старий шаблон) */ .theme-modern .transfer-listings { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .theme-modern .transfer-listing { background: var(--tm-surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 1rem 1.1rem; box-shadow: var(--tm-shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .theme-modern .transfer-listing:hover { transform: translateY(-2px); box-shadow: var(--tm-shadow); } .theme-modern .transfer-listing h2 { font-size: 1.15rem; margin-bottom: 0.5rem; } /* btn-success — як CTA для апгрейдів і покупок */ .theme-modern .btn-success { --bs-btn-bg: linear-gradient(135deg, #4cc38a, #2fae87); --bs-btn-border-color: var(--tm-mint-strong); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--tm-mint-strong); --bs-btn-hover-border-color: #1e8b6b; --bs-btn-active-bg: #1e8b6b; --bs-btn-active-border-color: #1e8b6b; background: linear-gradient(135deg, #4cc38a, #2fae87); border-color: var(--tm-mint-strong); box-shadow: 0 2px 6px rgba(47, 174, 135, 0.25); } .theme-modern .btn-success:hover { background: var(--tm-mint-strong); } .theme-modern .btn-warning { --bs-btn-bg: #f6b73c; --bs-btn-border-color: #f6b73c; --bs-btn-color: #4a2f00; --bs-btn-hover-bg: #d99520; --bs-btn-hover-border-color: #d99520; --bs-btn-hover-color: #fff; } .theme-modern .btn-outline-warning { --bs-btn-color: #c8841b; --bs-btn-border-color: rgba(246, 183, 60, 0.5); --bs-btn-hover-bg: #f6b73c; --bs-btn-hover-border-color: #f6b73c; --bs-btn-hover-color: #4a2f00; } .theme-modern .btn-danger { --bs-btn-bg: #e76e92; --bs-btn-border-color: #e76e92; --bs-btn-color: #fff; --bs-btn-hover-bg: #d6557f; --bs-btn-hover-border-color: #d6557f; } .theme-modern .btn-outline-danger { --bs-btn-color: #c43b66; --bs-btn-border-color: rgba(231, 110, 146, 0.5); --bs-btn-hover-bg: #e76e92; --bs-btn-hover-border-color: #e76e92; --bs-btn-hover-color: #fff; } .theme-modern .btn-info { --bs-btn-bg: #7ec1f5; --bs-btn-border-color: #7ec1f5; --bs-btn-color: #15405e; --bs-btn-hover-bg: #4f9ee0; --bs-btn-hover-border-color: #4f9ee0; --bs-btn-hover-color: #fff; } /* Прогрес-бар висотою 6px у конструкціях — лишаємо чітку пастельну заливку */ .theme-modern .progress[style*="height: 6px"] .progress-bar, .theme-modern .progress[style*="height:6px"] .progress-bar { background: linear-gradient(90deg, var(--tm-mint), var(--tm-mint-strong)); } /* ============================================================ Page header (ui.pageHeader / ui.pageHeaderOpen) — типовий патерн на сквад/клуб сторінках. Шукаємо великий заголовок з іконкою. ============================================================ */ .theme-modern h1.h2, .theme-modern h1.h3 { color: var(--tm-text); font-weight: 700; letter-spacing: -0.015em; } .theme-modern h1 .text-muted, .theme-modern h2 .text-muted { font-weight: 500; } /* ============================================================ Дрібні правки: горизонтальні лінії, dropdown-divider, border-bottom хелпери всередині карток. ============================================================ */ .theme-modern hr { border-color: var(--tm-border); opacity: 1; } .theme-modern .border, .theme-modern .border-top, .theme-modern .border-bottom, .theme-modern .border-start, .theme-modern .border-end { border-color: var(--tm-border) !important; } /* Бейджі типу "GK", "CB" в полі — лишають свій position-фарбу, тут лише підкладку */ .theme-modern .pos-badge { background-color: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } /* ============================================================ Підтримка нічного режиму (data-bs-theme=dark) — мінімальна, щоб не ламати поточну темну тему. Можна розширити пізніше. ============================================================ */ [data-bs-theme="dark"].theme-modern, [data-bs-theme="dark"] .theme-modern { --tm-bg-1: #0f172a; --tm-bg-2: #111b30; --tm-bg-3: #1e293b; --tm-surface: rgba(30, 41, 59, 0.62); --tm-surface-strong: rgba(30, 41, 59, 0.85); --tm-surface-soft: rgba(30, 41, 59, 0.35); --tm-text: #e2e8f0; --tm-text-muted: #94a3b8; --tm-text-soft: #64748b; --tm-border: rgba(148, 163, 184, 0.18); --tm-border-strong: rgba(148, 163, 184, 0.28); --tm-hairline: rgba(255, 255, 255, 0.05); }