kate522
147fd6eaf7
- Menu search panel type chips when multi-type search enabled - Graphic card arrangement (wrap/swiper) in senior menu editor - Nav utility CSS: avatar, sub-user width, type chips, mid fold visibility
269 lines
7.3 KiB
CSS
269 lines
7.3 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; }
|
|
|
|
/* Layout-2 remote menu search panel (zibll menu_search) */
|
|
.aksrt-remote-box[data-aksrt-menu-search-remote] {
|
|
min-height: 8px;
|
|
}
|
|
.navbar-inline-search-panel {
|
|
min-width: 300px;
|
|
max-width: 380px;
|
|
max-height: 70vh;
|
|
overflow: auto;
|
|
}
|
|
.aksrt-menu-search-posts__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 6px 2px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(0,0,0,.04);
|
|
}
|
|
.aksrt-menu-search-posts__item:last-child { border-bottom: 0; }
|
|
.aksrt-menu-search-posts__item:hover { color: var(--focus-color); }
|
|
.aksrt-menu-search-history__list .but,
|
|
.navbar-inline-search-hots .but { margin: 0 4px 4px 0; }
|
|
.loading-spot {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: 8px;
|
|
border: 2px solid rgba(0,0,0,.15);
|
|
border-top-color: var(--focus-color, #f04494);
|
|
border-radius: 50%;
|
|
animation: aksrt-spin .7s linear infinite;
|
|
}
|
|
@keyframes aksrt-spin { to { transform: rotate(360deg); } }
|
|
.navbar-but .radius,
|
|
.navbar-but .but.radius,
|
|
.navbar-cta.radius {
|
|
border-radius: 999px !important;
|
|
}
|
|
|
|
/* Active menu underline (zibll-like) */
|
|
.navbar-top .nav > li.current-menu-item > a,
|
|
.navbar-top .nav > li.current-menu-ancestor > a {
|
|
color: var(--focus-color);
|
|
}
|
|
.navbar-top .nav > li.current-menu-item > a::before,
|
|
.navbar-top .nav > li.current-menu-ancestor > a::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 10px;
|
|
top: 0;
|
|
height: 3px;
|
|
border-radius: 0 0 3px 3px;
|
|
background: var(--focus-color);
|
|
}
|
|
.navbar-top .nav > li > a { position: relative; }
|
|
|
|
/* Type chips in menu search */
|
|
.aksrt-menu-search-types .but { margin: 0 4px; }
|
|
.aksrt-menu-search-types .but.active {
|
|
--this-bg: var(--focus-color-opacity1, rgba(240,68,148,.12));
|
|
--this-color: var(--focus-color);
|
|
color: var(--focus-color);
|
|
}
|
|
/* 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;
|
|
}
|
|
/* Sub-user-box width */
|
|
.navbar-top .navbar-right .sub-menu {
|
|
min-width: 280px;
|
|
padding: 0;
|
|
}
|
|
.navbar-top .navbar-right .sub-menu .sub-user-box {
|
|
min-width: 280px;
|
|
}
|
|
/* Ensure fold trigger visible only mid */
|
|
@media (min-width: 992px) {
|
|
.navbar-top .show-nav-but { display: none !important; }
|
|
}
|