feat(frontend): restore Zibll-like global search panel

Render full search overlay with types/history/suggestions for tabbar
and desktop header toggle. Open panel on all viewports (not mobile-only)
and wire data-toggle-class/.navbar-search compatibility hooks.
This commit is contained in:
2026-07-11 18:57:41 +08:00
parent 752b9a93bf
commit bf8b125f3b
5 changed files with 257 additions and 20 deletions
+41
View File
@@ -301,3 +301,44 @@ html.dark .footer-tabbar {
.site-footer--compact .site-footer__brand {
flex: 1 1 100%;
}
/* Full-viewport search panel open state (desktop + mobile) */
.tabbar-search-overlay[hidden] {
display: none !important;
}
.tabbar-search-overlay.is-open,
.tabbar-search-overlay.show:not([hidden]) {
display: flex;
}
.tabbar-search-overlay__dialog {
max-width: 720px;
margin: 0 auto;
}
@media (min-width: 768px) {
.tabbar-search-overlay {
align-items: flex-start;
padding-top: 8vh;
background: rgba(15, 23, 42, 0.45);
}
.tabbar-search-overlay__dialog {
min-height: auto;
max-height: min(84vh, 860px);
overflow: auto;
border-radius: 20px;
box-shadow: var(--shadow-lg, 0 20px 50px rgba(15, 23, 42, 0.22));
}
.nav-searchbox--desktop {
display: none;
}
.main-search-btn.nav-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.main-search-btn.nav-search-toggle {
display: none;
}
}