/* * Финик — надстройка над темой LeptonX. Постоянная часть зонтичного бренда. * Переменное у продукта ровно одно — имя сервиса, оно приходит из AppName * его IBrandingProvider и рисуется темой рядом с логотипом. * * Цвета здесь НЕ задаются. Палитра приезжает пересобранными файлами темы * (Themes/LeptonX/Global/*/css/), потому что Bootstrap собран с зашитыми числами * и переопределением переменных не перекрашивается. Единственный источник * правды по цвету — brand.yaml в папке бренда. */ /* ── Шрифт ─────────────────────────────────────────────────────────────────── Один переменный файл на все веса: 400 для текста, 600 для заголовков и кнопок. Кегль намеренно НЕ трогаем: плотность интерфейса задаёт тема, и менять её значит ломать её же вёрстку. Имя семейства уже стоит в пересобранной теме ($lpx-font-family), здесь только объявление файла; --bs-body-font-family — для того, что рисует Bootstrap. */ @font-face { font-family: "Golos Text"; src: url("/FinIQBrand/fonts/GolosText.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; } :root { --bs-body-font-family: "Golos Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* ── Кнопка и карточка ─────────────────────────────────────────────────────── Штатными переменными Bootstrap 5.3 — тема не пересобирается, апгрейд ABP ничего не ломает. Скругление то же, что у темы (radius), рамка видимая. */ .btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1.1rem; --bs-btn-border-radius: 6px; --bs-btn-border-width: 1px; } .card { --bs-card-border-width: 1px; --bs-card-border-radius: 6px; --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem; --bs-card-cap-padding-y: .9rem; } /* Суммы в таблицах — табличными цифрами, разряды встают друг под друга. У Golos Text по умолчанию цифры пропорциональные: «1» уже «0» почти на треть. */ .table, .lpx-content table, .data-tables-filter, .dataTables_wrapper table { font-feature-settings: "tnum" 1; } /* ── Логотип в шапке меню ──────────────────────────────────────────────────── Надпись продукта — «Финик · <сервис>» одной картинкой, в кривых: так требует брендбук, и интервал до точки там выверен дизайнером. Саму картинку задаёт продукт своим IBrandingProvider (LogoUrl / LogoReverseUrl), модуль про неё ничего не знает — он знает только размеры и то, какой файл на каком фоне. Высота 20 px вместо штатных 32. Надпись сервиса длинная — «Финик · Заявки» это 9.9 высоты, то есть 317 px при 32 px, а в сайдбаре шириной 280 после полей остаётся 240, причём кнопка свёртывания начинается на 223-й точке. При 20 px надпись занимает 198 и кончается там, где начинается кнопка. Высота шапки считается от высоты картинки, а не задаётся вторым числом: 72 px — это отступ, который тема поставила списку меню (margin-top, $lpx-nav-menu-item-height × 2), и шапка выше накрывает первый пункт. Поэтому поле выводится формулой — тогда смена высоты картинки не может разъехаться с высотой шапки. */ :root { --finiq-sidebar-header-height: 72px; --finiq-logo-height: 20px; } .lpx-brand-logo { background-size: auto var(--finiq-logo-height); height: var(--finiq-logo-height); } .lpx-logo-container { padding: calc((var(--finiq-sidebar-header-height) - var(--finiq-logo-height)) / 2) 20px; } /* Свёрнутое меню показывает вместо надписи знак — он почти квадратный, тесноты надписи ему не грозит, и он остаётся крупнее. Области действия здесь ровно две, и они взяты у темы, а не придуманы: в _sidebar.scss примесь hover-trigger() подключается дважды — под классом .hover-trigger (меню свёрнуто вручную) и отдельно через @include in-between('md','xl'), то есть на планшете. Тем же самым scope тема подменяет картинку на знак. Так же должно быть и здесь, иначе правило достаётся ЗАКРЕПЛЁННОМУ меню на широком экране — а там картинка осталась надписью, и 28 px дают ей 278 px в поле на 240: хвост «Заявки» обрезается, а наведение мышью уменьшает надпись обратно до 20 px. Ровно это и было до 12.09.2026. */ .hover-trigger .lpx-sidebar-container:not(:hover) { --finiq-logo-height: 28px; } @media only screen and (min-width: 768px) and (max-width: 1199px) { .lpx-sidebar-container:not(:hover) { --finiq-logo-height: 28px; } } /* Знак свёрнутого меню. Файл выбирается по фону, на котором знак лежит, а не по имени режима: меню синее во всех трёх режимах, но в светлом это #03379a, а в тёмных #132038 и #03091b. */ :root { --lpx-logo-icon: url("/FinIQBrand/logo/mark-on-blue.svg"); } :root .lpx-theme-dim, :root .lpx-theme-dark { --lpx-logo-icon: url("/FinIQBrand/logo/mark-dark.svg"); } /* ── Логотип на странице входа ─────────────────────────────────────────────── Там фон светлый, а в шапке меню — синий, и тема берёт для обоих один и тот же файл: у неё «светлый режим» это один логотип на всё. Наша надпись на синем жёлтая, на белом она невидима, поэтому для входа берётся отдельная переменная. Задаёт её продукт; не задал — останется файл шапки, и это будет видно сразу. Вторая раскладка входа (тема рисует её, когда логотип не задан вовсе) здесь не покрыта намеренно: у продукта с логотипом она не появляется, и правило на неё было бы написано вслепую. Появится продукт без своего логотипа — допишем, посмотрев. Тёмные режимы исключены намеренно: там фон входа тёмный, и годится тот же файл, что в меню. И размер: штатные 3.6em на длинной надписи вылезают за карточку, поэтому картинка вписывается по ширине. */ .lpx-brand-logo.lpx-login-logo { background-image: var(--finiq-logo-on-light, var(--lpx-logo)); background-size: contain; background-position: center; width: 100%; } .lpx-theme-dim .lpx-brand-logo.lpx-login-logo, .lpx-theme-dark .lpx-brand-logo.lpx-login-logo { background-image: var(--lpx-logo); } /* * ── Акцент на фоне меню ───────────────────────────────────────────────────── * Наведение — белым, выбранное — жёлтым (решение Сергея 08.09.2026). * * Тема исходит из того, что боковое меню светлое, а фирменный цвет на нём * контрастен, и красит им иконки — при наведении и у выбранного пункта, * на телефоне ещё и открытую вкладку. У нас меню тёмно-синее, и в СВЕТЛОЙ * палитре brand равен цвету меню (#03379a на #03379a): контраст 1.0, то есть * иконка не видна вовсе. Замер по трём режимам — жёлтый даёт 7.4, 11.5 и 14.1 * против 1.0, 5.1 и 6.3 у brand. * * Наведение и выбор разведены намеренно: одинаковый цвет у обоих означал бы, * что наведение мышью неотличимо от того, где ты находишься. * * Полоска под активной вкладкой на телефоне идёт сюда же: в каркасе темы у неё * вписан числом старый фирменный розовый, мимо палитры. * * Перечислены ВСЕ живые места, где тема кладёт акцент на фон меню, — проверено * разбором её CSS. */ .lpx-nav-menu .lpx-menu-item-link:hover .lpx-menu-item-icon, .lpx-menu-item:hover .lpx-menu-item-icon, .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab a:hover i { color: var(--lpx-navbar-active-text-color); } .lpx-nav-menu .lpx-menu-item.selected .lpx-menu-item-icon, .lpx-nav-menu .lpx-menu-item.selected .dd-icon, .lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon, .lpx-nav-menu .lpx-menu-item-link.selected .dd-icon, .lpx-menu-item.selected .lpx-menu-item-icon, .lpx-menu-item.selected .dd-icon, .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab.selected a, .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab a.lpx-mobile-menu-toggle-open i { color: var(--lpx-warning); } .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab a:after { background-color: var(--lpx-warning); } /* * Те же шесть мест, которых сегодня нет на экране (решение Сергея 08.09.2026: * «если можешь исправить сразу — исправь»). * * Значки-счётчики, кнопка внутри бокового меню и уведомления боковой панели тема * рисует тем же акцентом, то есть в светлой палитре они окажутся невидимыми ровно * так же. В разметке их сейчас ноль, поэтому правила ниже НИКЕМ НЕ ПРОВЕРЕНЫ — * ни тестом, ни глазами; появится такой элемент — на него надо посмотреть. * * Текст на жёлтом только тёмный: белый по жёлтому даёт контраст 1.41 при норме * 4.5, и в brand.yaml это записано отдельным запретом. Тёмный даёт 12.3, 13.3 * и 14.4 по трём режимам. */ .lpx-nav-menu .lpx-badge, .lpx-nav-menu .lpx-button-container .lpx-button, .lpx-menu-item-link.active-menu-item .menu-item-badge { background-color: var(--lpx-warning); color: var(--lpx-dark); } .lpx-nav-menu .lpx-nav-menu-notification .lpx-notification-items .lpx-notification-item .lpx-notification-item-link .lpx-notification-member-container { background-color: rgba(var(--lpx-warning-rgb), 0.2) !important; } .lpx-nav-menu .lpx-nav-menu-notification .lpx-notification-items .lpx-notification-item .lpx-notification-item-link .lpx-notification-member-container .lpx-notification-member-icon, .lpx-nav-menu .lpx-nav-menu-notification .lpx-notification-items .lpx-notification-item.unread .lpx-notification-item-link:before { color: var(--lpx-warning); background-color: var(--lpx-warning); }