/* Дополнения к теме: всё, чего в build/css/style.css нет или что она делает неверно для наших страниц. Грузится ПОСЛЕ темы (см. master.blade.php), поэтому перебивает её правила без !important. Раньше файл назывался classifieds-cards.css, но давно вышел за карточки: здесь и фильтры, и кабинет, и модалки. Имя приведено к содержимому. */ /* ===== Раскладка карточек ===== Два режима, и это не дублирование. Плотная кладка (главная) — карточки подогнаны вплотную, высоту каждой считает home-masonry.js и кладёт в --row-span. Работает ТОЛЬКО там, где скрипт подключён: он ищет контейнеры по data-vip-cards / data-feed-cards. Обычная сетка (все прочие списки) — высоту считает сам браузер, ряд выравнивается по самой высокой карточке. Раньше сюда тоже попадали правила плотной кладки, и без скрипта каждая карточка получала запасные 400px: высокие наезжали на соседей снизу, низкие оставляли провалы (GT-497). */ .dealer-tabs__cards:not(.row-view) { -webkit-column-count: initial; -moz-column-count: initial; column-count: initial; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; align-items: start; } /* minmax(0, 1fr), а не 1fr. У 1fr автоминимум трека равен min-content элемента: одна карточка с длинным словом, неразрывной ценой или картинкой раздувает свою колонку, остальные три ужимаются, сумма перестаёт влезать — грид едет за контейнер. С нулевым минимумом колонки всегда равны. min-width: 0 обязателен вдобавок: minmax снимает автоминимум с ТРЕКА, но у самой карточки width: 100% из темы и min-width: auto по умолчанию — без сброса она вылезет за ужатую колонку и наедет на соседнюю. Селектор не > *: карточки ленты завёрнуты в .feed-chunk (display: contents), то есть лежат на два уровня глубже, чем прямой ребёнок. */ .dealer-tabs__cards:not(.row-view) .dealer-card, .dealer-tabs__cards:not(.row-view) .feed-loadmore { min-width: 0; } /* Плотная кладка — только под присмотром скрипта. Высота строки и span нужны вместе: мелкая строка делает высоту карточки настраиваемой почти точно. Шаг строки задаёт home-masonry.js в --row-step (GT-549). Жёсткий 1px упирался в потолок движка: браузер не создаёт больше 10000 строк грида, а карточка при строке в пиксель съедает почти 400. На шестидесятой карточке (два нажатия «Load more») лента переставала расти, контейнер замирал на 9999px, а остальные карточки вываливались поверх подвала — вместе с кнопкой подгрузки. Значения по умолчанию оставлены прежними намеренно: 1px и span 400 — это ровно доправочное поведение. Поэтому скрипт можно откатить в одиночку, не трогая этот файл: без --row-step раскладка вернётся к прежней. align-items: start (выше) обязателен. По умолчанию грид растягивает элемент на всю выделенную область, и тогда home-masonry.js меряет не содержимое карточки, а высоту ячейки, которую сам же назначил прошлым прогоном: 400 → 408 → 416… Карточки расползаются, между ними растут пустоты. */ [data-vip-cards]:not(.row-view), [data-feed-cards]:not(.row-view) { grid-auto-rows: var(--row-step, 1px); } @media (max-width: 1150px) { .dealer-tabs__cards:not(.row-view) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 850px) { .dealer-tabs__cards:not(.row-view) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 650px) { .dealer-tabs__cards:not(.row-view) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } } [data-vip-cards]:not(.row-view) .dealer-card, [data-vip-cards]:not(.row-view) .feed-loadmore, [data-feed-cards]:not(.row-view) .dealer-card, [data-feed-cards]:not(.row-view) .feed-loadmore { grid-row-end: span var(--row-span, 400); } /* Кнопка «Load more» тянется на всю ширину внизу ленты */ .dealer-tabs__cards:not(.row-view) .feed-loadmore { grid-column: 1 / -1; } /* Цена — одним куском. Разделитель тысяч это обычный пробел, и в узкой колонке «4 157 AZN» ломается на «4» и «157 AZN». */ .dealer-card__price { white-space: nowrap; } /* ===== Счётчик в заголовке страницы (GT-552) ===== Та же болезнь, что у цены строкой выше, и лечится тем же: разделитель тысяч в number_format — обычный пробел, а по нему браузер переносит строку. Тема делает .sale-top__title флексом с gap. Счётчик оказывается вторым флекс-элементом: при длинном названии ему достаётся узкая полоска справа, он сжимается до min-content и рвётся по разделителю — «(9» на одной строке, «890)» на другой. Обычный текст вместо флекса: счётчик становится инлайновым, встаёт сразу после названия и переносится вместе с ним, а не отдельным столбиком у края. Базовую линию инлайн держит сам, поэтому align-items: baseline из темы больше не нужен, а gap заменяем отступом слева. Чинит сразу две страницы: категорию — «(9 890)» и поиск — «Tapıldı: 18 334». .detail исключён намеренно: на странице объявления внутри того же заголовка лежит плашка состояния («İkinci əl»), у неё своя раскладка и свой display из темы — запрет переноса и отступ ей не нужны. */ .sale-top:not(.detail) .sale-top__title { display: block; } .sale-top:not(.detail) .sale-top__title > span { white-space: nowrap; margin-left: clamp(12px, 1.2698vw, 16px); } /* ===== Галерея карточки (перенесено из ads-card @once) ===== height: auto у КАЖДОГО варианта — не копипаста, а необходимость. Тема задаёт галерее жёсткую высоту в vw (252 / 302 / 352px по вариантам), а aspect-ratio браузер учитывает только когда одна из сторон auto. Пока высота определённая, все пропорции ниже — мёртвый код: в ряду оказывались 213px (.small, единственный вариант, которому тема сама поставила height: auto) и 352px (.big) — разброс в 1,65x, это и есть «крошечная карточка». Хуже: vw меряется от окна, а .small — от ширины колонки, поэтому на разных ширинах порядок вариантов по высоте переворачивался. Базовым правилом варианты не сбросить: у темы селектор .dealer-card.<вариант> .dealer-card__gallery — специфичность (0,3,0) против (0,1,0). Наши селекторы повторяют её и побеждают только порядком подключения (classifieds.css после style.css), поэтому height: auto нужен в каждой строке. Итог: высота всегда считается от ширины колонки, разброс 1,0w..1,33w. */ .dealer-card__gallery { position: relative; overflow: hidden; height: auto; aspect-ratio: 4 / 5; } .dealer-card.big .dealer-card__gallery { height: auto; aspect-ratio: 3 / 4; } .dealer-card.medium .dealer-card__gallery { height: auto; aspect-ratio: 4 / 5; } .dealer-card.small .dealer-card__gallery { height: auto; aspect-ratio: 1 / 1; } .dealer-card__gallery picture { display: block; width: 100%; height: 100%; } .dealer-card__gallery img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ===== Кнопка «в избранное» (перенесено из _dealer-card-favorite-styles @once) ===== */ .dealer-card__gallery .object-slider__like { position: absolute; top: 8px; right: 8px; z-index: 5; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } .dealer-card__gallery .object-slider__like:hover { background: rgba(0, 0, 0, .5); } .dealer-card__gallery .object-slider__like .sprite { width: 24px; height: 24px; color: #fff; display: inline-flex; } .dealer-card__gallery .object-slider__like .sprite svg { width: 100%; height: auto; transition: .3s; } .dealer-card__gallery .object-slider__like[disabled] { opacity: .5; cursor: not-allowed; } /* ===== Спиннер «Load more» (@keyframes не было в теме → спиннер не крутился) ===== */ @keyframes spin { to { transform: rotate(360deg); } } /* ===== «Load more» чанк ленты (вынос инлайна из listing-feed-chunk) ===== */ .feed-chunk { display: contents; } .feed-loadmore { display: flex; justify-content: center; padding: 40px 0; width: 100%; } .feed-loadmore__btn { min-width: 200px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; } .feed-loadmore__spinner { display: flex; align-items: center; gap: 8px; } .feed-loadmore__spinner-icon { animation: spin 1s linear infinite; } /* ===== Пометка «снято» (витрины продавца и компании, вкладка «Закрытые») ===== Тема даёт только .dealer-card__label с синим и зелёным вариантом — серого для снятых нет, поэтому плашка своя. Позиционируется от .dealer-card__gallery, у которой position: relative уже задан выше. */ .dealer-card__closed { position: absolute; top: 8px; left: 8px; z-index: 5; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-family: var(--font-family); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .5px; } /* Приглушаем фото — по ТЗ снятые «лучше затемнять». Текст не трогаем: заголовок и цена должны оставаться читаемыми, карточка ведь кликабельна. */ .dealer-card.is-closed .dealer-card__gallery img { opacity: .5; } /* ===== Остаток срока (кабинет владельца) ===== Оранжевый — когда осталось не больше трёх дней, то есть ровно с того момента, когда владельцу уходит письмо-напоминание: интерфейс и почта говорят одно и то же. */ .dealer-card__expiry { margin-top: 8px; font-family: var(--font-family); font-size: 12px; font-weight: 500; line-height: 16px; color: rgba(0, 0, 0, .5); } .dealer-card__expiry.soon { color: #e07000; } /* ===== Состояние объявления (кабинет владельца) ===== Стоит на том же месте и в том же наборе, что остаток срока: внизу карточки всегда одна строка, и она отвечает на вопрос «что с объявлением». Раскраска по смыслу, а не по палитре админки: оранжевый — ждём модератора, красный — нужно действие владельца, серый — штатное завершение. */ .dealer-card__status { margin-top: 8px; font-family: var(--font-family); font-size: 12px; font-weight: 500; line-height: 16px; color: rgba(0, 0, 0, .5); } .dealer-card__status.warn { color: #e07000; } .dealer-card__status.bad { color: rgba(var(--cl-j), 1); } /* ===== Счётчики у значений фильтров (ТЗ стр. 12, «Apple (154)») ===== Само число стилей не требует: тема уже красит внутри подписи чекбокса приглушённым. Свой span сюда ставить нельзя — правило `.custom-checkbox span::before` пририсует ему второй квадратик. */ /* Вариант, под который сейчас нет ни одного объявления. Не прячем: список фильтров не должен прыгать при каждом клике — человек теряет глазами то, что искал. Приглушаем и выключаем: видно, что вариант есть, но пуст. */ .custom-checkbox.is-empty { opacity: .45; } .custom-checkbox.is-empty .custom-checkbox__field { pointer-events: none; } /* Курсор тоже должен говорить «нельзя». Тема ставит pointer и на подпись, и на сам квадратик (`.custom-checkbox span` и его ::before), поэтому перебиваем оба — иначе рука обещает клик, которого не случится. not-allowed, а не обычная стрелка: стрелка читалась бы как «это просто текст», а тут вариант есть, просто сейчас недоступен. */ .custom-checkbox.is-empty span, .custom-checkbox.is-empty span::before { cursor: not-allowed; } /* ===== Быстрые фильтры под заголовком категории (ТЗ стр. 10) ===== Разметку берём у чипов подкатегорий, а вид делаем свой: там ссылки-строки, растянутые по сетке в шесть колонок, а здесь нужны компактные кнопки по размеру содержимого. Отдельный модификатор — чтобы не задеть подкатегории, которые выше и должны остаться как были. */ /* Подложка досталась от блока подкатегорий, где она уместна: там большой список ссылок отдельным блоком страницы. Ряду кнопок она не нужна — две серые полосы одна под другой только утяжеляют экран. */ .sale-nav--quick { background: none; padding: 0; margin-bottom: 12px; } .sale-nav--quick .sale-nav__list { display: flex; flex-wrap: wrap; gap: 8px; } /* Тема прячет всё после двенадцатого элемента — рассчитано на длинный список подкатегорий. Здесь значений и так не больше десяти, а скрытый хвост читался бы как обрыв. */ .sale-nav--quick .sale-nav__item { display: block; } .sale-nav--quick .sale-nav__link { height: auto; padding: 6px 12px; gap: 6px; font-size: 14px; line-height: 20px; border: 1px solid var(--br-c); border-radius: 8px; background: rgba(var(--bg-a), 1); } .sale-nav--quick .sale-nav__link:hover { background: rgba(var(--bg-a), 1); border-color: rgba(var(--cl-c), 1); color: rgba(var(--cl-c), 1); } /* Значение выбрано. Заливка, а не только рамка: среди десятка кнопок рамку легко проглядеть, а по ряду должно быть сразу видно, что уже нажато. */ .sale-nav--quick .sale-nav__link.is-active { background: rgba(var(--cl-c), 1); border-color: rgba(var(--cl-c), 1); color: rgba(var(--cl-a), 1); } /* ===== Кабинет: состояние активного поиска ===== Поиск идёт по всем статусам, поэтому вкладки на это время не работают. Показываем их приглушёнными, а не прячем: иначе список раздела внезапно исчезает с экрана и непонятно, куда он делся. */ .dealer-tabs__nav .dealer-tabs__btn.is-muted { opacity: .45; cursor: default; } .cabinet-search-note { margin: 12px 0 4px; font-size: 14px; color: rgba(var(--cl-d), 1); } .cabinet-search-note a { margin-left: 8px; color: rgba(var(--cl-c), 1); text-decoration: underline; } /* ===== Пустой список (нет объявлений / ничего не найдено) ===== В теме этот блок не оформлен вовсе — идёт голым текстом вплотную к кнопке. Задаём сами: крупнее, темнее, с воздухом до кнопки. */ .dealer-tabs__empty { /* Блок лежит внутри сетки карточек и по умолчанию занимает одну колонку из четырёх — текст переносился, хотя справа было пусто. */ grid-column: 1 / -1; padding: 32px 0 40px; } .dealer-tabs__empty p { margin-bottom: 24px; font-size: 18px; font-weight: 600; line-height: 1.4; color: rgba(var(--cl-f), 1); } .dealer-tabs__empty .main-btn { display: inline-flex; } /* ===== Галочки в «Советах перед публикацией» ===== Галочка щёлкает и загорается, от неё вниз тянется луч к следующей. Один проход за загрузку страницы, циклов нет. Галочка у темы — фоновая картинка, и цвет зашит внутрь неё: перекрасить свойством нельзя, поэтому оранжевая версия — вторая картинка. Всё оформление списка приходится повторять: правило темы работает только для списков без класса, а класс мы добавили. */ @keyframes tipPop { 0% { transform: scale(.7); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } } .tips-anim { display: flex; flex-direction: column; gap: 8px; } .tips-anim li { position: relative; display: flex; gap: 8px; color: rgba(var(--cl-b), .95); font-family: var(--font-family); font-size: 16px; line-height: 24px; } .tips-anim li::before { content: ''; width: 13px; height: 13px; margin-top: 6.5px; align-self: start; flex: 0 0 13px; background-repeat: no-repeat; background-position: center; /* Картинка 14x14 в блоке 13x13: без указания размера браузер обрезает по пикселю справа и снизу, и круг выглядит сплюснутым. */ background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath fill='%23d9d5d4' d='m6.066 10.066 4.7-4.7-.933-.933L6.066 8.2l-1.9-1.9-.933.933zm.934 3.6a6.5 6.5 0 0 1-2.6-.525 6.7 6.7 0 0 1-2.117-1.425A6.7 6.7 0 0 1 .858 9.6 6.5 6.5 0 0 1 .333 7q0-1.385.525-2.6a6.7 6.7 0 0 1 1.425-2.117q.9-.9 2.117-1.425A6.5 6.5 0 0 1 7 .333q1.383 0 2.6.525 1.216.525 2.116 1.425T13.141 4.4q.525 1.215.525 2.6 0 1.383-.525 2.6a6.7 6.7 0 0 1-1.425 2.116q-.9.9-2.116 1.425a6.5 6.5 0 0 1-2.6.525'/%3E%3C/svg%3E"); opacity: .4; transform: scale(.7); transition: opacity .3s; } /* Зажжённая: оранжевая картинка плюс подскок. Подскок совмещён с зажиганием — это отклик на событие. Отдельно «до» читался бы как предупреждение, «после» — как сбой. */ .tips-anim li.is-lit::before { opacity: 1; animation: tipPop .55s ease-out forwards; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath fill='%23F1582E' d='m6.066 10.066 4.7-4.7-.933-.933L6.066 8.2l-1.9-1.9-.933.933zm.934 3.6a6.5 6.5 0 0 1-2.6-.525 6.7 6.7 0 0 1-2.117-1.425A6.7 6.7 0 0 1 .858 9.6 6.5 6.5 0 0 1 .333 7q0-1.385.525-2.6a6.7 6.7 0 0 1 1.425-2.117q.9-.9 2.117-1.425A6.5 6.5 0 0 1 7 .333q1.383 0 2.6.525 1.216.525 2.116 1.425T13.141 4.4q.525 1.215.525 2.6 0 1.383-.525 2.6a6.7 6.7 0 0 1-1.425 2.116q-.9.9-2.116 1.425a6.5 6.5 0 0 1-2.6.525'/%3E%3C/svg%3E"); } /* Луч к следующему пункту. Подложки нет намеренно: линия тянется по пустому месту — это читается как прокладывание пути, а не как заполнение готовой полоски, которое выглядит индикатором загрузки. Границы впритык к галочкам: сверху — сразу под текущей (отступ 6.5 + высота 13), снизу — до верха следующей, а это зазор списка (8) плюс её собственный отступ сверху (6.5). */ .tips-anim li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 19.5px; bottom: -14.5px; width: 2px; border-radius: 2px; background: rgba(var(--cl-c), .55); transform: scaleY(0); transform-origin: top; transition: transform 1.2s ease-in-out; } .tips-anim li.is-flowing::after { transform: scaleY(1); } /* Уважаем системную настройку «поменьше движения»: для людей с чувствительностью к анимации это источник реального дискомфорта, а не придирка. Галочки при этом всё равно зажигаются — просто мгновенно. */ @media (prefers-reduced-motion: reduce) { .tips-anim li::before { animation: none !important; transition: none !important; opacity: 1; transform: none; } .tips-anim li::after { transition: none !important; } } /* ===== Кнопка в шапке секции (страница-хаб) ===== Тема под модификатором .mode готовит кнопку к мобильной раскладке: снимает рамку, растягивает на всю ширину, держит min-width 240px и центрирует в гриде. Плюс сам .main-btn задаёт жёсткую height: 46px при padding 14px и строке в 24px — содержимое выше коробки, и верх подрезается. Здесь кнопка стоит в строке заголовка и должна быть по размеру текста, поэтому гасим оба набора правил. Точечно, своим классом: .mode используется ещё в формах и мобильных блоках, там поведение темы верное. */ .listing-section__link.main-btn { width: fit-content; min-width: 0; height: auto; min-height: 46px; padding: 10px 20px; white-space: nowrap; grid-column: auto; justify-self: end; flex: 0 0 auto; } .listing-section__link.main-btn--transparent { border: 1px solid var(--br-c); } /* ===== Декоративная плашка секции — отключена ===== Тема рисует поверх .dealer-section белый градиент .dealer-section::before («затухание» первого экрана). Его положение считается как top: calc(100vh - var(--dealers-section-offset)), а эту переменную в исходной теме выставлял её скрипт. В проекте её не задаёт никто — ни CSS, ни JS. Что происходит без переменной: calc становится невалидным, браузер целиком отбрасывает объявление top, элемент встаёт на статическую позицию (верх секции), а transform: translateY(-98%) поднимает его ещё выше. Нижняя, самая белая часть градиента с z-index: 3 ложится на верх содержимого — на главной она закрашивала верхнюю рамку формы поиска, и это выглядело как обрезанный блок, хотя overflow тут ни при чём. Плашка сломана одинаково на всех пятнадцати страницах с этим классом, просто заметна только под светлой рамкой. Эффект не задумывался — гасим целиком. */ .dealer-section::before { content: none; } /* ===== Порядок блоков на узких экранах ===== Блок отзывов на ≤1024px переносит СКРИПТ ТЕМЫ, а не раскладка. В main.js: const move = (block, aside, content, bp, whenNarrow, whenWide) => { const w = document.documentElement.clientWidth; if (w <= bp) content.insertAdjacentElement(whenNarrow, block); // afterbegin if (w > bp) aside.insertAdjacentElement(whenWide, block); // beforeend }; То есть на узком экране .dealer-aside__content физически вынимается из сайдбара и вставляется ПЕРВЫМ элементом в .dealer-tabs__content, а на широком возвращается в конец сайдбара. Отзывы наверху — задумка темы, просто вставка идёт afterbegin вместо beforeend. Со скриптом не воюем: пусть кладёт куда кладёт, а мы переставляем результат. Для этого .dealer-tabs__content делаем флекс-колонкой — сам по себе он обычный блок, и order в нём бессилен. На витринах .dealer-tabs__content это