feat(nav): rewrite top header to zibll 1:1 DOM/CSS/JS contract
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.
This commit is contained in:
@@ -1,12 +1,11 @@
|
||||
@import url("nav/base.css");
|
||||
@import url("nav/zib-navbar-fixed.css");
|
||||
@import url("nav/zib-navbar-core.css");
|
||||
@import url("nav/zib-mobile-navbar.css");
|
||||
@import url("nav/zib-senior-submenu.css");
|
||||
@import url("nav/dark-mode-submenu.css");
|
||||
@import url("nav/dark-mode-mega-menu.css");
|
||||
@import url("nav/responsive-mega-menu.css");
|
||||
@import url("nav/mobile-toggle.css");
|
||||
@import url("nav/mobile-theme-toggle-in-drawer.css");
|
||||
@import url("nav/header-menu-buttons.css");
|
||||
@import url("nav/header-userbox.css");
|
||||
@import url("nav/menu-item-icon.css");
|
||||
@import url("nav/menu-item-badge.css");
|
||||
@import url("nav/hover-effects.css");
|
||||
@import url("nav/mega-submenu.css");
|
||||
@import url("nav/cards-submenu.css");
|
||||
@import url("nav/nav-fixed-mobile-fallback.css");
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
/* Ported/adapted from zibll main.css — mobile navbar */
|
||||
@media (max-width: 767px) {
|
||||
opacity: 0.7;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar + .icon-bar {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand + .navbar-toggle {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand > img {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-logo > img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
z-index: 997;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: var(--main-bg-color);
|
||||
width: 281px;
|
||||
padding: 10px 20px 70px;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.mobile-navbar .navbar-logo {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.mobile-navbar badge:not(.top) {
|
||||
transform: unset;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mobile-navbar.right {
|
||||
right: -2px;
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
.mobile-navbar.left {
|
||||
left: -2px;
|
||||
transform: translateX(-110%);
|
||||
}
|
||||
|
||||
.mobile-navbar.left > .toggle-radius {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mobile-navbar.top {
|
||||
height: auto;
|
||||
max-height: 70%;
|
||||
width: 100%;
|
||||
transform: translateY(-110%);
|
||||
}
|
||||
|
||||
.mobile-navbar-show .mobile-navbar {
|
||||
transition: transform 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.mobile-navbar-show .mobile-navbar + .fixed-body {
|
||||
visibility: unset;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mobile-navbar-show .navbar-toggle .i-menu > i {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-navbar-show .navbar-toggle .i-menu::after {
|
||||
transform: rotate(45deg);
|
||||
width: calc(1em + 1px);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
.mobile-navbar-show .navbar-toggle .i-menu::before {
|
||||
right: 0;
|
||||
width: calc(1em + 1px);
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.mobile-navbar .navbar-header {
|
||||
margin-top: -58px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mobile-navbar .navbar-brand {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.mobile-navbar .toggle-radius {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.mobile-menus li a {
|
||||
display: block;
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mobile-menus > li > a::before {
|
||||
margin: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu {
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu li {
|
||||
width: calc(50% - 4px);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mobile-navbar.top .mobile-menus .sub-menu li {
|
||||
width: calc(33.3% - 4px);
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu li > a {
|
||||
background: var(--main-border-color);
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-menus .sub-menu li > a > badge:not(.top) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.mobile-user-menus a {
|
||||
width: calc(50% - 12px);
|
||||
float: left;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.mobile-nav-widget {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mobile-navbar .box-body.notop {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mobile-navbar .sub-user-box {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mobile-navbar .posts-nav-box .zib-widget {
|
||||
background: var(--muted-border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.s-desc,
|
||||
.slide-text,
|
||||
.wp-block-carousel figcaption {
|
||||
padding: 0.7em;
|
||||
}
|
||||
|
||||
.posts-item .item-thumbnail {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,777 @@
|
||||
/* 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 {
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/* Zibll-aligned fixed header + reserves (AKSRT) */
|
||||
body.nav-fixed {
|
||||
--nav-fixed-reserve: 88px;
|
||||
padding-top: var(--nav-fixed-reserve);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
body.nav-fixed { --nav-fixed-reserve: 72px; padding-top: var(--nav-fixed-reserve); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
body.nav-fixed { --nav-fixed-reserve: 60px; padding-top: var(--nav-fixed-reserve); }
|
||||
}
|
||||
body.nav-fixed .header:not(.show-slide) {
|
||||
position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999;
|
||||
}
|
||||
body.nav-fixed .header-slider-container,
|
||||
body.nav-fixed .header-components-container,
|
||||
body.nav-fixed .header-components.slide-header,
|
||||
body.nav-fixed .slide-header {
|
||||
margin-top: calc(var(--nav-fixed-reserve, 88px) * -1) !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.scroll-down.nav-fixed .header.scroll-down-hide {
|
||||
transform: translate3d(0, -105%, 0);
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
/* Senior submenus (graphic card / multi-column) */
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user