refactor(header): unify top icon-cards on single zib-widget path
This commit is contained in:
@@ -37,15 +37,6 @@ body {
|
||||
background-color: var(--surface-page);
|
||||
}
|
||||
|
||||
/* Shared horizontal icon-card contract.
|
||||
* Header components and widget areas use different layout wrappers, but the
|
||||
* card itself must retain the compact Zibll proportions in every context. */
|
||||
.icon-cover-card.aksrt-icon-cover-card {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* zibll compat: global link composite transition */
|
||||
a[href] {
|
||||
transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
@@ -100,8 +91,7 @@ main.container,
|
||||
|
||||
/* Header multifunc icon cards need horizontal gutter (zibll content rows).
|
||||
* Global .container padding is 0 for dual-column float math. */
|
||||
.header-slider-card.container,
|
||||
.header-components-card.container {
|
||||
.header-slider-card.container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
/* ============================================================
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user