kate522
fc50e57bc9
- Remove obsolete dual-path nav CSS; add utilities + language dropdown styles - Wire header/mobile translate switcher from i18n config - Layout-2 inline search hot keywords panel; nav_folding on resize - NavMenuOptions JSON editors for graphic_card / multi_column_links - Section-navs zibll posts-nav-lists; page-navs enqueue; mobile article TOC box - SPA/PHP user-card publish type; rebuild admin assets
133 lines
3.8 KiB
CSS
133 lines
3.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;
|
|
}
|