/* Poker Room CRM — тёмная тема (Яндекс.Музыка / Exodus): navy + aurora + glassmorphism. */ :root { --pk-glass: rgba(255, 255, 255, 0.05); --pk-glass-border: rgba(255, 255, 255, 0.10); } /* navy-фон с aurora-свечениями */ body.fi-body, .fi-layout { background: radial-gradient(46% 40% at 82% 8%, rgba(56, 130, 246, 0.26), transparent 64%), radial-gradient(38% 34% at 96% 34%, rgba(139, 92, 246, 0.20), transparent 66%), radial-gradient(40% 38% at 8% 96%, rgba(45, 212, 191, 0.10), transparent 64%), linear-gradient(165deg, #05060f 0%, #080b1c 50%, #0a0e22 100%) !important; background-attachment: fixed !important; } .fi-main, .fi-main-ctn, .fi-page, .fi-dashboard-page { background: transparent !important; } /* Крупный жирный заголовок страницы */ .fi-header-heading, .fi-header h1 { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 55%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Сайдбар и топбар — стекло */ .fi-sidebar, .fi-sidebar-nav, .fi-topbar, .fi-topbar > nav { background: rgba(7, 9, 20, 0.66) !important; backdrop-filter: blur(18px) !important; border-color: var(--pk-glass-border) !important; } /* Секции / формы — стекло БЕЗ backdrop-filter. ВАЖНО: filter/backdrop-filter на контейнере создаёт containing-block для position:fixed. Модалки Filament v5 — это fixed-элементы и по умолчанию НЕ телепортятся в (teleport=null), поэтому, оказавшись внутри такого контейнера, они начинают позиционироваться от него, а не от вьюпорта: пропадает полноэкранное затемнение, окно «зажато» и обрезается overflow:hidden таблицы. Полупрозрачный фон на navy выглядит так же, но containing-block НЕ создаёт. */ .fi-section, .fi-fo-component-ctn { background: var(--pk-glass) !important; border: 1px solid var(--pk-glass-border) !important; border-radius: 16px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* Дропдауны можно оставить настоящим стеклом — они не предки fixed-модалок. */ .fi-dropdown-list { background: var(--pk-glass) !important; backdrop-filter: blur(12px) !important; border: 1px solid var(--pk-glass-border) !important; border-radius: 16px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* Окно модалки — НЕПРОЗРАЧНЫЙ тёмный navy (стекло rgba(255,255,255,.05) делало окно сквозным → сквозь него просвечивала таблица = «окно в окне»). Без backdrop-filter, чтобы не создавать containing-block для вложенного fixed. */ .fi-modal-window { background: #0b0f24 !important; border: 1px solid rgba(129, 140, 248, 0.28) !important; border-radius: 16px !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* === Stat-карточки дашборда: ОДНО стекло на карточку, спарклайн внутри === */ .fi-wi-stats-overview { background: transparent !important; border: 0 !important; box-shadow: none !important; } .fi-wi-stats-overview-stat { position: relative !important; overflow: hidden !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--pk-glass-border) !important; border-radius: 16px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40) !important; /* backdrop-filter убран: создавал containing-block, ломавший fixed-модалки виджетов. */ } /* спарклайн прижат к низу карточки и не вылезает */ .fi-wi-stats-overview-stat-chart { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: 42% !important; opacity: 0.5 !important; pointer-events: none !important; } /* внутренности стата — без своего фона/рамки (убирает «двойную карточку») */ .fi-wi-stats-overview-stat-content, .fi-wi-stats-overview-stat-value, .fi-wi-stats-overview-stat-label, .fi-wi-stats-overview-stat-label-ctn, .fi-wi-stats-overview-stat-description { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* График-виджет — стекло (без backdrop-filter: см. модалки выше). */ .fi-wi-chart { background: var(--pk-glass) !important; border: 1px solid var(--pk-glass-border) !important; border-radius: 16px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42) !important; } /* === Таблицы — брендированный стеклянный контейнер === */ .fi-ta { background: linear-gradient(180deg, rgba(67, 56, 202, 0.26), rgba(30, 27, 75, 0.42)) !important; border: 1px solid rgba(129, 140, 248, 0.35) !important; border-radius: 16px !important; box-shadow: 0 14px 40px rgba(30, 27, 75, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.10) inset !important; /* backdrop-filter убран: создавал containing-block для fixed → модалки экшенов таблицы (New/Edit/Delete) центрировались от таблицы и обрезались overflow ниже. */ overflow: hidden !important; } .fi-ta-table, .fi-ta-cell, .fi-ta-record-content, .fi-ta-row, .fi-ta-header, .fi-ta-header-ctn { background: transparent !important; } .fi-ta-cell { color: #e5e7eb !important; } /* Шапка таблицы — яркий брендовый градиент индиго→фиолет */ .fi-ta-header-cell { background: linear-gradient(135deg, rgba(99, 102, 241, 0.50), rgba(139, 92, 246, 0.38)) !important; color: #ffffff !important; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; border-bottom: 1px solid rgba(129, 140, 248, 0.4) !important; } .fi-ta-row { border-color: rgba(129, 140, 248, 0.14) !important; } .fi-ta-row:nth-child(even) { background: rgba(99, 102, 241, 0.05) !important; } .fi-ta-row:hover { background: rgba(99, 102, 241, 0.16) !important; } /* Primary-кнопки — сине-фиолетовый градиент со свечением */ .fi-btn.fi-color-primary, .fi-btn[class*="fi-color-primary"], .fi-ac-btn-action.fi-color-primary { background-image: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important; border: 0 !important; color: #fff !important; box-shadow: 0 6px 20px rgba(99, 102, 241, 0.42) !important; } .fi-btn.fi-color-primary:hover { filter: brightness(1.08); } /* Бренд — градиентный текст */ .fi-topbar .fi-logo, .fi-sidebar-header .fi-logo { letter-spacing: 0.3px; font-weight: 800; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; } /* === Пункты меню — стильные пилюли (как у Яндекса / Exodus) === */ .fi-sidebar-item-btn { border-radius: 12px !important; margin: 2px 10px !important; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important; } .fi-sidebar-item-btn:hover { background: rgba(99, 102, 241, 0.13) !important; transform: translateX(2px); } .fi-sidebar-item-icon { color: #93c5fd !important; } .fi-sidebar-group-label { color: #818cf8 !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; font-weight: 700; } /* Активный пункт — индиго→фиолет градиент со свечением */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, .fi-sidebar-item-btn[aria-current="page"], .fi-sidebar-item-btn.fi-active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(139, 92, 246, 0.95)) !important; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45) !important; } .fi-sidebar-item.fi-active .fi-sidebar-item-icon, .fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-icon, .fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-label { color: #ffffff !important; } /* === UI/UX читаемость === */ /* Воздух в строках таблиц + читаемый текст ячеек */ .fi-ta-cell { padding-top: 0.68rem !important; padding-bottom: 0.68rem !important; } /* Поля ввода: заметная граница на тёмном фоне + ясный фокус */ .fi-input, .fi-select-input { border-color: rgba(129, 140, 248, 0.22) !important; } .fi-input:focus, .fi-select-input:focus { border-color: rgba(139, 92, 246, 0.65) !important; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28) !important; } /* Ссылки/действия — индиго (контраст на тёмном) */ .fi-ta a, .fi-ta-actions a, .fi-link { color: #93c5fd !important; } /* Аккуратные тёмные скроллбары */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.38); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.55); } *::-webkit-scrollbar-track { background: transparent; } /* === UI/UX v9 === */ /* 1. Статус-бейджи (.fi-badge) — пилюли, читаемые на тёмном navy. Не трогаем per-color (цвет ставит Filament), улучшаем общую оболочку. */ .fi-badge { border-radius: 9999px !important; padding: 0.18rem 0.62rem !important; font-weight: 600 !important; letter-spacing: 0.01em !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; background-color: rgba(255, 255, 255, 0.06) !important; } /* 2. Пагинация — светлый читаемый текст, активная страница в брендовом градиенте */ .fi-pagination { color: #cbd5f5 !important; } .fi-pagination-overview, .fi-pagination-label, .fi-pagination-current-page { color: #b6bfd8 !important; } .fi-pagination-item, .fi-pagination-item a, .fi-pagination-item button, .fi-pagination .fi-btn, .fi-pagination .fi-icon-btn { color: #cbd5f5 !important; border-color: rgba(129, 140, 248, 0.22) !important; background: rgba(255, 255, 255, 0.04) !important; border-radius: 10px !important; } .fi-pagination-item a:hover, .fi-pagination-item button:hover, .fi-pagination .fi-btn:hover, .fi-pagination .fi-icon-btn:hover { background: rgba(99, 102, 241, 0.18) !important; color: #ffffff !important; } .fi-pagination-item.fi-active, .fi-pagination-item[aria-current="page"], .fi-pagination-item.fi-active a, .fi-pagination-item.fi-active button, .fi-pagination-item[aria-current="page"] a, .fi-pagination-item[aria-current="page"] button { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42) !important; } /* Селект «на странице» под тёмные инпуты */ .fi-pagination-records-per-page-select-input, .fi-pagination .fi-select-input, .fi-pagination select { color: #e5e7eb !important; background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(129, 140, 248, 0.22) !important; border-radius: 10px !important; } .fi-pagination-records-per-page-select-input option, .fi-pagination select option { background: #0a0e22 !important; color: #e5e7eb !important; } /* 3. Приглушённый / вторичный текст — поднимаем контраст на navy */ .fi-color-gray, .fi-ta-empty-state-description, .fi-section-header-description, .fi-fo-field-wrp-hint, .fi-fo-field-wrp-helper-text, .fi-fo-field-wrp-error-message ~ .fi-fo-field-wrp-helper-text, .fi-in-text-item-label, .fi-ta-text-item-description { color: #b6bfd8 !important; } .fi-ta-empty-state-heading { color: #cbd5f5 !important; } .fi-input::placeholder, .fi-select-input::placeholder, input::placeholder, textarea::placeholder { color: #9aa4bf !important; opacity: 1 !important; } /* 4. Пустые состояния таблиц — по центру, видимые, иконка в индиго */ .fi-ta-empty-state { text-align: center !important; color: #b6bfd8 !important; } .fi-ta-empty-state-icon-ctn, .fi-ta-empty-state-icon { color: #818cf8 !important; margin-left: auto !important; margin-right: auto !important; } /* 5. Вкладки (.fi-tabs) — активная с брендовым подчёркиванием, неактивные читаемы */ .fi-tabs { border-bottom: 1px solid rgba(129, 140, 248, 0.18) !important; } .fi-tabs-item { color: #b6bfd8 !important; border-radius: 10px 10px 0 0 !important; transition: color 0.15s ease, background 0.15s ease !important; } .fi-tabs-item:hover { color: #ffffff !important; background: rgba(99, 102, 241, 0.10) !important; } .fi-tabs-item.fi-active, .fi-tabs-item[aria-selected="true"] { color: #ffffff !important; background: rgba(99, 102, 241, 0.12) !important; border-bottom: 2px solid transparent !important; border-image: linear-gradient(135deg, #6366f1, #8b5cf6) 1 !important; } .fi-tabs-item.fi-active .fi-tabs-item-icon, .fi-tabs-item[aria-selected="true"] .fi-tabs-item-icon { color: #818cf8 !important; } /* 6. Заголовки секций — чёткая иерархия */ .fi-section-header-heading { color: #f3f4f6 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } .fi-section-header-description { color: #b6bfd8 !important; } .fi-fo-field-wrp-label, .fi-fo-field-wrp-label-content { color: #dbe2f4 !important; font-weight: 600 !important; } /* 7. Тоглы / чекбоксы / радио — акцент в индиго (#6366f1) */ .fi-input-checkbox, input[type="checkbox"].fi-checkbox-input, input[type="radio"].fi-radio-input, input[type="checkbox"], input[type="radio"] { accent-color: #6366f1 !important; } .fi-toggle.fi-toggle-on, .fi-toggle[aria-checked="true"] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.45) inset !important; } .fi-checkbox-input:checked, .fi-radio-input:checked { background-color: #6366f1 !important; border-color: #6366f1 !important; } /* === v10: Адаптив / «резина» таблиц + мобила === */ /* Контент таблицы скроллится по горизонтали — много колонок больше не «сжимаются» в кашу, а прокручиваются. Сама таблица тянется на всю ширину. */ .fi-ta-content, .fi-ta-ctn { overflow-x: auto !important; } .fi-ta-table { width: 100% !important; } /* Колонки складываются по содержимому слева, а последняя забирает свободное место — ширина используется целиком, без рваных пустот между колонками (авто-заполнение). */ .fi-ta-header-cell, .fi-ta-cell { white-space: nowrap; } /* Планшет / узкие экраны: плотнее ячейки и мельче текст — влезает больше, читаемо. */ @media (max-width: 1024px) { .fi-ta-cell, .fi-ta-header-cell { padding-left: 0.55rem !important; padding-right: 0.55rem !important; } .fi-ta-cell { font-size: 0.8rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .fi-ta-header-cell { font-size: 0.64rem !important; letter-spacing: 0.02em; } } /* Мобила: компактный заголовок страницы + контент во всю ширину. */ @media (max-width: 640px) { .fi-header-heading, .fi-header h1 { font-size: 1.5rem !important; } .fi-main { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .fi-ta-cell { white-space: normal !important; } body.fi-body, .fi-layout { background-attachment: scroll !important; } } /* v12: контент СТРОГО во всю ширину + убран зазор между меню и левым краем. Дефолт Filament: .fi-main { max-width: 7xl(1280px); margin-inline:auto } — это и давало узкий блок по центру с дырами по бокам. Перебиваем ВСЕ три причины разом: width:100% + max-width:100% (ширина) + margin-inline:0 (убираем центровку → прижато влево). ?v=12 в renderHook форсит свежий CSS мимо кэша браузера. */ .fi-main, .fi-main-ctn, .fi-page, .fi-page-content { max-width: 100% !important; width: 100% !important; } .fi-main { margin-inline: 0 !important; /* убираем центровку: контент прижат к меню */ padding-left: 1rem !important; padding-right: 1rem !important; /* минимальный зазор от сайдбара */ }