/* ============================================================ BetFlow — Глобальная CSS-тема v1.0 ============================================================ КАК ПОДКЛЮЧИТЬ: Добавить в каждой страницы (admin / trader / merchant): или через JS в конце : const l=document.createElement('link'); l.rel='stylesheet';l.href='/static/betflow-theme.css'; document.head.appendChild(l); ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Manrope:wght@400;500;600;700;800&display=swap'); /* ============================================================ ТОКЕНЫ — базовая палитра ============================================================ */ :root { --bf-bg: #080b10; --bf-surface: #0e1520; --bf-card: #111a27; --bf-card2: #141f2e; --bf-border: #1a2840; --bf-border2: #223050; --bf-txt: #dde6f0; --bf-txt2: #8fa3bc; --bf-txt3: #4d6580; --bf-accent: #3b9eff; --bf-accent2: #1a7adb; --bf-green: #27c76f; --bf-orange: #f0a732; --bf-red: #f04f4f; --bf-purple: #9d6ef5; --bf-accent-bg: rgba(59,158,255,.10); --bf-green-bg: rgba(39,199,111,.10); --bf-orange-bg: rgba(240,167,50,.10); --bf-red-bg: rgba(240,79,79,.09); --bf-purple-bg: rgba(157,110,245,.10); --bf-radius: 12px; --bf-radius-sm: 8px; --bf-radius-xs: 6px; --bf-shadow: 0 4px 24px rgba(0,0,0,.40); --bf-shadow-sm: 0 2px 10px rgba(0,0,0,.30); --bf-font: 'Manrope', -apple-system, sans-serif; --bf-mono: 'JetBrains Mono', monospace; --bf-transition: .18s ease; } /* ============================================================ RESET ПОВЕРХ СУЩЕСТВУЮЩЕГО ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html.bf-theme, html.bf-theme body, html.bf-theme button, html.bf-theme input, html.bf-theme select, html.bf-theme textarea, html.bf-theme table, html.bf-theme td, html.bf-theme th, html.bf-theme label, html.bf-theme p, html.bf-theme span, html.bf-theme h1, html.bf-theme h2, html.bf-theme h3, html.bf-theme li, html.bf-theme a { font-family: var(--bf-font) !important; } /* Monospace для ID, кодов, API-ключей */ td:has(.id), .api-key, [class*="api_key"], [class*="apikey"], code, pre, .mono, [class*="code"] { font-family: var(--bf-mono) !important; } /* ============================================================ BODY / СТРАНИЦА ============================================================ */ html.bf-theme:not(.light), html.bf-theme:not(.light) body { background: var(--bf-bg) !important; color: var(--bf-txt) !important; font-size: 14px !important; line-height: 1.55 !important; -webkit-font-smoothing: antialiased !important; } /* Светлая тема — не перебивать bricks/light.css */ html.bf-theme.light, html.bf-theme.light body { background: var(--background, #e9e9ec) !important; color: var(--text-primary, #18181b) !important; font-size: 14px !important; line-height: 1.55 !important; -webkit-font-smoothing: antialiased !important; } /* ============================================================ БОКОВОЕ МЕНЮ ============================================================ */ /* Контейнер сайдбара — только тёмная тема */ html.bf-theme:not(.light) aside, html.bf-theme:not(.light) nav.sidebar, html.bf-theme:not(.light) .sidebar, html.bf-theme:not(.light) [class*="NavigationMenu"], html.bf-theme:not(.light) [class*="sidebar_sidebar"], html.bf-theme:not(.light) [class*="side-nav"], html.bf-theme:not(.light) [class*="sidenav"], html.bf-theme:not(.light) .nav-panel, html.bf-theme:not(.light) #sidebar { background: #090d14 !important; border-right: 1px solid var(--bf-border) !important; box-shadow: 2px 0 20px rgba(0,0,0,.4) !important; } /* Логотип / бренд */ html.bf-theme .sidebar .logo, html.bf-theme .sidebar .brand, html.bf-theme nav .brand, html.bf-theme aside .brand, html.bf-theme [class*="logoWrap"], html.bf-theme [class*="s-logo"] { color: var(--bf-accent) !important; font-weight: 800 !important; font-size: 16px !important; letter-spacing: -.3px !important; padding: 18px 20px !important; border-bottom: 1px solid var(--bf-border) !important; } /* Пункты меню (не module item_box в merchant LK) */ html.bf-theme nav a, html.bf-theme aside a, html.bf-theme [class*="nav-item"], html.bf-theme [class*="menu-item"], html.bf-theme [class*="sidebar"] a:not([class*="item_box"]), html.bf-theme [class*="sidebar"] li { color: var(--bf-txt2) !important; font-size: 13px !important; font-weight: 500 !important; padding: 8px 20px !important; border-radius: 0 !important; border-left: 3px solid transparent !important; transition: all var(--bf-transition) !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 9px !important; } html.bf-theme nav a:hover, html.bf-theme aside a:hover, html.bf-theme [class*="nav-item"]:hover, html.bf-theme [class*="menu-item"]:hover, html.bf-theme [class*="sidebar"] a:not([class*="item_box"]):hover { color: var(--bf-txt) !important; background: rgba(59,158,255,.06) !important; border-left-color: rgba(59,158,255,.3) !important; } html.bf-theme nav a.active, html.bf-theme nav a[class*="active"], html.bf-theme aside a.active, html.bf-theme [class*="nav-item"][class*="active"], html.bf-theme [class*="menu-item"][class*="active"], html.bf-theme [class*="sidebar"] a:not([class*="item_box"]).active, html.bf-theme [class*="sidebar"] a[class*="item__box_active"] { color: var(--bf-accent) !important; background: rgba(59,158,255,.10) !important; border-left-color: var(--bf-accent) !important; font-weight: 700 !important; } /* Группы меню */ [class*="nav-group"], [class*="menu-group"], [class*="nav-section"], [class*="nav-header"] { font-size: 10px !important; font-weight: 700 !important; color: var(--bf-txt3) !important; text-transform: uppercase !important; letter-spacing: .08em !important; padding: 14px 20px 5px !important; } /* ============================================================ ВЕРХНЯЯ ПАНЕЛЬ (header) ============================================================ */ header.topbar, .topbar, [class*="topbar"], [class*="Topbar"], [class*="trader-topbar"] { background: #090d14 !important; border-bottom: 1px solid var(--bf-border) !important; box-shadow: 0 2px 16px rgba(0,0,0,.35) !important; padding: 0 24px !important; height: 54px !important; min-height: 54px !important; display: flex !important; align-items: center !important; } /* ============================================================ ОСНОВНОЙ КОНТЕНТ ============================================================ */ html.bf-theme:not(.light) main:not(.h-full), html.bf-theme:not(.light) .main:not(.h-full), html.bf-theme:not(.light) [class*="PageMain"], html.bf-theme:not(.light) [class*="page-content"] { background: var(--bf-bg) !important; } html.bf-theme:not(.light) main.h-full { background: var(--bf-bg) !important; padding: 0 !important; } /* Заголовки страниц */ h1, .page-title, [class*="page-title"] { font-size: 22px !important; font-weight: 800 !important; color: var(--bf-txt) !important; margin: 0 0 4px !important; letter-spacing: -.3px !important; } h2 { font-size: 16px !important; font-weight: 700 !important; color: var(--bf-accent) !important; margin: 24px 0 12px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--bf-border) !important; } h3 { font-size: 14px !important; font-weight: 700 !important; } .subtitle, .sub, [class*="subtitle"], [class*="page-sub"] { font-size: 13px !important; color: var(--bf-txt2) !important; margin-bottom: 20px !important; } /* ============================================================ КАРТОЧКИ / БЛОКИ (только контейнеры — не CSS-module дочерние элементы) ============================================================ */ html.bf-theme .stat-card, html.bf-theme .card, html.bf-theme .section, html.bf-theme .panel, html.bf-theme [class*="chartsContainer"], html.bf-theme [class*="balance__box"], html.bf-theme [class*="blockInfo_wrapper"], html.bf-theme [class*="merchant-dashboard-kpi_row"] > [class*="card"], html.bf-theme [class*="table-wrap"], html.bf-theme [class*="req-card"] { background: var(--bf-card) !important; border: 1px solid var(--bf-border) !important; border-radius: var(--bf-radius) !important; box-shadow: var(--bf-shadow-sm) !important; } html.bf-theme .stat-card:hover, html.bf-theme [class*="balance__box"]:hover, html.bf-theme [class*="merchant-dashboard-kpi_row"] > [class*="card"]:hover { border-color: var(--bf-border2) !important; box-shadow: 0 4px 20px rgba(59,158,255,.08) !important; } /* Внутри карточек — текст без рамок (CSS modules: card-balance_*, block-info_*, kpi_*) */ html.bf-theme [class*="balance__box_title"], html.bf-theme [class*="balance__head"], html.bf-theme [class*="balance__head_info"], html.bf-theme [class*="balance__head_info_description"], html.bf-theme [class*="balance__head_info_value"], html.bf-theme [class*="blockInfo_head"], html.bf-theme [class*="blockInfo__head_title"], html.bf-theme [class*="blockInfo__head_amount"], html.bf-theme [class*="merchant-dashboard-kpi"] [class*="label"], html.bf-theme [class*="merchant-dashboard-kpi"] [class*="value"], html.bf-theme [class*="merchant-dashboard-kpi"] [class*="hint"], html.bf-theme [class*="merchant-dashboard-kpi"] [class*="actions"], html.bf-theme [class*="merchant-dashboard-kpi"] [class*="link"] { background: transparent !important; border: none !important; box-shadow: none !important; } /* KPI / stat cards — как в betflow-full-preview (.sc .lbl .val) */ html.bf-theme [class*="merchant-dashboard-kpi"] [class*="label"], html.bf-theme [class*="balance__box_title"], html.bf-theme [class*="blockInfo__head_title"] { font-size: 10px !important; font-weight: 700 !important; color: var(--bf-txt3) !important; text-transform: uppercase !important; letter-spacing: .07em !important; display: block !important; margin-bottom: 8px !important; } html.bf-theme [class*="merchant-dashboard-kpi"] [class*="value"], html.bf-theme [class*="balance__head_amount"], html.bf-theme [class*="blockInfo__head_amount"] { font-size: 23px !important; font-weight: 800 !important; font-family: var(--bf-mono) !important; color: var(--bf-txt) !important; letter-spacing: -.5px !important; } html.bf-theme [class*="merchant-dashboard-kpi"] [class*="hint"], html.bf-theme [class*="balance__head_info_description"] { font-size: 12px !important; color: var(--bf-txt2) !important; font-weight: 400 !important; text-transform: none !important; } html.bf-theme [class*="merchant-dashboard-kpi_row"] { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px !important; margin-bottom: 22px !important; } html.bf-theme [class*="merchant-dashboard-kpi_row"] > [class*="card"] { padding: 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } html.bf-theme [class*="merchant-dashboard-kpi"] [class*="quick"] { background: var(--bf-card2) !important; border: 1px solid var(--bf-border) !important; border-radius: var(--bf-radius-xs) !important; padding: 6px 10px !important; font-size: 12px !important; color: var(--bf-txt2) !important; text-decoration: none !important; } html.bf-theme [class*="wrapper_balance"] { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 10px !important; margin-bottom: 18px !important; } html.bf-theme [class*="balance__box"] { padding: 14px 16px !important; } html.bf-theme [class*="balance_head"] { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } html.bf-theme [class*="balance__head_info"] { max-width: none !important; width: 100% !important; flex-direction: row !important; justify-content: space-between !important; align-items: baseline !important; gap: 8px !important; } html.bf-theme [class*="balance__head_info_description"] { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; line-height: 1.35 !important; } html.bf-theme [class*="balance__head_info_value"] { flex-shrink: 0 !important; white-space: nowrap !important; } html.bf-theme [class*="balance__head_amount"] { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: clamp(16px, 4vw, 23px) !important; } html.bf-theme [class*="blockInfo_wrapper"] { padding: 14px 16px !important; border-radius: var(--bf-radius) !important; } html.bf-theme [class*="blockInfo_icon"] { background: var(--bf-card2) !important; border: 1px solid var(--bf-border) !important; border-radius: 50% !important; padding: 12px !important; } /* ============================================================ ТАБЛИЦЫ ============================================================ */ table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; } thead, table thead { background: transparent !important; } th { color: var(--bf-txt3) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; padding: 10px 14px !important; border-bottom: 1px solid var(--bf-border) !important; white-space: nowrap !important; } td { padding: 11px 14px !important; border-bottom: 1px solid rgba(26,40,64,.6) !important; color: var(--bf-txt) !important; vertical-align: middle !important; } tr:last-child td { border-bottom: none !important; } tr:hover td { background: rgba(59,158,255,.03) !important; } /* ID в таблицах — акцентный моно */ td:first-child, .id-cell, [class*="id-col"] { font-family: var(--bf-mono) !important; font-size: 12px !important; color: var(--bf-accent) !important; font-weight: 600 !important; } /* ============================================================ БЕЙДЖИ / СТАТУСЫ ============================================================ */ /* Статусы — только явные utility-классы (не CSS modules *status* / *badge*) */ .badge-success, .badge-active, .badge-online, .status-success, .status-active, .status-online { color: var(--bf-green) !important; font-weight: 700 !important; background: transparent !important; border: none !important; padding: 0 !important; } .badge-error, .badge-disabled, .badge-inactive, .status-error, .status-disabled { color: var(--bf-orange) !important; font-weight: 700 !important; background: transparent !important; border: none !important; padding: 0 !important; } .badge-pending, .status-pending { color: var(--bf-accent) !important; font-weight: 700 !important; background: transparent !important; border: none !important; padding: 0 !important; } .badge-fail, .badge-cancel, .status-fail, .status-cancel { color: var(--bf-red) !important; font-weight: 700 !important; background: transparent !important; border: none !important; padding: 0 !important; } /* ============================================================ КНОПКИ ============================================================ */ button, .btn, [class*="btn"], [type="submit"], [type="button"] { font-family: var(--bf-font) !important; font-weight: 700 !important; font-size: 13px !important; border-radius: var(--bf-radius-sm) !important; border: none !important; cursor: pointer !important; transition: all var(--bf-transition) !important; padding: 9px 18px !important; line-height: 1 !important; } /* Основная кнопка */ button.primary, .btn-primary, [class*="btn-primary"], button[class*="create"], button[class*="add"], button[class*="submit"], button[class*="save"], .btn-green, [class*="btn-success"] { background: var(--bf-accent) !important; color: #05111f !important; box-shadow: 0 2px 12px rgba(59,158,255,.25) !important; } button.primary:hover, .btn-primary:hover, [class*="btn-primary"]:hover { background: #5aadff !important; box-shadow: 0 4px 18px rgba(59,158,255,.40) !important; transform: translateY(-1px) !important; } /* Вторичная кнопка */ button.secondary, .btn-secondary, [class*="btn-secondary"], button[class*="cancel"], .btn-outline { background: var(--bf-card2) !important; color: var(--bf-txt2) !important; border: 1px solid var(--bf-border2) !important; } button.secondary:hover, .btn-secondary:hover { color: var(--bf-txt) !important; border-color: var(--bf-accent) !important; } /* Опасная кнопка */ .btn-danger, .btn-delete, [class*="btn-danger"], button[class*="delete"], button[class*="remove"] { background: var(--bf-red-bg) !important; color: var(--bf-red) !important; border: 1px solid rgba(240,79,79,.3) !important; } .btn-danger:hover, [class*="btn-danger"]:hover { background: var(--bf-red) !important; color: #fff !important; } /* Кнопка-действие (Изменить, Тест, Сбросить) */ .btn-action, button[class*="action"], button[class*="edit"], button[class*="test"], button[class*="reset"] { background: rgba(59,158,255,.08) !important; color: var(--bf-accent) !important; border: 1px solid rgba(59,158,255,.2) !important; padding: 6px 12px !important; font-size: 12px !important; } .btn-action:hover { background: rgba(59,158,255,.18) !important; } /* ============================================================ ТОГГЛЫ / ПЕРЕКЛЮЧАТЕЛИ ============================================================ */ input[type="checkbox"][class*="toggle"], input[type="checkbox"][class*="switch"], .toggle, .switch, [class*="toggle"], [class*="switch"] { accent-color: var(--bf-accent) !important; } /* Кастомные toggle (div-based) */ [class*="toggle-track"], [class*="switch-track"] { background: var(--bf-border2) !important; border-radius: 99px !important; transition: background var(--bf-transition) !important; } [class*="toggle-track"][class*="on"], [class*="toggle-track"][class*="active"], [class*="switch-track"][class*="on"] { background: var(--bf-accent) !important; } [class*="toggle-thumb"], [class*="switch-thumb"] { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.3) !important; } /* ============================================================ ИНПУТЫ / ПОЛЯ ВВОДА ============================================================ */ input:not([type="checkbox"]):not([type="radio"]), textarea, select, [class*="input-field"], [class*="form-control"]:not(label):not([class*="label"]) { background: #080b10 !important; border: 1px solid var(--bf-border2) !important; border-radius: var(--bf-radius-sm) !important; color: var(--bf-txt) !important; font-family: var(--bf-font) !important; font-size: 13px !important; padding: 9px 12px !important; transition: border-color var(--bf-transition), box-shadow var(--bf-transition) !important; outline: none !important; } /* Составные поля (MultiInput, PrimaryInput shell) — рамка на обёртке, не на каждом input */ html.bf-theme .bf-input-shell input:not([type="checkbox"]):not([type="radio"]), html.bf-theme .bf-composite-input input:not([type="checkbox"]):not([type="radio"]) { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; outline: none !important; } html.bf-theme .bf-input-with-icon input:not([type="checkbox"]):not([type="radio"]) { padding-left: 40px !important; } html.bf-theme .bf-composite-input .bf-composite-input__left { padding-left: 36px !important; padding-right: 12px !important; } html.bf-theme .bf-composite-input .bf-composite-input__right { padding-left: 12px !important; padding-right: 0 !important; } input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus, [class*="input-field"]:focus { border-color: var(--bf-accent) !important; box-shadow: 0 0 0 3px rgba(59,158,255,.12) !important; } /* Подписи полей — без рамки (не путать с input) */ html.bf-theme label.field-label, html.bf-theme .field-label, html.bf-theme [class*="field-label"] { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 6px !important; margin: 14px 0 6px !important; display: block !important; font-size: 11px !important; font-weight: 600 !important; color: var(--bf-txt3) !important; text-transform: uppercase !important; letter-spacing: .07em !important; cursor: default !important; } /* Только чтение / disabled — без «поля ввода», но значение видно */ html.bf-theme input:disabled, html.bf-theme input[readonly]:not([type="checkbox"]):not([type="radio"]), html.bf-theme input.input-readonly { background: var(--bf-card) !important; border: 1px dashed var(--bf-border) !important; color: var(--bf-txt2) !important; cursor: not-allowed !important; box-shadow: none !important; opacity: 0.92 !important; } input::placeholder, textarea::placeholder { color: var(--bf-txt3) !important; } select option { background: var(--bf-card) !important; color: var(--bf-txt) !important; } /* ============================================================ ПОИСК ============================================================ */ /* Поиск — без принудительного отступа под лупу (иконки убраны в UI) */ input[type="search"] { padding: 9px 12px !important; } /* ============================================================ ПАГИНАЦИЯ ============================================================ */ /* Пагинация — plain numbers (не карточки) */ html.bf-theme [class*="pagination"] button, html.bf-theme [class*="Pagination"] button { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: var(--bf-radius-xs) !important; padding: 4px 8px !important; min-width: 2rem !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-secondary, var(--bf-txt2)) !important; } html.bf-theme [class*="pagination"] button:hover:not(:disabled), html.bf-theme [class*="Pagination"] button:hover:not(:disabled) { color: var(--bf-accent) !important; background: transparent !important; } html.bf-theme [class*="pagination"] button[class*="selected"], html.bf-theme [class*="Pagination"] button[class*="selected"] { color: var(--bf-accent) !important; font-weight: 800 !important; background: transparent !important; } /* ============================================================ МОДАЛЬНЫЕ ОКНА ============================================================ */ /* Модалки admin — overlay затемняет, dialog по центру (не на весь экран) */ html.bf-theme [class*="modalOverlay"] { position: fixed !important; inset: 0 !important; z-index: 200 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(4px) !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; max-width: none !important; width: auto !important; height: auto !important; } html.bf-theme [class*="modalOverlay"] > [role="dialog"], html.bf-theme [class*="modalOverlay"] > [class*="modal"]:not([class*="Overlay"]) { position: relative !important; width: min(520px, 100%) !important; max-height: min(90vh, 820px) !important; overflow-y: auto !important; margin: 0 !important; background: var(--background, var(--bf-card)) !important; border: 1px solid var(--bf-border2, var(--admin-border)) !important; border-radius: 14px !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important; } html.bf-theme [class*="modalWide"] { width: min(720px, 100%) !important; } html.bf-theme [class*="modal-overlay"], html.bf-theme [class*="modal-backdrop"], html.bf-theme [class*="dialog-overlay"] { background: rgba(0,0,0,.72) !important; backdrop-filter: blur(4px) !important; } [class*="modal-header"], [class*="modal-title"] { border-bottom: 1px solid var(--bf-border) !important; padding: 16px 20px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--bf-txt) !important; } [class*="modal-body"] { padding: 18px 20px !important; color: var(--bf-txt2) !important; font-size: 13px !important; } [class*="modal-footer"] { border-top: 1px solid var(--bf-border) !important; padding: 14px 20px !important; display: flex !important; gap: 10px !important; justify-content: flex-end !important; } /* ============================================================ ДРОПДАУНЫ / МЕНЮ ============================================================ */ [class*="dropdown"], [class*="dropdown-menu"], [class*="popover"], [class*="menu-popup"] { background: var(--bf-card2) !important; border: 1px solid var(--bf-border2) !important; border-radius: var(--bf-radius-sm) !important; box-shadow: 0 8px 30px rgba(0,0,0,.5) !important; } [class*="dropdown-item"], [class*="menu-option"] { color: var(--bf-txt2) !important; font-size: 13px !important; padding: 9px 14px !important; transition: background var(--bf-transition) !important; } [class*="dropdown-item"]:hover { background: var(--bf-accent-bg) !important; color: var(--bf-txt) !important; } /* ============================================================ УВЕДОМЛЕНИЯ / TOAST ============================================================ */ [class*="toast"], [class*="notification"], [class*="alert"] { background: var(--bf-card2) !important; border: 1px solid var(--bf-border2) !important; border-radius: var(--bf-radius-sm) !important; color: var(--bf-txt) !important; box-shadow: var(--bf-shadow) !important; font-size: 13px !important; } [class*="toast-success"], [class*="alert-success"] { border-left: 3px solid var(--bf-green) !important; } [class*="toast-error"], [class*="alert-error"], [class*="toast-danger"], [class*="alert-danger"] { border-left: 3px solid var(--bf-red) !important; } [class*="toast-warning"], [class*="alert-warning"] { border-left: 3px solid var(--bf-orange) !important; } [class*="toast-info"], [class*="alert-info"] { border-left: 3px solid var(--bf-accent) !important; } /* ============================================================ ВКЛАДКИ (TABS) ============================================================ */ [class*="tabs"], [class*="tab-list"], [role="tablist"] { border-bottom: 1px solid var(--bf-border) !important; background: transparent !important; display: flex !important; gap: 2px !important; } [class*="tab-item"], [role="tab"], [class*="tab-btn"] { color: var(--bf-txt2) !important; font-size: 13px !important; font-weight: 600 !important; padding: 10px 18px !important; border-bottom: 2px solid transparent !important; cursor: pointer !important; transition: all var(--bf-transition) !important; background: transparent !important; border-radius: 0 !important; } [class*="tab-item"]:hover { color: var(--bf-txt) !important; } [class*="tab-item"][class*="active"], [role="tab"][aria-selected="true"] { color: var(--bf-accent) !important; border-bottom-color: var(--bf-accent) !important; } /* ============================================================ СПИННЕР / ЗАГРУЗКА ============================================================ */ [class*="spinner"], [class*="loader"], [class*="loading"] { border-color: var(--bf-border2) !important; border-top-color: var(--bf-accent) !important; } /* ============================================================ ХЛЕБНЫЕ КРОШКИ ============================================================ */ [class*="breadcrumb"] { font-size: 12px !important; color: var(--bf-txt3) !important; margin-bottom: 16px !important; } [class*="breadcrumb"] a { color: var(--bf-txt2) !important; } [class*="breadcrumb"] .active, [class*="breadcrumb"] span:last-child { color: var(--bf-txt) !important; } /* ============================================================ СКРОЛЛБАР ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bf-bg); } ::-webkit-scrollbar-thumb { background: var(--bf-border2); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--bf-txt3); } /* ============================================================ ПРОГРЕСС-БАР ============================================================ */ progress, [class*="progress-bar"], [role="progressbar"] { background: var(--bf-border) !important; border-radius: 99px !important; overflow: hidden !important; } progress::-webkit-progress-value, [class*="progress-fill"], [class*="progress-value"] { background: var(--bf-accent) !important; border-radius: 99px !important; } /* ============================================================ СПЕЦИФИКА BETFLOW — фиксы под конкретные классы по скриншотам ============================================================ */ /* Волны провайдеров — блок настроек сверху */ .wave-settings, [class*="wave"] { background: var(--bf-card) !important; border: 1px solid var(--bf-border) !important; border-radius: var(--bf-radius) !important; padding: 16px 20px !important; margin-bottom: 20px !important; } /* Колонка SUCCESS % в провайдерах */ td [class*="success"], td .success-rate { color: var(--bf-green) !important; font-weight: 700 !important; font-family: var(--bf-mono) !important; } /* ID сделок (BF-XXXXXX) */ [class*="deal-id"], [class*="order-id"], td a[href*="deal"], td a[href*="order"] { font-family: var(--bf-mono) !important; color: var(--bf-accent) !important; font-weight: 600 !important; font-size: 12px !important; } [class*="deal-id"]:hover, td a[href*="deal"]:hover { text-decoration: underline !important; text-underline-offset: 3px !important; } /* Суммы в рублях */ [class*="amount"], [class*="sum"], td [class*="rub"], td [class*="usdt"] { font-family: var(--bf-mono) !important; font-weight: 700 !important; } /* Онлайн / оффлайн статус трейдера */ [class*="online"]:not(input):not(button) { color: var(--bf-green) !important; font-weight: 700 !important; } [class*="offline"]:not(input):not(button) { color: var(--bf-txt3) !important; } /* Кнопки в таблице провайдеров (Изменить / Тест / Сбросить / Удалить) */ td button, td .btn { padding: 5px 11px !important; font-size: 11px !important; font-weight: 700 !important; border-radius: var(--bf-radius-xs) !important; margin-right: 4px !important; } /* Фильтры над таблицами (admin/trader — не ломать grid мерчанта) */ html.bf-theme [class*="filter-row"], html.bf-theme [class*="search-bar"], html.bf-theme [class*="toolbar"]:not([class*="filters"]) { display: flex !important; gap: 10px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; align-items: center !important; } html.bf-theme [class*="filters_wrapper"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; align-items: start !important; width: 100% !important; } @media (max-width: 660px) { html.bf-theme [class*="filters_wrapper"] { grid-template-columns: 1fr !important; } } html.bf-theme [class*="transaction__content_filters"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } html.bf-theme [class*="dateFilter"], html.bf-theme [class*="datePickerWrapper"] { width: 100% !important; max-width: 280px !important; } html.bf-theme [class*="table__items_desctop"] > div:only-child, html.bf-theme [class*="table__items_mobile"] > div:only-child { padding: 28px 12px !important; min-height: 72px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; position: relative !important; z-index: 0 !important; } /* Баланс / USDT суммы — только явные value-классы */ html.bf-theme [class*="blockInfo__head_amount"], [class*="usdt"], [class*="balance-value"] { color: var(--bf-accent) !important; font-family: var(--bf-mono) !important; font-weight: 700 !important; } /* Реферальный баланс — фиолетовый */ [class*="ref-balance"], [class*="referral-balance"] { color: var(--bf-purple) !important; font-family: var(--bf-mono) !important; font-weight: 700 !important; } /* ============================================================ ССЫЛКИ ============================================================ */ a { color: var(--bf-accent) !important; text-decoration: none !important; transition: color var(--bf-transition) !important; } a:hover { color: #5aadff !important; } /* ============================================================ РАЗДЕЛИТЕЛИ ============================================================ */ hr, [class*="divider"] { border: none !important; border-top: 1px solid var(--bf-border) !important; margin: 16px 0 !important; } /* ============================================================ ЧИСЛА — МОНО ВЕЗДЕ ГДЕ ЦИФРЫ ВАЖНЫ ============================================================ */ [class*="count"], [class*="number"], [class*="amount"], [class*="rate"], [class*="percent"] { font-family: var(--bf-mono) !important; } /* ============================================================ АНИМАЦИИ (тонкие, не раздражающие) ============================================================ */ @keyframes bf-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } main, .main, .content, [class*="page-content"] { animation: bf-fadein .25s ease !important; } /* ============================================================ LEGACY TOKEN BRIDGE (admin bricks / merchant LK / trader) ============================================================ */ /* Тёмная тема — bridge поверх dark.css */ html.bf-theme:not(.light) { --background: var(--bf-bg); --background-color: var(--bf-bg); --text-primary: var(--bf-txt); --text-secondary: var(--bf-txt2); --text-brand: var(--bf-accent); --layer: var(--bf-surface); --layer-above: var(--bf-card); --default-900: var(--bf-txt); --default-600: var(--bf-txt2); --default-200: var(--bf-border); --default-100: var(--bf-card); --default-50: var(--bf-card2); --bg-layer: var(--bf-bg); --bg-base: var(--bf-card); --box: var(--bf-card); --border: var(--bf-border); --border-1: var(--bf-border); --base-brand: var(--bf-accent); --base-info: var(--bf-accent); --base-blue: var(--bf-accent2); --success: var(--bf-green); --danger: var(--bf-red); --admin-border: var(--bf-border); --admin-surface: var(--bf-card); --admin-accent: var(--bf-accent); } /* Светлая тема — не затираем переменные из /theme/light.css */ html.bf-theme.light { --bf-bg: #e9e9ec; --bf-surface: #f4f6f8; --bf-card: #ffffff; --bf-card2: #f8f9fb; --bf-border: #dfe3ea; --bf-border2: #cdd3de; --bf-txt: #18181b; --bf-txt2: #52525b; --bf-txt3: #71717a; --admin-border: rgba(38, 39, 48, 0.12); --admin-surface: #ffffff; } html.bf-theme.light [class*="PageMain"] { background: var(--background, #e9e9ec) !important; border-color: var(--admin-border) !important; } html.bf-theme.light aside, html.bf-theme.light [class*="NavigationMenu"], html.bf-theme.light [class*="sidebar_sidebar"] { background: #f4f6f8 !important; border-right: 1px solid var(--admin-border) !important; box-shadow: none !important; } html.bf-theme.light [class*="NavigationMenu"] a, html.bf-theme.light [class*="NavMenu"] a, html.bf-theme.light [class*="NavMenu"] button[class*="row"] { color: var(--text-secondary) !important; } html.bf-theme.light table tbody td, html.bf-theme.light [class*="table"] tbody td { color: var(--text-primary) !important; border-bottom-color: var(--admin-border) !important; } html.bf-theme.light [class*="tableWrap"], html.bf-theme.light [class*="table"] { background: var(--layer, #fff) !important; } html.bf-theme.light input:not([type="checkbox"]):not([type="radio"]), html.bf-theme.light select, html.bf-theme.light textarea { background: var(--input-fill, #fff) !important; color: var(--text-primary) !important; border-color: var(--input-border, #d4d4d8) !important; } html.bf-theme.light [class*="sign-in"] [class*="inputsBox"], html.bf-theme.light [class*="SignInPage_inputsBox"] { background: transparent !important; } /* ============================================================ ADMIN — NavigationMenu / NavMenu (только тёмная тема) ============================================================ */ html.bf-theme:not(.light) [class*="NavigationMenu"], html.bf-theme:not(.light) aside[class*="Sidebar"], html.bf-theme:not(.light) nav[class*="sidebarRoot"] { background: #090d14 !important; border-right: 1px solid var(--bf-border) !important; } html.bf-theme:not(.light) [class*="NavigationMenu"] a, html.bf-theme:not(.light) [class*="NavMenu"] a, html.bf-theme:not(.light) [class*="NavMenu"] button[class*="row"], html.bf-theme:not(.light) [class*="sidebarRoot"] a, html.bf-theme:not(.light) [class*="sidebarRoot"] button[class*="row"] { color: var(--bf-txt2) !important; font-size: 13px !important; font-weight: 500 !important; border-radius: var(--bf-radius-sm) !important; } html.bf-theme:not(.light) [class*="NavMenu"] [class*="rowActive"], html.bf-theme:not(.light) [class*="NavMenu"] a[class*="active"] { color: var(--bf-accent) !important; background: rgba(59,158,255,.10) !important; font-weight: 700 !important; } html.bf-theme:not(.light) [class*="PageMain"] { background: var(--bf-bg) !important; border-color: var(--bf-border) !important; box-shadow: var(--bf-shadow-sm) !important; } /* ============================================================ MERCHANT LK — не ломать collapsible sidebar (module CSS) ============================================================ */ html.bf-theme:not(.light) [class*="sidebar_sidebar"] { background: #090d14 !important; border-right: 1px solid var(--bf-border) !important; width: auto !important; max-width: none !important; padding: 16px 20px 16px 24px !important; } html.bf-theme [class*="sidebar"] [class*="item_box"] { padding: 12px !important; border-left: none !important; border-radius: var(--bf-radius-sm) !important; justify-content: center !important; color: var(--bf-txt2) !important; } html.bf-theme [class*="sidebar"] [class*="item__box_active"] { background: rgba(59,158,255,.10) !important; } html.bf-theme [class*="sidebar"] [class*="item__box_active"]::after { background-color: var(--bf-accent) !important; } html.bf-theme [class*="sidebar"] [class*="item__box_active"] svg { stroke: var(--bf-accent) !important; } html.bf-theme [class*="sidebar"] [class*="item__name"] { color: var(--bf-txt) !important; font-size: 14px !important; } html.bf-theme header[class*="header_wrapper"] { height: auto !important; min-height: unset !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } html.bf-theme:not(.light) .flex.flex-1.h-\[100vh\] { background: var(--bf-bg) !important; } /* ============================================================ СВЕТЛАЯ ТЕМА — финальные overrides (после всех dark-правил) ============================================================ */ html.bf-theme.light, html.bf-theme.light body, html.bf-theme.light [class*="PageWrapper"], html.bf-theme.light [class*="Page"], html.bf-theme.light .flex.flex-1.h-\[100vh\] { background: var(--background, #e9e9ec) !important; color: var(--text-primary, #18181b) !important; } html.bf-theme.light [class*="PageMain"], html.bf-theme.light main:not(.h-full) { background: var(--background, #e9e9ec) !important; } html.bf-theme.light aside, html.bf-theme.light [class*="NavigationMenu"], html.bf-theme.light aside[class*="Sidebar"], html.bf-theme.light nav[class*="sidebarRoot"], html.bf-theme.light [class*="sidebar_sidebar"] { background: #f4f6f8 !important; border-right: 1px solid var(--admin-border, rgba(38, 39, 48, 0.12)) !important; box-shadow: none !important; } html.bf-theme.light [class*="NavigationMenu"] a, html.bf-theme.light [class*="NavMenu"] a, html.bf-theme.light [class*="NavMenu"] button[class*="row"], html.bf-theme.light nav a, html.bf-theme.light aside a { color: var(--text-secondary, #52525b) !important; } html.bf-theme.light [class*="NavMenu"] [class*="rowActive"], html.bf-theme.light [class*="NavMenu"] a[class*="active"], html.bf-theme.light nav a.active { color: var(--text-brand, #2563eb) !important; background: rgba(37, 99, 235, 0.08) !important; } html.bf-theme.light h1, html.bf-theme.light .page-title, html.bf-theme.light [class*="page-title"] { color: var(--text-primary, #18181b) !important; } html.bf-theme.light th { color: var(--text-secondary, #52525b) !important; background: var(--default-100, #f4f4f5) !important; border-bottom-color: var(--admin-border, rgba(38, 39, 48, 0.12)) !important; } html.bf-theme.light td { color: var(--text-primary, #18181b) !important; border-bottom-color: var(--admin-border, rgba(38, 39, 48, 0.08)) !important; } html.bf-theme.light tr:hover td { background: rgba(37, 99, 235, 0.04) !important; } html.bf-theme.light [class*="tableWrap"], html.bf-theme.light [class*="table"], html.bf-theme.light table { background: var(--layer, #fff) !important; } html.bf-theme.light [class*="badge"], html.bf-theme.light [class*="status"] { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html.bf-theme.light [class*="modalOverlay"] > [role="dialog"], html.bf-theme.light [class*="modalOverlay"] > [class*="modal"]:not([class*="Overlay"]) { background: var(--layer, #fff) !important; border-color: var(--admin-border, rgba(38, 39, 48, 0.12)) !important; color: var(--text-primary, #18181b) !important; } html.bf-theme [class*="modalOverlay"] > [class*="modalWide"], html.bf-theme [class*="modalOverlay"] > [role="dialog"][class*="modalWide"] { width: min(720px, 100%) !important; } /* ============================================================ КОНЕЦ ТЕМЫ ============================================================ */