/* zibll search-box / menu_search panel parity */ /* Layout-2 focus dropdown */ .navbar-collapse .form-group.relative.dropdown { position: relative; } .navbar-collapse .search-input ~ .dropdown-menu, .navbar-collapse .form-group .dropdown-menu.hover-show-con { display: none; position: absolute; left: 0; top: 100%; z-index: 1002; min-width: 320px; width: max(320px, 100%); max-width: 460px; margin-top: 10px; padding: 10px; background: var(--main-bg-color, #fff); border-radius: var(--main-radius, 8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); visibility: visible; opacity: 1; } .navbar-form.hover-show:hover .dropdown-menu.hover-show-con, .navbar-form.hover-show:focus-within .dropdown-menu.hover-show-con, .navbar-collapse .form-group:focus-within .dropdown-menu.hover-show-con, .navbar-collapse .dropdown-menu.hover-show-con.is-open { display: block; } /* Search box body */ .search-input .search-keywords { padding: 6px 10px 2px; } .search-input .search-keywords > p { margin: 0 0 6px; font-size: 0.9em; } .search-input .search-keywords .but, .search-input .search-keywords a.but { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; font-size: 0.85em; border-radius: 20px; background: var(--main-shadow, rgba(0, 0, 0, 0.05)); color: inherit; text-decoration: none; } .search-input .search-keywords .but:hover { color: var(--focus-color, #2997f7); } .search-input .history-search .trash-history-search { text-decoration: none; opacity: 0.7; } .search-input .history-search .trash-history-search:hover { opacity: 1; color: var(--focus-color, #2997f7); } /* Hot posts swiper row */ .search-input .relates-thumb { overflow: hidden; } .search-input .relates-thumb .swiper-container, .search-input .relates-thumb .swiper-scroll { overflow: hidden; position: relative; } .search-input .relates-thumb .swiper-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0; scrollbar-width: none; } .search-input .relates-thumb .swiper-wrapper::-webkit-scrollbar { display: none; } .search-input .relates-thumb .swiper-slide { flex: 0 0 auto; scroll-snap-align: start; } .search-input .relates-thumb .swiper-button-prev, .search-input .relates-thumb .swiper-button-next { display: none; } /* Full navbar-search slide (layout 1/3) — position/transition from zib-navbar-core */ .navbar-search { left: 0; right: 0; top: 0; width: 100%; } .navbar-search .container { max-width: var(--nav-max-width, 1200px); margin: 0 auto; position: relative; padding: 10px 15px 20px; } .navbar-search .navbar-search-close, .navbar-search > .container > .close { position: absolute; right: 12px; top: 12px; z-index: 2; background: none; border: 0; font-size: 1.25rem; color: inherit; cursor: pointer; opacity: 0.7; } .navbar-search .navbar-search-close:hover { opacity: 1; } /* Line form (full search box) */ .search-input .line-form { display: flex; align-items: stretch; border-bottom: 1px solid rgba(0, 0, 0, 0.08); position: relative; } .search-input .search-input-text { flex: 1; position: relative; min-width: 0; } .search-input .line-form-input { width: 100%; border: 0; background: transparent; padding: 12px 40px 12px 4px; font-size: 1.05em; outline: none; color: inherit; } .search-input .scale-placeholder { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0.45; transition: 0.2s; } .search-input .scale-placeholder.is-focus, .search-input .line-form-input:focus + .line-form-line + .scale-placeholder, .search-input .line-form-input:not([value=""]) ~ .scale-placeholder { opacity: 0; } .search-input .option-dropdown { flex-shrink: 0; display: flex; align-items: center; padding-right: 8px; } .search-input .search-type-but-average .but { margin: 0 4px; } .search-input .search-type-but-average .but.active { color: #fff; background: var(--focus-color, #2997f7); } /* Live suggest (extension) */ .navbar-inline-search-suggest__item, .aksrt-menu-search-suggest a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 4px; text-decoration: none; color: inherit; } .navbar-inline-search-suggest__item:hover { color: var(--focus-color, #2997f7); } body.theme-dark .navbar-collapse .form-group .dropdown-menu.hover-show-con, html.dark .navbar-collapse .form-group .dropdown-menu.hover-show-con, body.dark-theme .navbar-collapse .form-group .dropdown-menu.hover-show-con { background: var(--main-bg-color, #1e1e1e); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }