/* ============================================================ M11 — #modalProducts: тёмный overlay + xcore-карточки товара Модалка инжектится в скриптом webprostor.configurator, поэтому селекторы берут высокую специфику от #modalProducts. ============================================================ */ /* ---------- Shell + overlay ---------- */ body.modal-open { overflow: hidden; } #modalProducts.modal { background: oklch(0.08 0.02 285 / 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #modalProducts .modal-dialog { max-width: 1280px; margin: 32px auto; } #modalProducts .modal-content { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: 0 40px 120px -20px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.02); overflow: hidden; color: var(--text); } #modalProducts .modal-header { background: transparent; border-bottom: 1px solid var(--line-soft); padding: 20px 28px; display: flex; align-items: center; gap: 16px; } #modalProducts .modal-title { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); margin: 0; flex: 1; } #modalProducts .close { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-2); opacity: 1; font-size: 24px; line-height: 1; text-shadow: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; padding: 0; margin: 0; float: none; } #modalProducts .close:focus { background: var(--surface-3); color: var(--text); border-color: var(--accent-line); outline: none; } @media (hover: hover) { #modalProducts .close:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent-line); outline: none; } } #modalProducts .close span { display: inline-block; line-height: 1; } #modalProducts .modal-body { background: transparent; color: var(--text); padding: 22px 28px 28px; max-height: calc(100vh - 140px); overflow-y: auto; } /* ---------- Scrollbar внутри модалки ---------- */ #modalProducts .modal-body::-webkit-scrollbar { width: 8px; } #modalProducts .modal-body::-webkit-scrollbar-track { background: transparent; } #modalProducts .modal-body::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; } @media (hover: hover) { #modalProducts .modal-body::-webkit-scrollbar-thumb:hover { background: var(--line); } } /* ---------- Колонки модалки ---------- */ /* Левая колонка (фильтр) = sticky + independent scroll. Модалка-контейнер скроллит общую высоту, а левую колонку — своим внутренним scroller'ом, чтобы при длинном фильтре не нужно было возвращаться в самый верх, чтобы докрутить карточки справа. */ #modalProducts .modal-body > .row { margin: 0; } #modalProducts .modal-body > .row > .col-md-3 { padding: 0 22px 0 0; position: sticky; top: 0; align-self: flex-start; max-height: calc(100vh - 180px); overflow-y: auto; overflow-x: hidden; } #modalProducts .modal-body > .row > .col-md-9 { padding-left: 22px; min-width: 0; } /* Делаем row flex чтобы align-self: flex-start работал на .col-md-3 */ #modalProducts .modal-body > .row { display: flex; flex-wrap: wrap; } /* Тонкий скроллбар левой колонки */ #modalProducts .modal-body > .row > .col-md-3::-webkit-scrollbar { width: 6px; } #modalProducts .modal-body > .row > .col-md-3::-webkit-scrollbar-track { background: transparent; } #modalProducts .modal-body > .row > .col-md-3::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; } /* ---------- Sort panel (#sortPanel.navbar) ---------- */ /* Исходный DOM: .navbar > .container-fluid > .row > .sort.col-md-9 + .view-type.col-md-3 Внутри .sort: Сортировать

Переделываем через CSS в компактную горизонтальную pill-строку: [Сортировать:] [pill] [pill (active ↑)] [pill] [pill] Убираем sticky — модалка сама скроллится. */ #modalProducts #sortPanel.navbar.sticky-top, #modalProducts #sortPanel.navbar { position: static !important; top: auto !important; z-index: auto !important; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 14px; margin: 0 0 14px 0; min-height: auto; border-width: 1px; } #modalProducts #sortPanel .container-fluid { padding: 0; } #modalProducts #sortPanel > .container-fluid > .row { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } /* Хайдим переключатель вида (сетка/список/таблица) — в модалке не нужен. */ #modalProducts #sortPanel .view-type { display: none !important; } /* Сорт-группа: label + pill-список в одну строку */ #modalProducts #sortPanel .sort { padding: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; width: auto !important; /* перебить col-xs-6/col-md-9 */ max-width: 100%; margin: 0; } #modalProducts #sortPanel .sort .navbar-text { margin: 0; padding: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); line-height: 1; } /* Кастомизируем содержимое .navbar-text — иногда туда пишется слово с пробелом в конце */ #modalProducts #sortPanel .sort #sort.nav { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; float: none; } #modalProducts #sortPanel .sort #sort.nav > li { margin: 0; padding: 0; float: none; list-style: none; display: inline-flex; } /* Pill-chip. Скрываем fa-уровень-иконку слева (она ставится модулем перед текстом), стрелка направления справа остаётся. */ #modalProducts #sortPanel .sort #sort.nav > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; line-height: 1; color: var(--text-2); background: var(--surface); border: 1px solid var(--line-soft); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; cursor: pointer; } @media (hover: hover) { #modalProducts #sortPanel .sort #sort.nav > li > a:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent-line); text-decoration: none; } } #modalProducts #sortPanel .sort #sort.nav > li.active > a { background: var(--accent-dim); color: var(--accent-2); border-color: var(--accent-line); } /* Убираем скрытие текста через hidden-xs/hidden-sm/hidden-md — нам текст нужен всегда */ #modalProducts #sortPanel .sort #sort.nav > li > a > span { display: inline !important; } /* Иконка типа сортировки (модуль ставит .fa-sort/.fa-а-б) — прячем */ #modalProducts #sortPanel .sort #sort.nav > li > a > i.fa:not(.fa-level-up):not(.fa-level-down) { display: none; } /* Стрелка направления ↑/↓ */ #modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-up::before { content: "↑"; font-family: inherit; } #modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-down::before { content: "↓"; font-family: inherit; } #modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-up, #modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-down { font-size: 13px; font-style: normal; line-height: 1; color: var(--accent-2); margin-left: 2px; } /* ---------- Поиск по названию ---------- */ /* BS3 даёт .form-group > .input-group > (.input-group-addon + .form-control). Визуально это «две коробки в ряд» — прячем addon в input через absolute, чтобы поле выглядело как один control. */ #modalProducts .form-group, #modalProducts .input-group, #modalProducts .input-group-addon { background: transparent; } /* Поиск стоит ВНЕ .webprostor-configurator-catalog-section. Gap задаём ТРЕМЯ путями с !important, чтобы никакой внешний CSS (aspro/webprostor core, или старый cached modal.css) не смог перетереть: */ #modalProducts .form-group { margin-bottom: 20px !important; margin-top: 0 !important; } /* Ещё 12px сверху у самой секции — итого ~32px между полем поиска и первой карточкой. */ #modalProducts .webprostor-configurator-catalog-section { margin-top: 12px !important; padding-top: 0 !important; } /* Нижняя страховка — отступ прямо перед сеткой. */ #modalProducts .xf-pc-grid { margin-top: 0 !important; } /* BS3 .input-group = display:table с table-cell'ами — плохо скинится в grid/flex. Прячем магнифайер-addon (визуально лишний; placeholder «Поиск по названию» сам объясняет назначение). Инпут оставляем full-width. */ #modalProducts .form-group > .input-group { display: block; width: 100%; } #modalProducts .form-group > .input-group > .input-group-addon { display: none !important; } /* float:none обязательно — BS3 на `.input-group .form-control` вешает `float: left` (нужно для table-layout внутри input-group). При переводе IG на display:block float выбрасывает инпут из потока, IG и form-group схлопываются в 0 высоты, grid визуально липнет к инпуту без зазора. */ #modalProducts #quick_search, #modalProducts input[type="search"], #modalProducts .form-group input[type="text"] { display: block; float: none; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; color: var(--text); padding: 10px 14px; font-size: 13.5px; width: 100%; transition: border-color .15s, background .15s; } #modalProducts #quick_search:focus, #modalProducts input[type="search"]:focus, #modalProducts .form-group input[type="text"]:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px oklch(0.68 0.22 var(--accent-h) / 0.15); } #modalProducts input::placeholder { color: var(--text-3); } /* ---------- Product grid ---------- */ /* width:100% форсим — в Chrome display:grid внутри .col-md-9 без явной ширины резолвится в 0 (track'и схлопываются в "0px 0px 0px"). */ #modalProducts .xf-pc-grid { display: grid; width: 100%; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } #modalProducts .xf-pc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #modalProducts .xf-pc-grid--1 { grid-template-columns: minmax(0, 1fr); } @media (max-width: 991px) { #modalProducts .xf-pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #modalProducts .xf-pc-grid { grid-template-columns: 1fr; } } /* Сбрасываем BS-раскладку из исходного template — мы не используем .row/.col-xs-6, но на случай внешней вставки обнуляем negative margins. */ #modalProducts .webprostor-configurator-catalog-section > .row { margin: 0; } /* ---------- Product card ---------- */ #modalProducts .xf-pc-card { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; min-width: 0; } @media (hover: hover) { #modalProducts .xf-pc-card:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), 0 12px 32px -16px oklch(0 0 0 / 0.5); } } #modalProducts .xf-pc-card--selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 32px -12px oklch(0.68 0.22 var(--accent-h) / 0.35); } #modalProducts .xf-pc-card--muted { opacity: 0.55; } /* Thumbnail */ #modalProducts .xf-pc-card__thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--surface); border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--text-3); } #modalProducts a.xf-pc-card__thumb { cursor: pointer; } #modalProducts .xf-pc-card__thumb-img { max-width: 80%; max-height: 80%; object-fit: contain; } #modalProducts .xf-pc-card__thumb-ph { color: var(--text-3); opacity: 0.5; } #modalProducts .xf-pc-card__thumb-ph svg { display: block; } #modalProducts .xf-pc-card__quick { position: absolute; inset: 0; z-index: 2; background: transparent; } /* Body */ #modalProducts .xf-pc-card__body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; } #modalProducts .xf-pc-card__title-link { color: var(--text); text-decoration: none; } @media (hover: hover) { #modalProducts .xf-pc-card__title-link:hover .xf-pc-card__title { color: var(--accent-2); } } #modalProducts .xf-pc-card__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -0.1px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #modalProducts .xf-pc-card__text { font-size: 12.5px; color: var(--text-2); line-height: 1.45; } #modalProducts .xf-pc-card__specs { margin: 0; padding: 10px 0 0 0; border-top: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); } #modalProducts .xf-pc-card__spec { display: flex; gap: 6px; align-items: baseline; min-width: 0; } #modalProducts .xf-pc-card__spec-key { margin: 0; color: var(--text-3); flex: 0 0 auto; } #modalProducts .xf-pc-card__spec-key::after { content: ":"; } #modalProducts .xf-pc-card__spec-val { margin: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } /* Foot: status, price, cta */ #modalProducts .xf-pc-card__foot { padding: 12px 16px 14px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; background: var(--surface); } /* Availability badge (reuse BS badge class for JS compat, override look) */ #modalProducts .xf-pc-card__status.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; background: transparent; color: var(--text-3); border: 1px solid var(--line-soft); text-transform: none; } #modalProducts .xf-pc-card__status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* «в наличии» — яркий zелёный как на проде: активный цвет на фоне легким glow на точке. */ #modalProducts .xf-pc-card__status--ok { color: oklch(0.82 0.2 152); border-color: oklch(0.55 0.2 152 / 0.55); background: oklch(0.36 0.14 152 / 0.22); } #modalProducts .xf-pc-card__status--ok .xf-pc-card__status-dot { background: oklch(0.82 0.2 152); box-shadow: 0 0 0 3px oklch(0.82 0.2 152 / 0.2); } #modalProducts .xf-pc-card__status--off { color: oklch(0.8 0.15 75); border-color: oklch(0.5 0.12 75 / 0.5); background: oklch(0.32 0.08 75 / 0.18); } #modalProducts .xf-pc-card__status--off .xf-pc-card__status-dot { background: oklch(0.8 0.15 75); } /* Remove FA icons from availability (we use the dot) */ #modalProducts .xf-pc-card__status .fa { display: none; } /* Price */ #modalProducts .xf-pc-card__price.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--font-mono); color: var(--text); } #modalProducts .xf-pc-card__price-value.catalog-price { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; } #modalProducts .xf-pc-card__price-old { font-size: 12.5px; color: var(--text-3); text-decoration: line-through; } /* CTA КОРЕНЬ ФЛИКА: модуль ставит класс btn- (напр. btn-success). BS3 для .btn-:active даёт `background-image: none` + свой background-color + inset box-shadow → наш градиент на долю секунды исчезает, возникает inset-тень. Решение: разрываем shorthand `background` на background-image/background-color, и force-override во ВСЕХ hover/focus/active состояниях + !important на box-shadow, чтобы BS3 inset не пробивался. */ #modalProducts .xf-pc-card__cta.btn, #modalProducts .xf-pc-card__cta.btn-success, #modalProducts .xf-pc-card__cta.btn-primary, #modalProducts .xf-pc-card__cta.btn-info { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; font-size: 13px; font-weight: 500; border-radius: 10px; border: 0 !important; outline: 0; text-decoration: none; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, box-shadow .18s ease, filter .18s ease, opacity .15s; background-color: transparent !important; background-image: var(--grad) !important; color: #fff !important; width: 100%; position: relative; box-shadow: 0 1px 0 oklch(0 0 0 / 0.1) !important; text-shadow: none; } #modalProducts .xf-pc-card__cta.btn:focus, #modalProducts .xf-pc-card__cta.btn:focus-visible, #modalProducts .xf-pc-card__cta.btn:active, #modalProducts .xf-pc-card__cta.btn.active, #modalProducts .xf-pc-card__cta.btn:active:focus, #modalProducts .xf-pc-card__cta.btn.focus, #modalProducts .xf-pc-card__cta.btn-success:focus, #modalProducts .xf-pc-card__cta.btn-success:active, #modalProducts .xf-pc-card__cta.btn-success.active, #modalProducts .xf-pc-card__cta.btn-success:active:focus, #modalProducts .xf-pc-card__cta.btn-primary:focus, #modalProducts .xf-pc-card__cta.btn-primary:active, #modalProducts .xf-pc-card__cta.btn-primary.active, #modalProducts .xf-pc-card__cta.btn-primary:active:focus { color: #fff !important; background-color: transparent !important; background-image: var(--grad) !important; filter: brightness(1.08); text-decoration: none; outline: 0 !important; border-color: transparent !important; box-shadow: 0 6px 24px -10px oklch(0.68 0.22 var(--accent-h) / 0.6) !important; } @media (hover: hover) { #modalProducts .xf-pc-card__cta.btn:hover, #modalProducts .xf-pc-card__cta.btn-success:hover, #modalProducts .xf-pc-card__cta.btn-primary:hover { color: #fff !important; background-color: transparent !important; background-image: var(--grad) !important; filter: brightness(1.08); text-decoration: none; outline: 0 !important; border-color: transparent !important; box-shadow: 0 6px 24px -10px oklch(0.68 0.22 var(--accent-h) / 0.6) !important; } } #modalProducts .xf-pc-card__cta.btn-block { display: inline-flex; width: 100%; } #modalProducts .xf-pc-card__cta-icon { font-family: var(--font-mono); font-weight: 400; font-size: 15px; line-height: 1; } #modalProducts .xf-pc-card__cta-label { font-family: inherit; } /* Selected state: мягкий accent-dim, не градиент. Нужен !important на background-image — иначе унаследует grad от базового правила. */ #modalProducts .xf-pc-card__cta--selected.btn, #modalProducts .xf-pc-card__cta--selected.btn:focus, #modalProducts .xf-pc-card__cta--selected.btn:active { background-image: none !important; background-color: var(--accent-dim) !important; color: var(--accent-2) !important; border: 1px solid var(--accent-line) !important; cursor: default; pointer-events: none; filter: none !important; box-shadow: none !important; } @media (hover: hover) { #modalProducts .xf-pc-card__cta--selected.btn:hover { background-image: none !important; background-color: var(--accent-dim) !important; color: var(--accent-2) !important; border: 1px solid var(--accent-line) !important; cursor: default; pointer-events: none; filter: none !important; box-shadow: none !important; } } #modalProducts .xf-pc-card__cta--remove.btn, #modalProducts .xf-pc-card__cta--remove.btn:focus, #modalProducts .xf-pc-card__cta--remove.btn:active, #modalProducts .xf-pc-card__cta--remove.btn.active { background-image: none !important; background-color: oklch(0.32 0.1 25 / 0.25) !important; border: 1px solid oklch(0.45 0.14 25 / 0.4) !important; color: oklch(0.82 0.14 25) !important; font-size: 12px; padding: 8px 14px; filter: none !important; box-shadow: none !important; } @media (hover: hover) { #modalProducts .xf-pc-card__cta--remove.btn:hover { background-image: none !important; background-color: oklch(0.32 0.1 25 / 0.25) !important; border: 1px solid oklch(0.45 0.14 25 / 0.4) !important; color: oklch(0.82 0.14 25) !important; font-size: 12px; padding: 8px 14px; filter: none !important; box-shadow: none !important; } } @media (hover: hover) { #modalProducts .xf-pc-card__cta--remove.btn:hover { background-color: oklch(0.38 0.12 25 / 0.35) !important; color: oklch(0.88 0.12 25) !important; } } /* Quantity controls */ #modalProducts .xf-pc-card__qty { display: grid; grid-template-columns: 32px 1fr 32px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; } #modalProducts .xf-pc-card__qty-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); text-decoration: none; font-size: 14px; background: transparent; transition: background .12s; user-select: none; } @media (hover: hover) { #modalProducts .xf-pc-card__qty-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } } #modalProducts .xf-pc-card__qty-input { background: transparent; border: 0; color: var(--text); text-align: center; font-family: var(--font-mono); font-size: 13px; min-width: 0; padding: 6px 0; outline: none; } #modalProducts .xf-pc-card__qty-total { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-align: right; } #modalProducts .xf-pc-card__qty-total span { display: inline !important; } /* Compare checkbox */ #modalProducts .xf-pc-card__compare { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); cursor: pointer; margin: 0; font-weight: 400; } #modalProducts .xf-pc-card__compare input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; } /* Empty state */ #modalProducts .xf-pc-empty { padding: 40px 24px; text-align: center; color: var(--text-3); background: var(--surface-2); border: 1px dashed var(--line-soft); border-radius: 14px; } /* Pager: wraps Bitrix NAV_STRING (генерит .nav-current-page / .modern-page-current и др.) */ #modalProducts .xf-pc-pager { margin: 0; color: var(--text-3); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 8px 0; } #modalProducts .xf-pc-pager--bottom { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); } #modalProducts .xf-pc-pager .navigation-title, #modalProducts .xf-pc-pager .modern-page-navigation-title { display: none; } /* Pager. DOM webprostor.configurator-шаблона: .bx-pagination > .bx-pagination-container > ul > li > (a | span). И , и — интерактивная капсула; вложенный span внутри — ТОЛЬКО текст (иначе получаем «пилюлю в пилюле»). Нормализуем через li.list-style:none + отменяем ul-padding BS3. */ #modalProducts .webprostor-configurator-pagination .bx-pagination, #modalProducts .webprostor-configurator-pagination .bx-pagination-container { margin: 0; padding: 0; } #modalProducts .webprostor-configurator-pagination ul, #modalProducts .xf-pc-pager ul { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center; } #modalProducts .webprostor-configurator-pagination li, #modalProducts .xf-pc-pager li { list-style: none; margin: 0; padding: 0; display: inline-flex; } /* Капсула = прямой ребёнок li (а если li одиноко — li само). */ #modalProducts .webprostor-configurator-pagination li > a, #modalProducts .webprostor-configurator-pagination li > span, #modalProducts .xf-pc-pager li > a, #modalProducts .xf-pc-pager li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line-soft); text-decoration: none; font-family: var(--font-mono); font-size: 12.5px; margin: 0; transition: background .15s, color .15s, border-color .15s; } /* Вложенный span ВНУТРИ — просто текст, не капсула. */ #modalProducts .webprostor-configurator-pagination li > a > span, #modalProducts .webprostor-configurator-pagination li > a > b, #modalProducts .xf-pc-pager li > a > span, #modalProducts .xf-pc-pager li > a > b { display: contents; background: transparent; border: 0; padding: 0; min-width: 0; height: auto; font: inherit; color: inherit; } @media (hover: hover) { #modalProducts .webprostor-configurator-pagination li > a:hover, #modalProducts .xf-pc-pager li > a:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent-line); text-decoration: none; } } #modalProducts .webprostor-configurator-pagination li.bx-active > span, #modalProducts .webprostor-configurator-pagination li.bx-active > a, #modalProducts .xf-pc-pager li.bx-active > span, #modalProducts .xf-pc-pager li.bx-active > a, #modalProducts .webprostor-configurator-pagination .current, #modalProducts .xf-pc-pager .current, #modalProducts .xf-pc-pager .modern-page-current { background: var(--accent-dim); color: var(--accent-2); border-color: var(--accent-line); font-weight: 600; } /* ---------- Ambient поправки для всей подсистемы форм в модалке ---------- */ #modalProducts .form-control { background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); border-radius: 10px; } #modalProducts .form-control:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px oklch(0.68 0.22 var(--accent-h) / 0.15); } #modalProducts label { color: var(--text-2); font-weight: 500; } #modalProducts a { color: var(--accent-2); } /* ---------- Левая колонка фильтра (catalog.smart.filter, template webprostor.configurator) Template override: local/templates/xcore_front/components/bitrix/catalog.smart.filter/webprostor.configurator/ Базовый CSS модуля (#JCSmartFilterConfigurator.bx-filter .bx-filter-block {display:none;} и т.д.) остаётся включённым — он обеспечивает accordion (show/hide через .bx-active на родителе). Наши стили таргетят уникальные xfsf__* классы, чтобы не конфликтовать. ---------- */ #modalProducts #productFilterRight { color: var(--text); } #modalProducts .xfsf, #modalProducts .xfsf__section { background: transparent; color: var(--text); } #modalProducts .xfsf__form { margin: 0; } #modalProducts .xfsf__list { margin: 0; padding: 0; } /* Карточка одного параметра. Без overflow:hidden — smart.filter JS иногда оставляет .bx-filter-block с фиксированной height, которая обрезает опции. */ #modalProducts .xfsf__box { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 10px; padding: 0; float: none !important; width: 100% !important; } /* Перебить col-lg-12 margin/padding из оригинального шаблона */ #modalProducts .xfsf__box.list-group-item { margin-bottom: 10px; border: 1px solid var(--line-soft); } #modalProducts .xfsf__title { padding: 12px 14px; color: var(--text); font-weight: 600; font-size: 13px; margin: 0; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; line-height: 1.3; } @media (hover: hover) { #modalProducts .xfsf__title:hover { color: var(--text); } } #modalProducts .xfsf__title-name { flex: 1; min-width: 0; } #modalProducts .xfsf__chev { flex: none; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; transition: transform .2s; transform: rotate(-90deg); /* collapsed = ">" */ font-family: inherit !important; /* блокируем унаследованный FontAwesome (если .fa-angle-up подклеен) */ } #modalProducts .xfsf__chev::before, #modalProducts .xfsf__chev::after { display: none !important; content: none !important; } /* bx-active ставит модуль на .xfsf__box когда раскрыт */ #modalProducts .xfsf__box.bx-active .xfsf__chev { transform: rotate(0); } #modalProducts .xfsf__box:not(.bx-active) .xfsf__body { display: none; } #modalProducts .xfsf__body { padding: 0 14px 12px; } #modalProducts .xfsf__content { display: flex; flex-direction: column; gap: 2px; margin: 0; } /* Range: два инпута + dash + слайдер */ #modalProducts .xfsf__range { display: grid; grid-template-columns: 1fr auto 1fr; grid-auto-rows: auto; align-items: center; gap: 8px; margin: 0; float: none; } #modalProducts .xfsf__range-cell { padding: 0 !important; margin: 0; width: auto !important; max-width: none !important; float: none !important; } #modalProducts .xfsf__range-dash { color: var(--text-3); font-family: var(--font-mono); font-size: 13px; line-height: 1; user-select: none; } #modalProducts .xfsf__input { background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-family: var(--font-mono); width: 100%; box-sizing: border-box; height: auto; line-height: 1.3; transition: border-color .15s, background .15s; } #modalProducts .xfsf__input:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px oklch(0.68 0.22 var(--accent-h) / 0.15); } #modalProducts .xfsf__slider-wrap { grid-column: 1 / -1; padding: 8px 4px 2px; width: auto !important; max-width: none !important; float: none !important; } /* jQuery UI slider — тёмная тема */ #modalProducts .xfsf__slider.ui-slider { position: relative; height: 4px; background: var(--surface-3); border: 0; border-radius: 999px; margin: 0; } #modalProducts .xfsf__slider.ui-slider .ui-slider-range { background: var(--grad); height: 100%; border-radius: 999px; position: absolute; top: 0; } #modalProducts .xfsf__slider.ui-slider .ui-slider-handle { width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 2px solid var(--accent); box-shadow: 0 2px 6px oklch(0 0 0 / 0.35); top: -6px; margin-left: -8px; cursor: grab; outline: none; } #modalProducts .xfsf__slider.ui-slider .ui-slider-handle.ui-state-focus, #modalProducts .xfsf__slider.ui-slider .ui-slider-handle.ui-state-active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px oklch(0.68 0.22 var(--accent-h) / 0.25); cursor: grabbing; } @media (hover: hover) { #modalProducts .xfsf__slider.ui-slider .ui-slider-handle:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px oklch(0.68 0.22 var(--accent-h) / 0.25); cursor: grabbing; } } /* Опции (checkbox/radio list) */ #modalProducts .xfsf__options { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; } #modalProducts .xfsf__option { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text-2); cursor: pointer; font-weight: 400; font-size: 12.5px; line-height: 1.4; margin: 0; border: 0; } @media (hover: hover) { #modalProducts .xfsf__option:hover { color: var(--text); } } #modalProducts .xfsf__option--disabled { opacity: 0.45; cursor: not-allowed; } #modalProducts .xfsf__option-input { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0 !important; background: transparent !important; } #modalProducts .xfsf__option-text { flex: 1; min-width: 0; color: inherit; overflow-wrap: anywhere; word-break: break-word; } #modalProducts .xfsf__option-count { margin-left: auto; color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px; flex: none; } /* Чекбоксы внутри .xfsf__option_input — inputs скрыты-styled, наш custom уже применяется через глобальный #modalProducts input[type="checkbox"] выше. Ограничим display для radio — custom radio */ #modalProducts .xfsf__option input[type="radio"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-width: 16px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; position: relative; margin: 0 0 0 0; transition: border-color .15s; box-sizing: border-box; flex: none; } #modalProducts .xfsf__option input[type="radio"]:checked { border-color: var(--accent); } #modalProducts .xfsf__option input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); } /* inputs у checkboxes уже кастомизированы глобальным правилом выше */ /* Dropdown (display_type=P) */ #modalProducts .xfsf__dropdown { width: 100%; } #modalProducts .xfsf__dropdown-block { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 34px 8px 12px; cursor: pointer; font-size: 12.5px; color: var(--text-2); transition: border-color .15s; } @media (hover: hover) { #modalProducts .xfsf__dropdown-block:hover { border-color: var(--accent-line); } } #modalProducts .xfsf__dropdown-arrow { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-70%) rotate(45deg); background: transparent; } #modalProducts .xfsf__dropdown-popup { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px; margin-top: 4px; max-height: 260px; overflow-y: auto; box-shadow: 0 12px 32px -12px oklch(0 0 0 / 0.5); } #modalProducts .xfsf__dropdown-list { list-style: none; margin: 0; padding: 6px 0; } #modalProducts .xfsf__dropdown-list li { margin: 0; } #modalProducts .xfsf__dropdown-item { display: block; padding: 7px 12px; color: var(--text-2); font-size: 12.5px; cursor: pointer; border: 0; margin: 0; } @media (hover: hover) { #modalProducts .xfsf__dropdown-item:hover { background: var(--surface-3); color: var(--text); } } #modalProducts .xfsf__dropdown-item--selected { background: var(--accent-dim); color: var(--accent-2); } #modalProducts .xfsf__dropdown-item--disabled { opacity: 0.45; cursor: not-allowed; } /* Кнопки применения/сброса */ #modalProducts .xfsf__actions { margin-top: 12px; padding: 0; } #modalProducts .xfsf__buttons { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; } #modalProducts .xfsf__btn.btn { padding: 10px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 500; border: 0; cursor: pointer; transition: background-color .15s, filter .15s, box-shadow .15s; line-height: 1.2; background-image: none; } #modalProducts .xfsf__btn--apply.btn { background: var(--grad) !important; background-color: transparent !important; color: #fff !important; flex: 1; } #modalProducts .xfsf__btn--apply.btn:focus { filter: brightness(1.08); color: #fff !important; box-shadow: 0 6px 24px -10px oklch(0.68 0.22 var(--accent-h) / 0.6); } @media (hover: hover) { #modalProducts .xfsf__btn--apply.btn:hover { filter: brightness(1.08); color: #fff !important; box-shadow: 0 6px 24px -10px oklch(0.68 0.22 var(--accent-h) / 0.6); } } #modalProducts .xfsf__btn--reset.btn { background: var(--surface) !important; border: 1px solid var(--line-soft) !important; color: var(--text-2) !important; } #modalProducts .xfsf__btn--reset.btn:focus { background: var(--surface-3) !important; color: var(--text) !important; border-color: var(--accent-line) !important; } @media (hover: hover) { #modalProducts .xfsf__btn--reset.btn:hover { background: var(--surface-3) !important; color: var(--text) !important; border-color: var(--accent-line) !important; } } /* Popup с количеством элементов — прячем (модалка сама перезагружает результат) */ #modalProducts .xfsf__popup, #modalProducts #modef.bx-filter-popup-result { display: none !important; } /* Контейнер-modef — тонкие для JS-совместимости, прячем визуально */ #modalProducts .bx-filter-container-modef { display: none !important; } /* ---------- Custom checkboxes ---------- Scoped к модалке (фильтр + compare). BS3 дефолтные чекбоксы ломаются, если их style'ить — собираем свои через appearance:none + SVG mask для галочки. */ #modalProducts input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 16px; height: 16px; min-width: 16px; min-height: 16px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--surface); cursor: pointer; position: relative; display: inline-block; vertical-align: middle; margin: 0 6px 0 0; flex: none; transition: border-color .15s, background .15s; box-sizing: border-box; padding: 0; } @media (hover: hover) { #modalProducts input[type="checkbox"]:hover { border-color: var(--accent-line); } } #modalProducts input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } #modalProducts input[type="checkbox"]:checked { background-color: var(--accent); border-color: var(--accent); } /* Галочка через SVG */ #modalProducts input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; } /* Метки у чекбоксов + мягкий layout */ #modalProducts .bx_filter_param_label, #modalProducts .bx-filter-param-label, #modalProducts .bx_filter_input_container label, #modalProducts .bx-filter-input-container label { display: flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 12.5px; font-weight: 400; padding: 4px 0; cursor: pointer; line-height: 1.4; margin: 0; } @media (hover: hover) { #modalProducts .bx_filter_param_label:hover, #modalProducts .bx-filter-param-label:hover, #modalProducts .bx_filter_input_container label:hover, #modalProducts .bx-filter-input-container label:hover { color: var(--text); } } /* Счётчик количества — приглушённый */ #modalProducts .bx_filter_param_text, #modalProducts .bx-filter-param-text { color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px; margin-left: auto; } /* Числовые инпуты price-range */ #modalProducts .bx_filter_input_container input[type="text"], #modalProducts .bx-filter-input-container input[type="text"], #modalProducts .bx_filter_input_container input[type="number"], #modalProducts .bx-filter-input-container input[type="number"] { background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-family: var(--font-mono); width: 100%; } /* Grid 2-колонки для пары min/max в price-filter — если модуль даёт свою раскладку */ #modalProducts .bx_filter_parameters_box_container_block, #modalProducts .bx-filter-parameters-box-container-block { display: flex; gap: 8px; align-items: center; }