kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(header): align header-slider DOM/height with zibll demo

Browse Source 
Match demo.zibll.com slide markup (a/span wrap, data-* attrs, --pc/--m height on .new-swiper), keyword chip classes, and height CSS so the top multifunc block renders like the official demo.
This commit is contained in:
kate522
2026-07-24 11:02:42 +08:00
parent 96bd9d949d
commit a25feb4161
4 changed files with 258 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/header-components/widget-device-visibility.css
+58 -5
View File
@@ -22,9 +22,61 @@
/* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */
/* ============================================================
* Layer 1: Swiper shell
* Layer 1: Swiper shell — zibll .new-swiper.slide-header
* Height lives on CSS vars of .new-swiper; wrapper height = --pc-height / --m-height
* ============================================================ */
.header-components {
.header-slider-container .new-swiper.slide-header,
.new-swiper.slide-index.slide-header {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 0;
border-radius: 0;
background: #111;
/* Defaults if PHP did not set style vars */
--pc-height: 550px;
--m-height: 280px;
}
.header-slider-container .new-swiper.slide-header .swiper-wrapper,
.new-swiper.slide-index.slide-header .swiper-wrapper {
height: var(--pc-height);
display: flex;
}
.header-slider-container .new-swiper.slide-header .swiper-slide,
.new-swiper.slide-index.slide-header .swiper-slide {
position: relative;
height: 100%;
overflow: hidden;
width: 100%;
flex-shrink: 0;
}
/* zibll: slide media fill wrapper height */
.header-slider-container .new-swiper.slide-header .swiper-slide img,
.header-slider-container .new-swiper.slide-header .swiper-slide video,
.new-swiper.slide-index.slide-header .swiper-slide img,
.new-swiper.slide-index.slide-header .swiper-slide video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 !important;
display: block;
}
.header-slider-container .new-swiper.slide-header .swiper-slide > a,
.header-slider-container .new-swiper.slide-header .swiper-slide > span,
.new-swiper.slide-index.slide-header .swiper-slide > a,
.new-swiper.slide-index.slide-header .swiper-slide > span {
display: block;
width: 100%;
height: 100%;
position: relative;
}
/* Keep legacy .header-components shell for gradient fallback only */
.header-components:not(.new-swiper) {
position: relative;
width: 100%;
--pc-height: 550px;
@@ -35,7 +87,7 @@
background: #111;
}
.header-components.slide-header {
.header-components.slide-header:not(.new-swiper) {
padding-top: 0;
border-radius: 0;
}
@@ -63,20 +115,21 @@
pointer-events: none;
}
.header-components .swiper-wrapper {
.header-components:not(.new-swiper) .swiper-wrapper {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
}
.header-components .swiper-slide {
.header-components:not(.new-swiper) .swiper-slide {
position: relative;
height: 100%;
overflow: hidden;
cursor: pointer;
}
/* Legacy BEM slide bg — only when old markup still present */
.header-components__slide-bg {
position: absolute;
inset: 0;