kate522
e45bfc6eec
Homepage never loaded zibll-utilities (single-post only), so .gutters-5 padding was missing and cards stuck together while other pages looked correct.
230 lines
7.4 KiB
CSS
230 lines
7.4 KiB
CSS
/* Dark theme */
|
|
.theme-dark .header-components-search__form,
|
|
html.dark .header-components-search__form,
|
|
body.dark-theme .header-components-search__form {
|
|
background: rgba(30, 30, 30, 0.9);
|
|
}
|
|
|
|
.theme-dark .header-components-search__input,
|
|
html.dark .header-components-search__input,
|
|
body.dark-theme .header-components-search__input {
|
|
color: #eee;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 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)
|
|
*
|
|
* IMPORTANT: gutters/flex helpers must live here (not only zibll-utilities.css).
|
|
* zibll-utilities was single-post-only, so homepage cards stuck together while
|
|
* other pages that load utilities showed 10px gaps — exact user screenshot bug.
|
|
* ============================================================ */
|
|
|
|
/* Self-contained zibll flex + gutters for header cards (page-type independent) */
|
|
.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;
|
|
}
|
|
/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap */
|
|
.header-slider-card .gutters-5,
|
|
.header-components-card .gutters-5 {
|
|
margin: -5px;
|
|
}
|
|
.header-slider-card .gutters-5 > *,
|
|
.header-components-card .gutters-5 > * {
|
|
padding: 5px;
|
|
}
|
|
.header-slider-card .flex1,
|
|
.header-components-card .flex1,
|
|
.header-slider-card .flex .flex1,
|
|
.header-components-card .flex .flex1 {
|
|
flex: 1;
|
|
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;
|
|
/* Sit in normal flow after the slide shell; container is full-bleed */
|
|
width: 100%;
|
|
}
|
|
|
|
/* Ensure .container max-width + horizontal padding match site main (zibll .container) */
|
|
.header-slider-card.container,
|
|
.header-components-card.container {
|
|
width: 100%;
|
|
max-width: var(--container, var(--mian-max-width, 1200px));
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header-slider-card .zib-widget,
|
|
.header-components-card .zib-widget {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Match zibll widget surface so homepage and other page types look identical */
|
|
.header-slider-card .icon-cover-card.zib-widget,
|
|
.header-components-card .icon-cover-card.zib-widget {
|
|
margin-bottom: 0;
|
|
padding: var(--card-padding, 15px);
|
|
box-shadow: 0 0 10px var(--main-shadow, var(--shadow-sm, rgba(116, 116, 116, 0.08)));
|
|
border-radius: var(--main-radius, var(--radius, 8px));
|
|
background-color: var(--main-bg-color, var(--surface-1, #fff));
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.filter-blur .header-slider-card .zib-widget,
|
|
.filter-blur .header-components-card .zib-widget {
|
|
background: var(--blur-bg, rgba(255, 255, 255, 0.75));
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
/* Device-split blur (AKSRT extension of zibll filter-blur) */
|
|
@media (min-width: 768px) {
|
|
.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-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-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-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;
|
|
}
|