/** * Search API autocomplete dropdown. * * Search API appends the menu directly to . The deliberately specific * selectors below also beat the module's late-loaded jQuery UI defaults. */ .search-api-autocomplete-search.ui-autocomplete.ui-menu { /* Appended to , therefore this must explicitly remain below Drupal's admin toolbar and its trays (z-index 501+). */ z-index: 460; max-width: min(680px, calc(100vw - 24px)); max-height: min(440px, calc(100vh - 104px)); margin: 6px 0 0; padding: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: #292524; background: rgba(255, 255, 255, .98); border: 1px solid #dedbd7; border-radius: 12px; box-shadow: 0 20px 45px -22px rgba(28, 25, 23, .38), 0 8px 18px -12px rgba(28, 25, 23, .22); box-sizing: border-box; scrollbar-color: #c9c4be transparent; scrollbar-width: thin; } .search-api-autocomplete-search.ui-menu::-webkit-scrollbar { width: 9px; } .search-api-autocomplete-search.ui-menu::-webkit-scrollbar-thumb { background: #c9c4be; background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; } .search-api-autocomplete-search.ui-menu .ui-menu-item, .search-api-autocomplete-search.ui-menu .ui-menu-item:hover { margin: 0; padding: 0; background: transparent; border: 0; } .search-api-autocomplete-search.ui-menu .ui-menu-item + .ui-menu-item { margin-top: 2px; } .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper, .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper.ui-state-focus, .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper.ui-state-active { display: block; min-height: 0; margin: 0; padding: 0; color: inherit; background: transparent; border: 0; outline: 0; box-sizing: border-box; text-decoration: none; } .search-api-autocomplete-search .search-api-autocomplete-suggestion { display: grid; min-height: 52px; grid-template-columns: 34px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; padding: 8px 10px; overflow: hidden; color: #292524; background: transparent; border: 1px solid transparent; border-radius: 9px; box-sizing: border-box; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .search-api-autocomplete-search .search-api-autocomplete-suggestion > * { pointer-events: none; } .search-api-autocomplete-search .autocomplete-suggestion-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: #57534e; font-size: 15px; background: #f5f5f4; border-radius: 8px; } .search-api-autocomplete-search .autocomplete-suggestion-content { display: block; min-width: 0; overflow: hidden; line-height: 1.3; } .search-api-autocomplete-search .autocomplete-suggestion-label { display: -webkit-box; min-width: 0; overflow: hidden; color: #292524; font-size: 14px; font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; } .search-api-autocomplete-search .autocomplete-suggestion-type, .search-api-autocomplete-search .autocomplete-suggestion-results-count { padding: 3px 7px; color: #6b6560; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .025em; background: #f5f5f4; border: 1px solid #ebe9e7; border-radius: 999px; white-space: nowrap; } .search-api-autocomplete-search .autocomplete-suggestion-arrow { color: #a8a29e; font-size: 11px; transition: transform 120ms ease; } .search-api-autocomplete-search .autocomplete-suggestion-note { display: block; margin-bottom: 2px; color: #78716c; font-size: 11px; } .search-api-autocomplete-search .autocomplete-suggestion-suggestion-prefix, .search-api-autocomplete-search .autocomplete-suggestion-user-input, .search-api-autocomplete-search .autocomplete-suggestion-suggestion-suffix { color: #57534e; font-size: 13px; line-height: 1.35; } .search-api-autocomplete-search .autocomplete-suggestion-user-input { color: #292524; font-weight: 700; } .search-api-autocomplete-search.ui-menu .ui-menu-item:hover .search-api-autocomplete-suggestion { background: #fafaf9; border-color: #e7e5e4; } .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper.ui-state-active .search-api-autocomplete-suggestion { background: #fffaf0; border-color: rgba(176, 125, 31, .42); box-shadow: 0 0 0 2px rgba(176, 125, 31, .10); } .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper.ui-state-active .autocomplete-suggestion-icon { color: #795510; background: #f3ead8; } .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper.ui-state-active .autocomplete-suggestion-type, .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper.ui-state-active .autocomplete-suggestion-results-count { color: #6b4b13; background: #f8eedc; border-color: #ead8b8; } .search-api-autocomplete-search.ui-menu .ui-menu-item:hover .autocomplete-suggestion-arrow, .search-api-autocomplete-search.ui-menu .ui-menu-item-wrapper.ui-state-active .autocomplete-suggestion-arrow { color: #795510; transform: translateX(2px); } @media (max-width: 575.98px) { .search-api-autocomplete-search.ui-autocomplete.ui-menu { max-width: calc(100vw - 16px); max-height: min(400px, calc(100vh - 88px)); padding: 6px; border-radius: 10px; } .search-api-autocomplete-search .search-api-autocomplete-suggestion { min-height: 50px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 7px 8px; } .search-api-autocomplete-search .autocomplete-suggestion-icon { width: 32px; height: 32px; } .search-api-autocomplete-search .autocomplete-suggestion-arrow { display: none; } .search-api-autocomplete-search .autocomplete-suggestion-type { max-width: 104px; overflow: hidden; text-overflow: ellipsis; } } @media (prefers-reduced-motion: reduce) { .search-api-autocomplete-search .search-api-autocomplete-suggestion, .search-api-autocomplete-search .autocomplete-suggestion-arrow { transition: none; } }