/** * Поиск в шапке — современный аккуратный вид (Фаза 2). * * Цель: привести строку поиска, поле и выпадашку автокомплита к чистому * виду в стиле проекта D:\Novels (см. референс-скриншоты): скруглённое поле * с лупой и кнопкой очистки, чистая выпадашка «обложка + название в одну * строку с подсветкой», футер «Все результаты по «<запрос>»». * * ВАЖНО: * - Бэкенд автокомплита (плагин jquery.auto-complete + /search/autocomplete) * и переход по выбору (onSelect) НЕ трогаются. Поведение очистки и футера — * в js/header-search.js. * - Базовый современный вид применяется НА ВСЕХ ширинах (десктоп/планшет/ * мобайл); медиазапросы лишь дополняют (full-width, крупнее тап-таргеты). * - Тёмная тема — здесь же, селекторами body.dark-theme (css/dark-theme.css * не трогаем). Файл подключается ПОСЛЕ dark-theme.css, поэтому равные по * специфичности правила с !important перекрывают старые тёмные стили. * - Контейнер подсказок .autocomplete-suggestions плагин добавляет в , * поэтому используем префикс `body ...` для нужной специфичности. */ /* ===================================================================== 1. Строка поиска (поле + лупа + очистка) ===================================================================== */ .header-search { position: relative; display: inline-flex; align-items: center; width: 280px; max-width: 100%; /* небольшой зазор слева, чтобы поле не липло к краю/соседнему элементу */ margin-left: 10px; vertical-align: middle; } .header-search .search-query { box-sizing: border-box; width: 100%; height: 38px; margin: 0; /* лупа слева всегда; справа компактно, пока нет текста (× скрыт) — больше места под плейсхолдер, чтобы не обрезался */ padding: 6px 14px 6px 34px; border: 1px solid #d6d9de; /* «почти квадрат»: небольшой радиус, не пилюля. Применяется на всех ширинах (мобильные медиазапросы радиус не переопределяют). */ border-radius: 8px; background-color: #fff; color: #222; font-size: 14px; line-height: 1.4; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .header-search .search-query::placeholder { color: #9aa0a6; opacity: 1; } .header-search .search-query:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); outline: none; } /* Лупа слева — декоративная, клики проходят сквозь неё в поле */ .header-search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex; color: #9aa0a6; pointer-events: none; z-index: 2; } /* Кнопка очистки (×) — видна только когда в поле есть текст (класс has-text) */ .header-search__clear { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: #9aa0a6; cursor: pointer; z-index: 2; transition: background .15s ease, color .15s ease; } .header-search__clear:hover { background: rgba(0, 0, 0, .07); color: #444; } .header-search.has-text .header-search__clear { display: flex; } /* Когда есть текст и виден × — освобождаем место справа, чтобы текст не заезжал под кнопку */ .header-search.has-text .search-query { padding-right: 34px; } /* Сабмит оставляем в DOM (нужен для отправки формы по Enter), но прячем визуально — в чистом дизайне видимой кнопки нет, поиск идёт по Enter и по футеру «Все результаты». */ .header-search__submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ===================================================================== 2. Выпадашка подсказок ===================================================================== */ /* Пустую выпадашку НИКОГДА не показываем (фикс «висящего» пустого блока). Плагин создаёт контейнер заранее и без инлайн-display, поэтому пустой div рисовался как рамка с фоном/тенью. :empty гасит и стартовое состояние, и любое состояние «нет результатов». */ body .autocomplete-suggestions:empty { display: none !important; } body .autocomplete-suggestions { position: absolute; /* плагин задаёт top/left/width инлайном */ box-sizing: border-box; background-color: #fff; border: 1px solid #e3e5e8; border-radius: 8px; /* совпадает с радиусом поля поиска */ box-shadow: 0 8px 28px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .08); padding: 6px; margin-top: 6px; /* Ширину/позицию задаёт js/header-search.js (= ширина и левый край поля). Свой min-width НЕ ставим: на узких десктоп-брейкпоинтах (поле 190–220px) он бы расширил выпадашку шире поля и она вылезла бы вправо. На мобайле ширину выставляет плагин (= ширина поля). */ max-width: calc(100vw - 16px); max-height: 60vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 3000; /* тонкий скроллбар */ scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent; } body .autocomplete-suggestions::-webkit-scrollbar { width: 8px; } body .autocomplete-suggestions::-webkit-scrollbar-track { background: transparent; } body .autocomplete-suggestions::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } /* ── Строка результата ─────────────────────────────────────────────── */ body .autocomplete-suggestions .autocomplete-suggestion { display: flex; align-items: center; gap: 10px; padding: 7px 8px; min-height: 52px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; box-sizing: border-box; /* Длинные названия НЕ должны растягивать строку/выпадашку: ограничиваем ширину строки её контейнером и режем любое переполнение. Эллипсис самого текста — на .hs-sg__title/.hs-sg__sub (см. ниже). */ width: 100%; max-width: 100%; overflow: hidden; } body .autocomplete-suggestions .autocomplete-suggestion:hover, body .autocomplete-suggestions .autocomplete-suggestion.selected { background-color: #f1f3f5; } /* Обложка фиксированного размера */ .autocomplete-suggestion .hs-sg__cover { flex: 0 0 auto; width: 34px; height: 46px; border-radius: 5px; overflow: hidden; background: #eceef1; } .autocomplete-suggestion .hs-sg__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Текстовая колонка. min-width:0 ОБЯЗАТЕЛЕН: без него flex-элемент не даёт тексту сжиматься уже контента, и эллипсис в названии не срабатывает (блок распирает наружу). overflow:hidden + max-width — страховка от переполнения. */ .autocomplete-suggestion .hs-sg__text { min-width: 0; max-width: 100%; flex: 1 1 auto; overflow: hidden; } .autocomplete-suggestion .hs-sg__title { font-size: 13.5px; font-weight: 600; color: #1f2328; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .autocomplete-suggestion .hs-sg__sub { margin-top: 2px; font-size: 12px; color: #8a9099; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .autocomplete-suggestion mark { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; } /* ── Футер «Все результаты по «<запрос>»» ──────────────────────────── */ body .autocomplete-suggestions .hs-sg-footer { position: sticky; bottom: 0; display: flex; align-items: center; gap: 7px; margin: 6px -6px -6px; padding: 11px 14px; border-top: 1px solid #eceef1; border-radius: 0 0 8px 8px; /* нижние углы футера = радиус выпадашки */ background: #fff; color: #6b4eff; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; /* «Все результаты по «<длинный запрос>»» — в одну строку с эллипсисом, без растягивания выпадашки (эллипсис на .hs-sg-footer__text). */ max-width: 100%; overflow: hidden; } body .autocomplete-suggestions .hs-sg-footer:hover { background: #f6f4ff; } .hs-sg-footer__icon { display: flex; flex: 0 0 auto; } .hs-sg-footer__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===================================================================== 3. Тёмная тема (внутри этого файла, body.dark-theme) ===================================================================== */ body.dark-theme .header-search__icon, body.dark-theme .header-search__clear { color: var(--dark-text-muted, #9aa0a6); } body.dark-theme .header-search__clear:hover { background: rgba(255, 255, 255, .09); color: var(--dark-text-primary, #e8eaed); } body.dark-theme .autocomplete-suggestions { background-color: var(--dark-bg-card, #1e1f24) !important; border-color: var(--dark-border-primary, #34363c) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .55) !important; scrollbar-color: rgba(255, 255, 255, .25) transparent; } body.dark-theme .autocomplete-suggestions::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border: 2px solid transparent; background-clip: padding-box; } body.dark-theme .autocomplete-suggestions .autocomplete-suggestion { background: transparent !important; border: 0 !important; } body.dark-theme .autocomplete-suggestions .autocomplete-suggestion:hover, body.dark-theme .autocomplete-suggestions .autocomplete-suggestion.selected { background-color: var(--dark-bg-hover, #2a2c32) !important; } body.dark-theme .autocomplete-suggestion .hs-sg__title { color: var(--dark-text-primary, #e8eaed); } body.dark-theme .autocomplete-suggestion .hs-sg__sub { color: var(--dark-text-secondary, #9aa0a6); } body.dark-theme .autocomplete-suggestion .hs-sg__cover { background: var(--dark-bg-secondary, #26282e); } body.dark-theme .autocomplete-suggestion mark { background: #5a4a00; color: var(--dark-text-primary, #e8eaed); } body.dark-theme .autocomplete-suggestions .hs-sg-footer { background: var(--dark-bg-card, #1e1f24); border-top-color: var(--dark-border-primary, #34363c); color: var(--dark-accent-blue, #8ab4f8); } body.dark-theme .autocomplete-suggestions .hs-sg-footer:hover { background: var(--dark-bg-hover, #2a2c32); } /* ===================================================================== 4. Адаптив (брейкпоинты 775 / 767 / 500 / 360) ===================================================================== */ @media (max-width: 991px) { .header-search { width: 220px; } } @media (max-width: 775px) { .header-search { width: 190px; } } /* Мобайл: поле во всю ширину контейнера поиска, крупные тап-таргеты */ @media (max-width: 767px) { .main-header-right_menu .form-search { flex: 1 1 auto; min-width: 0; } .header-search { /* симметричный небольшой зазор слева/справа, без horizontal overflow (margin учтён в ширине через calc) */ width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; } /* Состояние «развёрнут» (mobile-nav.js) — поле занимает максимум ширины */ .main-header-right_menu .form-search.search-expanded { flex-basis: 100%; } .header-search .search-query { height: 40px; /* 16px у инпута предотвращает авто-зум на iOS */ font-size: 16px; } /* Выпадашка на мобайле: ширину/левый край задаёт сам плагин (jquery.auto-complete → updateSC: width = input.outerWidth(), left = input.offset().left), т.е. ВЫПАДАШКА = ШИРИНА ПОЛЯ и выровнена под ним (в JS для ≤767px стоит ранний return — width не трогаем). Здесь только страхуемся от горизонтального переполнения: max-width не больше доступной области, всё лишнее режется по X. box-sizing:border-box (база) гарантирует, что padding/border входят в заданную плагином ширину и правый край не вылезает. */ body .autocomplete-suggestions { font-size: 14px; max-width: calc(100vw - 12px) !important; overflow-x: hidden; } body .autocomplete-suggestions .autocomplete-suggestion { min-height: 56px; /* удобный тап-таргет ≥44px */ padding: 8px 10px; /* чуть больше по бокам — воздух у краёв */ } .autocomplete-suggestion .hs-sg__cover { width: 38px; height: 52px; } .autocomplete-suggestion .hs-sg__title { font-size: 14px; } body .autocomplete-suggestions .hs-sg-footer { padding: 13px 14px; /* ≥44px высота */ font-size: 13px; } } @media (max-width: 500px) { body .autocomplete-suggestions { max-height: 65vh; } } /* Очень узкие экраны (≤360px, в т.ч. 320px): поле поиска зажато между лого и иконками — отдаём ему максимум места, уменьшив боковые зазоры (10→6px) и паддинги строки. Горизонтального скролла нет: ширину поля ограничивает flex (min-width:0 в mobile-nav.css), а ширину выпадашки — плагин (= ширина поля). */ @media (max-width: 360px) { .header-search { width: calc(100% - 12px); margin-left: 6px; margin-right: 6px; } body .autocomplete-suggestions .autocomplete-suggestion { padding: 8px; gap: 8px; } .autocomplete-suggestion .hs-sg__cover { width: 34px; height: 46px; } }