/* 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; } .header { padding: 8px 20px; background: var(--header-bg); margin-bottom: 20px; transition: 0.15s; } /* BS5 .navbar injects --bs-navbar-padding-y: .5rem; zibll (BS3) has no such pad */ .header > .navbar, .header .navbar.navbar-top { --bs-navbar-padding-y: 0; --bs-navbar-padding-x: 0; --bs-navbar-brand-padding-y: 0; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } .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; } /* Pull only the slide shell under fixed nav (zibll). Prefer --nav-fixed-reserve * so homepage and non-home page types share the same geometry. */ body.nav-fixed .slide-header, body.nav-fixed .new-swiper.slide-header { margin-top: calc(var(--nav-fixed-reserve, 90px) * -1); } /* Never pull the full multifunc container (breaks card overlap on homepage). */ body.nav-fixed .header-slider-container, body.nav-fixed .header-components-container { margin-top: 0; } .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; left: 0; right: 0; -webkit-backdrop-filter: saturate(5) blur(20px); backdrop-filter: saturate(5) blur(20px); } .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 0.4em; display: inline-flex !important; align-items: center; justify-content: center; line-height: 1.44; vertical-align: middle; height: auto; min-height: 0; max-height: 50px; box-sizing: border-box; width: fit-content; } .navbar-top .navbar-but .but.hover-show { z-index: 99; } .navbar-top .navbar-brand { padding: 7px 10px; display: flex; align-items: center; line-height: 1; } .navbar-logo { display: inline-flex; align-items: center; line-height: 0; } .navbar-logo > img { height: 36px; padding: 0 30px; display: block; vertical-align: middle; } .navbar-top .nav > li > a { padding-left: 10px; padding-right: 10px; border-radius: 4px; display: inline-flex !important; overflow: hidden; align-items: center; line-height: 1.44; } .navbar-top .nav > li > a > .menu-item-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 1.44; display: inline-block; vertical-align: middle; } .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, .navbar-top .fas, .navbar-top .far, .navbar-top .fab { transition: 0.2s; line-height: 1; } /* Override AKSRT .btn chrome when used as pure icon hit-targets in the bar */ .navbar-top a.btn.signin-loader, .navbar-top a.btn.nav-search-btn, .navbar-top a.btn.main-search-btn { height: 36px !important; width: 36px !important; min-height: 36px !important; padding: 0 !important; gap: 0 !important; line-height: 1 !important; border-radius: 4px; font-size: 16px; } .navbar-top .navbar-form { display: flex; align-items: center; } .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 { position: fixed; left: 0; right: 0; top: 0; width: 100%; 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); pointer-events: none; } .navbar-search.show { visibility: visible; transform: translateY(0); pointer-events: auto; } .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; } @media (min-width: 768px) { .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 { margin-left: 0; margin-right: 0; } }