fix(layout): align color scheme, content width and fonts with reference theme
- Color scheme: zibll field order/labels, theme_skin_custom overrides palette, hex palette swatches, dark_theme_skin_custom, light/dark background images, close_backdrop via body.fps-accelerat, theme_main_radius drives --main-radius - Emit --theme-color / --focus-shadow-color / --focus-color-opacity* vars - Drop border_radius, primary_color readers and legacy value maps - Content max width: free 1200-2200 number field; fix font family/custom stack Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
6da08d9d4f
commit
74021d26bb
8 files changed
+319
-221
No files matched your search
@@ -13,28 +13,18 @@ class InlineStyleBuilder {
|
||||
$logo_url = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::logo_url() : (string) aksrt_get_setting('logo_url', '');
|
||||
$dark_logo_url = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::logo_dark_url() : (string) aksrt_get_setting('site_logo_dark', '');
|
||||
$favicon = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::favicon_url() : (string) aksrt_get_setting('favicon_url', '');
|
||||
$primary_color = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::resolved_primary_color() : '#f04494';
|
||||
$dark_primary = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::dark_primary_color() : '#f04494';
|
||||
$border_radius = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::border_radius() : 8;
|
||||
$card_radius = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::card_radius() : ($border_radius + 4);
|
||||
$primary_color = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::theme_color() : '#f04494';
|
||||
$dark_primary = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::dark_theme_color() : '';
|
||||
$main_radius = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::main_radius() : 12;
|
||||
$container_max = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::container_max_width() : 1200;
|
||||
$font_family = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::font_family() : 'system';
|
||||
$logo_width = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::logo_width() : 150;
|
||||
$sidebar_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_sidebar_config() : ['width' => 311, 'enabled' => true, 'position' => 'right'];
|
||||
|
||||
$content_width = $container_max === 0 ? '100%' : $container_max . 'px';
|
||||
$container_wide = $container_max === 0 ? '100%' : max(1280, $container_max + 160) . 'px';
|
||||
$radius_sm = max(0, $border_radius - 2);
|
||||
$radius_lg = $border_radius + 4;
|
||||
$radius_xl = $border_radius + 10;
|
||||
$rgb = $this->hex_to_rgb($primary_color);
|
||||
$primary_hover = $this->adjust_hex_color($primary_color, -0.12);
|
||||
$primary_active = $this->adjust_hex_color($primary_color, -0.22);
|
||||
$font_stacks = $this->resolve_font_stacks($font_family);
|
||||
|
||||
$dark_rgb = $this->hex_to_rgb($dark_primary);
|
||||
$dark_hover = $this->adjust_hex_color($dark_primary, -0.12);
|
||||
$dark_active = $this->adjust_hex_color($dark_primary, -0.22);
|
||||
$content_width = $container_max . 'px';
|
||||
$container_wide = max(1280, $container_max + 160) . 'px';
|
||||
$font_custom = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::font_family_custom() : '';
|
||||
$font_stacks = $this->resolve_font_stacks($font_family, $font_custom);
|
||||
|
||||
// legacy hard-codes 311px dual-column math; keep runtime width aligned to that
|
||||
// baseline when settings still hold the old 300 default (or empty).
|
||||
@@ -49,22 +39,7 @@ class InlineStyleBuilder {
|
||||
'--container-wide' => $container_wide,
|
||||
'--mian-max-width' => $content_width, // legacy typo token
|
||||
'--sidebar-width' => $sidebar_width . 'px',
|
||||
'--color-primary' => $primary_color,
|
||||
'--color-primary-hover' => $primary_hover,
|
||||
'--color-primary-active' => $primary_active,
|
||||
'--color-primary-soft' => sprintf('rgba(%d, %d, %d, 0.12)', $rgb[0], $rgb[1], $rgb[2]),
|
||||
'--color-primary-softer' => sprintf('rgba(%d, %d, %d, 0.06)', $rgb[0], $rgb[1], $rgb[2]),
|
||||
'--color-primary-rgb' => implode(', ', $rgb),
|
||||
'--focus-color' => $primary_color,
|
||||
'--radius-sm' => $radius_sm . 'px',
|
||||
'--radius' => $border_radius . 'px',
|
||||
'--radius-card' => $card_radius . 'px',
|
||||
// legacy --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',
|
||||
'--radius-card' => $main_radius . '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'],
|
||||
@@ -79,7 +54,9 @@ class InlineStyleBuilder {
|
||||
|
||||
echo '<style id="aksrt-runtime-vars">:root{';
|
||||
foreach ($layout_vars as $name => $value) {
|
||||
echo esc_html($name) . ':' . esc_attr($value) . ';';
|
||||
// esc_attr() would turn font-stack quotes into literal " inside <style>,
|
||||
// invalidating font-family; strip only characters that can break out of a declaration.
|
||||
echo esc_html($name) . ':' . $this->css_value((string) $value) . ';';
|
||||
}
|
||||
if ($logo_url) {
|
||||
echo '--aksrt-logo-url:"' . esc_url($logo_url) . '";';
|
||||
@@ -90,18 +67,26 @@ class InlineStyleBuilder {
|
||||
if ($favicon) {
|
||||
echo '--aksrt-favicon:"' . esc_url($favicon) . '";';
|
||||
}
|
||||
if ($dark_primary !== $primary_color) {
|
||||
echo '}html.dark{';
|
||||
echo '--color-primary:' . esc_attr($dark_primary) . ';';
|
||||
echo '--color-primary-hover:' . esc_attr($dark_hover) . ';';
|
||||
echo '--color-primary-active:' . esc_attr($dark_active) . ';';
|
||||
echo '--color-primary-soft:' . sprintf('rgba(%d,%d,%d,0.12)', $dark_rgb[0], $dark_rgb[1], $dark_rgb[2]) . ';';
|
||||
echo '--color-primary-softer:' . sprintf('rgba(%d,%d,%d,0.06)', $dark_rgb[0], $dark_rgb[1], $dark_rgb[2]) . ';';
|
||||
echo '--color-primary-rgb:' . esc_attr(implode(', ', $dark_rgb)) . ';';
|
||||
echo '--focus-color:' . esc_attr($dark_primary) . ';';
|
||||
}
|
||||
echo '}</style>' . "\n";
|
||||
|
||||
// 对齐参考主题 zib_head_css()：主题色变量与 --main-radius 挂在 body（main.css 的定义层级），
|
||||
// 夜间主题色仅在单独设置时覆盖 body.dark-theme。
|
||||
echo '<style id="aksrt-theme-color">body{' . $this->theme_color_vars($primary_color) . '--main-radius:' . (int) $main_radius . 'px;}';
|
||||
if ($dark_primary !== '') {
|
||||
echo 'html.dark body,body.dark-theme{' . $this->theme_color_vars($dark_primary) . '}';
|
||||
}
|
||||
if (class_exists('\AKSRT\Settings\Settings')) {
|
||||
$bg_css = \AKSRT\Settings\Settings::background_css('theme_img_bg');
|
||||
$dark_bg_css = \AKSRT\Settings\Settings::background_css('dark_theme_img_bg');
|
||||
if ($bg_css !== '') {
|
||||
echo 'body{' . $bg_css . '}';
|
||||
}
|
||||
if ($dark_bg_css !== '') {
|
||||
echo 'html.dark body,body.dark-theme{' . $dark_bg_css . '}';
|
||||
}
|
||||
}
|
||||
echo '</style>' . "\n";
|
||||
|
||||
if (class_exists('\AKSRT\Settings\Settings')) {
|
||||
$list_settings = \AKSRT\Settings\Settings::get_post_list_style_settings();
|
||||
$mobile_meta = sanitize_key((string) ($list_settings['list_meta_show'] ?? 'like'));
|
||||
@@ -130,9 +115,6 @@ class InlineStyleBuilder {
|
||||
}
|
||||
}
|
||||
|
||||
if (class_exists('\AKSRT\Settings\Settings') && !empty(\AKSRT\Settings\Settings::get_value('close_backdrop', false))) {
|
||||
echo '<style id="aksrt-no-backdrop">.aksrt-header,.header-inner,.site-header,.header,.mobile-nav-overlay,.modal-backdrop,.aksrt-drawer-overlay,.sidebar-inner{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-color:var(--bg-card,#fff)!important}</style>' . "\n";
|
||||
}
|
||||
echo '<style id="aksrt-runtime-components">'
|
||||
. '.aksrt-search-hot-keywords{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-family:var(--font-ui);}'
|
||||
. '.aksrt-search-hot-keywords__label{font-size:12px;color:var(--color-ink-3);}'
|
||||
@@ -143,27 +125,56 @@ class InlineStyleBuilder {
|
||||
. '</style>' . "\n";
|
||||
}
|
||||
|
||||
private function resolve_font_stacks(string $family): array {
|
||||
private function resolve_font_stacks(string $family, string $custom = ''): array {
|
||||
// Same system stack as tokens.css; "system" must not swap in a serif face.
|
||||
$system = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif';
|
||||
switch ($family) {
|
||||
case 'noto-sans-sc':
|
||||
return [
|
||||
'body' => '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
|
||||
'display' => '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
|
||||
'ui' => 'Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
|
||||
];
|
||||
$stack = '"Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif';
|
||||
break;
|
||||
case 'noto-serif-sc':
|
||||
return [
|
||||
'body' => '"Noto Serif SC", Georgia, "Songti SC", serif',
|
||||
'display' => '"Noto Serif SC", Georgia, "Songti SC", serif',
|
||||
'ui' => 'Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
|
||||
];
|
||||
$stack = '"Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, serif';
|
||||
break;
|
||||
case 'custom':
|
||||
$stack = $custom !== '' ? $custom . ', ' . $system : $system;
|
||||
break;
|
||||
default:
|
||||
return [
|
||||
'body' => '"Source Serif 4", "Noto Serif SC", Georgia, "Songti SC", "STSong", serif',
|
||||
'display' => '"Source Serif 4", "Noto Serif SC", Georgia, "Songti SC", "STSong", serif',
|
||||
'ui' => 'Inter, Manrope, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
|
||||
];
|
||||
$stack = $system;
|
||||
}
|
||||
return ['body' => $stack, 'display' => $stack, 'ui' => $stack];
|
||||
}
|
||||
|
||||
/** 参考主题色变量族（--theme-color / --focus-* 透明度）+ AKSRT --color-primary* 族；$hex 已由 Settings 校验。 */
|
||||
private function theme_color_vars(string $hex): string {
|
||||
$rgb = $this->hex_to_rgb($hex);
|
||||
$rgba = static function (float $alpha) use ($rgb): string {
|
||||
return sprintf('rgba(%d,%d,%d,%s)', $rgb[0], $rgb[1], $rgb[2], $alpha);
|
||||
};
|
||||
$vars = [
|
||||
'--theme-color' => $hex,
|
||||
'--focus-color' => $hex,
|
||||
'--focus-shadow-color' => $rgba(0.4),
|
||||
'--focus-color-opacity1' => $rgba(0.1),
|
||||
'--focus-color-opacity05' => $rgba(0.05),
|
||||
'--focus-color-opacity3' => $rgba(0.3),
|
||||
'--focus-color-opacity6' => $rgba(0.6),
|
||||
'--color-primary' => $hex,
|
||||
'--color-primary-hover' => $this->adjust_hex_color($hex, -0.12),
|
||||
'--color-primary-active' => $this->adjust_hex_color($hex, -0.22),
|
||||
'--color-primary-soft' => $rgba(0.12),
|
||||
'--color-primary-softer' => $rgba(0.06),
|
||||
'--color-primary-rgb' => implode(', ', $rgb),
|
||||
];
|
||||
$css = '';
|
||||
foreach ($vars as $name => $value) {
|
||||
$css .= $name . ':' . $this->css_value($value) . ';';
|
||||
}
|
||||
return $css;
|
||||
}
|
||||
|
||||
/** CSS-context escape for custom property values inside a <style> block. */
|
||||
private function css_value(string $value): string {
|
||||
return trim((string) preg_replace('/[<>{};\\\\]/', '', $value));
|
||||
}
|
||||
|
||||
private function hex_to_rgb(string $hex): array {
|
||||
|
||||
Reference in new issue
Block a user