feat(nav): deep 1:1 zibll search-box + navbar-search + newposts unify
Port aksrt_get_search_box/posts for menu_search and layout 1/3 slide; unify publish switch; expand user-box admin row; CSS/JS remote-box parity.
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
@import url("nav/zib-mobile-navbar.css");
|
||||
@import url("nav/zib-senior-submenu.css");
|
||||
@import url("nav/zib-utilities.css");
|
||||
@import url("nav/zib-search-box.css");
|
||||
@import url("nav/header-menu-buttons.css");
|
||||
@import url("nav/header-userbox.css");
|
||||
@import url("nav/dark-mode-submenu.css");
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
/* 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) */
|
||||
.navbar-search {
|
||||
position: fixed;
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user