diff --git a/assets/css/frontend/base.css b/assets/css/frontend/base.css index 6c289d27..3d61774d 100644 --- a/assets/css/frontend/base.css +++ b/assets/css/frontend/base.css @@ -133,12 +133,13 @@ main.container, } } -/* Soft pad only when the float dual-column is collapsed */ +/* Soft pad only when the float dual-column is collapsed. + * Match Zibll bootstrap container pad (15px) rather than 10px. */ @media (max-width: 991.98px) { .container, main.container { - padding-right: 10px; - padding-left: 10px; + padding-right: 15px; + padding-left: 15px; } } @@ -147,8 +148,8 @@ main.container, main.container { width: 100%; max-width: 100%; - padding-right: 10px; - padding-left: 10px; + padding-right: 15px; + padding-left: 15px; } } diff --git a/assets/css/frontend/layout.css b/assets/css/frontend/layout.css index 730151d4..44524ba2 100644 --- a/assets/css/frontend/layout.css +++ b/assets/css/frontend/layout.css @@ -120,7 +120,7 @@ body.site-layout-1 .content-layout--no-sidebar { margin-right: 0 !important; } -/* Sidebar RIGHT (layout 2) — Zibll main.css 1:1 */ +/* Sidebar RIGHT (layout 2) — hard 311px like Zibll main.css (runtime var must match) */ body.site-layout-2 .content-layout { margin-right: calc(var(--sidebar-width, 311px) + 15px); margin-left: 0; @@ -130,11 +130,10 @@ body.site-layout-2 .sidebar { float: left; width: var(--sidebar-width, 311px); margin-left: calc(0px - var(--sidebar-width, 311px)); - /* Zibll uses position:unset so sticky children aren't trapped */ position: unset; } -/* Sidebar LEFT (layout 3) — Zibll main.css 1:1 */ +/* Sidebar LEFT (layout 3) */ body.site-layout-3 .content-layout { margin-left: calc(var(--sidebar-width, 311px) + 15px); margin-right: unset; diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css index 69a1b92f..baac002a 100644 --- a/assets/css/frontend/nav/base.css +++ b/assets/css/frontend/nav/base.css @@ -1,6 +1,19 @@ -/* Zibll body.nav-fixed: reserve header space then pull hero under nav */ +/* Zibll body.nav-fixed: hard 88px reserve (main.css), not bare --nav-height. + * Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap. */ body.nav-fixed { - padding-top: var(--nav-height, 60px); + padding-top: 88px; +} + +@media (max-width: 768px) { + body.nav-fixed { + padding-top: 72px; + } +} + +@media (max-width: 640px) { + body.nav-fixed { + padding-top: 60px; + } } /* Fixed nav without hero overlay: take header out of flow. diff --git a/assets/css/frontend/single-post/author-actions.css b/assets/css/frontend/single-post/author-actions.css index f7f465ef..b9674b1a 100644 --- a/assets/css/frontend/single-post/author-actions.css +++ b/assets/css/frontend/single-post/author-actions.css @@ -104,11 +104,14 @@ margin-bottom: 16px; } +/* Zibll .post-actions — text/icon column buttons, not pill chips */ .post-actions-card, .post-actions { position: relative; text-align: center; margin-bottom: 16px; + padding-bottom: 15px; + display: block; } .post-actions-wrap > .post-actions { @@ -121,16 +124,65 @@ margin-bottom: 12px; } -.post-actions-card__buttons, -.post-actions { +/* Legacy card-buttons flex only for non-zibll card variant */ +.post-actions-card__buttons { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; } -.action-btn, -.action { +/* Zibll: .article .action { width:80px; padding:10px 0; inline-block; opacity:.7 } */ +.article .action, +.post-actions .action { + width: 80px; + padding: 10px 0; + display: inline-block; + opacity: 0.7; + vertical-align: top; + min-width: 0; + height: auto; + border-radius: 0; + border: 0; + background: transparent; + color: var(--muted-color, #777); + cursor: pointer; + font-size: 14px; + transition: opacity 0.15s ease, color 0.15s ease; + gap: 0; + text-align: center; +} + +.article .action:hover, +.post-actions .action:hover, +.article .action.is-active, +.post-actions .action.is-active { + color: inherit; + opacity: 1; + background: transparent; + border-color: transparent; +} + +.article .action i, +.post-actions .action i { + font-size: 20px; + display: block; + margin: 0 auto 4px; + line-height: 1; +} + +.post-actions .action .action-btn__count, +.post-actions .action .action-btn__label, +.action-btn__count, +.action-btn__label { + display: block; + font-size: 12px; + line-height: 1.2; + font-weight: 500; +} + +/* Keep pill style for non-article .action-btn if used elsewhere */ +.action-btn { display: inline-flex; align-items: center; gap: 6px; @@ -144,23 +196,18 @@ transition: all 0.15s ease; } -.action-btn:hover, -.action:hover { +.action-btn:hover { background: var(--color-primary-soft); color: var(--color-primary); } -.action-btn.is-active, -.action.is-active { +.action-btn.is-active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft, rgba(240, 68, 148, 0.08)); } -.action-btn i, -.action i { font-size: 1.2em; } -.action-btn__count { font-weight: 600; } -.action-btn__label { font-size: 13px; } +.action-btn i { font-size: 1.2em; } /* ===== 分享下拉面板 ===== */ @@ -525,41 +572,6 @@ html.dark .post-drop-meta__item:hover { display: block; } -.post-actions { - padding-bottom: 15px; - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 10px; -} - -.post-actions .action { - min-width: 3.2em; - height: 3.2em; - border-radius: 100px; - border: 0; - background: var(--muted-bg-color, #f2f2f2); - color: var(--muted-color, #777); - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - padding: 0 14px; - cursor: pointer; - transition: .15s; -} - -.post-actions .action:hover, -.post-actions .action.is-active { - color: var(--focus-color, #f04494); - background: var(--focus-color-opacity1, rgba(240,68,148,.1)); -} - -.post-actions .action i { - font-size: 16px; -} - - .article-tags br { flex-basis: 100%; width: 100%; content: ""; display: block; height: 0; } .article-tags .but.c-blue { color: #2196f3; } .article-tags .but.c-yellow { color: #f0ad4e; } diff --git a/inc/classes/frontend/class-aksrt-inline-style-builder.php b/inc/classes/frontend/class-aksrt-inline-style-builder.php index a6d372f8..718c02dc 100644 --- a/inc/classes/frontend/class-aksrt-inline-style-builder.php +++ b/inc/classes/frontend/class-aksrt-inline-style-builder.php @@ -43,12 +43,21 @@ class AKSRT_Inline_Style_Builder { $dark_hover = $this->adjust_hex_color($dark_primary, -0.12); $dark_active = $this->adjust_hex_color($dark_primary, -0.22); + // Zibll hard-codes 311px dual-column math; keep runtime width aligned to that + // baseline when settings still hold the old 300 default (or empty). + $sidebar_width = (int) ($sidebar_cfg['width'] ?? 311); + if ($sidebar_width <= 0 || $sidebar_width === 300) { + $sidebar_width = 311; + } + $sidebar_width = max(200, min(400, $sidebar_width)); + $layout_vars = [ '--content-max' => $content_width, '--content-no-sidebar-max' => $content_no_sidebar_max, '--container' => $content_width, '--container-wide' => $container_wide, - '--sidebar-width' => $sidebar_cfg['width'] . 'px', + '--mian-max-width' => $content_width, // zibll typo token + '--sidebar-width' => $sidebar_width . 'px', '--color-primary' => $primary_color, '--color-primary-hover' => $primary_hover, '--color-primary-active' => $primary_active, @@ -59,17 +68,21 @@ class AKSRT_Inline_Style_Builder { '--radius-sm' => $radius_sm . 'px', '--radius' => $border_radius . 'px', '--radius-card' => $card_radius . 'px', - '--main-radius' => $card_radius . 'px', + // Zibll --main-radius tracks the base radius (8), not the larger card radius. + '--main-radius' => $border_radius . 'px', '--radius-btn' => $border_radius . 'px', '--radius-code' => $border_radius . 'px', '--radius-lg' => $radius_lg . 'px', '--radius-xl' => $radius_xl . 'px', '--shadow-md' => '0 8px 24px rgba(20, 28, 48, 0.10)', + '--main-shadow' => 'rgba(116, 116, 116, 0.08)', '--font-body' => $font_stacks['body'], '--font-display' => $font_stacks['display'], '--font-ui' => $font_stacks['ui'], '--font-heading' => $font_stacks['ui'], '--aksrt-logo-width' => $logo_width . 'px', + '--nav-height' => '60px', + '--single-cover-scale' => '35%', '--posts-list-scale' => (class_exists('AKSRT_Settings') ? AKSRT_Settings::get_post_list_style_settings()['list_scale'] ?? 70 : 70) . '%', '--posts-card-scale' => (class_exists('AKSRT_Settings') ? AKSRT_Settings::get_post_list_style_settings()['card_scale'] ?? 70 : 70) . '%', ]; diff --git a/inc/classes/scripts-traits/trait-aksrt-scripts-part-1b.php b/inc/classes/scripts-traits/trait-aksrt-scripts-part-1b.php index 9cfe7fc9..21f9c63b 100644 --- a/inc/classes/scripts-traits/trait-aksrt-scripts-part-1b.php +++ b/inc/classes/scripts-traits/trait-aksrt-scripts-part-1b.php @@ -192,6 +192,32 @@ trait AKSRT_Scripts_Part_1b { // 单篇文章：所有 single 相关样式 if ($is_single_post) { + // Prefer discrete enqueues over CSS @import (cache-bust + parallel load). + $single_parts = [ + 'zibll-utilities', + 'single-post/shell', + 'single-post/content', + 'single-post/code-blocks', + 'single-post/navigation', + 'single-post/cover', + 'single-post/author-actions', + 'single-post/related-toc', + 'single-post/hidden-content', + ]; + $single_dep = $deps[0] ?? $core_dep; + foreach ($single_parts as $part) { + $path = get_template_directory() . '/assets/css/frontend/' . $part . '.css'; + if (!file_exists($path)) { + continue; + } + wp_enqueue_style( + 'aksrt-' . str_replace('/', '-', $part), + $base_uri . '/assets/css/frontend/' . $part . '.css', + is_string($single_dep) ? [$single_dep] : (array) $deps, + filemtime($path) ?: $version + ); + } + // Keep aggregator handle for any third-party deps that target it. $enqueue_module('single-post'); $enqueue_module('post-card'); // 相关推荐使用 post-card 局部样式 $enqueue_module('comments'); diff --git a/templates/parts/single-author-bar.php b/templates/parts/single-author-bar.php index 533a0850..2ae1c178 100644 --- a/templates/parts/single-author-bar.php +++ b/templates/parts/single-author-bar.php @@ -57,16 +57,16 @@ if (class_exists('AKSRT_User_Home')) { ?>
-
- - - 'avatar avatar-id-' . $author_id]); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> +