kate522
f7cedc7163
Add a single always-loaded header-cards.css that normalizes the 顶部多功能组件图标卡片 geometry (equal-width cells, fixed 45px icon badge, zibll mobile padding) across all pages, and enqueue it from ScriptsPart1b. Remove the orphan header-components.css + subdirectory that were never enqueued. Repoint the icon-card contract test at the new stylesheet.
143 lines
4.2 KiB
CSS
143 lines
4.2 KiB
CSS
/* ============================================================
|
|
* Header icon cards — unified geometry (zibll 1:1)
|
|
*
|
|
* The top multi-function component ("顶部多功能组件") renders its icon
|
|
* cards through one path: aksrt_header_slide() →
|
|
* aksrt_icon_cover_card() (see inc/helpers/homepage/header-components.php
|
|
* and inc/helpers/aksrt-icon-cards.php). This file is the single source of
|
|
* truth for their size/layout, loaded after Zibll main.min.css on every
|
|
* page so cards stay identical across home / archive / single / search.
|
|
*
|
|
* 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.aksrt-icon-cover-card.flex.ac.(zib-widget|padding-10)
|
|
* > .icon-cover-icon.badg.cir.(c-*|jb-*)[.radius4] (the badge)
|
|
* > .icon-cover-desc.ml10.flex1.px12-sm
|
|
* ============================================================ */
|
|
|
|
/* --- Equal-width cells + zibll gutters (both header wrapper aliases) --- */
|
|
.header-slider-card .flex,
|
|
.header-components-card .flex {
|
|
display: flex;
|
|
}
|
|
.header-slider-card .flex.jse,
|
|
.header-components-card .flex.jse,
|
|
.header-slider-card .jse,
|
|
.header-components-card .jse {
|
|
justify-content: space-evenly;
|
|
}
|
|
.header-slider-card .flex-row,
|
|
.header-components-card .flex-row {
|
|
flex-direction: row;
|
|
}
|
|
.header-slider-card .flex.ac,
|
|
.header-components-card .flex.ac,
|
|
.header-slider-card .ac,
|
|
.header-components-card .ac {
|
|
align-items: center;
|
|
}
|
|
|
|
.header-slider-card .gutters-5,
|
|
.header-components-card .gutters-5,
|
|
.header-slider-card .flex.jse.flex-row,
|
|
.header-components-card .flex.jse.flex-row {
|
|
margin: -5px;
|
|
}
|
|
.header-slider-card .gutters-5 > *,
|
|
.header-components-card .gutters-5 > *,
|
|
.header-slider-card .flex.jse.flex-row > *,
|
|
.header-components-card .flex.jse.flex-row > * {
|
|
padding: 5px !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Higher-specificity scope selector wins over the single-post-only
|
|
* zibll-utilities.css `.flex1{flex:1 1 auto}` so every card is equal-width:
|
|
* zibll uses `flex:1; overflow:hidden`. */
|
|
.header-slider-card .flex1,
|
|
.header-components-card .flex1,
|
|
.header-slider-card .flex .flex1,
|
|
.header-components-card .flex .flex1 {
|
|
flex: 1 1 0;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
.header-slider-card .relative-h,
|
|
.header-components-card .relative-h {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.header-slider-card,
|
|
.header-components-card {
|
|
position: relative;
|
|
margin-top: -40px;
|
|
z-index: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.header-slider-card .zib-widget,
|
|
.header-components-card .zib-widget {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Card box: compact zibll proportions in every context --- */
|
|
.icon-cover-card.aksrt-icon-cover-card {
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* --- Icon badge: fixed size so a custom (non-FA) icon cannot stretch it --- */
|
|
.icon-cover-card .icon-cover-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 45px;
|
|
height: 45px;
|
|
min-width: 45px;
|
|
font-size: 25px;
|
|
flex: 0 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.icon-cover-card .icon-cover-icon > img,
|
|
.icon-cover-card .icon-cover-icon > svg {
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
max-width: 1.6em;
|
|
max-height: 1.6em;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* --- Text column: equal truncation --- */
|
|
.icon-cover-card .icon-cover-desc {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* --- Mobile: two columns + zibll padding overrides --- */
|
|
@media (max-width: 767px) {
|
|
.header-slider-card,
|
|
.header-components-card {
|
|
margin-top: -35px;
|
|
}
|
|
.header-slider-card .flex.flex-row.flex-col-sm-2,
|
|
.header-components-card .flex.flex-row.flex-col-sm-2 {
|
|
flex-wrap: wrap;
|
|
}
|
|
.header-slider-card .flex.flex-row.flex-col-sm-2 > *,
|
|
.header-components-card .flex.flex-row.flex-col-sm-2 > * {
|
|
flex-basis: 50%;
|
|
}
|
|
.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;
|
|
}
|
|
} |