Files
wordpress-theme-aksrt/assets/css/frontend/nav/zib-utilities.css
T
kate522 2a11a889c3 feat(nav): finish remaining parity gaps (image_select, AJAX search, senior UI)
- Layout image_select previews (zibll PNGs under assets/images/header-layout)
- Localize aksrtAdminData.themeUri for admin SPA asset URLs
- Layout-2 inline search AJAX suggestions via aksrt_search_suggestions
- Appearance→Menus visual senior submenu editor (cards/columns)
- Acceptance checklist + automated source contract report
2026-07-22 12:04:44 +08:00

165 lines
4.8 KiB
CSS

/* Utilities for zibll header chrome */
.css-icon.i-menu {
position: relative;
display: inline-block;
width: 1.15em;
height: 1em;
vertical-align: -0.1em;
}
.css-icon.i-menu > i,
.css-icon.i-menu::before,
.css-icon.i-menu::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
border-radius: 1px;
transition: 0.25s;
}
.css-icon.i-menu > i { top: 50%; margin-top: -1px; }
.css-icon.i-menu::before { top: 0; }
.css-icon.i-menu::after { bottom: 0; }
.list-inline { padding-left: 0; list-style: none; margin: 0; }
.list-inline > li { display: inline-block; vertical-align: middle; }
.list-inline.splitters > li + li { margin-left: 6px; }
.navbar-top .flex.ac { display: flex; align-items: center; }
.navbar-top .flex.jsb { display: flex; justify-content: space-between; }
.navbar-top .flex.jsa { display: flex; justify-content: space-around; }
.navbar-top .flex.jc { display: flex; justify-content: center; }
.mb6 { margin-bottom: 6px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mt6 { margin-top: 6px; }
.mt10 { margin-top: 10px; }
.ml6 { margin-left: 6px; }
.ml10 { margin-left: 10px; }
.em09 { font-size: 0.9em; }
.em12 { font-size: 1.2em; }
.muted-2-color { opacity: 0.7; }
.muted-3-color { opacity: 0.55; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.padding-10 { padding: 10px; }
.relative { position: relative; }
.inline-block { display: inline-block; }
.hide { display: none !important; }
.pull-right { float: right; }
.null { background: none; border: 0; padding: 0; color: inherit; }
.abs-right { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
/* Mid breakpoint fold trigger (zibll ~991) */
@media (max-width: 991px) {
.navbar-top .show-nav-but { display: block !important; }
.navbar-top .nav.navbar-nav:not(.show) {
display: none;
}
.navbar-top .nav.navbar-nav.show {
display: block;
position: absolute;
left: 0; right: 0;
top: 100%;
background: var(--main-bg-color, #fff);
z-index: 1001;
padding: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
}
/* Language dropdown */
.language-dropdown { position: relative; }
.language-dropdown .dropdown-menu,
.language-dropdown .hover-show-con {
min-width: 140px;
right: 0;
left: auto;
padding: 8px 0;
}
.language-dropdown .translate-button { display: flex; align-items: center; padding: 6px 14px; }
.language-dropdown .translate-button.active { color: var(--focus-color); }
/* Layout2 inline search focus panel */
.navbar-collapse .search-input {
min-width: 160px;
max-width: 240px;
height: 34px;
border-radius: 20px;
border: 0;
padding: 0 36px 0 14px;
}
.navbar-form.navbar-left.hover-show { margin: 0 8px; }
.navbar-form .form-group.relative { position: relative; }
.navbar-form .abs-right { right: 10px; }
/* Mobile drawer body scroll lock */
body.mobile-navbar-show { overflow: hidden; }
/* Ensure container-header flex row */
.container-header {
display: flex;
align-items: center;
flex-wrap: nowrap;
max-width: var(--nav-max-width, 100%);
margin: 0 auto;
width: 100%;
}
.navbar-collapse {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
flex-wrap: nowrap;
}
.navbar-header { display: flex; align-items: center; flex-shrink: 0; }
.navbar-top .navbar-toggle { display: none; background: none; border: 0; color: inherit; }
@media (max-width: 767px) {
.navbar-top .navbar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.navbar-collapse { display: none; }
}
/* Senior submenu full width under fixed header */
.navbar-top .sub-menu.senior-submenu {
position: fixed;
left: 0; right: 0;
top: 59px;
width: 100%;
min-width: 100%;
padding: 20px 0;
border-radius: 0;
z-index: 998;
}
.navbar-inline-search-panel {
position: absolute;
left: 0;
top: calc(100% + 8px);
min-width: 280px;
max-width: 360px;
padding: 12px;
background: var(--main-bg-color, #fff);
border-radius: var(--main-radius, 8px);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 1002;
display: none;
}
.navbar-form .form-group:hover .navbar-inline-search-panel,
.navbar-form .form-group:focus-within .navbar-inline-search-panel,
.navbar-inline-search-panel.is-open {
display: block;
visibility: visible;
}
.navbar-inline-search-suggest__item {
display: flex;
flex-direction: column;
padding: 6px 4px;
color: inherit;
text-decoration: none;
}
.navbar-inline-search-suggest__item:hover { color: var(--focus-color); }
.navbar-inline-search-hots .but { margin: 0 4px 4px 0; }
.aksrt-sme-field { display: block; margin: 4px 0; }
.aksrt-sme-field span { display: block; font-size: 12px; color: #646970; }
.aksrt-sme-card, .aksrt-sme-col { border: 1px solid #dcdcde; padding: 8px; margin: 8px 0; border-radius: 4px; }