From 8bad0c125269ef2c06a2bf5ccab7c80f27b41112 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 24 Jul 2026 11:45:15 +0800 Subject: [PATCH] fix(header): force 10px seams between homepage icon cards Harden gutters-5 child padding with higher specificity so homepage-fixed utilities cannot collapse header-slider card gaps. --- .../frontend/header-components/dark-theme.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/assets/css/frontend/header-components/dark-theme.css b/assets/css/frontend/header-components/dark-theme.css index fd001931..8255c75f 100644 --- a/assets/css/frontend/header-components/dark-theme.css +++ b/assets/css/frontend/header-components/dark-theme.css @@ -43,20 +43,28 @@ body.dark-theme .header-components-search__input { .header-components-card .ac { align-items: center; } -/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap */ +/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap. + * Use both gutters model AND flex gap so homepage (which used to miss + * zibll-utilities) and any future cascade zero-padding still show seams. */ .header-slider-card .gutters-5, -.header-components-card .gutters-5 { +.header-components-card .gutters-5, +.header-slider-card .flex.jse.flex-row, +.header-components-card .flex.jse.flex-row { margin: -5px; + gap: 0; /* spacing comes from child padding to match zibll exactly */ } .header-slider-card .gutters-5 > *, -.header-components-card .gutters-5 > * { - padding: 5px; +.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; } .header-slider-card .flex1, .header-components-card .flex1, .header-slider-card .flex .flex1, .header-components-card .flex .flex1 { - flex: 1; + flex: 1 1 0; overflow: hidden; min-width: 0; }