feat(navigation): hard-switch to Zibll navigation and Font Awesome 5
This commit is contained in:
kate522 committed
1 parent
3c3ddac8be
commit
a0b84977a2
630 files changed
+101647
-11293
No files matched your search
@@ -19,7 +19,7 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Fixed homepage hero under-nav is owned by nav/zib-navbar-fixed.css (body.nav-fixed .slide-header). */
|
||||
/* Fixed homepage hero under-nav is owned by Zibll main.css. */
|
||||
|
||||
/* ============================================================
|
||||
* Layer 1: Swiper shell — zibll .new-swiper.slide-header
|
||||
|
||||
@@ -1,710 +0,0 @@
|
||||
@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/zib-utilities.css");
|
||||
@import url("nav/zib-search-box.css");
|
||||
@import url("nav/zib-nav-style.css");
|
||||
@import url("nav/header-menu-buttons.css");
|
||||
@import url("nav/header-userbox.css");
|
||||
@import url("nav/dark-mode-submenu.css");
|
||||
|
||||
/* ==========================================================================
|
||||
* Top navbar icon/text alignment — 1:1 zibll (demo.zibll.com / main.css)
|
||||
* Kept INLINE in the aggregator so browsers cannot miss it via stale @import.
|
||||
* ========================================================================== */
|
||||
|
||||
/* --- Shell row --- */
|
||||
.navbar-top {
|
||||
margin: 0;
|
||||
border-radius: 0 !important;
|
||||
font-size: 15px;
|
||||
/*
|
||||
* Bootstrap 5 .navbar defaults --bs-navbar-padding-y: .5rem (8+8px).
|
||||
* zibll uses BS3 (no that padding) + only .header { padding: 8px 20px }.
|
||||
* Extra BS5 pad is why AKSRT bar is taller than zibll on PC and mobile.
|
||||
*/
|
||||
--bs-navbar-padding-y: 0;
|
||||
--bs-navbar-padding-x: 0;
|
||||
--bs-navbar-brand-padding-y: 0;
|
||||
padding: 0 !important;
|
||||
min-height: 0 !important;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.header .navbar.navbar-top,
|
||||
.header > .navbar {
|
||||
--bs-navbar-padding-y: 0;
|
||||
--bs-navbar-padding-x: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
/* zibll .header — vertical rhythm only from this padding + logo row */
|
||||
.header {
|
||||
padding: 8px 20px;
|
||||
}
|
||||
.navbar-top .navbar-form,
|
||||
.navbar-top .navbar-right,
|
||||
.navbar-top .navbar-form.flex.ac {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navbar-top .list-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.navbar-top .list-inline > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.navbar-top .list-inline.splitters > li + li {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* --- Logo --- */
|
||||
.navbar-top .navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.navbar-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
}
|
||||
.navbar-logo > img {
|
||||
display: block;
|
||||
height: 36px;
|
||||
padding: 0 30px;
|
||||
width: auto;
|
||||
max-height: 36px;
|
||||
}
|
||||
|
||||
/* --- Primary menu text/icons --- */
|
||||
.navbar-top .nav > li > a {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
overflow: hidden;
|
||||
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;
|
||||
}
|
||||
.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,
|
||||
.navbar-top .nav > li > a > .fas.menu-item-icon {
|
||||
margin-right: 0.25em !important;
|
||||
margin-left: 0 !important;
|
||||
line-height: 1 !important;
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
top: auto !important;
|
||||
flex-shrink: 0;
|
||||
vertical-align: 0 !important;
|
||||
}
|
||||
.navbar-top .nav > li > a > .fa-angle-down {
|
||||
margin-left: 0.2em;
|
||||
margin-right: 0 !important;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.navbar-nav li a,
|
||||
.navbar-nav li {
|
||||
max-height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*
|
||||
* CTA (发布 / 会员) — zibll main.css .navbar-top .navbar-but .but
|
||||
* font-size 0.8em; padding 0.3em 1em; margin 0.4em; line-height 1.44
|
||||
* Live markup: .navbar-form.navbar-but > a.but.navbar-cta (no cluster wrapper).
|
||||
* Lock the SAME metrics on :active so ripple/focus cannot stretch the chip.
|
||||
*/
|
||||
.navbar-top .navbar-but .but,
|
||||
.navbar-top .navbar-but a.but,
|
||||
.navbar-top a.navbar-cta.but,
|
||||
.navbar-top a.newadd-btns.navbar-cta,
|
||||
.navbar-top a.navbar-newposts.navbar-cta,
|
||||
.navbar-top a.payvip-icon.navbar-cta,
|
||||
.navbar-top .navbar-vip a.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns__toggle.navbar-cta,
|
||||
.navbar-top .navbar-but .newadd-btns__toggle.navbar-cta {
|
||||
font-size: 0.8em !important;
|
||||
padding: 0.3em 1em !important;
|
||||
margin: 0 0.4em !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
line-height: 1.44 !important;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box !important;
|
||||
gap: 0.25em;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 50px !important; /* zibll .navbar-nav li max-height */
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
flex: 0 0 auto !important;
|
||||
white-space: nowrap !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.navbar-top .navbar-but .but > i,
|
||||
.navbar-top a.navbar-cta.but > i,
|
||||
.navbar-top .navbar-but .but > .fa,
|
||||
.navbar-top .navbar-but .but > .fas,
|
||||
.navbar-top a.navbar-cta.but > .fa,
|
||||
.navbar-top a.navbar-cta.but > .fas,
|
||||
.navbar-top a.newadd-btns.navbar-cta > i,
|
||||
.navbar-top a.navbar-newposts.navbar-cta > i,
|
||||
.navbar-top a.payvip-icon.navbar-cta > i,
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns__toggle > i,
|
||||
.navbar-top .navbar-but .newadd-btns__toggle > i {
|
||||
margin: 0 0.25em 0 0 !important;
|
||||
line-height: 1 !important;
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
top: auto !important;
|
||||
flex-shrink: 0;
|
||||
vertical-align: 0 !important;
|
||||
display: inline-block;
|
||||
}
|
||||
.navbar-top .navbar-but .but > i:last-child,
|
||||
.navbar-top a.navbar-cta.but > i:only-child,
|
||||
.navbar-top a.newadd-btns.navbar-cta > i:only-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.navbar-top .navbar-but .but > .navbar-cta-text,
|
||||
.navbar-top a.navbar-cta.but > .navbar-cta-text,
|
||||
.navbar-top a.newadd-btns.navbar-cta > .navbar-cta-text,
|
||||
.navbar-top a.navbar-newposts.navbar-cta > .navbar-cta-text,
|
||||
.navbar-top a.payvip-icon.navbar-cta > .navbar-cta-text {
|
||||
line-height: 1.44 !important;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* --- Icon-only .btn chips (user / search) --- */
|
||||
.navbar-top .list-inline > li > a.btn,
|
||||
.navbar-top a.btn.signin-loader,
|
||||
.navbar-top a.btn.nav-search-btn,
|
||||
.navbar-top a.btn.main-search-btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
min-width: 36px !important;
|
||||
min-height: 36px !important;
|
||||
max-height: 36px !important;
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
line-height: 1 !important;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
}
|
||||
.navbar-top .list-inline > li > a.btn > i,
|
||||
.navbar-top a.btn.signin-loader > i,
|
||||
.navbar-top a.btn.nav-search-btn > i,
|
||||
.navbar-top a.btn.main-search-btn > i {
|
||||
margin: 0 !important;
|
||||
line-height: 1 !important;
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: 0 !important;
|
||||
}
|
||||
|
||||
/* Avatar trigger */
|
||||
.navbar-top a.navbar-avatar {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0 !important;
|
||||
line-height: 0;
|
||||
}
|
||||
.navbar-top a.navbar-avatar img,
|
||||
.navbar-top a.navbar-avatar .avatar {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* --- Theme toggle (zibll toggle-radius 29px) --- */
|
||||
.navbar-top a.toggle-theme.toggle-radius,
|
||||
.navbar-top .toggle-theme.toggle-radius,
|
||||
.navbar-but-cluster .toggle-theme {
|
||||
position: relative !important;
|
||||
width: 29px !important;
|
||||
height: 29px !important;
|
||||
min-width: 29px !important;
|
||||
min-height: 29px !important;
|
||||
display: inline-block !important;
|
||||
overflow: hidden !important;
|
||||
vertical-align: middle;
|
||||
border-radius: 100% !important;
|
||||
box-sizing: border-box;
|
||||
padding: 0 !important;
|
||||
flex: 0 0 auto;
|
||||
line-height: 1;
|
||||
}
|
||||
.navbar-top a.toggle-theme.toggle-radius > i,
|
||||
.navbar-top .toggle-theme.toggle-radius > i,
|
||||
.navbar-top a.toggle-theme.toggle-radius .fa,
|
||||
.navbar-top a.toggle-theme.toggle-radius .fas {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin: auto !important;
|
||||
transform: translateY(-50%) !important;
|
||||
line-height: 1 !important;
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
text-align: center;
|
||||
vertical-align: 0 !important;
|
||||
}
|
||||
/*
|
||||
* Theme glyph visibility is driven by html.dark / body.theme-dark.
|
||||
* Light: moon (switch to dark). Dark: sun (switch to light).
|
||||
* Never force both icons to display:inline-flex — that stacked them.
|
||||
*/
|
||||
.navbar-top .toggle-theme .theme-icon-moon,
|
||||
.navbar-but-cluster .toggle-theme .theme-icon-moon,
|
||||
.navbar-top .toggle-theme .theme-icon-sun,
|
||||
.navbar-but-cluster .toggle-theme .theme-icon-sun {
|
||||
display: none !important;
|
||||
}
|
||||
.navbar-top .toggle-theme .theme-icon-moon,
|
||||
.navbar-but-cluster .toggle-theme .theme-icon-moon {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
html.dark .navbar-top .toggle-theme .theme-icon-moon,
|
||||
html.dark .navbar-but-cluster .toggle-theme .theme-icon-moon,
|
||||
body.theme-dark .navbar-top .toggle-theme .theme-icon-moon,
|
||||
body.theme-dark .navbar-but-cluster .toggle-theme .theme-icon-moon,
|
||||
body.dark-theme .navbar-top .toggle-theme .theme-icon-moon,
|
||||
body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-moon {
|
||||
display: none !important;
|
||||
}
|
||||
html.dark .navbar-top .toggle-theme .theme-icon-sun,
|
||||
html.dark .navbar-but-cluster .toggle-theme .theme-icon-sun,
|
||||
body.theme-dark .navbar-top .toggle-theme .theme-icon-sun,
|
||||
body.theme-dark .navbar-but-cluster .toggle-theme .theme-icon-sun,
|
||||
body.dark-theme .navbar-top .toggle-theme .theme-icon-sun,
|
||||
body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* --- Dropdown circular badges (header-user-href) keep 36px --- */
|
||||
.navbar-top .header-user-href .toggle-radius,
|
||||
.navbar-top .badg.toggle-radius {
|
||||
position: relative !important;
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
display: inline-block !important;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.navbar-top .header-user-href .toggle-radius > i,
|
||||
.navbar-top .header-user-href .toggle-radius .fa,
|
||||
.navbar-top .header-user-href .toggle-radius .fas,
|
||||
.navbar-top .badg.toggle-radius > i,
|
||||
.navbar-top .badg.toggle-radius .fa,
|
||||
.navbar-top .badg.toggle-radius .fas {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin: auto !important;
|
||||
transform: translateY(-50%) !important;
|
||||
line-height: 1 !important;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: 0 !important;
|
||||
}
|
||||
|
||||
/* --- FA general --- */
|
||||
.navbar-top .fa,
|
||||
.navbar-top .fas,
|
||||
.navbar-top .far,
|
||||
.navbar-top .fab {
|
||||
line-height: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.navbar-top .css-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fold / bars but in mid widths */
|
||||
.navbar-top .show-nav-but .but {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 0.3em 0.6em !important;
|
||||
}
|
||||
.navbar-top .show-nav-but .but > i {
|
||||
margin: 0 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Final FA baseline: never vertical-align in the top bar (flex/abs centering only). */
|
||||
.navbar-top .fa,
|
||||
.navbar-top .fas,
|
||||
.navbar-top .far,
|
||||
.navbar-top .fab,
|
||||
.navbar-top i[class*="fa-"] {
|
||||
line-height: 1 !important;
|
||||
vertical-align: 0 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header row height — 1:1 zibll (demo.zibll.com / main.css)
|
||||
* Natural stack: .header padding 8px 20px + brand pad 7px + logo 36px
|
||||
* → content row ~50px, bar ~66px. Senior submenu top: 59px. Fixed reserve 88px.
|
||||
* Do NOT force min-height:50 on the flex row (over-tall vs zibll).
|
||||
* CTA vertical margin uses 0 .4em (not .4em all sides) so flex cross-size
|
||||
* stays logo-driven like a tight zibll bar.
|
||||
*/
|
||||
.navbar-top .container-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
min-height: 0 !important;
|
||||
height: auto !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.navbar-top .navbar-form,
|
||||
.navbar-top .navbar-right,
|
||||
.navbar-top .navbar-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
min-height: 0 !important;
|
||||
height: auto !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
/* Brand: zibll padding 7px 10px only — kill BS5 brand pad/height */
|
||||
.navbar-top .navbar-brand {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 7px 10px !important;
|
||||
margin: 0 !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
line-height: 1 !important;
|
||||
font-size: inherit !important;
|
||||
}
|
||||
|
||||
/* Hover/active: same box as rest (prevent press stretch; ripple is absolute) */
|
||||
.navbar-top a.navbar-cta.but:hover,
|
||||
.navbar-top a.navbar-cta.but:focus,
|
||||
.navbar-top a.navbar-cta.but:focus-visible,
|
||||
.navbar-top a.navbar-cta.but:active,
|
||||
.navbar-top .navbar-but .but:hover,
|
||||
.navbar-top .navbar-but .but:focus,
|
||||
.navbar-top .navbar-but .but:focus-visible,
|
||||
.navbar-top .navbar-but .but:active,
|
||||
.navbar-top a.newadd-btns.navbar-cta:hover,
|
||||
.navbar-top a.newadd-btns.navbar-cta:focus,
|
||||
.navbar-top a.newadd-btns.navbar-cta:focus-visible,
|
||||
.navbar-top a.newadd-btns.navbar-cta:active,
|
||||
.navbar-top a.payvip-icon.navbar-cta:hover,
|
||||
.navbar-top a.payvip-icon.navbar-cta:focus,
|
||||
.navbar-top a.payvip-icon.navbar-cta:focus-visible,
|
||||
.navbar-top a.payvip-icon.navbar-cta:active {
|
||||
font-size: 0.8em !important;
|
||||
padding: 0.3em 1em !important;
|
||||
margin: 0.4em !important;
|
||||
line-height: 1.44 !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 50px !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
box-sizing: border-box !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* .but.radius in buttons.css also uses 0.3em 1em — keep zibll metrics + pill radius */
|
||||
.navbar-top a.but.radius.navbar-cta,
|
||||
.navbar-top a.navbar-cta.radius,
|
||||
.navbar-top a.newadd-btns.radius,
|
||||
.navbar-top a.payvip-icon.radius {
|
||||
padding: 0.3em 1em !important;
|
||||
border-radius: var(--navbar-cta-radius, 50px) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
* P1 — No click deformation on top-nav controls
|
||||
* ========================================================================== */
|
||||
.navbar-top .but,
|
||||
.navbar-top a.but,
|
||||
.navbar-top a.btn,
|
||||
.navbar-top button.but,
|
||||
.navbar-top .navbar-cta,
|
||||
.navbar-top .toggle-theme,
|
||||
.navbar-top .toggle-radius,
|
||||
.navbar-top a.navbar-avatar,
|
||||
.navbar-top .navbar-toggle {
|
||||
transform: none !important;
|
||||
}
|
||||
.navbar-top .but:hover,
|
||||
.navbar-top .but:focus,
|
||||
.navbar-top .but:active,
|
||||
.navbar-top a.but:hover,
|
||||
.navbar-top a.but:focus,
|
||||
.navbar-top a.but:active,
|
||||
.navbar-top a.btn:hover,
|
||||
.navbar-top a.btn:focus,
|
||||
.navbar-top a.btn:active,
|
||||
.navbar-top .navbar-cta:hover,
|
||||
.navbar-top .navbar-cta:focus,
|
||||
.navbar-top .navbar-cta:active,
|
||||
.navbar-top .toggle-theme:hover,
|
||||
.navbar-top .toggle-theme:focus,
|
||||
.navbar-top .toggle-theme:active,
|
||||
.navbar-top a.navbar-avatar:hover,
|
||||
.navbar-top a.navbar-avatar:focus,
|
||||
.navbar-top a.navbar-avatar:active,
|
||||
.navbar-top .navbar-toggle:hover,
|
||||
.navbar-top .navbar-toggle:focus,
|
||||
.navbar-top .navbar-toggle:active {
|
||||
transform: none !important;
|
||||
}
|
||||
/* Keep CTA geometry stable on press — same zibll metrics, no stretch */
|
||||
.navbar-top .navbar-but .but:hover,
|
||||
.navbar-top .navbar-but .but:focus,
|
||||
.navbar-top .navbar-but .but:active,
|
||||
.navbar-top a.navbar-cta.but:hover,
|
||||
.navbar-top a.navbar-cta.but:focus,
|
||||
.navbar-top a.navbar-cta.but:active {
|
||||
margin: 0 0.4em !important;
|
||||
padding: 0.3em 1em !important;
|
||||
line-height: 1.44 !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 50px !important;
|
||||
font-size: 0.8em !important;
|
||||
box-sizing: border-box !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
* P2 — User dropdown under avatar (not floating too high)
|
||||
* ========================================================================== */
|
||||
.navbar-top .list-inline > li,
|
||||
.navbar-top .list-inline > li.relative {
|
||||
position: relative;
|
||||
}
|
||||
.navbar-top .list-inline > li > .sub-menu,
|
||||
.navbar-top .navbar-right .list-inline > li > .sub-menu,
|
||||
.navbar-top .navbar-form .list-inline > li > .sub-menu {
|
||||
top: calc(100% + 6px) !important;
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
margin-top: 0 !important;
|
||||
/* Override shared hover enter offset that reads as "too high" */
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
.navbar-top .list-inline > li:not(:hover) > .sub-menu {
|
||||
/* keep hidden state without vertical jump when revealed */
|
||||
transform: translateY(4px) !important;
|
||||
}
|
||||
.navbar-top .list-inline > li:hover > .sub-menu {
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
* P3 — Hamburger only on mobile; mobile header no logo overlap
|
||||
* ========================================================================== */
|
||||
/* Desktop / tablet landscape: never show mobile drawer toggle */
|
||||
.navbar-top .navbar-toggle,
|
||||
.navbar-top button.navbar-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-top .navbar-header {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
gap: 4px;
|
||||
}
|
||||
.navbar-top .navbar-brand {
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
max-width: calc(100% - 96px);
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding: 4px 8px !important;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.navbar-top.center .navbar-brand {
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
}
|
||||
.navbar-top .navbar-logo {
|
||||
max-width: 100%;
|
||||
}
|
||||
.navbar-top .navbar-logo > img {
|
||||
padding: 0 !important;
|
||||
max-width: 100%;
|
||||
height: 32px;
|
||||
max-height: 32px;
|
||||
}
|
||||
/* Menu / search toggles: fixed slots on the sides, never over logo */
|
||||
.navbar-top .navbar-toggle,
|
||||
.navbar-top button.navbar-toggle {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px !important;
|
||||
min-width: 40px !important;
|
||||
height: 40px !important;
|
||||
flex: 0 0 40px;
|
||||
float: none !important;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* Center layout: brand first in DOM — reorder to [menu][logo][search] */
|
||||
.navbar-top.center .navbar-header {
|
||||
display: grid !important;
|
||||
grid-template-columns: 40px minmax(0, 1fr) 40px;
|
||||
align-items: center;
|
||||
column-gap: 6px;
|
||||
}
|
||||
.navbar-top.center .navbar-brand {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
.navbar-top.center .navbar-brand + .navbar-toggle {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
justify-self: start;
|
||||
}
|
||||
.navbar-top.center .navbar-brand + .navbar-toggle + .navbar-toggle {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
/* Mid-width fold (bars) only ≤991; never on true desktop */
|
||||
@media (min-width: 992px) {
|
||||
.navbar-top .show-nav-but {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Absolute-size CTA chips: ignore injected .aksrt-wave for layout */
|
||||
.navbar-top a.navbar-cta,
|
||||
.navbar-top a.newadd-btns.navbar-cta,
|
||||
.navbar-top a.navbar-newposts.navbar-cta,
|
||||
.navbar-top a.payvip-icon.navbar-cta,
|
||||
.navbar-top .navbar-but .but,
|
||||
.navbar-top .navbar-form.navbar-but a.but,
|
||||
.navbar-top .navbar-form.navbar-vip a.but {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
.navbar-top a.navbar-cta > .aksrt-wave,
|
||||
.navbar-top a.but > .aksrt-wave,
|
||||
.navbar-top .but > .aksrt-wave {
|
||||
position: absolute !important;
|
||||
pointer-events: none !important;
|
||||
margin: 0 !important;
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* ---- zibll mobile header height (main.css @media max-width 640/767) ---- */
|
||||
@media (max-width: 767px) {
|
||||
.header {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
.navbar-top,
|
||||
.header .navbar.navbar-top {
|
||||
--bs-navbar-padding-y: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.navbar-top .navbar-brand {
|
||||
padding: 7px 6px !important;
|
||||
}
|
||||
.navbar-top .navbar-logo > img {
|
||||
height: 32px !important;
|
||||
max-height: 32px !important;
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
/* touch row: match logo, not min 50 */
|
||||
.navbar-top .navbar-header {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.navbar-top .navbar-toggle,
|
||||
.navbar-top button.navbar-toggle {
|
||||
width: 36px !important;
|
||||
min-width: 36px !important;
|
||||
height: 36px !important;
|
||||
flex-basis: 36px;
|
||||
}
|
||||
.navbar-top.center .navbar-header {
|
||||
grid-template-columns: 36px minmax(0, 1fr) 36px;
|
||||
}
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
/* Dark mode submenu */
|
||||
html.dark ul.nav-desktop .sub-menu,
|
||||
body.dark-theme ul.nav-desktop .sub-menu {
|
||||
background: var(--surface-page);
|
||||
border-color: var(--color-line, #2d2d3f);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Mega Menu (图文超级菜单)
|
||||
* ============================================================ */
|
||||
|
||||
/* Mega Menu 容器：全宽定位 */
|
||||
ul.nav-desktop .mega-menu-item {
|
||||
position: static;
|
||||
}
|
||||
|
||||
ul.nav-desktop .mega-menu-item > .mega-menu__panel {
|
||||
position: fixed; /* 对齐 zibll .senior-submenu: position:fixed 全视口宽 */
|
||||
top: var(--nav-height, 60px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: none;
|
||||
max-width: var(--container);
|
||||
margin: 0 auto; /* 内容区居中 */
|
||||
padding: 20px 16px; /* 对齐 zibll 垂直 20px + 水平内边距 */
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05); /* 对齐 zibll shadow */
|
||||
}
|
||||
|
||||
/* 列布局 */
|
||||
.mega-menu__columns-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mega-menu__columns-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mega-menu__columns-4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mega-menu__columns-5 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Mega Menu 子项（卡片样式） */
|
||||
.mega-menu__panel > .menu-item {
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.mega-menu__panel > .menu-item:hover {
|
||||
background: var(--surface-2, #F4F5F7);
|
||||
}
|
||||
|
||||
.mega-menu__panel > .menu-item > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
white-space: normal;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.mega-menu__panel > .menu-item > a i {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: var(--color-primary, var(--color-primary));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.mega-menu__item-desc {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4, #8A8F98);
|
||||
margin-top: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Mega Menu 标题分组 */
|
||||
.mega-menu__panel .mega-menu__group-title {
|
||||
grid-column: 1 / -1;
|
||||
padding: 8px 12px 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Mega Menu 底部区域（可放图片/CTA） */
|
||||
.mega-menu__panel .mega-menu__footer {
|
||||
grid-column: 1 / -1;
|
||||
padding: 12px 0 0;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid var(--color-line);
|
||||
}
|
||||
|
||||
@@ -1,837 +0,0 @@
|
||||
/**
|
||||
* Header multi-function publish cluster + VIP CTA + hover VIP cards.
|
||||
*
|
||||
* CTA metrics 1:1 zibll main.css:
|
||||
* .navbar-top .navbar-but .but { font-size:.8em; padding:.3em 1em; margin:.4em; }
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* Shared CTA (cluster OR bare navbar-but / navbar-vip forms) */
|
||||
.navbar-but-cluster a.navbar-cta,
|
||||
.navbar-but-cluster a.btn-primary,
|
||||
.navbar-but-cluster a.but.btn-primary,
|
||||
.navbar-but-cluster a.navbar-newposts.but,
|
||||
.navbar-but-cluster button.navbar-cta,
|
||||
.navbar-but-cluster button.newadd-btns__toggle,
|
||||
.navbar-but-cluster a.but:not(.newadd-btns__item),
|
||||
.navbar-top .navbar-form.navbar-but a.but,
|
||||
.navbar-top .navbar-form.navbar-but a.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-vip a.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-vip a.payvip-icon,
|
||||
.navbar-top a.newadd-btns.navbar-cta,
|
||||
.navbar-top a.navbar-newposts.but.navbar-cta,
|
||||
.navbar-top a.payvip-icon.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns__toggle.navbar-cta,
|
||||
.navbar-top .navbar-but .newadd-btns__toggle.navbar-cta {
|
||||
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25em;
|
||||
padding: 0.3em 1em !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 50px !important;
|
||||
border-radius: var(--navbar-cta-radius, 50px);
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
font-size: 0.8em !important;
|
||||
line-height: 1.44 !important;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box !important;
|
||||
vertical-align: middle;
|
||||
flex: 0 0 auto !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
margin: 0 0.4em !important;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Paint for publish when not already gradient-colored by jb-* */
|
||||
.navbar-but-cluster a.navbar-cta,
|
||||
.navbar-but-cluster a.btn-primary,
|
||||
.navbar-but-cluster a.but.btn-primary,
|
||||
.navbar-but-cluster a.navbar-newposts.but,
|
||||
.navbar-but-cluster button.navbar-cta,
|
||||
.navbar-but-cluster button.newadd-btns__toggle {
|
||||
background: var(--color-primary, #2f6df6);
|
||||
}
|
||||
|
||||
/* Multi-type toggle lives outside .navbar-but-cluster on live zibll DOM.
|
||||
* Paint classes (jb-*) set --this-bg on the toggle; force them to show. */
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns__toggle.navbar-cta,
|
||||
.navbar-top .navbar-but .newadd-btns__toggle.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-but a.navbar-newposts.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-but a.newadd-btns.navbar-cta {
|
||||
display: inline-flex !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
color: #fff !important;
|
||||
background: var(--this-bg, linear-gradient(135deg, #59c3fb 10%, #268df7 100%)) !important;
|
||||
border-radius: var(--navbar-cta-radius, 50px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns__toggle.navbar-cta > i,
|
||||
.navbar-top .navbar-but .newadd-btns__toggle.navbar-cta > i,
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns__toggle.navbar-cta .navbar-cta-text,
|
||||
.navbar-top .navbar-but .newadd-btns__toggle.navbar-cta .navbar-cta-text {
|
||||
color: inherit !important;
|
||||
margin: 0 !important;
|
||||
line-height: 1.44 !important;
|
||||
}
|
||||
|
||||
.navbar-but-cluster {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .navbar-but,
|
||||
.navbar-but-cluster .navbar-vip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.navbar-but-cluster a.navbar-cta > i,
|
||||
.navbar-but-cluster a.but > i,
|
||||
.navbar-but-cluster a.btn-primary > i,
|
||||
.navbar-but-cluster button.navbar-cta > i,
|
||||
.navbar-but-cluster button.newadd-btns__toggle > i,
|
||||
.navbar-but-cluster a.navbar-cta .navbar-cta-text,
|
||||
.navbar-but-cluster a.navbar-cta > span:not(.badge),
|
||||
.navbar-but-cluster button.navbar-cta .navbar-cta-text,
|
||||
.navbar-but-cluster button.newadd-btns__toggle .navbar-cta-text,
|
||||
.navbar-but-cluster button.newadd-btns__toggle > span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 !important;
|
||||
flex: 0 0 auto;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.navbar-but-cluster a.navbar-cta > i,
|
||||
.navbar-but-cluster a.but > i,
|
||||
.navbar-but-cluster a.btn-primary > i,
|
||||
.navbar-but-cluster button.navbar-cta > i,
|
||||
.navbar-but-cluster button.newadd-btns__toggle > i {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Parent shell: shrink-wrap chip only */
|
||||
.navbar-but-cluster .navbar-but,
|
||||
.navbar-but-cluster .navbar-vip {
|
||||
position: relative;
|
||||
overflow: visible !important;
|
||||
display: block !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
flex: 0 0 auto !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .payvip-icon.but,
|
||||
.navbar-but-cluster a.payvip-icon {
|
||||
background: linear-gradient(90deg, #ff6b6b, #f04494);
|
||||
color: #fff;
|
||||
padding: 0 12px !important;
|
||||
height: auto !important;
|
||||
border-radius: var(--navbar-cta-radius, 20px);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .ml10 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Publish multi-type dropdown
|
||||
*
|
||||
* The pink chip must NEVER share layout with the 168px menu.
|
||||
* - wrapper = content-sized box (width: fit-content, no stretch)
|
||||
* - toggle = only painted control
|
||||
* - menu = absolute under wrapper, does not affect chip width
|
||||
*/
|
||||
.navbar-but-cluster .navbar-but {
|
||||
/* outer shell around publish */
|
||||
display: block !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
flex: 0 0 auto !important;
|
||||
position: relative;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .navbar-but .newadd-btns.hover-show,
|
||||
.navbar-but-cluster .newadd-btns.hover-show,
|
||||
span.newadd-btns.hover-show,
|
||||
div.newadd-btns.hover-show {
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
max-height: 50px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
overflow: visible !important;
|
||||
z-index: 40;
|
||||
line-height: 0 !important;
|
||||
float: none !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
/* Pink chip only — content width, never 100% of anything */
|
||||
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle,
|
||||
.navbar-but-cluster button.newadd-btns__toggle,
|
||||
.navbar-but-cluster a.newadd-btns__toggle,
|
||||
.navbar-but-cluster .newadd-btns__toggle.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns > .newadd-btns__toggle,
|
||||
.navbar-top .navbar-but .newadd-btns > .newadd-btns__toggle,
|
||||
.navbar-top .newadd-btns__toggle.navbar-cta {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 6px !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 50px !important;
|
||||
padding: 0.3em 1em !important;
|
||||
margin: 0 !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
white-space: nowrap !important;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
/* Hard-lock open/focus: still content-sized, never stretch */
|
||||
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:hover,
|
||||
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus,
|
||||
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus-visible,
|
||||
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:active,
|
||||
.navbar-but-cluster .newadd-btns.hover-show:hover > .newadd-btns__toggle,
|
||||
.navbar-but-cluster .newadd-btns.hover-show:focus-within > .newadd-btns__toggle {
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
padding: 0.3em 1em !important;
|
||||
height: auto !important;
|
||||
transform: none !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
/* Menu floats under chip; fixed width; cannot expand chip */
|
||||
.navbar-but-cluster .newadd-btns > .drop-newadd,
|
||||
.navbar-but-cluster .newadd-btns .hover-show-con.drop-newadd,
|
||||
.newadd-btns > .drop-newadd,
|
||||
.newadd-btns .hover-show-con.drop-newadd {
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
top: calc(100% + 0px) !important;
|
||||
/* Align menu to the RIGHT edge of the chip, not stretch chip */
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
bottom: auto !important;
|
||||
float: none !important;
|
||||
width: 168px !important;
|
||||
min-width: 168px !important;
|
||||
max-width: 168px !important;
|
||||
margin: 0 !important;
|
||||
padding: 10px 0 6px !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
color: #222;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(4px);
|
||||
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
|
||||
z-index: 1200 !important;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .newadd-btns .drop-newadd::before,
|
||||
.newadd-btns .drop-newadd::before,
|
||||
.newadd-btns .hover-show-con.drop-newadd::before {
|
||||
content: "" !important;
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
inset: 8px 0 0 0;
|
||||
background: #ffffff !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .newadd-btns.hover-show:hover > .drop-newadd,
|
||||
.navbar-but-cluster .newadd-btns.hover-show:focus-within > .drop-newadd,
|
||||
.navbar-but-cluster .newadd-btns.hover-show:hover .hover-show-con.drop-newadd,
|
||||
.navbar-but-cluster .newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd,
|
||||
.newadd-btns.hover-show:hover > .drop-newadd,
|
||||
.newadd-btns.hover-show:focus-within > .drop-newadd {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .newadd-btns .newadd-btns__item,
|
||||
.newadd-btns .drop-newadd .newadd-btns__item,
|
||||
.newadd-btns__item {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px !important;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: 0;
|
||||
border: 0 !important;
|
||||
border-radius: 0;
|
||||
background: transparent !important;
|
||||
color: #222222 !important;
|
||||
text-decoration: none !important;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .newadd-btns .newadd-btns__item > i,
|
||||
.newadd-btns__item > i {
|
||||
width: 1em;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
flex: 0 0 auto;
|
||||
color: inherit !important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .newadd-btns .newadd-btns__item > span,
|
||||
.newadd-btns__item > span {
|
||||
color: inherit !important;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .newadd-btns .newadd-btns__item:hover,
|
||||
.newadd-btns .drop-newadd .newadd-btns__item:hover,
|
||||
.newadd-btns__item:hover {
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
color: var(--color-primary, #f04494) !important;
|
||||
}
|
||||
|
||||
html.dark .newadd-btns .drop-newadd::before,
|
||||
html.dark .newadd-btns .hover-show-con.drop-newadd::before,
|
||||
body.dark-theme .newadd-btns .drop-newadd::before,
|
||||
body.dark-theme .newadd-btns .hover-show-con.drop-newadd::before,
|
||||
body.theme-dark .newadd-btns .drop-newadd::before,
|
||||
body.theme-dark .newadd-btns .hover-show-con.drop-newadd::before {
|
||||
background: #323335 !important;
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html.dark .newadd-btns__item,
|
||||
body.dark-theme .newadd-btns__item,
|
||||
body.theme-dark .newadd-btns__item {
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
html.dark .newadd-btns__item:hover,
|
||||
body.dark-theme .newadd-btns__item:hover,
|
||||
body.theme-dark .newadd-btns__item:hover {
|
||||
color: var(--color-primary, #f04494) !important;
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
|
||||
|
||||
/* Portaled publish menu (moved to body by header-newadd.js) */
|
||||
.newadd-btns.is-js-portal:hover > .drop-newadd,
|
||||
.newadd-btns.is-js-portal:focus-within > .drop-newadd,
|
||||
.newadd-btns.is-js-portal > .drop-newadd {
|
||||
/* never paint/show menu while still inside chip wrapper */
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body > .drop-newadd.hover-show-con,
|
||||
body > .drop-newadd {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
width: 168px;
|
||||
min-width: 168px;
|
||||
max-width: 168px;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
background: #ffffff !important;
|
||||
color: #222222 !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body > .drop-newadd.is-open {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
body > .drop-newadd::before {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body > .drop-newadd .newadd-btns__item {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px !important;
|
||||
color: #222222 !important;
|
||||
text-decoration: none !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500;
|
||||
background: transparent !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body > .drop-newadd .newadd-btns__item:hover {
|
||||
background: rgba(0, 0, 0, 0.05) !important;
|
||||
color: var(--color-primary, #f04494) !important;
|
||||
}
|
||||
|
||||
html.dark body > .drop-newadd,
|
||||
body.dark-theme body > .drop-newadd,
|
||||
body.theme-dark body > .drop-newadd {
|
||||
background: #323335 !important;
|
||||
color: #f1f5f9 !important;
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html.dark body > .drop-newadd .newadd-btns__item,
|
||||
body.dark-theme body > .drop-newadd .newadd-btns__item,
|
||||
body.theme-dark body > .drop-newadd .newadd-btns__item {
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
/* Generic hover-show (zibll parity) */
|
||||
.hover-show {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.hover-show .hover-show-con {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(6px);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
|
||||
pointer-events: none;
|
||||
z-index: 60;
|
||||
/* invisible bridge so moving mouse into panel doesn't close it */
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.hover-show:hover .hover-show-con,
|
||||
.hover-show:focus-within .hover-show-con {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Header VIP hover cards — zibll .sub-vip-card
|
||||
* Markup: .navbar-vip > span.navbar-vip-hover.hover-show > a + .sub-vip-card
|
||||
* vip-modal.css also styles this; keep both in sync and win display:none.
|
||||
*/
|
||||
.navbar-but-cluster .navbar-vip,
|
||||
.navbar-vip {
|
||||
position: relative;
|
||||
z-index: 35;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navbar-vip-hover,
|
||||
.navbar-vip .hover-show {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 35;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Kill vip-modal display:none when using the correct hover wrapper */
|
||||
.navbar-vip-hover .sub-vip-card,
|
||||
.navbar-vip .hover-show .sub-vip-card,
|
||||
.sub-vip-card.hover-show-con,
|
||||
.hover-show-con.sub-vip-card {
|
||||
display: none; /* default hidden; shown on hover below */
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
left: auto;
|
||||
z-index: 1200;
|
||||
font-size: 12px;
|
||||
padding: 12px 8px 8px !important; /* top bridge into cards */
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
width: max-content;
|
||||
max-width: min(520px, 92vw);
|
||||
box-sizing: border-box;
|
||||
/* reset opacity system from generic .hover-show-con when display is used */
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.navbar-vip-hover:hover .sub-vip-card,
|
||||
.navbar-vip-hover:focus-within .sub-vip-card,
|
||||
.navbar-vip .hover-show:hover .sub-vip-card,
|
||||
.navbar-vip .hover-show:focus-within .sub-vip-card,
|
||||
.hover-show:hover > .sub-vip-card,
|
||||
.hover-show:focus-within > .sub-vip-card {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-card {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 240px;
|
||||
margin: 5px;
|
||||
padding: 15px;
|
||||
border-radius: var(--main-radius, 8px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(0, 0, 0, 0.12));
|
||||
box-sizing: border-box;
|
||||
white-space: normal;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-card.vip-theme1,
|
||||
.sub-vip-card .vip-card.level-1 {
|
||||
background: linear-gradient(25deg, #e6aa4f 10%, #f1d7ad 70%, #f5b97b 100%);
|
||||
color: #866127;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-card.vip-theme2,
|
||||
.sub-vip-card .vip-card.level-2 {
|
||||
background: linear-gradient(132deg, #9b7de4 0%, #4f48b8 30%, #624fba 80%, #574dba);
|
||||
color: #e4e2fb;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-baicon.abs-center,
|
||||
.sub-vip-card .vip-baicon {
|
||||
position: absolute;
|
||||
font-size: 10em;
|
||||
left: 55%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-name__icon {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-name__icon .aksrt-vip-level-icon {
|
||||
display: block;
|
||||
height: 1.1em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sub-vip-card .vip-name__label {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sub-vip-card .v-equity,
|
||||
.sub-vip-card ul.mb10 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 8px 0 12px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.sub-vip-card .v-equity > li,
|
||||
.sub-vip-card ul.mb10 > li {
|
||||
display: block;
|
||||
margin: 0 0 6px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* No forced decorative bullets — equity HTML is admin-authored */
|
||||
.sub-vip-card .v-equity > li::before,
|
||||
.sub-vip-card .v-equity > li::after,
|
||||
.sub-vip-card ul.mb10 > li::before,
|
||||
.sub-vip-card ul.mb10 > li::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Non-list equity HTML in hover cards */
|
||||
.sub-vip-card .v-equity > p {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
.sub-vip-card .v-equity > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sub-vip-card .payvip-button {
|
||||
font-size: 1em !important;
|
||||
margin: 0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: linear-gradient(135deg, #ff9633 10%, #f14315 100%);
|
||||
color: #fff;
|
||||
padding: 4px 15px !important;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(26, 22, 15, 0.3);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sub-vip-card .payvip-button:hover {
|
||||
filter: brightness(1.05);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Theme toggle — zibll toggle-radius (29px) + absolute FA center, not flex+translate(-50%) */
|
||||
.navbar-but-cluster .theme-toggle-desktop,
|
||||
.navbar-but-cluster .toggle-theme,
|
||||
.navbar-top .toggle-theme.toggle-radius {
|
||||
display: inline-block;
|
||||
align-items: unset;
|
||||
justify-content: unset;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .theme-toggle-desktop > i,
|
||||
.navbar-but-cluster .toggle-theme > i,
|
||||
.navbar-top .toggle-theme.toggle-radius > i {
|
||||
margin: 0 !important;
|
||||
line-height: 1 !important;
|
||||
position: absolute;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-toggle-desktop,
|
||||
.theme-toggle-mobile,
|
||||
.toggle-theme {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-toggle-desktop .theme-icon-moon,
|
||||
.theme-toggle-desktop .theme-icon-sun,
|
||||
.theme-toggle-mobile .theme-icon-moon,
|
||||
.theme-toggle-mobile .theme-icon-sun,
|
||||
.toggle-theme .theme-icon-moon,
|
||||
.toggle-theme .theme-icon-sun {
|
||||
margin: 0 !important;
|
||||
line-height: 1 !important;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Light: moon only. Dark: sun only. (class-driven, not inline style) */
|
||||
.theme-toggle-desktop .theme-icon-sun,
|
||||
.theme-toggle-mobile .theme-icon-sun,
|
||||
.toggle-theme .theme-icon-sun {
|
||||
display: none !important;
|
||||
}
|
||||
.theme-toggle-desktop .theme-icon-moon,
|
||||
.theme-toggle-mobile .theme-icon-moon,
|
||||
.toggle-theme .theme-icon-moon {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
html.dark .theme-toggle-desktop .theme-icon-moon,
|
||||
html.dark .theme-toggle-mobile .theme-icon-moon,
|
||||
html.dark .toggle-theme .theme-icon-moon,
|
||||
body.theme-dark .theme-toggle-desktop .theme-icon-moon,
|
||||
body.theme-dark .theme-toggle-mobile .theme-icon-moon,
|
||||
body.theme-dark .toggle-theme .theme-icon-moon,
|
||||
body.dark-theme .theme-toggle-desktop .theme-icon-moon,
|
||||
body.dark-theme .theme-toggle-mobile .theme-icon-moon,
|
||||
body.dark-theme .toggle-theme .theme-icon-moon {
|
||||
display: none !important;
|
||||
}
|
||||
html.dark .theme-toggle-desktop .theme-icon-sun,
|
||||
html.dark .theme-toggle-mobile .theme-icon-sun,
|
||||
html.dark .toggle-theme .theme-icon-sun,
|
||||
body.theme-dark .theme-toggle-desktop .theme-icon-sun,
|
||||
body.theme-dark .theme-toggle-mobile .theme-icon-sun,
|
||||
body.theme-dark .toggle-theme .theme-icon-sun,
|
||||
body.dark-theme .theme-toggle-desktop .theme-icon-sun,
|
||||
body.dark-theme .theme-toggle-mobile .theme-icon-sun,
|
||||
body.dark-theme .toggle-theme .theme-icon-sun {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* float commerce */
|
||||
.float-btn-shop-cart {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.float-btn-shop-cart badge,
|
||||
.float-btn-shop-cart [cart-count] {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.float-btn-shop-cart badge:empty,
|
||||
.float-btn-shop-cart [cart-count=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.float-btn.pay-vip,
|
||||
.float-right .float-btn.pay-vip {
|
||||
color: var(--this-color, #f5a623);
|
||||
}
|
||||
.float-right .float-btn.pay-vip:hover {
|
||||
color: var(--this-color, #f5a623);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.float-right .float-btn > i {
|
||||
margin: 0 !important;
|
||||
line-height: 1;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.navbar-but-cluster {
|
||||
gap: 6px;
|
||||
}
|
||||
.navbar-but-cluster .navbar-cta,
|
||||
.navbar-but-cluster a.but {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sub-vip-card .vip-card {
|
||||
width: min(220px, 42vw);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Ensure publish form is never zero-sized */
|
||||
.navbar-top .navbar-form.navbar-but {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
visibility: visible !important;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.navbar-top .navbar-form.navbar-but .newadd-btns.hover-show {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
@@ -1,351 +0,0 @@
|
||||
/**
|
||||
* Header user-box density (check-in / wallet / payvip / signout modal).
|
||||
* Light-theme contrast fixes.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.aksrt-header-wallet {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2, rgba(0, 0, 0, 0.04));
|
||||
color: var(--color-ink, #222);
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.aksrt-header-wallet__item {
|
||||
color: var(--color-ink-2, #444);
|
||||
}
|
||||
|
||||
.aksrt-header-wallet__item b {
|
||||
margin-left: 2px;
|
||||
color: var(--color-ink, #1a1a1a);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aksrt-header-wallet__item i {
|
||||
margin-right: 2px;
|
||||
color: var(--color-ink-3, #666);
|
||||
}
|
||||
|
||||
/* Check-in: beat generic `.user-dropdown button { height:44px; background:none }` */
|
||||
.user-dropdown button.aksrt-header-checkin,
|
||||
.aksrt-header-checkin {
|
||||
width: 100% !important;
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
min-height: 36px;
|
||||
border: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 8px 10px !important;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
background: #fff6db !important;
|
||||
color: #8a5a00 !important;
|
||||
font-weight: 600;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.3;
|
||||
display: inline-flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 6px !important;
|
||||
text-align: center !important;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-dropdown button.aksrt-header-checkin > i,
|
||||
.aksrt-header-checkin > i {
|
||||
margin: 0 !important;
|
||||
color: #b78103 !important;
|
||||
flex: 0 0 auto;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.user-dropdown button.aksrt-header-checkin > span,
|
||||
.aksrt-header-checkin > span {
|
||||
line-height: 1.3;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.user-dropdown button.aksrt-header-checkin.is-done,
|
||||
.aksrt-header-checkin.is-done,
|
||||
.user-dropdown button.aksrt-header-checkin:disabled,
|
||||
.aksrt-header-checkin:disabled {
|
||||
opacity: 0.85;
|
||||
cursor: default;
|
||||
background: #f3f4f6 !important;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
.user-dropdown button.aksrt-header-checkin.is-done > i,
|
||||
.aksrt-header-checkin.is-done > i,
|
||||
.user-dropdown button.aksrt-header-checkin:disabled > i,
|
||||
.aksrt-header-checkin:disabled > i {
|
||||
color: #777 !important;
|
||||
}
|
||||
|
||||
.user-dropdown button.aksrt-header-checkin:hover,
|
||||
.aksrt-header-checkin:hover {
|
||||
background: #fff0c2 !important;
|
||||
color: #8a5a00 !important;
|
||||
}
|
||||
|
||||
.user-dropdown button.aksrt-header-checkin.is-done:hover,
|
||||
.aksrt-header-checkin.is-done:hover,
|
||||
.user-dropdown button.aksrt-header-checkin:disabled:hover,
|
||||
.aksrt-header-checkin:disabled:hover {
|
||||
background: #f3f4f6 !important;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
.aksrt-header-checkin-details {
|
||||
color: var(--color-ink-3, #666) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* VIP open CTA: same geometry as .aksrt-header-checkin (full width, 6px radius).
|
||||
* Override any leftover .navbar-cta / .but.radius pill rules from top-nav. */
|
||||
.user-dropdown .aksrt-header-payvip .payvip-icon,
|
||||
.user-dropdown .aksrt-header-payvip .but,
|
||||
.user-dropdown .aksrt-header-payvip__cta,
|
||||
.aksrt-header-payvip .payvip-icon,
|
||||
.aksrt-header-payvip .but,
|
||||
.aksrt-header-payvip__cta {
|
||||
display: inline-flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 6px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
min-height: 36px;
|
||||
max-height: none !important;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: 8px 10px !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 6px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(90deg, #ff6b6b, #f04494) !important;
|
||||
color: #fff !important;
|
||||
flex: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.user-dropdown .aksrt-header-payvip .payvip-icon > i,
|
||||
.user-dropdown .aksrt-header-payvip .but > i,
|
||||
.user-dropdown .aksrt-header-payvip__cta > i,
|
||||
.aksrt-header-payvip .payvip-icon > i,
|
||||
.aksrt-header-payvip .but > i,
|
||||
.aksrt-header-payvip__cta > i {
|
||||
margin: 0 !important;
|
||||
flex: 0 0 auto;
|
||||
line-height: 1;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.user-dropdown .aksrt-header-payvip__cta > span,
|
||||
.aksrt-header-payvip__cta > span {
|
||||
line-height: 1.3;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.user-dropdown .aksrt-header-payvip__cta:hover,
|
||||
.aksrt-header-payvip__cta:hover {
|
||||
opacity: 0.92;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* Active VIP: level on line 1, smaller expiry on line 2 (no orange pill). */
|
||||
.aksrt-header-payvip .payvip-icon.aksrt-header-payvip__active,
|
||||
.aksrt-header-payvip__active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.aksrt-header-payvip__level {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.aksrt-header-payvip__level > i {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.aksrt-header-payvip__exp {
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
opacity: 0.9;
|
||||
background: none !important;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.aksrt-header-badges {
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
/* Inline name + level badge in the dropdown profile row — one line, no wrap. */
|
||||
.sub-user-box .user-right > .flex1 {
|
||||
min-width: 0;
|
||||
}
|
||||
.sub-user-box .user-right b {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sub-user-box .user-right b .display-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.sub-user-box .user-right .aksrt-user-level-icon,
|
||||
.sub-user-box .user-right .aksrt-identity-medal,
|
||||
.sub-user-box .user-right .aksrt-header-user-medal,
|
||||
.sub-user-box .user-right .aksrt-vip-badge {
|
||||
height: 1.1em;
|
||||
vertical-align: -.15em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* User dropdown light-theme text contrast */
|
||||
.user-dropdown.sub-user-box,
|
||||
.user-dropdown {
|
||||
color: var(--color-ink, #222);
|
||||
background: var(--main-bg-color, #fff);
|
||||
}
|
||||
|
||||
.user-dropdown__name,
|
||||
.user-dropdown__meta,
|
||||
.user-dropdown__email,
|
||||
.user-dropdown .muted-2-color {
|
||||
color: var(--color-ink-2, #555) !important;
|
||||
}
|
||||
|
||||
.user-dropdown__email {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.user-dropdown__action,
|
||||
.user-dropdown__action span {
|
||||
color: var(--color-ink, #222);
|
||||
}
|
||||
|
||||
#modal_signout.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1100;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#modal_signout.modal.is-open,
|
||||
#modal_signout.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#modal_signout .modal-content {
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: 10px;
|
||||
min-width: 280px;
|
||||
max-width: 92vw;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
|
||||
color: var(--color-ink, #222);
|
||||
}
|
||||
|
||||
#modal_signout .but.c-red {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#modal_signout .but {
|
||||
border: 0;
|
||||
background: var(--surface-2, #f0f0f0);
|
||||
color: var(--color-ink, #222);
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-dropdown .social_loginbar {
|
||||
padding: 0 10px 12px;
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
html.dark .user-dropdown button.aksrt-header-checkin,
|
||||
html.dark .aksrt-header-checkin,
|
||||
body.dark-theme .user-dropdown button.aksrt-header-checkin,
|
||||
body.dark-theme .aksrt-header-checkin,
|
||||
body.theme-dark .user-dropdown button.aksrt-header-checkin,
|
||||
body.theme-dark .aksrt-header-checkin {
|
||||
background: rgba(255, 193, 7, 0.18) !important;
|
||||
color: #f0c14b !important;
|
||||
}
|
||||
|
||||
html.dark .user-dropdown button.aksrt-header-checkin > i,
|
||||
html.dark .aksrt-header-checkin > i,
|
||||
body.dark-theme .user-dropdown button.aksrt-header-checkin > i,
|
||||
body.dark-theme .aksrt-header-checkin > i,
|
||||
body.theme-dark .user-dropdown button.aksrt-header-checkin > i,
|
||||
body.theme-dark .aksrt-header-checkin > i {
|
||||
color: #f0c14b !important;
|
||||
}
|
||||
|
||||
html.dark .user-dropdown button.aksrt-header-checkin.is-done,
|
||||
html.dark .aksrt-header-checkin.is-done,
|
||||
body.dark-theme .user-dropdown button.aksrt-header-checkin.is-done,
|
||||
body.dark-theme .aksrt-header-checkin.is-done {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #bbb !important;
|
||||
}
|
||||
|
||||
html.dark .aksrt-header-wallet,
|
||||
body.dark-theme .aksrt-header-wallet,
|
||||
body.theme-dark .aksrt-header-wallet {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
html.dark .aksrt-header-wallet__item,
|
||||
html.dark .aksrt-header-wallet__item b,
|
||||
body.dark-theme .aksrt-header-wallet__item,
|
||||
body.dark-theme .aksrt-header-wallet__item b {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -1,234 +0,0 @@
|
||||
/* Ported/adapted from zibll main.css — mobile navbar drawer
|
||||
*
|
||||
* Desktop: fully off-document (display:none). Bootstrap 5 has no
|
||||
* visible-xs-block; without this the drawer content sits in flow and
|
||||
* creates a large blank band under the top nav (see blog.rutua.cn).
|
||||
*/
|
||||
|
||||
/* ---- Base: hide drawer + overlay on all viewports by default ---- */
|
||||
.mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-body {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 996;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.35s ease, visibility 0.35s ease;
|
||||
}
|
||||
|
||||
.mobile-navbar + .fixed-body {
|
||||
z-index: 996;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.navbar-toggle .icon-bar {
|
||||
background: var(--main-color);
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar + .icon-bar {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Center layout is grid-driven in nav.css (menu | logo | search).
|
||||
Do NOT absolute-position brand — it overlaps the hamburger. */
|
||||
.navbar-top.center .navbar-brand {
|
||||
position: static;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand + .navbar-toggle {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.navbar-top.center .navbar-brand > img {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-logo > img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Shell participates only on small screens */
|
||||
.mobile-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-navbar,
|
||||
.mobile-navbar.visible-xs-block {
|
||||
display: block;
|
||||
z-index: 997;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: var(--main-bg-color);
|
||||
width: 281px;
|
||||
max-width: 86vw;
|
||||
padding: 10px 20px 70px;
|
||||
transition: transform 0.5s;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.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%;
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
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: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
/* Header nav style: transparent / blur (header_nav_style) */
|
||||
|
||||
body.header-nav-style-transparent .header:not(.show-slide) .navbar-top,
|
||||
body.header-nav-style-transparent .header.nav-style-transparent .navbar-top {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body.header-nav-style-blur .header:not(.show-slide) .navbar-top,
|
||||
body.header-nav-style-blur .header.nav-style-blur .navbar-top,
|
||||
.header.nav-style-blur .navbar-top {
|
||||
background: var(--blur-bg, rgba(255, 255, 255, 0.72)) !important;
|
||||
-webkit-backdrop-filter: saturate(5) blur(16px);
|
||||
backdrop-filter: saturate(5) blur(16px);
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
body.theme-dark.header-nav-style-blur .header:not(.show-slide) .navbar-top,
|
||||
html.dark body.header-nav-style-blur .header:not(.show-slide) .navbar-top,
|
||||
body.dark-theme.header-nav-style-blur .header:not(.show-slide) .navbar-top {
|
||||
background: var(--blur-bg, rgba(20, 22, 28, 0.72)) !important;
|
||||
}
|
||||
|
||||
/* When show-slide + fixed, keep zibll transparent gradient (already in core).
|
||||
Transparent style reinforces that paint while resting at top of hero. */
|
||||
body.nav-fixed.header-nav-style-transparent:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide,
|
||||
body.nav-fixed.header-nav-style-blur: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.12) 80%);
|
||||
--header-color: #fff;
|
||||
}
|
||||
|
||||
body.header-nav-style-transparent .header.show-slide .navbar-top,
|
||||
body.header-nav-style-blur .header.show-slide .navbar-top {
|
||||
background: transparent !important;
|
||||
-webkit-backdrop-filter: unset;
|
||||
backdrop-filter: unset;
|
||||
box-shadow: none !important;
|
||||
color: var(--header-color, inherit);
|
||||
}
|
||||
@@ -1,849 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
/* Zibll-aligned fixed header + slide pull-under-nav
|
||||
*
|
||||
* demo.zibll.com / main.css:
|
||||
* - body.nav-fixed → padding-top reserve
|
||||
* - .nav-fixed .header → always position:fixed (including .show-slide)
|
||||
* - body.nav-fixed .slide-header → margin-top negative (swiper ONLY)
|
||||
* - Do NOT pull .header-slider-container as a whole (breaks card overlap on homepage)
|
||||
*/
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/* zibll .nav-fixed .header — fixed even with .show-slide */
|
||||
body.nav-fixed .header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* Transparent chrome over slider */
|
||||
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;
|
||||
}
|
||||
|
||||
/* ONLY the slide shell pulls under the fixed nav — not the card row / search.
|
||||
* zibll: body.nav-fixed .slide-header { margin-top: -90px; } */
|
||||
body.nav-fixed .header-slider-container > .zib-slider > .new-swiper.slide-header,
|
||||
body.nav-fixed .header-slider-container > .relative.zib-slider > .new-swiper.slide-header,
|
||||
body.nav-fixed .header-slider-container .new-swiper.slide-index.slide-header,
|
||||
body.nav-fixed .header-components-container > .zib-slider > .new-swiper.slide-header,
|
||||
body.nav-fixed .header-components:not(.new-swiper).slide-header,
|
||||
body.nav-fixed .new-swiper.slide-header.slide-index {
|
||||
margin-top: calc(var(--nav-fixed-reserve, 88px) * -1);
|
||||
}
|
||||
|
||||
/* Kill legacy whole-container pull (homepage-only visual break vs other pages) */
|
||||
body.nav-fixed .header-slider-container,
|
||||
body.nav-fixed .header-components-container {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Cards keep zibll overlap relative to slider bottom */
|
||||
body.nav-fixed .header-slider-card,
|
||||
body.nav-fixed .header-components-card {
|
||||
margin-top: -40px;
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body.nav-fixed .header-slider-card,
|
||||
body.nav-fixed .header-components-card {
|
||||
margin-top: -35px;
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
/* zibll search-box / menu_search panel parity */
|
||||
|
||||
/* Layout-2 focus dropdown */
|
||||
.navbar-collapse .form-group.relative.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-collapse .search-input ~ .dropdown-menu,
|
||||
.navbar-collapse .form-group .dropdown-menu.hover-show-con {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
z-index: 1002;
|
||||
min-width: 320px;
|
||||
width: max(320px, 100%);
|
||||
max-width: 460px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: var(--main-radius, 8px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navbar-form.hover-show:hover .dropdown-menu.hover-show-con,
|
||||
.navbar-form.hover-show:focus-within .dropdown-menu.hover-show-con,
|
||||
.navbar-collapse .form-group:focus-within .dropdown-menu.hover-show-con,
|
||||
.navbar-collapse .dropdown-menu.hover-show-con.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Search box body */
|
||||
.search-input .search-keywords {
|
||||
padding: 6px 10px 2px;
|
||||
}
|
||||
.search-input .search-keywords > p {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.search-input .search-keywords .but,
|
||||
.search-input .search-keywords a.but {
|
||||
display: inline-block;
|
||||
margin: 0 6px 6px 0;
|
||||
padding: 2px 10px;
|
||||
font-size: 0.85em;
|
||||
border-radius: 20px;
|
||||
background: var(--main-shadow, rgba(0, 0, 0, 0.05));
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.search-input .search-keywords .but:hover {
|
||||
color: var(--focus-color, #2997f7);
|
||||
}
|
||||
|
||||
.search-input .history-search .trash-history-search {
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.search-input .history-search .trash-history-search:hover {
|
||||
opacity: 1;
|
||||
color: var(--focus-color, #2997f7);
|
||||
}
|
||||
|
||||
/* Hot posts swiper row */
|
||||
.search-input .relates-thumb {
|
||||
overflow: hidden;
|
||||
}
|
||||
.search-input .relates-thumb .swiper-container,
|
||||
.search-input .relates-thumb .swiper-scroll {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.search-input .relates-thumb .swiper-wrapper {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
gap: 0;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.search-input .relates-thumb .swiper-wrapper::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.search-input .relates-thumb .swiper-slide {
|
||||
flex: 0 0 auto;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.search-input .relates-thumb .swiper-button-prev,
|
||||
.search-input .relates-thumb .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Full navbar-search slide (layout 1/3) — position/transition from zib-navbar-core */
|
||||
.navbar-search {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar-search .container {
|
||||
max-width: var(--nav-max-width, 1200px);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 10px 15px 20px;
|
||||
}
|
||||
.navbar-search .navbar-search-close,
|
||||
.navbar-search > .container > .close {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
z-index: 2;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: 1.25rem;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.navbar-search .navbar-search-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Line form (full search box) */
|
||||
.search-input .line-form {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
position: relative;
|
||||
}
|
||||
.search-input .search-input-text {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
.search-input .line-form-input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 12px 40px 12px 4px;
|
||||
font-size: 1.05em;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
}
|
||||
.search-input .scale-placeholder {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
opacity: 0.45;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.search-input .scale-placeholder.is-focus,
|
||||
.search-input .line-form-input:focus + .line-form-line + .scale-placeholder,
|
||||
.search-input .line-form-input:not([value=""]) ~ .scale-placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
.search-input .option-dropdown {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.search-input .search-type-but-average .but {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.search-input .search-type-but-average .but.active {
|
||||
color: #fff;
|
||||
background: var(--focus-color, #2997f7);
|
||||
}
|
||||
|
||||
/* Live suggest (extension) */
|
||||
.navbar-inline-search-suggest__item,
|
||||
.aksrt-menu-search-suggest a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 6px 4px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.navbar-inline-search-suggest__item:hover {
|
||||
color: var(--focus-color, #2997f7);
|
||||
}
|
||||
|
||||
body.theme-dark .navbar-collapse .form-group .dropdown-menu.hover-show-con,
|
||||
html.dark .navbar-collapse .form-group .dropdown-menu.hover-show-con,
|
||||
body.dark-theme .navbar-collapse .form-group .dropdown-menu.hover-show-con {
|
||||
background: var(--main-bg-color, #1e1e1e);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
@@ -1,221 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,393 +0,0 @@
|
||||
/* 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);
|
||||
}
|
||||
@@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
.notyf::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-family:"Font Awesome 5 Free";font-weight:900;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
|
||||
@@ -414,11 +414,6 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.mobile-navbar.right .posts-mini .meta-author > span,
|
||||
.mobile-navbar.left .posts-mini .meta-author > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.posts-mini:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
.resource-gallery-locked::after {
|
||||
content: '\f023';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-family:"Font Awesome 5 Free";font-weight:900;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -52,4 +52,3 @@
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user