kate522
259dbdbe04
Replace hybrid site-nav/drawer shell with zibll navbar-top layouts 1/2/3, body.mobile-navbar-show drawer, wired NavWalker + aksrt_menu_options meta, nav_folding/chevron, VIP switches, and SPA/PHP schema parity. No dual-class compat paths.
778 lines
14 KiB
CSS
778 lines
14 KiB
CSS
/* Ported/adapted from zibll main.css — top navbar core */
|
|
|
|
.main-shadow {
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.but:focus,
|
|
.but:hover,
|
|
.progress,
|
|
.navbar-nav > li:before {
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.navbar-top .sub-menu,
|
|
.theme-popover,
|
|
.hover-show .hover-show-con {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.navbar-top li:hover > .sub-menu,
|
|
.hover-show:hover .hover-show-con,
|
|
.hover-show:hover ~ .hover-show-con,
|
|
.hover-show:hover ~ .sub-menu {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.hover-show {
|
|
position: relative;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hover-show .hover-show-con {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.hover-show:hover .hover-show-con,
|
|
.hover-show:hover ~ .hover-show-con,
|
|
.hover-show:hover ~ .sub-menu {
|
|
visibility: unset;
|
|
}
|
|
|
|
.match-ok,
|
|
.navbar-top .sub-menu li > a,
|
|
.ic-close {
|
|
transition: 0.3s;
|
|
}
|
|
|
|
|
|
margin-left: -100%;
|
|
}
|
|
|
|
.header {
|
|
padding: 8px 20px;
|
|
background: var(--header-bg);
|
|
margin-bottom: 20px;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.body-scroll .header {
|
|
box-shadow: 0px 4px 10px var(--main-shadow);
|
|
}
|
|
|
|
.header a:not(.but),
|
|
.header svg {
|
|
color: var(--header-color);
|
|
}
|
|
|
|
.header .sub-menu {
|
|
background: var(--main-bg-color);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.header .sub-menu a,
|
|
.header .dropdown-menu a,
|
|
.header .sub-menu svg {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
[data-language].active,
|
|
.header [data-language].active {
|
|
color: var(--focus-color);
|
|
}
|
|
|
|
.header .language-dropdown .dropdown-menu {
|
|
right: -20px;
|
|
}
|
|
|
|
.header .language-dropdown.pull-right.dropdown .dropdown-menu::before {
|
|
right: 30px;
|
|
}
|
|
|
|
.language-dropdown .loading-backdrop {
|
|
border-radius: 4px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide {
|
|
--header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
|
|
--header-color: #fff;
|
|
-webkit-backdrop-filter: unset;
|
|
backdrop-filter: unset;
|
|
}
|
|
|
|
body:not(.nav-fixed) .header.show-slide {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
body.nav-fixed .slide-header {
|
|
margin-top: -90px;
|
|
}
|
|
|
|
.scroll-down.nav-fixed .header.scroll-down-hide {
|
|
transform: translate3d(0, -105%, 0);
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.slide-header .slide-text {
|
|
padding-top: 70px;
|
|
}
|
|
|
|
.slide-header img,
|
|
.slide-header video,
|
|
.slide-header .s-desc,
|
|
.wp-block-carousel figcaption {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.search-keywords {
|
|
padding: 10px;
|
|
}
|
|
|
|
.header form {
|
|
text-align: center;
|
|
}
|
|
|
|
.header-slider-search {
|
|
max-width: 840px;
|
|
margin: auto;
|
|
padding: 0 20px;
|
|
font-size: 17px;
|
|
top: calc(50% - 10px);
|
|
z-index: 2;
|
|
}
|
|
|
|
.card-0 .header-slider-search {
|
|
top: calc(50% + 20px);
|
|
}
|
|
|
|
.header-slider-search .search-input {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.header-slider-search-more {
|
|
color: #fff;
|
|
}
|
|
|
|
.header-slider-search-more.before {
|
|
margin-bottom: 1.8em;
|
|
}
|
|
|
|
.header-slider-search .search-type-but-average {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.header-slider-search .search_keywords,
|
|
.header-slider-search .search-type-but-average .but {
|
|
--this-bg: rgba(255, 255, 255, 0.8);
|
|
--this-color: #888;
|
|
}
|
|
|
|
.filter-blur .header-slider-search .search_keywords,
|
|
.filter-blur .header-slider-search .search-type-but-average .but {
|
|
-webkit-backdrop-filter: saturate(5) blur(20px);
|
|
backdrop-filter: saturate(5) blur(20px);
|
|
}
|
|
|
|
.header-slider-search .search-type-but-average .but.active {
|
|
--this-bg: var(--focus-color);
|
|
--this-color: #fff;
|
|
}
|
|
|
|
.header-slider-search .line-form {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 100px;
|
|
padding: 0.5em 1.2em;
|
|
z-index: 1;
|
|
color: #555;
|
|
}
|
|
|
|
.header-slider-search .line-form .dropdown > a a,
|
|
.header-slider-search .line-form .dropdown > a,
|
|
.header-slider-search .line-form .icon {
|
|
color: #555;
|
|
}
|
|
|
|
.header-slider-search .search-input-text {
|
|
position: relative;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.header-slider-search .line-form-input {
|
|
padding: 0;
|
|
}
|
|
|
|
.header-slider-search .search-keywords > p,
|
|
.header-slider-search .search-input-text .line-form-line {
|
|
display: none;
|
|
}
|
|
|
|
.header-slider-search .search-keywords {
|
|
text-align: center;
|
|
}
|
|
|
|
.header-slider-search .search_keywords {
|
|
padding: 3px 5px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.header-slider-search .line-form .abs-right {
|
|
margin-top: 0;
|
|
margin-right: -6px;
|
|
}
|
|
|
|
.header-slider-card {
|
|
margin-top: -40px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header-slider-card .zib-widget {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.filter-blur .header-slider-search .line-form,
|
|
.filter-blur .header-slider-card .zib-widget {
|
|
-webkit-backdrop-filter: saturate(5) blur(20px);
|
|
backdrop-filter: saturate(5) blur(20px);
|
|
}
|
|
|
|
.filter-blur .header-slider-card .zib-widget {
|
|
background: var(--blur-bg);
|
|
}
|
|
|
|
/*------------导航栏-----------*/
|
|
.nav-fixed .header {
|
|
position: fixed;
|
|
z-index: 999;
|
|
width: 100%;
|
|
top: 0;
|
|
-webkit-backdrop-filter: saturate(5) blur(20px);
|
|
backdrop-filter: saturate(5) blur(20px);
|
|
}
|
|
|
|
.mobile-navbar + .fixed-body {
|
|
z-index: 996;
|
|
}
|
|
|
|
.navbar-top {
|
|
margin: 0;
|
|
border-radius: 0 !important;
|
|
font-size: 15px;
|
|
}
|
|
|
|
badge.top,
|
|
.navbar-top badge {
|
|
transform: translate(-5px, -10px) scale(0.85);
|
|
margin-right: -10px;
|
|
}
|
|
|
|
.navbar-top badge {
|
|
transform: translate(-10px, -10px) scale(0.85);
|
|
}
|
|
|
|
.navbar-top .navbar-nav {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.navbar-top .navbar-right {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.navbar-right ~ .navbar-right {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.navbar-top .navbar-but .but {
|
|
font-size: 0.8em;
|
|
padding: 0.3em 1em !important;
|
|
margin: 0.4em;
|
|
}
|
|
|
|
.navbar-top .navbar-but .but.hover-show {
|
|
z-index: 99;
|
|
}
|
|
|
|
.navbar-top .navbar-brand {
|
|
padding: 7px 10px;
|
|
}
|
|
|
|
.navbar-logo > img {
|
|
height: 36px;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
.navbar-top .nav > li > a {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
border-radius: 4px;
|
|
display: inline-flex !important;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-top .nav > li > a > .menu-item-title {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-item > a > .but {
|
|
transform: translateY(-2px);
|
|
margin: -0.3em;
|
|
}
|
|
|
|
.navbar-top .nav li a:focus,
|
|
.navbar-top .nav li a:hover,
|
|
.current-menu-item > a {
|
|
background-color: transparent;
|
|
color: var(--focus-color);
|
|
}
|
|
|
|
.navbar-top .fa {
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.navbar-collapse .search-input {
|
|
background: var(--main-shadow);
|
|
}
|
|
|
|
.navbar-collapse .search-input ~ .dropdown-menu {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.navbar-collapse .dropdown-menu .search-input {
|
|
background: transparent;
|
|
padding: 10px;
|
|
width: 460px;
|
|
}
|
|
|
|
.navbar-nav li a,
|
|
.navbar-nav li {
|
|
max-height: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-top .sub-menu,
|
|
.theme-popover {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
min-width: 120px;
|
|
background-color: var(--main-bg-color);
|
|
padding: 10px 5px;
|
|
z-index: 99;
|
|
border-radius: var(--main-radius);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.navbar-top li:hover > .sub-menu {
|
|
visibility: unset;
|
|
}
|
|
|
|
.navbar-top .sub-menu .sub-menu {
|
|
left: 100%;
|
|
top: -10px;
|
|
}
|
|
|
|
.theme-popover {
|
|
display: unset;
|
|
}
|
|
|
|
.navbar-search {
|
|
visibility: hidden;
|
|
transform: translateY(-101%);
|
|
padding: 10px 30px;
|
|
padding-top: 80px;
|
|
background: var(--main-bg-color);
|
|
height: auto;
|
|
opacity: 1;
|
|
box-shadow: 0px 14px 10px rgba(0, 0, 0, 0.08);
|
|
z-index: 998;
|
|
transition: all 0.5s;
|
|
border-radius:0 0 var(--main-radius) var(--main-radius);
|
|
}
|
|
|
|
.navbar-search.show {
|
|
visibility: unset;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.navbar-top .navbar-right .sub-menu {
|
|
right: 0;
|
|
}
|
|
|
|
.navbar-top .sub-menu li > a {
|
|
white-space: nowrap;
|
|
display: block;
|
|
padding: 5px 15px;
|
|
}
|
|
|
|
.navbar-top .sub-menu li > a:hover {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.navbar-top .sub-menu .menu-item-has-children > a {
|
|
padding-right: 35px;
|
|
}
|
|
|
|
.navbar-top .sub-menu .menu-item-has-children > a > .fa-angle-down {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 8px;
|
|
}
|
|
|
|
.navbar-top .newadd-btns {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.navbar-top .drop-newadd {
|
|
width: 137px;
|
|
padding: 7px 10px;
|
|
}
|
|
|
|
.navbar-top .drop-newadd::before {
|
|
top: -4px;
|
|
left: auto;
|
|
right: 27px;
|
|
}
|
|
|
|
/******----导航栏高级子菜单----*********/
|
|
.menu-graphic-card-item,
|
|
.submenu-multi-column-links .links-items .link-item > * {
|
|
--main-color: var(--muted-2-color);
|
|
}
|
|
|
|
.mobile-navbar .menu-graphic-card-item .title,
|
|
.mobile-navbar .submenu-multi-column-links .links-items .link-item > * {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.mobile-navbar .sub-menu.senior-submenu .container {
|
|
background: var(--muted-border-color);
|
|
border-radius: var(--main-radius);
|
|
padding: 4px 10px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.sub-menu.senior-submenu ~ .sub-menu {
|
|
display: none;
|
|
}
|
|
|
|
.navbar-top .sub-menu.senior-submenu {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
|
|
border-radius: 0 0 var(--main-radius) var(--main-radius);
|
|
padding: 20px 0;
|
|
top: 59px;
|
|
}
|
|
|
|
.links-columns-box .link-item > * {
|
|
padding: 8px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-top .links-column {
|
|
margin: 10px;
|
|
}
|
|
|
|
.navbar-top .links-columns-box .column-title {
|
|
border-bottom: 1px solid var(--main-border-color);
|
|
font-size: 1.1em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.links-columns-box .link-item .icon-hover-show {
|
|
opacity: 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.navbar-top .links-columns-box .link-item > a:hover > .icon-hover-show {
|
|
opacity: 1;
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
|
|
.links-columns-box .link-item img {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.mobile-navbar .links-columns-box .link-item > * {
|
|
padding: 5px 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 110px;
|
|
display: block;
|
|
}
|
|
|
|
.mobile-navbar .links-columns-box .link-item img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/*导航栏高级子菜单:图文卡片菜单*/
|
|
.navbar-top .menu-graphic-card-item {
|
|
margin: 20px 10px;
|
|
}
|
|
|
|
.navbar-top .submenu-graphic-card {
|
|
--img-size: 130px;
|
|
}
|
|
.navbar-top .submenu-graphic-card.size-sm {
|
|
--img-size: 80px;
|
|
}
|
|
.navbar-top .submenu-graphic-card.size-xs {
|
|
--img-size: 180px;
|
|
}
|
|
.navbar-top .submenu-graphic-card.size-lg {
|
|
--img-size: 240px;
|
|
}
|
|
.mobile-navbar .submenu-graphic-card.size-sm {
|
|
--img-size: 68px;
|
|
}
|
|
.mobile-navbar .submenu-graphic-card {
|
|
--img-size: 107px;
|
|
}
|
|
.mobile-navbar .submenu-graphic-card.size-xs {
|
|
--img-size: 140px;
|
|
}
|
|
.mobile-navbar .submenu-graphic-card.size-lg {
|
|
--img-size: 180px;
|
|
}
|
|
|
|
.menu-graphic-card-item .img-box {
|
|
width: var(--img-size);
|
|
height: calc(var(--img-size) * var(--img-scale, 1));
|
|
border-radius: var(--main-radius);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-top .links-column,
|
|
.navbar-top .menu-graphic-card-item {
|
|
opacity: 0;
|
|
transition: 0.6s;
|
|
transform: translate3d(0, 20px, 0);
|
|
}
|
|
|
|
.navbar-top li:hover .links-column,
|
|
.navbar-top li:hover .menu-graphic-card-item {
|
|
transition-delay: var(--ani-delay);
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
.menu-graphic-card-item .title.text-ellipsis {
|
|
width: var(--img-size);
|
|
text-align: center;
|
|
}
|
|
|
|
.sub-user-box {
|
|
width: 242px;
|
|
word-break: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
.mobile-navbar.top .sub-user-box {
|
|
width: auto;
|
|
text-align: center;
|
|
margin: auto;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.mobile-navbar.top .sub-user-box > ul {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sub-user-box .list-inline > li + li {
|
|
width: calc(100% - 48px);
|
|
}
|
|
|
|
.sub-user-box .social-login-item.button-lg {
|
|
width: 110px !important;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sub-user-box .user-name {
|
|
width: calc(100% - 3em);
|
|
}
|
|
|
|
.sub-user-box .author-tag > * {
|
|
max-height: 41px;
|
|
overflow: hidden;
|
|
flex: auto;
|
|
}
|
|
|
|
.sub-vip-card {
|
|
font-size: 12px;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.sub-vip-card .vip-card {
|
|
display: inline-block;
|
|
width: 240px;
|
|
margin: 5px;
|
|
box-shadow: 0 0 10px var(--main-shadow);
|
|
}
|
|
|
|
.sub-vip-card .vip-baicon.abs-center {
|
|
font-size: 10em;
|
|
left: 55%;
|
|
}
|
|
|
|
.sub-vip-card .payvip-button {
|
|
font-size: 1em !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.sub-vip-card .vip-name {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sub-vip-card .vip-img {
|
|
display: none;
|
|
}
|
|
|
|
.sub-user-box .payvip-icon {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.header-user-href > a {
|
|
display: inline-block;
|
|
padding-top: 10px;
|
|
min-width: 58px;
|
|
}
|
|
|
|
.header-user-href > a:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.header-user-href > a div + div {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.header-user-href .toggle-radius {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
|
|
.container {
|
|
width: 95%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.nav.navbar-nav {
|
|
position: absolute;
|
|
top: 0;
|
|
background: var(--header-bg);
|
|
box-shadow: 0px 4px 10px var(--main-shadow);
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0 20px;
|
|
margin: 0;
|
|
border-radius: var(--main-radius);
|
|
transition: 0.3s;
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
visibility: hidden;
|
|
}
|
|
|
|
.nav.navbar-nav.show {
|
|
opacity: 1;
|
|
z-index: 998;
|
|
visibility: unset;
|
|
transform: translateY(68px);
|
|
}
|
|
|
|
.navbar-nav > li:before {
|
|
top: 0;
|
|
}
|
|
|
|
.navbar-logo > img {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.container-footer {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.footer {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.footer .container-footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.footer .list-inline > li + li + li {
|
|
float: unset;
|
|
}
|
|
|
|
.footer .list-inline .hidden-xs {
|
|
display: none;
|
|
}
|
|
|
|
.show-nav-but.hide {
|
|
display: unset !important;
|
|
}
|
|
|
|
body .sidebar.show-sidebar {
|
|
display: unset;
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.site-layout-2 .content-layout {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.site-layout-3 .content-layout {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
#u_sign .modal-dialog {
|
|
width: auto;
|
|
margin: 30px;
|
|
}
|
|
|
|
.search-page-ajaxpager .author-minicard {
|
|
width: calc(50% - 16px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
.container.full-sm {
|
|
padding: 0;
|
|
}
|
|
|
|
.full-widget-sm {
|
|
|