fix:首页顶部卡片共享背景布局
This commit is contained in:
1 parent
4ea8d5f8e8
commit
e2b5018fc1
3 files changed
+17
-4
No files matched your search
@@ -37,6 +37,15 @@ body {
|
|||||||
background-color: var(--surface-page);
|
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 */
|
/* zibll compat: global link composite transition */
|
||||||
a[href] {
|
a[href] {
|
||||||
transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
|
transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||||
|
|||||||
@@ -280,7 +280,9 @@ if (!function_exists('aksrt_icon_cover_card')) :
|
|||||||
// zibll: <a class="main-color" [target] href="...">
|
// zibll: <a class="main-color" [target] href="...">
|
||||||
$html .= '<a class="main-color" ' . ($tgt !== '' ? ltrim($tgt) . ' ' : '') . 'href="' . esc_url($url) . '">';
|
$html .= '<a class="main-color" ' . ($tgt !== '' ? ltrim($tgt) . ' ' : '') . 'href="' . esc_url($url) . '">';
|
||||||
}
|
}
|
||||||
$html .= '<div class="icon-cover-card flex ac ' . esc_attr((string) $args['class']) . '">';
|
// Keep every horizontal icon card on the same compact visual contract,
|
||||||
|
// regardless of the page-specific wrapper that renders it.
|
||||||
|
$html .= '<div class="icon-cover-card aksrt-icon-cover-card flex ac ' . esc_attr((string) $args['class']) . '">';
|
||||||
$html .= $icon;
|
$html .= $icon;
|
||||||
$html .= $text !== '' ? '<div class="icon-cover-desc ml10 flex1 px12-sm"> ' . $text . '</div>' : '';
|
$html .= $text !== '' ? '<div class="icon-cover-desc ml10 flex1 px12-sm"> ' . $text . '</div>' : '';
|
||||||
$html .= '</div>';
|
$html .= '</div>';
|
||||||
|
|||||||
@@ -14,20 +14,22 @@ test('icon card renderers keep vertical and horizontal Zibll DOM contracts separ
|
|||||||
const header = read('inc/helpers/homepage/header-components.php');
|
const header = read('inc/helpers/homepage/header-components.php');
|
||||||
|
|
||||||
assert.match(helper, /<div class="icon-card /);
|
assert.match(helper, /<div class="icon-card /);
|
||||||
assert.match(helper, /<div class="icon-cover-card flex ac /);
|
assert.match(helper, /<div class="icon-cover-card aksrt-icon-cover-card flex ac /);
|
||||||
assert.match(helper, /icon-cover-icon badg cir/);
|
assert.match(helper, /icon-cover-icon badg cir/);
|
||||||
assert.match(helper, /icon-cover-desc ml10 flex1 px12-sm/);
|
assert.match(helper, /icon-cover-desc ml10 flex1 px12-sm/);
|
||||||
assert.doesNotMatch(helper, /aksrt-icon-cover-card/);
|
assert.match(helper, /aksrt-icon-cover-card/);
|
||||||
assert.match(widgets, /'customize_icon' => \$card\['customize_icon'\] \?\? ''/);
|
assert.match(widgets, /'customize_icon' => \$card\['customize_icon'\] \?\? ''/);
|
||||||
assert.match(widgets, /'custom_icon'\s+=> \$card\['custom_icon'\] \?\? ''/);
|
assert.match(widgets, /'custom_icon'\s+=> \$card\['custom_icon'\] \?\? ''/);
|
||||||
assert.match(widgets, /'icon_image'\s+=> \$card\['icon_image'\] \?\? ''/);
|
assert.match(widgets, /'icon_image'\s+=> \$card\['icon_image'\] \?\? ''/);
|
||||||
assert.match(header, /empty\(\$card\['custom_icon'\]\)/);
|
assert.match(header, /empty\(\$card\['custom_icon'\]\)/);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('homepage horizontal cards only use Zibll surface and responsive padding rules', () => {
|
test('homepage horizontal cards use the shared compact card contract and retain Zibll responsive rules', () => {
|
||||||
const css = read('assets/css/frontend/header-components/dark-theme.css');
|
const css = read('assets/css/frontend/header-components/dark-theme.css');
|
||||||
|
const baseCss = read('assets/css/frontend/base.css');
|
||||||
const widgetCss = read('assets/widgets/frontend.css');
|
const widgetCss = read('assets/widgets/frontend.css');
|
||||||
|
|
||||||
|
assert.match(baseCss, /\.icon-cover-card\.aksrt-icon-cover-card\s*\{\s*padding:\s*10px;\s*font-size:\s*16px;/);
|
||||||
assert.match(css, /\.header-slider-card \.icon-cover-card\.zib-widget \{\s*padding: 10px;/);
|
assert.match(css, /\.header-slider-card \.icon-cover-card\.zib-widget \{\s*padding: 10px;/);
|
||||||
assert.match(css, /\.header-slider-card \.icon-cover-card\.padding-10 \{\s*padding: 2px;/);
|
assert.match(css, /\.header-slider-card \.icon-cover-card\.padding-10 \{\s*padding: 2px;/);
|
||||||
assert.doesNotMatch(css, /\.header-slider-card \.icon-cover-icon\.badg\.cir/);
|
assert.doesNotMatch(css, /\.header-slider-card \.icon-cover-icon\.badg\.cir/);
|
||||||
|
|||||||
Reference in new issue
Block a user