/* ================================================================ TANKNEXUS — Cross-sell (cross-sell.css) 1) Язычок + шторка "Другие аккаунты продавца" (seller-dock / seller-drawer) 2) Строка "Похожие предложения" под блоком техники (similar-lots) ================================================================ */ /* ── 1. Язычок продавца (докован к правому краю экрана) ─────────── */ .seller-dock-tab { position: fixed; top: 50%; right: 0; transform: translateY(-50%) translateX(100%); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-right: none; border-radius: 16px 0 0 16px; padding: 14px 8px; box-shadow: var(--shadow); cursor: pointer; opacity: 0; transition: background var(--transition), box-shadow var(--transition); /* Язычок добавляется в DOM асинхронно (после ответа API), уже после того, как страница "устаканилась" — если просто ставить его сразу видимым, он будет резко всплывать поверх готовой страницы. Поэтому один раз плавно въезжает и проявляется (seller-dock-in) — и на этом всё, никаких повторных покачиваний, чтобы не создавать впечатление, что он несколько раз "выезжает и заезжает". */ animation: seller-dock-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .seller-dock-tab:hover { background: var(--bg-card-hover); } .seller-dock-tab:active { transform: translateY(-50%) scale(0.97); } .seller-dock-tab:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; } @keyframes seller-dock-in { 0% { opacity: 0; transform: translateY(-50%) translateX(100%); } 100% { opacity: 1; transform: translateY(-50%) translateX(0); } } /* Не мигаем анимацией всем, кто просил браузер уменьшить движение */ @media (prefers-reduced-motion: reduce) { .seller-dock-tab { animation: none; opacity: 1; transform: translateY(-50%); } } .seller-dock-tab__avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; background: var(--bg-input); } .seller-dock-tab__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .seller-dock-tab__label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .seller-dock-tab__count { writing-mode: horizontal-tb; /* Родитель .seller-dock-tab__label уже повёрнут на 180deg (чтобы вертикальный текст читался сверху вниз) — этот поворот наследуется дочерними элементами. Компенсируем ещё одним поворотом на 180deg, иначе бейдж со счётчиком оказывается "вверх ногами". */ transform: rotate(180deg); font-size: 11px; font-weight: 700; color: var(--text-dim); background: rgba(255,255,255,0.08); border-radius: 20px; padding: 1px 6px; line-height: 1.5; } .seller-dock-tab__chevron { color: var(--text-muted); transition: transform var(--transition); display: flex; } .seller-dock-tab__chevron svg { width: 14px; height: 14px; } .seller-dock-tab.is-open .seller-dock-tab__chevron { transform: rotate(180deg); } /* ── Затемнение фона под шторкой ─────────────────────────────────── */ .seller-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 46; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .seller-drawer-overlay.is-visible { opacity: 1; pointer-events: auto; } /* ── Блокировка скролла страницы, пока открыта шторка ───────────── Вешается на и одновременно — так надёжнее, чем только на body (некоторые браузеры на десктопе и iOS всё равно "прокидывают" скролл дальше, если заблокирован только один из уровней). */ html.has-seller-drawer-open, body.has-seller-drawer-open { overflow: hidden; overscroll-behavior: none; } /* ── Шторка (выезжает справа, скруглённые края в стиле сайта) ───── top/height учитывают высоту фиксированного .site-header (z-index которого выше шторки), чтобы контент шторки не заезжал под хэдер и не обрезался сверху. */ .seller-drawer { position: fixed; top: calc(var(--header-h, 64px) + 16px); right: 9px; height: calc(100% - (var(--header-h, 64px) + 32px)); width: min(380px, 88vw); background: var(--bg-card); border: 1px solid rgb(255 255 255 / 2%); border-radius: 24px; box-shadow: var(--shadow-lg); z-index: 47; transform: translateX(105%); transition: transform 0.32s var(--ease-smooth); display: flex; flex-direction: column; overflow: hidden; /* На случай, если html/body lock не сработает (некоторые версии Safari на touch-устройствах) — не даём скроллу "пробиться" из шапки/панели шторки на страницу под ней. */ overscroll-behavior: contain; } .seller-drawer.is-open { transform: translateX(0); } .seller-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px 20px; flex-shrink: 0; } .seller-drawer__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .seller-drawer__title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .seller-drawer__seller-name { font-size: 18px; font-weight: 700; color: var(--text); } .seller-drawer__close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 0px solid var(--border); background: #1a1e22; color: var(--text-dim); display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); flex-shrink: 0; } .seller-drawer__close:hover { background: rgb(255 255 255 / 7%); color: var(--text); } .seller-drawer__close svg { width: 16px; height: 16px; } .seller-drawer__list { flex: 1; min-height: 0; /* без этого flex-элемент не сжимается ниже высоты контента, и overflow-y: auto никогда не срабатывает */ overflow-y: auto; overscroll-behavior: contain; padding: 0px 16px 20px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } .seller-drawer__list::-webkit-scrollbar { width: 6px; } .seller-drawer__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; } /* ── Мини-карточка аккаунта (общая для шторки и ленты) ───────────── */ .cs-mini-card { position: relative; display: flex; background: #15191f; border: 0px solid rgb(255 255 255 / 2%); border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; transition: background var(--transition), border-color var(--transition); } .cs-mini-card:hover { background: #22272f; border-color: rgba(255, 255, 255, 0); } .cs-mini-card__thumb { display: block; object-fit: cover; background: #00000000; flex-shrink: 0; } .cs-mini-card__thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-muted); font-size: 18px; flex-shrink: 0; } .cs-mini-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; } .cs-mini-card__name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-mini-card__stats { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-mini-card__price { font-size: 15px; font-weight: 700; color: var(--text); } .cs-mini-card__price .price-rub { font-weight: 500; color: var(--text-dim); } .cs-mini-card__funpay-badge { position: absolute; font-size: 10px; font-weight: 600; color: var(--text-dim); background: rgba(0,0,0,0.55); border-radius: 20px; padding: 2px 8px 3px 4px; } /* Строка (шторка продавца) — как было: у цены, снизу-справа над карточкой */ .cs-mini-card--row .cs-mini-card__funpay-badge { bottom: 8px; right: 8px; } /* Колонка (лента похожих) — свой стиль/позиция, независимо от --row */ .cs-mini-card--col .cs-mini-card__funpay-badge { bottom: 10px;; right: 8px; } /* ── Бейдж "Просмотрено" — чтобы не открывать повторно один и тот же лот ── */ .cs-mini-card__viewed-badge { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: #c3c3c3; background: rgb(46 52 61 / 76%); border-radius: 20px; padding: 2px 7px 2px 5px; line-height: 1.5; } .cs-mini-card__viewed-badge svg { width: 13px; height: 13px; color: #c3c3c3; flex-shrink: 0; } /* В компактном "row"-варианте (шторка продавца) текст бейджа не влезает и там своя логика затемнения — оставляем только иконку-галочку. */ .cs-mini-card--row .cs-mini-card__viewed-text { display: none; } .cs-mini-card--row .cs-mini-card__viewed-badge { padding: 4px; } /* Просмотренные карточки — слегка притушены, чтобы визуально отличались от ещё не открытых, но оставались кликабельными */ .cs-mini-card--viewed .cs-mini-card__thumb, .cs-mini-card--viewed .cs-mini-card__thumb-placeholder { opacity: 0.55; } .cs-mini-card--viewed .cs-mini-card__price { color: var(--text-dim); } .cs-mini-card__seller { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 5px; } .cs-mini-card__seller img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* В ленте "Похожих предложений" продавца не показываем — там и так рядом на странице виден продавец текущего лота, дублировать не нужно */ .cs-mini-card--col .cs-mini-card__seller { display: none; } /* Вариант "строка" — используется внутри шторки продавца */ .cs-mini-card--row { flex-direction: row; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; flex-shrink: 0; background: #1a1e22; border-radius: 20px; } .cs-mini-card--row .cs-mini-card__thumb, .cs-mini-card--row .cs-mini-card__thumb-placeholder { width: 100px; height: 68px; border-radius: 12px; } /* Вариант "колонка" — используется в горизонтальной ленте похожих */ .cs-mini-card--col { flex-direction: column; width: 152px; flex: 0 0 auto; } .cs-mini-card--col .cs-mini-card__thumb, .cs-mini-card--col .cs-mini-card__thumb-placeholder { width: 100%; aspect-ratio: 16/12; border-radius: 22px; padding: 4px; } .cs-mini-card--col .cs-mini-card__thumb-placeholder { font-size: 22px; } .cs-mini-card--col .cs-mini-card__body { padding: 6px 11px 6px; } /* ── 2. Строка "Похожие предложения" под блоком техники ──────────── */ .similar-lots { margin: 4px 0 44px; } .similar-lots__header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #b9b9b9; font-size: 14px; margin-right: 8px; } .similar-lots__icon { width: 18px; height: 18px; flex-shrink: 0; color: rgb(255 214 7); } .similar-lots__all { margin-left: auto; display: flex; align-items: center; gap: 3px; color: #9c9fa4; font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s, background 0.2s; border-radius: 20px; padding: 6px 10px 6px 14px; background: transparent; } .similar-lots__all:hover { color: #d8d8d8; background: transparent; } .similar-lots__all svg { width: 15px; height: 15px; flex-shrink: 0; } /* ── Лента с кнопками прокрутки ──────────────────────────────────── */ .similar-lots__viewport { position: relative; } .similar-lots__row { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 36px; scrollbar-width: none; } .similar-lots__row::-webkit-scrollbar { display: none; } .similar-lots__nav { position: absolute; top: 0; bottom: 6px; width: 36px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: var(--text); z-index: 2; transition: opacity var(--transition); } .similar-lots__nav svg { width: 20px; height: 20px; } .similar-lots__nav--prev { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--bg) 30%, transparent); } .similar-lots__nav--next { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--bg) 30%, transparent); } .similar-lots__nav.is-disabled { opacity: 0.32; cursor: default; } .similar-lots__nav.is-hidden { opacity: 0; pointer-events: none; } .similar-lots__nav:not(.is-disabled):hover svg { transform: scale(1.1); } /* ── Адаптив ──────────────────────────────────────────────────────── */ @media (max-width: 480px) { .seller-dock-tab { padding: 10px 6px; gap: 6px; } .seller-dock-tab__label { font-size: 11px; } .seller-dock-tab__avatar { width: 26px; height: 26px; } /* На мобилке шторка превращается в bottom sheet — привычнее для тача, скругление остаётся только сверху (тот же язык, что и у карточек). */ .seller-drawer { top: auto; bottom: 0; left: 0; right: 0; height: auto; max-height: 78vh; width: 100%; border-radius: 30px 30px 0px 0px; border-left: none; border-top: 1px solid var(--border); transform: translateY(100%); } .seller-drawer.is-open { transform: translateY(0); } .cs-mini-card--col { width: 152px; } .similar-lots__header { font-size: 14px; } .similar-lots__nav { display: none; } }