kate522
4c18910dc4
Lock top-bar button transforms on press; anchor avatar dropdown under the trigger; show mobile drawer toggle only ≤767 and grid-layout the mobile header so logo and menu no longer overlap.
394 lines
10 KiB
CSS
394 lines
10 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%;
|
|
}
|
|
/* Beat Bootstrap 5 `.collapse:not(.show){display:none}` if legacy markup still
|
|
carries both classes. Desktop top bar is always a flex row. */
|
|
.navbar-top .navbar-collapse,
|
|
.navbar.navbar-top .collapse.navbar-collapse {
|
|
display: flex !important;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
flex-wrap: nowrap;
|
|
visibility: visible;
|
|
height: auto;
|
|
overflow: visible;
|
|
justify-content: flex-start;
|
|
gap: 4px;
|
|
}
|
|
.navbar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
/* Primary menu: fill middle so right actions pin to trailing edge (zibll). */
|
|
.navbar-top .navbar-collapse > .nav.navbar-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
margin-left: 12px;
|
|
margin-right: 8px;
|
|
float: none;
|
|
}
|
|
.navbar-top .navbar-collapse > .nav.navbar-nav > li {
|
|
float: none;
|
|
flex: 0 0 auto;
|
|
}
|
|
/* Right-side actions (publish / VIP / theme / user / search) stay packed. */
|
|
.navbar-top .navbar-collapse > .navbar-form,
|
|
.navbar-top .navbar-collapse > .navbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
float: none;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.navbar-top .navbar-collapse > .navbar-form.navbar-left {
|
|
margin-right: 8px;
|
|
}
|
|
/* No primary menu (or empty menu): pin first visible right cluster to the end.
|
|
`.show-nav-but.hide` is display:none and does not participate in flex. */
|
|
.navbar-top .navbar-collapse:not(:has(> .nav.navbar-nav)) > .navbar-form.navbar-right:not(.hide) {
|
|
margin-left: auto;
|
|
}
|
|
.navbar-top .navbar-collapse:not(:has(> .nav.navbar-nav)) > .navbar-form.navbar-right:not(.hide) ~ .navbar-form.navbar-right {
|
|
margin-left: 0;
|
|
}
|
|
/* Layout-3: menu lives in a trailing .navbar-right wrapper */
|
|
.navbar-top .navbar-collapse > .navbar-right:last-child {
|
|
margin-left: auto;
|
|
}
|
|
/* Mobile drawer toggle: hidden on PC (nav.css hardens with !important) */
|
|
.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-top .navbar-collapse,
|
|
.navbar.navbar-top .collapse.navbar-collapse {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.navbar-top .navbar-toggle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* 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; }
|
|
|
|
/* Navbar form vertical align */
|
|
.navbar-top .navbar-form {
|
|
margin: 0;
|
|
padding: 0 4px;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
.navbar-top .navbar-form .form-control {
|
|
height: 34px;
|
|
box-shadow: none;
|
|
}
|
|
/* Avatar in nav */
|
|
.navbar-top .navbar-avatar img,
|
|
.navbar-top a.navbar-avatar img {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
}
|
|
.navbar-top .list-inline > li > a.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0 !important;
|
|
line-height: 1;
|
|
gap: 0;
|
|
vertical-align: middle;
|
|
}
|
|
/* Icon-only nav chips: neutralize .btn padding/height so FA sits dead-center */
|
|
.navbar-top .list-inline > li > a.btn > i,
|
|
.navbar-top .list-inline > li > a.btn > .fa,
|
|
.navbar-top .list-inline > li > a.btn > .fas,
|
|
.navbar-top .list-inline > li > a.btn > .far,
|
|
.navbar-top a.btn.nav-search-btn > i,
|
|
.navbar-top a.btn.main-search-btn > i,
|
|
.navbar-top a.btn.signin-loader > i {
|
|
margin: 0 !important;
|
|
line-height: 1 !important;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: 0;
|
|
position: relative;
|
|
top: 0;
|
|
transform: none;
|
|
}
|
|
/* Navbar CTA: icon + text baseline (zibll .navbar-but .but) */
|
|
.navbar-top .navbar-but .but,
|
|
.navbar-top a.navbar-cta.but {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
}
|
|
.navbar-top .navbar-but .but > i,
|
|
.navbar-top a.navbar-cta.but > i {
|
|
margin: 0 0.25em 0 0 !important;
|
|
line-height: 1 !important;
|
|
position: relative;
|
|
top: 0;
|
|
transform: none;
|
|
vertical-align: 0;
|
|
}
|
|
.navbar-top .navbar-but .but > i:last-child,
|
|
.navbar-top a.navbar-cta.but > i:only-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
/* Theme toggle in navbar-form (not only cluster) */
|
|
.navbar-top .navbar-form .toggle-theme.toggle-radius,
|
|
.navbar-top a.toggle-theme.toggle-radius {
|
|
display: inline-block;
|
|
width: 29px;
|
|
height: 29px;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
.navbar-top .navbar-form .toggle-theme.toggle-radius > i,
|
|
.navbar-top a.toggle-theme.toggle-radius > i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
transform: translateY(-50%);
|
|
line-height: 1;
|
|
/* visibility handled by theme-class rules in nav.css / header-menu-buttons.css */
|
|
}
|
|
/* Menu item title + icon baseline (when menu is assigned) */
|
|
.navbar-top .nav > li > a {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
line-height: 1.44;
|
|
}
|
|
.navbar-top .nav > li > a > .menu-item-icon,
|
|
.navbar-top .nav > li > a > i.menu-item-icon,
|
|
.navbar-top .nav > li > a > .fa.menu-item-icon {
|
|
margin-right: 0.25em;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
top: 0;
|
|
transform: none;
|
|
vertical-align: 0;
|
|
}
|
|
.navbar-top .nav > li > a > .menu-item-title {
|
|
line-height: 1.44;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
/* FA in header: line-height only — do NOT set vertical-align (causes flex drift). */
|
|
.navbar-top .fa,
|
|
.navbar-top .fas,
|
|
.navbar-top .far,
|
|
.navbar-top .fab {
|
|
line-height: 1 !important;
|
|
vertical-align: 0 !important;
|
|
}
|
|
.navbar-top .css-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.15em;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
/* Sub-user-box width + anchor under trigger */
|
|
.navbar-top .navbar-right .sub-menu {
|
|
min-width: 280px;
|
|
padding: 0;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
.navbar-top .navbar-right .sub-menu .sub-user-box {
|
|
min-width: 280px;
|
|
}
|
|
.navbar-top .list-inline > li {
|
|
position: relative;
|
|
}
|
|
/* Ensure fold trigger visible only mid */
|
|
@media (min-width: 992px) {
|
|
.navbar-top .show-nav-but { display: none !important; }
|
|
}
|
|
|
|
/* focus-show: reveal sibling dropdown when input focused (zibll) */
|
|
.form-group:focus-within .dropdown-menu.hover-show-con,
|
|
.hover-show:focus-within .hover-show-con {
|
|
visibility: unset;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|