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

fix(header): 1:1 zibll overlay icon cards for top multifunc component

Browse Source 
Rebuild header-slider card DOM/CSS against zib_header_slide + zib_icon_cover_card so shared/individual backgrounds, flex gutters, and badge icons match the reference theme.
This commit is contained in:
kate522
2026-07-24 10:30:22 +08:00
parent bbdeeafc80
commit e35011f2c0
7 changed files with 384 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/header-components/dark-theme.css
+113 -256
View File
@@ -12,292 +12,149 @@ body.dark-theme .header-components-search__input {
}
/* ============================================================
* Layer 3: 图标卡片（模仿 zibll — 骑在 hero 底部边界线上）
*
* 关键技术：卡片在 DOM 中位于轮播之后，
* 使用 margin-top: -40px 向上拉，使其骑在 hero 底部边界线上
* Layer 3: Icon cards — 1:1 zibll header-slider-card
* DOM: .header-slider-card.container > (.zib-widget.padding-10|div)
* > .flex.jse.flex-row.gutters-5.flex-col-sm-2
* > (.flex1|.relative-h) > [.main-color >] .icon-cover-card.flex.ac.(zib-widget|padding-10)
* ============================================================ */
.header-slider-card,
.header-components-card {
position: relative;
z-index: 1;
margin-top: -40px;
z-index: 1;
}
.header-components-card__container {
max-width: var(--container, 1280px);
margin: 0 auto;
padding: 0 16px;
.header-slider-card .zib-widget,
.header-components-card .zib-widget {
margin-bottom: 0;
}
/* 卡片行：flex 水平排列 */
.header-components-card__row {
display: flex;
gap: 10px;
padding-top: 4px; /* 为 hover 上浮留出空间 */
/* Individual card surface = .zib-widget (from card-primitives); shared mode uses outer .zib-widget.padding-10 */
.header-slider-card .icon-cover-card.zib-widget,
.header-components-card .icon-cover-card.zib-widget {
margin-bottom: 0;
}
/* 每个卡片项等宽 */
.header-components-card__item {
flex: 1;
min-width: 0;
/* zibll filter-blur glass on card surfaces + search form */
.filter-blur .header-slider-search .line-form,
.filter-blur .header-components-search .line-form,
.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-components-card .zib-widget {
-webkit-backdrop-filter: saturate(5) blur(20px);
backdrop-filter: saturate(5) blur(20px);
}
/* 共享背景模式：一个大卡片包裹 */
.header-components-card__wrap--shared {
background: var(--surface-page);
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-line);
.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-components-card .zib-widget {
background: var(--blur-bg, rgba(255, 255, 255, 0.75));
}
/* 独立背景模式：每个卡片有自己的背景 */
.header-components-card__item-bg {
background: var(--surface-page);
border-radius: 8px;
padding: 12px 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-line);
height: 100%;
transition: transform 0.2s ease, box-shadow 0.2s ease;
.theme-dark .filter-blur .header-slider-card .zib-widget,
html.dark .filter-blur .header-slider-card .zib-widget,
body.dark-theme .filter-blur .header-slider-card .zib-widget,
.theme-dark .filter-blur .header-components-card .zib-widget,
html.dark .filter-blur .header-components-card .zib-widget,
body.dark-theme .filter-blur .header-components-card .zib-widget {
background: var(--blur-bg, rgba(30, 30, 30, 0.75));
}
.header-components-card__item-bg:hover {
transform: none;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* 毛玻璃效果 */
.filter-blur .header-components-card__wrap--shared,
.filter-blur .header-components-card__item-bg {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: saturate(3) blur(20px);
-webkit-backdrop-filter: saturate(3) blur(20px);
border-color: rgba(255, 255, 255, 0.3);
}
.theme-dark .filter-blur .header-components-card__wrap--shared,
html.dark .filter-blur .header-components-card__wrap--shared,
body.dark-theme .filter-blur .header-components-card__wrap--shared,
.theme-dark .filter-blur .header-components-card__item-bg,
html.dark .filter-blur .header-components-card__item-bg,
body.dark-theme .filter-blur .header-components-card__item-bg {
background: rgba(30, 30, 30, 0.75);
border-color: rgba(255, 255, 255, 0.1);
}
/* ============================================================
* 单个图标卡片样式（模仿 zibll icon-cover-card）
* 结构：左侧圆形图标 + 右侧标题/描述
* ============================================================ */
.icon-cover-card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 6px;
text-decoration: none;
color: var(--color-ink);
transition: background 0.15s ease;
}
a.icon-cover-card:hover {
background: var(--surface-3);
text-decoration: none;
color: var(--color-ink);
}
/* 图标容器 — 圆形 */
.icon-cover-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
font-size: 18px;
flex-shrink: 0;
}
/* 方形图标 */
.icon-cover-icon.radius4 {
border-radius: 6px;
}
/* 图标颜色类（模仿 zibll 的调色板） */
.icon-cover-icon.c-blue {
background: rgba(66, 133, 244, 0.12);
color: #4285f4;
}
.icon-cover-icon.c-yellow {
background: rgba(251, 188, 4, 0.12);
color: #fbbc04;
}
.icon-cover-icon.c-green {
background: rgba(52, 168, 83, 0.12);
color: #34a853;
}
.icon-cover-icon.c-red {
background: rgba(234, 67, 53, 0.12);
color: #ea4335;
}
.icon-cover-icon.c-orange {
background: rgba(255, 152, 0, 0.12);
color: #ff9800;
}
.icon-cover-icon.c-cyan {
background: rgba(0, 188, 212, 0.12);
color: #00bcd4;
}
.icon-cover-icon.c-pink {
background: rgba(233, 30, 99, 0.12);
color: #e91e63;
}
/* 渐变图标背景 */
.icon-cover-icon.jb-cyan {
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: #fff;
}
.icon-cover-icon.jb-green {
background: linear-gradient(135deg, #43e97b, #38f9d7);
color: #fff;
}
.icon-cover-icon.jb-orange {
background: linear-gradient(135deg, #fa709a, #fee140);
color: #fff;
}
/* 文字区 */
.icon-cover-desc {
flex: 1;
min-width: 0;
overflow: hidden;
}
.icon-cover-title {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--color-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon-cover-subtitle {
font-size: 11px;
color: var(--color-ink-4);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
/* ============================================================
* 响应式
* ============================================================ */
@media (max-width: 767px) {
.header-components-card {
margin-top: -35px;
}
.header-components-card__row {
flex-wrap: wrap;
gap: 6px;
}
/* 移动端 2 列 */
.header-components-card__item {
flex: 0 0 calc(50% - 3px);
}
.header-components-card__item-bg {
padding: 10px;
}
.header-components-card__wrap--shared {
padding: 6px;
}
.icon-cover-card {
gap: 6px;
padding: 6px;
}
.icon-cover-icon {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 14px;
}
.icon-cover-title {
font-size: 12px;
}
.icon-cover-subtitle {
display: none;
}
}
@media (max-width: 480px) {
.icon-cover-card {
gap: 4px;
padding: 2px;
}
.icon-cover-icon {
width: 28px;
height: 28px;
min-width: 28px;
font-size: 12px;
}
}
/* ============================================================
* Container-level blur: PC/Mobile split (colors only; no top offsets)
* ============================================================ */
/* Device-split blur (AKSRT extension of zibll filter-blur) */
@media (min-width: 768px) {
.has-blur-pc .header-components-card__wrap--shared,
.has-blur-pc .header-components-card__item-bg {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: saturate(3) blur(20px);
-webkit-backdrop-filter: saturate(3) blur(20px);
border-color: rgba(255, 255, 255, 0.3);
.has-blur-pc .header-slider-card .zib-widget,
.has-blur-pc .header-components-card .zib-widget {
-webkit-backdrop-filter: saturate(5) blur(20px);
backdrop-filter: saturate(5) blur(20px);
background: var(--blur-bg, rgba(255, 255, 255, 0.75));
}
.has-blur-pc .header-components-search .line-form,
.has-blur-pc .header-slider-search .line-form {
background: rgba(255, 255, 255, 0.75);
}
.theme-dark .has-blur-pc .header-components-card__wrap--shared,
html.dark .has-blur-pc .header-components-card__wrap--shared,
.theme-dark .has-blur-pc .header-components-card__item-bg,
html.dark .has-blur-pc .header-components-card__item-bg {
background: rgba(30, 30, 30, 0.75);
border-color: rgba(255, 255, 255, 0.1);
.theme-dark .has-blur-pc .header-slider-card .zib-widget,
html.dark .has-blur-pc .header-slider-card .zib-widget,
.theme-dark .has-blur-pc .header-components-card .zib-widget,
html.dark .has-blur-pc .header-components-card .zib-widget {
background: var(--blur-bg, rgba(30, 30, 30, 0.75));
}
}
@media (max-width: 767px) {
.has-blur-mobile .header-components-card__wrap--shared,
.has-blur-mobile .header-components-card__item-bg {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: saturate(3) blur(20px);
-webkit-backdrop-filter: saturate(3) blur(20px);
border-color: rgba(255, 255, 255, 0.3);
.has-blur-mobile .header-slider-card .zib-widget,
.has-blur-mobile .header-components-card .zib-widget {
-webkit-backdrop-filter: saturate(5) blur(20px);
backdrop-filter: saturate(5) blur(20px);
background: var(--blur-bg, rgba(255, 255, 255, 0.75));
}
.has-blur-mobile .header-components-search .line-form,
.has-blur-mobile .header-slider-search .line-form {
background: rgba(255, 255, 255, 0.75);
}
.theme-dark .has-blur-mobile .header-components-card__wrap--shared,
html.dark .has-blur-mobile .header-components-card__wrap--shared,
.theme-dark .has-blur-mobile .header-components-card__item-bg,
html.dark .has-blur-mobile .header-components-card__item-bg {
background: rgba(30, 30, 30, 0.75);
border-color: rgba(255, 255, 255, 0.1);
.theme-dark .has-blur-mobile .header-slider-card .zib-widget,
html.dark .has-blur-mobile .header-slider-card .zib-widget,
.theme-dark .has-blur-mobile .header-components-card .zib-widget,
html.dark .has-blur-mobile .header-components-card .zib-widget {
background: var(--blur-bg, rgba(30, 30, 30, 0.75));
}
.header-slider-card .icon-cover-card.zib-widget,
.header-components-card .icon-cover-card.zib-widget {
padding: 10px;
}
.header-slider-card .icon-cover-card.padding-10,
.header-components-card .icon-cover-card.padding-10 {
padding: 2px;
}
.header-slider-card,
.header-components-card {
margin-top: -35px;
}
}
/* icon-cover-card itself is a flex row — do NOT re-skin as a bordered box here.
* Surface comes from .zib-widget / .padding-10; icon badge from .badg.cir + c-*/jb-*. */
.header-slider-card .icon-cover-card,
.header-components-card .icon-cover-card {
display: flex;
align-items: center;
gap: 0;
/* padding comes from .zib-widget or .padding-10 class on the same node */
}
.header-slider-card a.main-color,
.header-components-card a.main-color {
color: inherit;
text-decoration: none;
display: block;
}
.header-slider-card a.main-color:hover,
.header-components-card a.main-color:hover {
color: inherit;
text-decoration: none;
}
/* Let .badg.cir + color modifiers drive icon look; only size/image tweaks here */
.header-slider-card .icon-cover-icon.badg.cir,
.header-components-card .icon-cover-icon.badg.cir {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.header-slider-card .icon-cover-icon img,
.header-components-card .icon-cover-icon img {
width: 70%;
height: 70%;
object-fit: contain;
}
.header-slider-card .icon-cover-desc,
.header-components-card .icon-cover-desc {
min-width: 0;
overflow: hidden;
}
.header-slider-card .icon-cover-desc .font-bold,
.header-components-card .icon-cover-desc .font-bold {
font-weight: bold;
}
assets/css/frontend/header-components/search-keywords-row.css
+8 -40
View File
@@ -100,48 +100,16 @@
margin-top: -35px;
}
.header-components-card__container {
padding: 0 10px;
.header-slider-card .icon-cover-card.zib-widget,
.header-components-card .icon-cover-card.zib-widget {
padding: 10px;
}
.header-slider-card .icon-cover-card.padding-10,
.header-components-card .icon-cover-card.padding-10 {
padding: 2px;
}
.header-components-card__row {
flex-wrap: wrap;
gap: 6px;
}
.header-components-card__item {
flex: 0 0 calc(50% - 3px);
}
.header-components-card__item-bg {
padding: 8px 10px;
}
.header-components-card__wrap--shared {
padding: 6px;
}
.icon-cover-card {
gap: 6px;
padding: 4px;
min-height: 52px;
border-radius: 6px;
}
.icon-cover-icon {
width: 30px;
height: 30px;
min-width: 30px;
font-size: 14px;
}
.icon-cover-title {
font-size: 12px;
}
.icon-cover-subtitle {
display: none;
}
/* zibll ~640px: slide-header text padding 52px */
.header-components.slide-header .slide-text,
assets/css/frontend/widget-batch5.css
+9 -18
View File
@@ -1862,31 +1862,21 @@
display: flex;
align-items: center;
gap: 0;
padding: 12px;
border-radius: 8px;
background: var(--surface-1, #fff);
border: 1px solid var(--color-line, #e5e7eb);
transition: box-shadow .2s ease, transform .2s ease;
/* Surface: .zib-widget / .padding-10 on same node (zibll). Do not re-box. */
}
a.main-color > .icon-cover-card:hover,
.icon-cover-card:hover {
box-shadow: 0 6px 18px rgba(0,0,0,.06);
transform: translateY(-1px);
a.main-color > .icon-cover-card:hover {
opacity: 0.92;
}
/* Icon badge uses .badg.cir (+ c-* / jb-*); only ensure flex centering. */
.icon-cover-icon.badg.cir {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4em;
height: 2.4em;
min-width: 2.4em;
border-radius: 50%;
background: rgba(59, 130, 246, 0.12);
color: #2563eb;
flex-shrink: 0;
}
.icon-cover-icon.radius4 {
border-radius: 10px !important;
.icon-cover-icon.radius4,
.icon-cover-icon.badg.cir.radius4 {
border-radius: 4px !important;
}
.icon-cover-icon img {
width: 70%;
@@ -1895,9 +1885,10 @@ a.main-color > .icon-cover-card:hover,
}
.icon-cover-desc {
min-width: 0;
overflow: hidden;
}
.icon-cover-desc .font-bold {
font-weight: 700;
font-weight: bold;
}
/* Buttons wrap (zibll flex hh) */
assets/css/frontend/zibll-utilities.css
+23
View File
@@ -25,6 +25,29 @@
.flex1 { flex: 1 1 auto; min-width: 0; }
.flex.column { flex-direction: column; }
.flex.wrap { flex-wrap: wrap; }
.flex.flex-row,
.flex-row { flex-direction: row; }
.flex.jse,
.jse { justify-content: space-evenly; }
.flex.jsa,
.jsa { justify-content: space-around; }
/* Nested flex1 (zibll .flex .flex1) — allow both direct and descendant */
.flex > .flex1,
.flex .flex1 { flex: 1; overflow: hidden; min-width: 0; }
.relative-h { position: relative; height: 100%; }
.padding-10 { padding: 10px; }
.font-bold { font-weight: bold; }
.mt6 { margin-top: 6px; }
.gutters-5 { margin: -5px; }
.gutters-5 > * { padding: 5px; }
@media (max-width: 767px) {
.flex.flex-row.flex-col-sm-2 {
flex-wrap: wrap;
}
.flex.flex-row.flex-col-sm-2 > * {
flex-basis: 50%;
}
}
.clearfix::before,
.clearfix::after {