/*
Theme Name: B2子主题
Theme URI: http: //7b2.com/
Description: Child theme for the B2 PRO
Author: 子主题模版
Author URI: http: //7b2.com/
Template: b2
Version: 0.1.5
*/
/*下面是您自己DIY的css样式代码*/
/* ==========================================
B2 文章大纲 - 紧凑层级缩进 + 红色指示器
========================================== */
/* 1. 容器样式 - 减少顶部内边距 */
#b2-widget-toc-2 {
background: #ffffff;
border: 1px solid #e1e4e8;
border-radius: 8px;
padding: 18px 16px 16px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
margin-bottom: 20px;
}
/* 2. 标题样式 - 去掉上边距 */
#b2-widget-toc-2 .widget-title {
font-size: 16px;
font-weight: 600;
color: #24292f;
margin-top: 0 !important;
margin-left: 0 !important;
margin-bottom: 14px;
padding-top: 0 !important;
padding-left: 0 !important;
padding-bottom: 14px;
border-bottom: 1px solid #eaecef;
text-align: left;
}
/* 3. 重置内容盒子和列表样式 */
#b2-widget-toc-2 .b2-widget-box {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* 关键修复：父主题给 .b2-tab-content 加了 margin: 0 20px，导致内容整体偏右20px */
#b2-widget-toc-2 .b2-tab-content {
margin: 0 !important;
}
#b2-widget-toc-2 .b2-widget-box ul,
#b2-widget-toc-2 .b2-widget-box ol {
list-style: none;
margin: 0;
padding: 0;
}
/* 4. 所有链接基础样式 */
#b2-widget-toc-2 .b2-widget-box a {
display: block;
color: #57606a;
font-size: 13px;
line-height: 1.5;
padding: 5px 0 5px 12px;
text-decoration: none;
border-left: 2px solid transparent;
transition: all 0.2s ease;
position: relative;
}
/* 5. 鼠标悬停 - 只变红色，不加粗 */
#b2-widget-toc-2 .b2-widget-box a:hover {
color: #d32f2f !important; /* 文字变红色 */
background-color: #f6f8fa; /* 背景浅灰色 */
border-left-color: #d32f2f; /* 左边框也变红（可选） */
}
/* ==========================================
核心：紧凑层级缩进
========================================== */
/* 一级标题 (H2) - 不缩进 */
#b2-widget-toc-2 .b2-widget-box > ul > li,
#b2-widget-toc-2 .b2-widget-box > ol > li {
padding-left: 0 !important;
}
#b2-widget-toc-2 .b2-widget-box > ul > li > a,
#b2-widget-toc-2 .b2-widget-box > ol > li > a {
font-weight: 600;
color: #24292f;
padding-left: 0 !important;
}
/* 二级标题 (H3) - 缩进 12px */
#b2-widget-toc-2 .b2-widget-box ul ul,
#b2-widget-toc-2 .b2-widget-box ol ol {
padding-left: 12px !important;
border-left: 1px solid #e1e4e8;
margin-left: 0 !important;
margin-top: 2px;
}
/* 三级标题 (H4) - 再缩进 12px */
#b2-widget-toc-2 .b2-widget-box ul ul ul,
#b2-widget-toc-2 .b2-widget-box ol ol ol {
padding-left: 12px !important;
border-left: 1px solid #e1e4e8;
margin-left: 4px;
}
/* 四级标题 (H5) - 再缩进 12px */
#b2-widget-toc-2 .b2-widget-box ul ul ul ul,
#b2-widget-toc-2 .b2-widget-box ol ol ol ol {
padding-left: 12px !important;
border-left: 1px solid #e1e4e8;
margin-left: 4px;
}
/* 减小列表项之间的间距 */
#b2-widget-toc-2 .b2-widget-box li {
margin-bottom: 2px !important;
}
/* ==========================================
当前阅读位置高亮（红色竖线 + 红色文字）
========================================== */
/* 激活状态 - 只有左边红线和红色文字，没有背景色 */
#b2-widget-toc-2 .b2-widget-box a.active,
#b2-widget-toc-2 .b2-widget-box .active > a,
#b2-widget-toc-2 .b2-widget-box .is-active-link,
#b2-widget-toc-2 .b2-widget-box a[aria-current="true"] {
color: #d32f2f !important;
background-color: transparent !important;
border-left-color: #d32f2f !important;
border-left-width: 3px !important;
font-weight: 600;
}
/* 覆盖可能的蓝色和背景色 */
#b2-widget-toc-2 .b2-widget-box a.current,
#b2-widget-toc-2 .b2-widget-box .current > a {
color: #d32f2f !important;
background-color: transparent !important;
border-left-color: #d32f2f !important;
border-left-width: 3px !important;
}
/* ==========================================
文章内分隔线 - 细线样式
========================================== */
/* 所有分隔线变细 */
.entry-content hr,
.wp-block-separator {
border: none;
border-top: 1px solid #e1e4e8; /* 1px 细线，灰色 */
margin: 10px 0; /* 上下间距 */
opacity: 1; /* 确保可见（opacity范围是0-1） */
}
/* 文章内页：Gutenberg 分隔线强制“最简单细灰线”
适配你当前的：
*/
body.single-post .entry-content hr.wp-block-separator,
body.single-post .entry-content hr.wp-block-separator.has-alpha-channel-opacity,
body.single-post .entry-content hr.has-alpha-channel-opacity.wp-block-separator {
border: 0 !important;
height: 0 !important;
background: transparent !important;
opacity: 1 !important;
border-top: 1px solid #e1e4e8 !important; /* 最简单：1px 灰色线 */
margin: 12px 0 !important;
}
/* 如果你想要更细的线 */
.entry-content hr.is-style-default,
.wp-block-separator.is-style-default {
border-top-width: 0.5px; /* 超细线 */
}
/* 如果你想要红色的线（和你的主题色一致） */
.entry-content hr.custom-red,
.wp-block-separator.custom-red {
border-top: 2px solid #d32f2f; /* 红色线 */
}
/* ==========================================
📝 文章内页排版优化 - 完整版
所有排版参数都在这里，方便统一调整
========================================== */
/* 1️⃣ 正文基础排版 */
.entry-content,
.single-content,
.post-content,
.b2-single-content {
font-size: 18px !important; /* 正文字号 */
line-height: 1.8 !important; /* 正文行高（行间距） */
letter-spacing: 0.8px !important; /* 正文字间距 */
word-spacing: 1px !important; /* 正文词间距（英文） */
color: #333 !important; /* 正文颜色 */
-webkit-font-smoothing: antialiased; /* 字体平滑渲染 */
}
/* 2️⃣ 段落间距 */
.entry-content p {
margin-bottom: 0.4em !important; /* 段落之间的间距 */
}
/* 3️⃣ 标题样式 */
.entry-content h1 {
font-size: 32px !important; /* 一级标题字号 */
line-height: 1.4 !important; /* 一级标题行高 */
letter-spacing: 0.5px !important; /* 一级标题字间距 */
margin: 30px 0 20px !important; /* 一级标题上下间距 */
}
.entry-content h2 {
font-size: 24px !important; /* 二级标题字号 */
line-height: 1.4 !important; /* 二级标题行高 */
letter-spacing: 0.5px !important; /* 二级标题字间距 */
margin: 28px 0 18px !important; /* 二级标题上下间距 */
}
.entry-content h3 {
font-size: 20px !important; /* 三级标题字号 */
line-height: 1.5 !important; /* 三级标题行高 */
letter-spacing: 0.5px !important; /* 三级标题字间距 */
margin: 24px 0 16px !important; /* 三级标题上下间距 */
}
.entry-content h4 {
font-size: 18px !important; /* 四级标题字号 */
margin: 20px 0 14px !important; /* 四级标题上下间距 */
}
/* 4️⃣ 列表样式 */
.entry-content ul,
.entry-content ol {
margin-top: 0.8em !important; /* 列表上方间距 */
margin-bottom: 1.2em !important; /* 列表下方间距 */
padding-left: 0.2em !important; /* 列表左侧缩进 */
}
/* 段落到列表的间距 */
.entry-content p + ul,
.entry-content p + ol {
margin-top: 0.8em !important; /* 段落紧接列表的间距 */
}
/* 列表到段落的间距 */
.entry-content ul + p,
.entry-content ol + p {
margin-top: 1.2em !important; /* 列表紧接段落的间距 */
}
/* 列表项之间的间距 */
.entry-content li {
margin-bottom: 0.5em !important; /* 列表项之间的间距 */
line-height: 1.8 !important; /* 列表项行高 */
letter-spacing: 0.5px !important; /* 列表项字间距 */
}
/* 最后一个列表项不要底部间距 */
.entry-content li:last-child {
margin-bottom: 0 !important;
}
/* 嵌套列表（列表里的列表） */
.entry-content li ul,
.entry-content li ol {
margin-top: 0.3em !important; /* 嵌套列表上间距 */
margin-bottom: 0.3em !important; /* 嵌套列表下间距 */
}
/* 5️⃣ 引用块样式（极简：灰字 + 左线） */
.entry-content blockquote,
.content-show-roles blockquote {
margin: 1.2em 0 !important;
padding: 0 0 0 14px !important;
border-left: 3px solid #d9d9d9 !important;
background: transparent !important;
border-radius: 0 !important;
color: #0000008F !important;
font-family: inherit !important; /* 跟正文一致 */
font-size: inherit !important; /* 跟正文一致 */
line-height: inherit !important; /* 跟正文一致 */
letter-spacing: inherit !important; /* 跟正文一致 */
font-weight: inherit !important; /* 跟正文一致 */
}
.entry-content blockquote:before,
.entry-content blockquote:after,
.content-show-roles blockquote:before,
.content-show-roles blockquote:after {
display: none !important; /* 去掉主题默认引用图标 */
background: none !important;
}
.entry-content blockquote p,
.content-show-roles blockquote p,
.entry-content blockquote small,
.content-show-roles blockquote small {
color: #0000008F !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
font-weight: inherit !important;
font-style: normal !important;
}
/* 6️⃣ 代码样式 */
.entry-content code {
font-size: 14px !important; /* 行内代码字号 */
letter-spacing: 0 !important; /* 代码字间距（通常为0） */
}
.entry-content pre {
line-height: 1.6 !important; /* 代码块行高 */
margin: 1.5em 0 !important; /* 代码块上下间距 */
}
/* 7️⃣ 链接样式 */
.entry-content a {
letter-spacing: 0.5px !important; /* 链接字间距 */
}
/* 8️⃣ 图片说明文字 */
.entry-content figcaption,
.wp-caption-text {
font-size: 14px !important; /* 图片说明字号 */
line-height: 1.6 !important; /* 图片说明行高 */
letter-spacing: 0.3px !important; /* 图片说明字间距 */
color: #666 !important; /* 图片说明颜色 */
margin-top: 8px !important; /* 图片说明上间距 */
}
/* 9️⃣ 移动端适配（可选） */
@media (max-width: 768px) {
.entry-content {
font-size: 15px !important; /* 手机端正文字号 */
line-height: 1.8 !important; /* 手机端正文行高 */
}
.entry-content h1 { font-size: 24px !important; } /* 手机端一级标题 */
.entry-content h2 { font-size: 20px !important; } /* 手机端二级标题 */
.entry-content h3 { font-size: 18px !important; } /* 手机端三级标题 */
.entry-content ul,
.entry-content ol {
padding-left: 1.5em !important; /* 手机端列表缩进 */
}
}
/* ==========================================
✨ 文章内页字号（桌面端）
- 文章标题：34px
- 正文标题：H1=28 / H2=22 / H3=19
- 正文段落：17px
说明：仅对文章内页（single-post）桌面端生效，避免影响列表页/分类页与手机端
========================================== */
@media (min-width: 769px) {
/* 文章内页标题 */
body.single-post .entry-header h1 {
font-size: 28px !important;
}
/* 正文字号（段落等继承） */
body.single-post .entry-content,
body.single-post .single-content,
body.single-post .post-content,
body.single-post .b2-single-content {
font-size: 17px !important;
}
/* 正文标题字号 */
body.single-post .entry-content h1 { font-size: 28px !important; }
body.single-post .entry-content h2 { font-size: 22px !important; }
body.single-post .entry-content h3 { font-size: 19px !important; }
}
/* ==========================================
📷 文章内页图片样式优化（无悬浮效果）
作者：[你的名字]
日期：2026-01-21
说明：只对文章详情页的图片生效，不影响首页、列表页等
========================================== */
/* 文章内页图片基础样式 */
.single .entry-content img,
.single .post-content img,
.single .article-content img,
.single .wp-block-image img,
.single article img,
.single main img {
border: 2px solid #e6e6e6 !important; /* 灰色边框 */
border-radius: 8px !important; /* 圆角 8px */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; /* 投影效果 */
margin-top: 20px !important; /* 上间距 30px */
margin-bottom: 20px !important; /* 下间距 30px */
padding: 0 !important; /* 无内边距 */
max-width: 100% !important; /* 响应式宽度 */
height: auto !important; /* 自动高度 */
display: block !important; /* 块级元素 */
margin-left: auto !important; /* 左右居中 */
margin-right: auto !important;
}
/* 排除不需要样式的图片 */
.single .avatar,
.single .emoji,
.single img[class*="icon"],
.single .wp-smiley,
.single img[width="32"],
.single img[width="50"],
.single img[height="32"] {
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* 移动端适配 */
@media (max-width: 768px) {
.single .entry-content img,
.single article img {
border-radius: 6px !important; /* 手机端圆角小一点 */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important; /* 手机端投影浅一点 */
margin-top: 20px !important; /* 手机端间距小一点 */
margin-bottom: 20px !important;
}
}
/* ==========================================
✨ 新拟态红色按钮
========================================== */
/* 按钮容器：控制多个按钮的排列 */
.wp-block-buttons {
margin: 20px 0 !important; /* 上下间距：30px，左右：0 */
text-align: center !important; /* 按钮居中对齐 */
}
/* 单个按钮外层容器 */
.wp-block-button {
display: inline-block !important; /* 按钮横向排列 */
margin: 0 6px !important; /* 按钮之间的左右间距：6px */
}
/* 按钮本体：主要样式 */
.wp-block-button__link {
/* === 字体相关 === */
font-family: inherit !important; /* 继承网站字体 */
font-weight: 800 !important; /* 字体粗细：500（中等粗）可选：300细 / 400正常 / 600粗 / 700加粗 */
font-size: 14px !important; /* 字体大小：18px（可改：14px小 / 16px中 / 20px大） */
letter-spacing: 0.02em !important; /* 字间距：0.02em（可改：0无 / 0.05em宽松 / 0.1em很宽） */
color: #eaeaea !important; /* 文字颜色：浅灰色（可改：#ffffff纯白 / #f5f5f5更浅） */
/* === 尺寸和间距 === */
padding: 0.4em 0.6em !important; /* 内边距：上下0.7em 左右1.7em（可改：0.5em 1.2em更小 / 1em 2em更大） */
min-width: 90px !important; /* 最小宽度：120px（可改：100px更窄 / 150px更宽） */
/* === 形状和边框 === */
border-radius: 0.4em !important; /* 圆角大小：0.4em（可改：0无圆角 / 0.3em小圆角 / 1em大圆角 / 50px胶囊形） */
border: 1px solid #D81E06 !important; /* 边框：1px宽 实线 浅灰色（可改：2px更粗 / none无边框 / #ffffff白色边框） */
/* === 背景颜色 === */
background: #D81E06 !important; /* 背景色：深红色（可改：#d81e06亮红 / #a01515暗红 / #e62222鲜红） */
/* === 阴影效果（新拟态核心） === */
box-shadow: 3px 3px 15px #c5c5c5, /* 右下阴影：6px右移 6px下移 12px模糊 深灰色 */
-3px -3px 12px #ffffff !important; /* 左上高光：-6px左移 -6px上移 12px模糊 白色 */
/* 阴影调整说明：
- 第一个数字：水平偏移（正数向右，负数向左）
- 第二个数字：垂直偏移（正数向下，负数向上）
- 第三个数字：模糊半径（越大越模糊）
- 第四个参数：颜色
示例：
- 更浅：4px 4px 8px #d0d0d0, -4px -4px 8px #ffffff
- 更深：8px 8px 16px #b5b5b5, -8px -8px 16px #ffffff
- 内凹：inset 4px 4px 8px #b01515, inset -4px -4px 8px #e02323
*/
/* === 动画效果 === */
transition: all 0.3s ease !important; /* 过渡动画：所有属性 0.3秒 平滑（可改：0.2s更快 / 0.5s更慢） */
/* === 鼠标样式 === */
cursor: pointer !important; /* 鼠标悬停时显示手型 */
/* === 布局相关 === */
display: inline-flex !important; /* 弹性布局（让图标和文字并排） */
align-items: center !important; /* 垂直居中对齐 */
justify-content: center !important; /* 水平居中对齐 */
text-decoration: none !important; /* 移除下划线 */
}
/* === 鼠标悬停效果 === */
.wp-block-button__link:hover {
border: 1px solid rgb(212, 0, 0) !important; /* 边框变深红色（可改：#ff0000鲜红 / #8a1414暗红） */
/* 可选的悬停效果（取消注释即可使用）： */
/* background: #d81e06 !important; */ /* 背景变亮 */
/* transform: scale(1.05) !important; */ /* 放大 5% */
/* transform: translateY(-2px) !important; */ /* 向上移动 2px */
/* box-shadow: 8px 8px 16px #b5b5b5, -8px -8px 16px #ffffff !important; */ /* 阴影加强 */
}
/* === 点击效果 === */
.wp-block-button__link:active {
box-shadow: 4px 4px 12px #c5c5c5, /* 阴影变小：模拟按下效果 */
-4px -4px 12px #ffffff !important;
/* 可选的点击效果（取消注释即可使用）： */
/* transform: scale(0.95) !important; */ /* 缩小 5% */
/* transform: translateY(2px) !important; */ /* 向下移动 2px */
}
/* === 移除 WordPress 默认样式 === */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
border: 1px solid #e8e8e8 !important; /* 强制使用自定义边框 */
background: #c91c1c !important; /* 强制使用自定义背景 */
color: #eaeaea !important; /* 强制使用自定义文字颜色 */
}
/* ==========================================
✨ 自定义文字选中颜色
========================================== */
/* 选中文字的样式 */
::selection {
background: #d81e06 !important; /* 选中背景色：红色 */
color: #ffffff !important; /* 选中文字颜色：白色 */
}
/* 兼容 Firefox 浏览器 */
::-moz-selection {
background: #d81e06 !important; /* 选中背景色：红色 */
color: #ffffff !important; /* 选中文字颜色：白色 */
}
/* ==========================================
✨ B站视频嵌入样式（优化版）
========================================== */
/* 外层容器 */
.bilibili-video-wrapper {
margin: 30px auto !important; /* 上下间距：30px，左右：auto居中 */
padding: 0 !important;
max-width: 100% !important;
position: relative !important;
}
/* 顶部标签："点击前往B站观看" */
.bilibili-video-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important; /* 图标和文字间距：6px */
/* === 位置 === */
position: relative !important;
margin-bottom: 12px !important; /* 和视频的间距：12px */
/* === 样式 === */
background: linear-gradient(135deg, #00a1d6, #00b5e5) !important; /* B站蓝色渐变 */
color: #ffffff !important; /* 白色文字 */
padding: 8px 16px !important; /* 内边距：上下8px 左右16px */
border-radius: 10px 10px 1px 1px !important; /* 上方大圆角，下方小圆角 */
font-size: 13px !important; /* 字体大小：13px */
font-weight: 500 !important; /* 字体粗细：中等 */
text-decoration: none !important; /* 无下划线 */
/* === 阴影 === */
box-shadow: 0 2px 8px rgba(0, 161, 214, 0.3) !important;
/* === 动画 === */
transition: all 0.3s ease !important;
/* === 鼠标样式 === */
cursor: pointer !important;
}
/* 标签悬停效果 */
.bilibili-video-badge:hover {
background: linear-gradient(135deg, #0084b0, #009ac7) !important; /* 深蓝色 */
transform: translateY(12px) !important; /* 向上移动 */
box-shadow: 0 4px 12px rgba(0, 161, 214, 0.4) !important; /* 阴影加强 */
}
/* 标签内的图标 */
.bilibili-video-badge svg {
flex-shrink: 0 !important; /* 图标不缩小 */
}
/* 视频容器：16:9 响应式 */
.bilibili-video-container {
position: relative !important;
width: 100% !important;
height: 0 !important; /* 高度为0，通过padding-bottom撑开 */
padding-bottom: 56.25% !important; /* 16:9 比例 = 9/16 = 56.25% */
/* === 圆角和阴影 === */
border-radius: 3px !important; /* 圆角：4px */
overflow: hidden !important; /* 隐藏溢出（保持圆角） */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; /* 轻微阴影 */
/* === 背景 === */
background: #000000 !important; /* 黑色背景（加载时显示） */
/* === 动画 === */
transition: all 0.3s ease !important;
}
/* 视频容器悬停效果 */
.bilibili-video-container:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important; /* 阴影加强 */
transform: translateY(-1px) !important; /* 向上移动 */
}
/* iframe 播放器：绝对定位填满容器 */
.bilibili-video-container iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: #000000 !important;
}
/* === 响应式：手机端 === */
@media (max-width: 768px) {
.bilibili-video-wrapper {
margin: 20px 0 !important; /* 手机端减小间距 */
}
.bilibili-video-badge {
font-size: 12px !important; /* 手机端小字体 */
padding: 6px 12px !important; /* 手机端小内边距 */
margin-bottom: 8px !important; /* 手机端小间距 */
}
.bilibili-video-container {
border-radius: 8px !important; /* 手机端小圆角 */
}
.bilibili-video-container:hover {
transform: none !important; /* 手机端禁用悬停效果 */
}
}
/* === 响应式：平板端 === */
@media (min-width: 769px) and (max-width: 1024px) {
.bilibili-video-wrapper {
max-width: 90% !important; /* 平板端限制宽度 */
}
}
/* === 响应式：桌面端 === */
@media (min-width: 1025px) {
.bilibili-video-wrapper {
max-width: 900px !important; /* 桌面端最大宽度：900px */
}
}
/* ==========================================
✨ 隐藏文章顶部元信息
========================================== */
/* 说明：
之前为了“极简”把文章页顶部元信息整块隐藏了（含日期/浏览量等）。
现在需要恢复“标题区域”的日期与浏览量展示，因此这里不再隐藏整个元信息区域。 */
/* ✅ 已取消（如需再次隐藏，取消下面注释即可）
.single-article #post-meta,
.single-article .post-meta-row,
.single-article .entry-meta {
display: none !important;
}
*/
/* 隐藏标签 */
.single-article .post-tags,
.single-article .entry-tags,
.single-article .tag-links {
display: none !important;
}
/* 隐藏分类 */
.single-article .post-categories,
.single-article .cat-links {
display: none !important;
}
/* ✅ 已取消隐藏日期（保持主题默认展示） */
/* .single-article .post-date,
.single-article .entry-date,
.single-article .published {
display: none !important;
}
*/
/* ✅ 已取消隐藏浏览量（保持主题默认展示） */
/* .single-article .post-views,
.single-article .views-count {
display: none !important;
}
*/
/* 隐藏点赞数 */
.single-article .post-like,
.single-article .like-count {
display: none !important;
}
/* 隐藏文章页顶部“喜欢/点赞”(heart + 数字) */
.single-article #post-meta li.single-like,
.single-article #post-meta .single-like{
display: none !important;
}
/* 隐藏评论数 */
.single-article .post-comments,
.single-article .comments-count {
display: none !important;
}
/* 调整标题间距 */
.single-article .entry-header {
margin-bottom: 0 !important; /* 由 #post-meta 的 margin-bottom 控制与正文的距离 */
padding-bottom: 0 !important;
}
.single-article .entry-header h1 {
margin-bottom: 12px !important; /* 兜底：后面会用变量统一 */
}
/* ==========================================
✨ 文章标题居中（简洁版）
========================================== */
.single-article .entry-header {
text-align: left !important;
}
.single-article .entry-header h1 {
text-align: left !important;
margin-bottom: 12px !important; /* 兜底：后面会用变量统一 */
}
/* ==========================================
✨ 文章内页：元信息与标签样式（标签保持底部默认位置）
========================================== */
/* 统一“标题 → 元信息”与“元信息 → 正文”的间距 */
:root{
--single-header-gap: 12px; /* 标题↔元信息、元信息↔正文 统一间距 */
--single-accent: #D81E06; /* 分类/标签描边与文字色 */
}
.single-article #post-meta{
margin-top: 0 !important;
margin-bottom: var(--single-header-gap) !important;
padding-left: 0 !important;
}
.single-article #post-meta,
.single-article #post-meta a,
.single-article #post-meta span,
.single-article #post-meta i{
color: #0000008F !important; /* 时间 / 预览量等统一灰色 */
}
.single-article #post-meta svg{
fill: #0000008F !important;
}
.single-article #post-meta .post-list-cat{
display: none !important;
flex-wrap: wrap !important;
gap: 8px !important;
background: transparent !important; /* 取消红底容器底色 */
padding: 0 !important;
border-radius: 0 !important;
}
/* 隐藏分类所在首项，避免发布时间起始位被占 */
.single-article #post-meta .post-meta > li:first-child{
display: none !important;
}
/* 发布时间左对齐文章标题 */
.single-article #post-meta .post-meta{
margin: 0 !important;
padding-left: 0 !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
/* 标题下方面包屑（首页 / 大分类 / 小分类） */
.single-article .b2child-single-breadcrumb{
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0 0 12px 0 !important;
padding: 0 !important;
font-size: 12px !important;
line-height: 1.4;
color: #0000008F;
font-weight: 400;
}
.single-article .b2child-single-breadcrumb a{
color: #0000008F !important;
text-decoration: none;
}
.single-article .b2child-single-breadcrumb a:hover{
color: #0000008F !important;
}
.single-article .b2child-single-breadcrumb .sep{
margin: 0 8px;
color: #0000008F;
}
/* 分类：同款描边镂空（不加 # 前缀） */
.single-article #post-meta .post-list-cat-item{
display: inline-flex !important;
align-items: center !important;
padding: 6px 12px !important;
border: 1px solid var(--single-accent) !important;
border-radius: 3px !important;
background: transparent !important;
color: var(--single-accent) !important;
text-decoration: none !important;
line-height: 1.1 !important;
font-size: 13px !important;
}
.single-article #post-meta .post-list-cat-item:hover{
background: rgba(0,0,0,.03) !important;
}
.single-article .entry-header h1{
margin-bottom: var(--single-header-gap) !important;
}
.single-article .post-tags-meat {
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 8px !important;
margin: 12px 0 0 !important; /* 底部标签区域顶部留一点呼吸感 */
padding-top: 12px !important;
border-top: 1px solid #e9e9e9 !important; /* 标签上方细线分割 */
text-align: left !important;
}
.single-article .post-tags-meat a {
margin-right: 0 !important; /* 使用 gap 控制间距 */
margin-bottom: 0 !important;
display: inline-flex !important;
align-items: center !important;
padding: 6px 12px !important;
border: 1px solid var(--single-accent) !important; /* 矩形描边 */
border-radius: 3px !important; /* 轻微圆角（更接近截图的“矩形”） */
background: transparent !important; /* 镂空 */
color: var(--single-accent) !important; /* 文字颜色 */
text-decoration: none !important;
line-height: 1.1 !important;
font-size: 13px !important;
box-shadow: none !important;
}
/* 取消标签前的小图标，改为 “#” 前缀 */
.single-article .post-tags-meat a .tag-img,
.single-article .post-tags-meat a .tag-img *,
.single-article .post-tags-meat a i{
display: none !important;
}
.single-article .post-tags-meat a::before{
content: "#" !important;
margin-right: 4px !important;
color: inherit !important;
}
.single-article .post-tags-meat a:hover{
background: rgba(0,0,0,.03) !important;
}
/* ==========================================
✨ 自定义分类侧边栏样式
（用于分类/归档页的大分类展示）
========================================== */
/* === 整体布局 === */
.archive .b2-single-content {
display: flex !important;
gap: 30px !important;
}
/* === 左侧侧边栏 === */
.custom-category-sidebar {
flex: 0 0 220px !important; /* 固定宽度：220px */
position: sticky !important; /* 固定定位 */
top: 80px !important; /* 距离顶部：80px */
height: fit-content !important; /* 高度自适应 */
background: #ffffff !important; /* 白色背景 */
border-radius: 8px !important; /* 圆角：8px */
padding: 20px !important; /* 内边距：20px */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; /* 阴影 */
}
/* 侧边栏标题 */
.custom-category-sidebar .sidebar-title {
font-size: 18px !important;
font-weight: 600 !important;
color: #333333 !important;
margin-bottom: 20px !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #f0f0f0 !important;
}
/* === 大分类列表 === */
.custom-category-sidebar .category-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.custom-category-sidebar .category-item {
margin-bottom: 8px !important;
}
.custom-category-sidebar .category-item > a {
display: block !important;
padding: 10px 15px !important;
color: #666666 !important;
text-decoration: none !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
font-size: 15px !important;
font-weight: 500 !important;
}
.custom-category-sidebar .category-item > a:hover {
background: #f5f5f5 !important;
color: #d81e06 !important;
}
.custom-category-sidebar .category-item.active > a {
background: #d81e06 !important;
color: #ffffff !important;
}
/* === 子分类列表 === */
.custom-category-sidebar .sub-category-list {
list-style: none !important;
padding: 8px 0 0 15px !important;
margin: 0 !important;
}
.custom-category-sidebar .sub-category-item {
margin-bottom: 4px !important;
}
.custom-category-sidebar .sub-category-item a {
display: block !important;
padding: 6px 12px !important;
color: #999999 !important;
text-decoration: none !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
position: relative !important;
padding-left: 20px !important;
}
/* 子分类前的小圆点 */
.custom-category-sidebar .sub-category-item a::before {
content: "•" !important;
position: absolute !important;
left: 8px !important;
color: #cccccc !important;
}
.custom-category-sidebar .sub-category-item a:hover {
background: #f9f9f9 !important;
color: #d81e06 !important;
}
.custom-category-sidebar .sub-category-item.active a {
background: #fff5f5 !important;
color: #d81e06 !important;
font-weight: 500 !important;
}
.custom-category-sidebar .sub-category-item.active a::before {
color: #d81e06 !important;
}
/* === 右侧内容区域 === */
.archive .b2-single-content > .content-area {
flex: 1 !important;
}
/* === 响应式：手机端 === */
@media (max-width: 768px) {
.archive .b2-single-content {
flex-direction: column !important;
}
.custom-category-sidebar {
flex: 0 0 auto !important;
width: 100% !important;
position: static !important;
margin-bottom: 20px !important;
}
}
/*下面是您自己DIY的css样式代码*/
/* ============================================
🔧 全局隐藏顶部右上角搜索框（所有页面生效）
============================================ */
/* 隐藏主题自带的搜索框（所有页面） */
.header-banner-right .top-search,
.top-search,
.header-search,
.mobile-search-input,
.top-search-icon,
.filters-box .search-form,
.filter-right,
#filter-top .filter-right {
display: none !important;
}
/* ============================================
🔧 调整顶部高度
============================================ */
/* ============================================
📌 首页顶部样式 - 可自定义参数
============================================ */
/* 首页顶部容器 */
.home .site-header {
height: auto !important;
min-height: 0 !important;
position: relative !important;
}
/* 首页隐藏空的 header-banner 区域 */
.home .header-banner {
display: none !important;
}
/* === 👇 在这里调整首页顶部间距 === */
/* 顶部白色区域的内边距 */
.home .site-header-in {
padding-top: 0px !important; /* 顶部内边距（Logo上方空白，可改：0px、5px、15px、20px） */
padding-bottom: 0px !important; /* 底部内边距（菜单下方空白，可改：0px、5px、15px、20px） */
}
/* 顶部整体区域与下方内容的间距 */
.home .site-content {
margin-top: 120px !important; /* 顶部区域与下方模块的间距（可改：-20px往上、10px、20px往下） */
}
/* 分类页面：固定高度 */
.archive .site-header,
.tax-ziyuan_cat .site-header {
height: 60px !important;
}
/* 分类页面隐藏 header-banner */
.archive .header-banner,
.tax-ziyuan_cat .header-banner {
display: none !important;
}
/* ============================================
📌 搜索结果页面专用样式 - 在这里调整间距
============================================ */
/* 搜索页面：header-banner 高度为0但菜单可见 */
.search .header-banner,
.search-results .header-banner {
height: 0 !important; /* 高度为0，不占用空间 */
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important; /* 允许内容（菜单）溢出显示 */
}
/* 👇👇👇 在这里调整搜索结果页面的顶部间距 👇👇👇 */
/* 搜索页面：整体内容区域的上边距 */
.search .site-content,
.search-results .site-content {
padding-top: 0px !important; /* 👈👈👈 调整这里：整个内容区域距离顶部的距离（可改：60px、100px、120px、150px） */
}
/* 搜索栏到搜索结果的间距 */
.search #filter-top,
.search-results #filter-top {
margin-bottom: 30px !important; /* 👈👈👈 调整这里：搜索栏底部的间距（可改：20px、40px、50px、60px） */
}
/* 搜索结果列表的顶部间距 */
.search .posts-wrapper,
.search-results .posts-wrapper,
.search .post-loop,
.search-results .post-loop {
margin-top: 20px !important; /* 👈👈👈 调整这里：搜索结果列表的顶部间距（可改：10px、30px、40px、50px） */
}
/* 其他页面：正常高度 */
.single .site-header,
.page .site-header {
height: auto !important;
min-height: 0 !important;
}
/* ============================================
📌 文章内页 + 页面顶部样式 - 删除大空白
============================================ */
/* 文章页面 + 普通页面：隐藏顶部空白区域 */
.single .header-banner,
.single-post .header-banner,
.single-document .header-banner,
.page .header-banner {
display: none !important;
}
/* 文章页面 + 普通页面：顶部内边距 */
.single .site-header-in,
.single-post .site-header-in,
.single-document .site-header-in,
.page .site-header-in {
padding-top: 5px !important; /* 顶部间距 */
padding-bottom: 5px !important; /* 底部间距 */
}
/* 文章页面 + 普通页面：内容区域与顶部的间距 */
.single .site-content,
.single-post .site-content,
.single-document .site-content,
.page .site-content {
margin-top: 0px !important;
padding-top: 130px !important; /* 👈 固定导航高度121px + 约10px间距（可改：120px紧凑、130px适中、150px宽松） */
}
/* ============================================
DAZED 风格顶部菜单栏 - 无动效 红色版
============================================ */
/* 顶部搜索框已删除 */
/* 顶部菜单容器 - 底部边框线（所有页面生效） */
.social-top .site-header-in,
.site-header-in {
border-bottom: 2px solid #e0e0e0; /* 底部线条：粗细和颜色 */
background: #fff !important;
top: 0 !important; /* 贴紧视口最顶部，消除小间隙 */
}
/* 确保顶部菜单在所有页面都显示 */
.top-menu,
.header-banner-left .menu {
display: flex !important;
visibility: visible !important;
}
/* 菜单整体居中 */
.top-menu {
display: flex;
justify-content: center !important;
align-items: center;
}
.top-menu ul {
display: flex;
justify-content: center !important;
align-items: center;
gap: 0;
}
/* 菜单项间距 */
.top-menu ul li {
margin: 0 30px !important;
transform: translateY(8px); /* 整体下移8px，不影响flex居中和红色块内文字居中 */
}
/* 强制去除所有菜单动效 */
.top-menu ul li,
.top-menu ul li a,
.top-menu ul li a *,
.top-menu ul li a:before,
.top-menu ul li a:after {
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
animation: none !important;
-webkit-animation: none !important;
}
/* 菜单链接默认样式 */
.top-menu ul li a {
display: block;
padding: 10px 20px !important; /* 固定内边距：上下10px 左右20px（悬停时不变） */
font-size: 16px !important; /* 字体大小（中文建议：16-18px） */
font-weight: 600 !important; /* 字体粗细（400=正常 600=半粗 700=粗体） */
letter-spacing: 0.5px; /* 字间距 */
color: #333 !important; /* 默认文字颜色 */
background-color: transparent !important; /* 默认无背景 */
transition: none !important; /* 无动效 */
-webkit-transition: none !important; /* Safari/Chrome 无动效 */
-moz-transition: none !important; /* Firefox 无动效 */
-o-transition: none !important; /* Opera 无动效 */
position: relative;
border-radius: 0px; /* 圆角（0=直角 4px=小圆角） */
}
/* ========== 鼠标悬停效果 - 出现红色块 ========== */
.top-menu ul li a:hover {
background-color: #D81E06 !important; /* 悬停色块颜色：红色 */
color: #fff !important; /* 悬停文字颜色：白色 */
padding: 10px 20px !important; /* 保持相同内边距，不改变大小 */
border-radius: 4px !important; /* 圆角：与子分类一致 */
}
/* ========== 当前页面菜单 - 保持红色块 ========== */
.top-menu ul li.current-menu-item a,
.top-menu ul li.current_page_item a,
.top-menu ul li.current-menu-ancestor a {
background-color: #D81E06 !important; /* 当前页色块颜色：红色 */
color: #fff !important; /* 当前页文字颜色：白色 */
padding: 10px 20px !important; /* 保持相同内边距 */
border-radius: 4px !important; /* 圆角：与子分类一致 */
}
/* 当前页鼠标悬停时保持样式 */
.top-menu ul li.current-menu-item a:hover,
.top-menu ul li.current_page_item a:hover {
background-color: #D81E06 !important; /* 保持红色 */
color: #fff !important; /* 保持白色 */
border-radius: 4px !important; /* 圆角：与子分类一致 */
}
/* 移除原来的下划线效果 */
.top-menu ul li.current-menu-item.depth-0 > a .hob,
.header-banner-left .menu > li.current-menu-item > a:after {
display: none !important;
}
/* ============================================
子菜单样式 - 悬停展开
============================================ */
/* 一级菜单项（有子菜单的）需要相对定位 */
.top-menu > ul > li {
position: relative !important;
}
/* 子菜单默认隐藏 */
.top-menu ul li .sub-menu,
.top-menu ul li ul {
display: none !important; /* 默认隐藏 */
position: absolute !important; /* 绝对定位 */
top: 100% !important; /* 位于父菜单下方 */
left: 50% !important; /* 居中对齐 */
transform: translateX(-50%) !important; /* 居中 */
min-width: 180px !important; /* 最小宽度：180px */
background: #ffffff !important; /* 白色背景 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; /* 阴影 */
border-radius: 8px !important; /* 圆角：8px */
padding: 12px 0 !important; /* 上下内边距：12px */
margin-top: 0px !important; /* 距离父菜单：8px */
z-index: 9999 !important; /* 层级最高 */
}
/* 鼠标悬停在父菜单时显示子菜单 */
.top-menu ul li:hover > .sub-menu,
.top-menu ul li:hover > ul {
display: block !important; /* 显示子菜单 */
}
/* 子菜单项样式 */
.top-menu ul li .sub-menu li,
.top-menu ul li ul li {
margin: 0 !important; /* 无外边距 */
display: block !important; /* 块级元素 */
}
/* 子菜单链接样式 */
.top-menu ul li .sub-menu li a,
.top-menu ul li ul li a {
display: block !important;
padding: 10px 20px !important; /* 内边距：上下10px 左右20px */
font-size: 14px !important; /* 字体：14px */
font-weight: 500 !important; /* 字体粗细：中等 */
color: #666 !important; /* 文字颜色：灰色 */
background-color: transparent !important; /* 无背景 */
white-space: nowrap !important; /* 不换行 */
border-radius: 0 !important; /* 无圆角 */
}
/* 子菜单链接悬停效果 */
.top-menu ul li .sub-menu li a:hover,
.top-menu ul li ul li a:hover {
background-color: #f5f5f5 !important; /* 浅灰色背景 */
color: #D81E06 !important; /* 红色文字 */
padding: 10px 20px !important; /* 保持内边距 */
}
/* 子菜单当前页样式 */
.top-menu ul li .sub-menu li.current-menu-item a,
.top-menu ul li ul li.current-menu-item a {
background-color: #D81E06 !important; /* 红色背景 */
color: #fff !important; /* 白色文字 */
}
/* 移动端适配 */
@media (max-width: 768px) {
.top-menu ul li {
margin: 0 10px !important; /* 手机端菜单间距 */
}
.top-menu ul li a {
font-size: 14px !important; /* 手机端字体 */
padding: 15px 10px !important;
}
.top-menu ul li a:hover,
.top-menu ul li.current-menu-item a {
padding: 15px 15px !important; /* 手机端色块大小 */
}
/* 手机端子菜单全宽显示 */
.top-menu ul li .sub-menu,
.top-menu ul li ul {
left: 0 !important;
right: 0 !important;
transform: none !important;
min-width: 100% !important;
}
}
/* ============================================
📌 分类页面筛选样式 - 可自定义参数
（用于分类/归档页的大分类筛选展示）
============================================ */
/* 隐藏第一个筛选项（大分类行） */
#filter-top ul li:first-child {
display: none !important; /* 隐藏大分类（改为 block 则显示） */
}
/* === 整体容器样式 === */
#filter-top {
text-align: center !important;
padding: 2px 0 0 0 !important; /* 上间距5px，下间距0（紧凑） */
overflow: visible !important;
min-height: auto !important;
background: transparent !important;
}
.filters-box {
display: inline-block !important;
text-align: left !important;
width: auto !important;
}
.filters-box > ul {
overflow: visible !important;
}
/* === 筛选行样式 === */
#filter-top ul li {
justify-content: center !important;
padding: 8px 20px !important; /* 筛选行内边距（更紧凑） */
overflow: visible !important;
}
/* 隐藏左侧标签名（如"资源分类："） */
#filter-top ul li .filter-name {
display: none !important; /* 隐藏标签名（改为 block 则显示） */
}
/* === 按钮容器样式 === */
#filter-top ul li .filter-items {
justify-content: center !important;
gap: 10px !important; /* 按钮之间的间距（可改：5px、8px、12px、15px） */
}
/* ================================================
📌 分类按钮样式 - 主要调整区域
================================================ */
#filter-top .filter-items a {
/* --- 按钮尺寸 --- */
padding: 18px 18px !important; /* 按钮内边距：上下8px 左右18px（可改：6px 12px 小、10px 24px 大） */
/* --- 字体设置 --- */
font-size: 14px !important; /* 字体大小（可改：12px小、13px中小、15px中大、16px大） */
font-weight: 500 !important; /* 字体粗细（400=正常、500=中等、600=半粗、700=粗体） */
letter-spacing: 0.5px !important; /* 字间距（可改：0px、1px、2px） */
/* --- 颜色设置 --- */
color: #666 !important; /* 默认文字颜色（可改：#333深灰、#999浅灰、#000黑色） */
background: #fff !important; /* 默认背景色（可改：#f5f5f5浅灰、transparent透明） */
/* --- 边框设置 --- */
border: 1px solid #e0e0e0 !important; /* 边框：粗细 样式 颜色（可改：2px、#ccc、#ddd） */
border-radius: 4px !important; /* 圆角（可改：0px直角、6px中圆角、20px大圆角、50px胶囊） */
/* --- 文字居中 --- */
display: inline-flex !important; /* 弹性布局 */
align-items: center !important; /* 垂直居中 */
justify-content: center !important; /* 水平居中 */
text-align: center !important; /* 文字居中 */
line-height: 1 !important; /* 行高为1，确保垂直居中 */
/* --- 其他设置 --- */
transition: none !important;
text-decoration: none !important;
max-width: none !important;
overflow: visible !important;
text-overflow: unset !important;
white-space: nowrap !important;
}
/* === 鼠标悬停效果 === */
#filter-top .filter-items a:hover {
background: #f5f5f5 !important; /* 悬停背景色（可改：#eee、#fff5f5浅红） */
color: #D81E06 !important; /* 悬停文字颜色（可改：#333、#000） */
border-color: #D81E06 !important; /* 悬停边框颜色（可改：#ccc、#999） */
}
/* === 当前选中状态 === */
#filter-top .filter-items a.current {
background: #D81E06 !important; /* 选中背景色（主题色，可改：#000黑、#333深灰） */
color: #fff !important; /* 选中文字颜色（可改：#000黑） */
border-color: #D81E06 !important; /* 选中边框颜色 */
font-weight: 600 !important; /* 选中字体粗细 */
}
/* === 移动端适配 === */
@media (max-width: 768px) {
#filter-top {
padding: 10px 0 !important; /* 手机端容器间距 */
}
#filter-top ul li {
padding: 8px 15px !important; /* 手机端行内边距 */
}
#filter-top ul li .filter-items {
gap: 8px !important; /* 手机端按钮间距 */
}
#filter-top .filter-items a {
padding: 6px 14px !important; /* 手机端按钮内边距 */
font-size: 13px !important; /* 手机端字体大小 */
}
}
/* ============================================
📌 右侧悬浮工具条 - 简单位置调整
============================================ */
/* 工具条位置调整 - 可自定义参数 */
.aside-container {
top: -28% !important; /* 👈 调整这里：距离顶部的位置（可改：10%、20%、30%、40%、50%） */
right: 0px !important; /* 👈 调整这里：距离右边的距离（可改：10px、15px、20px、30px） */
}
/* 隐藏二维码按钮 - 多种选择器确保生效 */
.aside-bar .bar-qrcode,
.aside-bar .bar-item.bar-qrcode,
.bar-qrcode,
.aside-container .bar-qrcode {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
/* ============================================
📌 右侧工具条优化 - 增大尺寸 + 连接按钮 + 自定义图标
============================================ */
/* 1. 增大按钮尺寸 */
.aside-bar .bar-item {
width: 50px !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 2. 图标尺寸和居中 */
.aside-bar .bar-item i,
.aside-bar .bar-item svg {
font-size: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 3. 搜索和回到顶部连接（无间隙） */
.aside-bar .bar-body {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.aside-bar .bar-body .bar-item {
margin-bottom: 0 !important;
}
.aside-bar .bar-footer {
margin-top: 0 !important;
padding-top: 0 !important;
gap: 0 !important;
}
.aside-bar .bar-footer .bar-item {
margin-top: 0 !important;
}
/* 强制去除所有可能的间距 */
.aside-bar {
gap: 0 !important;
}
.aside-bar > * {
margin: 0 !important;
padding: 0 !important;
}
/* 4. 更换回到顶部图标为新SVG */
/* 先隐藏原图标的所有伪元素 */
.aside-bar .bar-footer .bar-item i::before {
content: none !important;
}
/* 使用容器的 ::before 添加新SVG */
.aside-bar .bar-footer .bar-item::before {
content: '' !important;
display: block !important;
width: 24px !important;
height: 24px !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* 隐藏回到顶部的 i 标签（原图标） */
.aside-bar .bar-footer .bar-item i {
display: none !important;
}
/* 5. 去除悬停背景色和提示文字 */
.aside-bar .bar-item:hover {
background-color: transparent !important;
}
/* 隐藏悬停提示文字（tooltip） - 根据HTML结构 */
.aside-bar .bar-item::after,
.aside-bar .bar-item .bar-item-text,
.aside-bar .bar-item .bar-item-desc,
.aside-bar .bar-item-desc,
.bar-item-desc,
.aside-bar .bar-item span {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 去除悬停时的红色矩形（但保留回到顶部的图标） */
.aside-bar .bar-body .bar-item:hover::before {
display: none !important;
}
/* 确保回到顶部的 SVG 图标始终显示 */
.aside-bar .bar-footer .bar-item::before {
display: block !important;
}
/* 回到顶部按钮需要相对定位来配合绝对定位的图标 */
.aside-bar .bar-footer .bar-item {
position: relative !important;
}
/* 响应式 - 手机端 */
@media (max-width: 768px) {
.aside-bar .bar-item {
width: 50px !important;
height: 50px !important;
}
.aside-bar .bar-item i,
.aside-bar .bar-item svg {
font-size: 24px !important;
}
/* 手机端回到顶部图标尺寸 */
.aside-bar .bar-footer .bar-item::before {
width: 24px !important;
height: 24px !important;
}
}
/* ============================================
🔍 搜索框样式优化 - 简洁版
============================================ */
/* 1. 强制去除背景高斯模糊效果 - 只针对modal相关元素 */
.modal,
.modal.show-modal,
.show-modal,
.modal::before,
.modal::after,
.modal-backdrop,
.search-modal-backdrop,
body.modal-open .site-wrapper,
body.modal-open .site-content,
body.modal-open .site-header,
body.modal-open #page {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
-webkit-filter: none !important;
}
/* Modal容器本身 - 纯黑半透明背景，无模糊 */
.modal,
.modal.show-modal {
background: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 2. 搜索框容器 - 添加圆角和阴影 */
.modal-content.search-box-content,
.search-box-content {
border-radius: 8px !important; /* 添加圆角 */
background: #ffffff !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important; /* 增强阴影 */
padding: 40px 50px !important; /* 增加内边距 */
}
/* 3. 隐藏"搜索一下可能来得更快"文字 */
.search-title {
display: none !important;
}
/* 4. Logo放大并增加下边距 */
.search-box-content .login-logo {
margin-bottom: 30px !important; /* Logo和搜索框间距 */
}
.search-box-content .login-logo img {
width: 150px !important; /* Logo放大到150px */
height: auto !important;
max-width: none !important;
}
/* 5. 搜索表单和输入框 - 添加圆角 */
.search-form-normal {
border-radius: 4px !important;
margin-top: 0 !important;
}
.search-input {
border-radius: 4px !important;
padding: 12px 20px !important;
font-size: 16px !important;
}
/* 6. 搜索按钮 - 添加圆角 */
.search-button button {
border-radius: 4px !important;
padding: 12px 30px !important;
}
/* 响应式 - 手机端 */
@media (max-width: 768px) {
.modal-content.search-box-content,
.search-box-content {
padding: 30px 20px !important;
}
.search-box-content .login-logo {
margin-bottom: 20px !important;
}
.search-box-content .login-logo img {
width: 120px !important; /* 手机端稍小 */
}
}
/* ============================================
📚 文档页面优化 - 隐藏不需要的模块
说明：只影响文档单页，不影响其他页面
============================================ */
/* 隐藏文档页面顶部搜索框 */
.single-document .document-top-search,
.single-document .single-document-search {
display: none !important;
}
/* 隐藏文档页面左侧"需要支持？提交工单"模块 */
.single-document .request-supper {
display: none !important;
}
/* 隐藏文档页面底部"这篇文档对你有帮助吗"模块 */
.single-document .single-document-footer {
display: none !important;
}
/* 隐藏文档页面底部"以下内容可能对你有帮助"推荐模块（可选） */
/* 如果不想隐藏推荐文章，请删除或注释掉下面这段代码 */
.single-document .document-related {
display: none !important;
}
/* ============================================
📚 文档页面大纲样式 - 三栏布局（可自定义参数）
说明：只影响文档单页，不影响其他页面
============================================ */
/* === 👇👇👇 主要调整区域：三栏布局和间距 👇👇👇 === */
/* 1. 文档页面三栏布局 - 控制整体间距 */
.single-document .b2-document-content {
display: flex !important;
gap: 20px !important; /* 👈 三栏之间的间距（可改：15px更紧凑、20px适中、25px宽松、30px很宽） */
align-items: flex-start !important;
overflow: visible !important;
}
/* === 👇👇👇 控制各栏宽度 👇👇👇 === */
/* 2. 左侧边栏（此组别内的文章） - 可调整宽度 */
.single-document .document-left.widget-area {
flex: 0 0 160px !important; /* 👈 左侧宽度（可改：180px更窄、200px适中、220px原始宽度、240px更宽） */
width: 160px !important; /* 👈 保持和上面一致 */
}
/* 3. 主内容区（文档内容） - 自动占据剩余空间 */
.single-document .content-area {
flex: 1 !important; /* 自动占据剩余空间，当左右变窄时，这里会自动变宽 */
min-width: 0 !important;
}
/* 4. 右侧大纲（文章大纲） - 可调整宽度 */
.single-document #b2-widget-toc-2 {
flex: 0 0 200px !important; /* 👈 右侧宽度（可改：240px更窄、260px适中、280px原始宽度、300px更宽） */
width: 200px !important; /* 👈 保持和上面一致 */
position: sticky !important;
top: 70px !important; /* 距离顶部的距离（可改：60px、70px、80px、90px） */
max-height: calc(100vh - 90px) !important;
overflow-y: auto !important;
align-self: flex-start !important;
z-index: 1 !important;
}
/* === 📊 当前布局参数总结 ===
* 左侧边栏宽度：200px
* 右侧大纲宽度：260px
* 三栏间距：20px
* 中间内容区：自动占据剩余空间
*
* 💡 调整建议：
* - 想要更大的中间内容区：减小左侧和右侧的宽度，比如都改为 180px 和 240px
* - 想要更紧凑的布局：减小 gap 到 15px
* - 想要更宽松的布局：增大 gap 到 25px 或 30px
* ================================== */
/* 确保大纲的父容器也不阻止sticky */
.single-document .b2-document-content,
.single-document .b2-document-single,
.single-document .wrapper,
body.single-document {
overflow: visible !important;
}
/* 确保页面有足够的滚动空间让sticky生效 */
.single-document .b2-document-content {
min-height: 100vh !important; /* 至少占满一屏 */
}
/* 5. 确保大纲在文档页面显示（覆盖可能的隐藏规则） */
.single-document #b2-widget-toc-2 {
display: block !important;
}
/* 6. 美化大纲滚动条（当内容过多时） */
.single-document #b2-widget-toc-2::-webkit-scrollbar {
width: 6px !important;
}
.single-document #b2-widget-toc-2::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 3px !important;
}
.single-document #b2-widget-toc-2::-webkit-scrollbar-thumb {
background: #d1d1d1 !important;
border-radius: 3px !important;
}
.single-document #b2-widget-toc-2::-webkit-scrollbar-thumb:hover {
background: #b1b1b1 !important;
}
/* 7. 手机端适配 */
@media (max-width: 768px) {
/* 手机端改为垂直堆叠 */
.single-document .b2-document-content {
flex-direction: column-reverse !important;
}
/* 左侧边栏全宽 */
.single-document .document-left.widget-area {
flex: 0 0 auto !important;
width: 100% !important;
}
/* 主内容全宽 */
.single-document .content-area {
width: 100% !important;
}
/* 手机端隐藏大纲 */
.single-document #b2-widget-toc-2 {
display: none !important;
}
}
/* ============================================
📌 文档分类页面 - 简洁布局
顶部：左图片 + 右信息（5:5比例）
底部：带序号的两列文章列表
============================================ */
/* 隐藏原主题的顶部区域 */
.b2-document-single {
display: none !important;
}
/* === 顶部区域：左图右信息 === */
.document-cat-header {
padding: 50px 0 20px;
}
.document-cat-header-inner {
display: flex;
gap: 30px;
align-items: stretch;
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
/* 分类图片 - 4:3比例，占约40%宽度 */
.document-cat-header-image {
flex: 0 0 calc(40% - 15px);
max-width: calc(40% - 15px);
border-radius: 10px;
overflow: hidden;
}
.document-cat-header-image img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
/* 分类信息 - 占50% */
.document-cat-header-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.document-breadcrumb-top {
margin-bottom: 10px;
}
.document-breadcrumb-top a {
color: #888;
font-size: 13px;
}
.document-breadcrumb-top a:hover {
color: #D81E06;
}
.document-cat-header-title {
font-size: 28px;
font-weight: 700;
color: #222;
margin: 0 0 14px 0;
line-height: 1.3;
}
.document-cat-header-desc {
font-size: 16px;
color: #666;
line-height: 1.7;
margin: 0 0 14px 0;
}
.document-cat-header-meta {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.document-cat-total {
font-size: 14px;
color: #999;
}
/* === 文章列表 === */
.document-cat-main {
padding-bottom: 60px;
margin-top: 50px; /* 和顶部模块的间距 */
}
/* === 子分类区块 === */
.document-cat-section {
margin-bottom: 35px;
}
.document-cat-section:last-child {
margin-bottom: 0;
}
.document-cat-section-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid #333;
}
.document-cat-section-title {
font-size: 22px;
font-weight: 600;
color: #333;
margin: 0;
padding-left: 0;
}
.document-cat-section-count {
font-size: 13px;
color: #999;
background: #f5f5f5;
padding: 3px 10px;
border-radius: 12px;
}
.document-cat-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* === 文章卡片 === */
.document-item-card {
background: #fff;
border-radius: 0; /* 直角 */
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
}
.document-item-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
border-color: #D81E06;
}
.document-item-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
padding: 20px;
gap: 16px;
}
/* 内容区 */
.document-item-content {
flex: 1;
min-width: 0;
}
/* 标题（含序号） */
.document-item-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 序号样式 */
.document-item-num {
color: #D81E06;
font-weight: 600;
margin-right: 6px;
}
.document-item-card:hover .document-item-title {
color: #D81E06;
}
.document-item-card:hover .document-item-num {
color: #333;
}
/* 摘要 */
.document-item-excerpt {
font-size: 13px;
color: #888;
line-height: 1.6;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 时间 */
.document-item-time {
flex-shrink: 0;
font-size: 12px;
color: #bbb;
white-space: nowrap;
}
/* 空状态 */
.document-empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: #999;
background: #fff;
border-radius: 12px;
}
/* 分页 */
.document-cat-pagination {
margin-top: 30px;
display: flex;
justify-content: center;
}
/* ============================================
📌 响应式布局
============================================ */
@media screen and (max-width: 992px) {
.document-cat-header-inner {
flex-direction: column;
gap: 24px;
}
.document-cat-header-image {
flex: none;
max-width: 100%;
width: 100%;
}
.document-cat-header-title {
font-size: 26px;
}
.document-cat-list {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 768px) {
.document-cat-header {
padding: 20px 0;
}
.document-cat-header-inner {
padding: 20px;
}
.document-cat-header-title {
font-size: 22px;
}
.document-cat-header-desc {
font-size: 14px;
}
.document-cat-section {
margin-bottom: 25px;
}
.document-cat-section-header {
margin-bottom: 14px;
}
.document-cat-section-title {
font-size: 17px;
}
.document-item-link {
padding: 16px;
}
.document-item-title {
font-size: 15px;
}
.document-item-excerpt {
display: none;
}
}
/* ============================================
📌 文档内页 - 左侧目录与正文在同一容器内
只用CSS调整，不修改模板
============================================ */
/* 文档内页主容器：创建统一的白色背景容器 */
.single-document .b2-document-content {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
padding: 0 !important;
gap: 0 !important;
overflow: hidden;
}
/* 左侧目录区域 */
.single-document .document-left.widget-area {
padding: 0 !important;
margin: 0 !important;
}
/* 左侧目录区域 - sticky定位 */
.single-document .document-left.widget-area {
position: sticky !important;
top: 100px !important;
align-self: flex-start;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
/* 滚动条美化 */
.single-document .document-left.widget-area::-webkit-scrollbar {
width: 4px;
}
.single-document .document-left.widget-area::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 4px;
}
/* 左侧目录盒子：去掉独立样式 */
.single-document .document-left-item.box {
background: transparent;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
border-right: none; /* 去掉线 */
}
/* 正文区域 */
.single-document .content-area {
padding: 0 !important;
margin: 0 !important;
}
/* 正文盒子：去掉独立样式 */
.single-document .content-area > .box {
background: transparent;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
/* 左侧面包屑导航 */
.single-document .document-left-breadcrumb {
padding: 10px 16px 8px;
font-size: 12px;
border-bottom: 1px solid #f0f0f0;
}
.single-document .document-left-breadcrumb a {
color: #888;
text-decoration: none;
}
.single-document .document-left-breadcrumb a:hover {
color: #D81E06;
}
/* 左侧目录标题 */
.single-document .document-left-item h2 {
font-size: 14px;
font-weight: 600;
color: #333;
padding: 12px 16px 10px;
margin: 0;
border-bottom: 1px solid #f0f0f0;
}
/* 左侧目录列表 */
.single-document .document-left-item ul {
list-style: none;
margin: 0;
padding: 8px 0;
}
.single-document .document-left-item ul li {
margin: 0;
padding: 0;
transition: all 0.2s ease;
}
.single-document .document-left-item ul li a {
display: block;
padding: 10px 16px;
font-size: 13px;
color: #555;
text-decoration: none;
line-height: 1.5;
}
.single-document .document-left-item ul li a:hover {
color: #D81E06;
background: #f5f5f5;
}
/* 当前文档高亮 */
.single-document .document-left-item ul li:not(:has(a)) {
background: #f5f5f5;
color: #333;
font-weight: 600;
padding: 10px 16px;
font-size: 13px;
line-height: 1.5;
}
/* 隐藏"需要支持"模块 */
.single-document .document-left-item.request-supper {
display: none;
}
/* 右侧大纲：融入主容器 */
.single-document #secondary.widget-area,
.single-document .widget-area:not(.document-left) {
margin: 0 !important;
padding: 0 !important;
}
.single-document #secondary .sidebar,
.single-document .widget-area:not(.document-left) .sidebar {
position: static !important;
}
/* 右侧大纲容器 - 增加顶部距离 */
body.single-document #secondary,
.single-document #secondary.widget-area,
.single-document .widget-area#secondary {
margin-top: 96px !important;
padding-top: 0 !important;
}
.single-document #secondary .sidebar-innter,
.single-document .widget-area:not(.document-left) .sidebar-innter,
body.single-document .sidebar-innter {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 16px 16px !important;
padding-top: 16px !important;
border-left: 1px solid #f0f0f0 !important;
}
/* 大纲widget容器 */
.single-document #secondary .b2-widget-toc,
.single-document .b2-widget-toc {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
border: none !important;
}
/* 大纲标题 */
.single-document #secondary .b2-widget-title,
.single-document .widget-area:not(.document-left) .b2-widget-title {
font-size: 14px !important;
font-weight: 600 !important;
color: #333 !important;
padding-bottom: 12px !important;
margin-bottom: 8px !important;
border-bottom: 1px solid #f0f0f0 !important;
}
/* 大纲内容盒子 */
.single-document #secondary .b2-widget-box,
.single-document .b2-widget-toc .b2-widget-box {
background: transparent !important;
padding: 0 !important;
}
/* ============================================
📌 文档内页响应式
============================================ */
@media screen and (max-width: 1200px) {
/* 小屏幕隐藏右侧大纲 */
.single-document .widget-area:not(.document-left) {
display: none;
}
}
@media screen and (max-width: 992px) {
.single-document .b2-document-content {
flex-direction: column;
}
.single-document .document-left-item.box {
border-right: none;
border-bottom: 1px solid #f0f0f0;
}
}
/* ============================================
📌 文档主页 - 极简分类卡片
三列网格，4:3图片，只显示名字
============================================ */
.document-archive-main {
padding: 80px 0 60px;
}
.document-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.document-archive-item {
position: relative;
}
.document-archive-link {
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease;
}
.document-archive-link:hover {
transform: translateY(-8px);
}
.document-archive-thumb {
width: 100%;
overflow: hidden;
background: #f5f5f5;
margin-bottom: 16px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.document-archive-img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.document-archive-link:hover .document-archive-img {
transform: scale(1.05);
}
.document-archive-name {
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0;
text-align: center;
line-height: 1.4;
}
.document-archive-link:hover .document-archive-name {
color: #D81E06;
}
/* 响应式 */
@media screen and (max-width: 992px) {
.document-archive-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media screen and (max-width: 768px) {
.document-archive-main {
padding: 40px 0;
}
.document-archive-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.document-archive-name {
font-size: 16px;
}
}
/* ============================================
📰 首页文章列表 - DAZED杂志风格（横向布局）
左图右文，简洁现代
============================================ */
/* === 首页文章列表容器 === */
.home .b2_gap,
.home .hidden-line {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
/* === 单个文章项的内层容器 === */
.home .post-list-item .item-in {
display: flex !important;
align-items: stretch !important;
gap: 40px !important; /* 👈 中间间距（图片和文字之间） */
padding: 40px 40px !important; /* 👈 上下40px，左右40px（左边和右边间距） */
border-bottom: 1px solid #e0e0e0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* 第一篇文章：顶部有间距 */
.home .post-list-item:first-child .item-in {
padding-top: 40px !important; /* 👈 顶部间距，可改：20px、40px、50px */
}
/* 最后一篇文章无下边框 */
.home .post-list-item:last-child .item-in {
border-bottom: none !important;
}
/* === 左侧图片区域：宽度固定，高度按后台比例 === */
.home .post-list-item .post-module-thumb.mobile-hidden {
flex: 0 0 380px !important; /* 👈 图片宽度，可改：300px、350px、400px */
width: 380px !important;
height: auto !important; /* 高度自动，跟随后台比例设置 */
overflow: hidden !important;
border-radius: 0 !important;
background: #f5f5f5 !important;
margin: 0 !important;
}
/* 图片容器内的比例容器：跟随后台设置 */
.home .post-list-item .post-module-thumb.mobile-hidden .b2-radius {
/* padding-top 由后台控制，不覆盖 */
border-radius: 0 !important;
}
/* 图片链接 */
.home .post-list-item .post-module-thumb.mobile-hidden .thumb-link {
display: block !important;
}
/* 图片本身 */
.home .post-list-item .post-module-thumb.mobile-hidden img.post-thumb {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.4s ease !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* 图片悬停效果 */
.home .post-list-item:hover .post-module-thumb.mobile-hidden img.post-thumb {
transform: scale(1.03) !important;
}
/* 隐藏移动端图片 */
.home .post-list-item .post-module-thumb.mobile-show {
display: none !important;
}
/* === 右侧内容区域：flex row wrap，让日期和分类在同一行 === */
.home .post-list-item .post-info {
flex: 1 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
align-content: center !important;
text-align: center !important;
padding: 0 40px !important;
min-width: 0 !important;
}
/* === 文章标题：独占一行 === */
.home .post-list-item .post-info h2 {
flex: 0 0 100% !important;
width: 100% !important;
font-size: 32px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
color: #000 !important;
margin: 0 0 12px 0 !important;
letter-spacing: -0.5px !important;
order: 0 !important;
text-align: center !important;
}
.home .post-list-item .post-info h2 a {
color: #000 !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
}
.home .post-list-item .post-info h2 a:hover {
color: #D81E06 !important;
}
/* === 日期和分类统一样式：同一行居中显示 === */
/* 日期容器 */
.home .post-list-item .post-list-meta-box {
flex: 0 0 auto !important;
width: auto !important;
order: 1 !important;
margin: 0 0 16px 0 !important;
display: inline-flex !important;
align-items: center !important;
}
/* 日期列表 */
.home .post-list-item .post-list-meta {
display: inline-flex !important;
align-items: center !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 日期文字样式 */
.home .post-list-item .post-list-meta li,
.home .post-list-item .post-list-meta .b2timeago {
font-size: 14px !important;
font-weight: 400 !important;
color: #666 !important;
line-height: 1 !important;
padding: 0 !important;
}
/* 隐藏浏览量 */
.home .post-list-item .post-list-meta-views {
display: none !important;
}
/* 日期后面加竖线 */
.home .post-list-item .post-list-meta-date::after {
content: "|" !important;
color: #ccc !important;
margin: 0 12px !important;
font-size: 14px !important;
}
/* 分类容器：微调垂直位置 */
.home .post-list-item .post-info > div:first-child {
flex: 0 0 auto !important;
width: auto !important;
order: 2 !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
position: relative !important;
top: 2px !important;
}
/* 分类标签容器 */
.home .post-list-item .post-list-cat {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
}
.home .post-list-item .post-list-cat::before {
display: none !important;
}
/* 分类文字样式：和日期一样 */
.home .post-list-item .post-list-cat-item {
font-size: 14px !important;
font-weight: 400 !important;
color: #666 !important;
text-decoration: none !important;
padding: 0 !important;
background: transparent !important;
line-height: 1 !important;
}
.home .post-list-item .post-list-cat-item:hover {
color: #D81E06 !important;
}
/* === 文章摘要：独占一行 === */
.home .post-list-item .post-excerpt {
flex: 0 0 100% !important;
width: 100% !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: #555 !important;
margin: 0 !important;
letter-spacing: 0.3px !important;
order: 3 !important;
text-align: center !important;
}
/* ============================================
📱 响应式布局 - 手机端
============================================ */
@media screen and (max-width: 992px) {
/* 中等屏幕：调整图片和间距 */
.home .post-list-item .post-module-thumb.mobile-hidden {
flex: 0 0 300px !important;
width: 300px !important;
height: 380px !important;
}
.home .post-list-item .item-in {
gap: 30px !important;
padding: 30px 0 !important;
}
.home .post-list-item .post-info h2 {
font-size: 26px !important;
}
}
@media screen and (max-width: 768px) {
/* 手机端：改为垂直布局 */
.home .post-list-item .item-in {
flex-direction: column !important;
gap: 20px !important;
padding: 30px 0 !important;
}
/* 隐藏桌面端图片 */
.home .post-list-item .post-module-thumb.mobile-hidden {
display: none !important;
}
/* 显示移动端图片 */
.home .post-list-item .post-module-thumb.mobile-show {
display: block !important;
width: 100% !important;
height: auto !important;
}
.home .post-list-item .post-module-thumb.mobile-show .b2-radius {
border-radius: 8px !important;
}
.home .post-list-item .post-info h2 {
font-size: 22px !important;
margin-bottom: 12px !important;
}
.home .post-list-item .post-excerpt {
font-size: 14px !important;
line-height: 1.6 !important;
}
}
/* ============================================
📌 Archive Page Card Fixes - 30know.com
Date: 2026-02-11
Purpose: Fix date clipping, 3-line excerpt, category tags
Safe: Only affects archive pages, not homepage
============================================ */
/* === Fix 1: Prevent Date Clipping in Footer === */
/* Remove webkit-box that causes clipping */
.archive .post-list-item .list-footer span,
.category .post-list-item .list-footer span,
.tax-ziyuan_cat .post-list-item .list-footer span {
display: inline-block !important; /* Change from -webkit-box */
-webkit-box-orient: unset !important;
line-clamp: unset !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.5 !important; /* Ensure proper line height */
white-space: nowrap !important; /* Keep date on one line */
}
/* Ensure footer container has enough height */
.archive .post-list-item .list-footer,
.category .post-list-item .list-footer,
.tax-ziyuan_cat .post-list-item .list-footer {
padding: 12px 16px !important; /* Increase padding */
min-height: 44px !important; /* Ensure minimum height */
align-items: center !important; /* Vertically center items */
}
/* === Fix 2: Set Excerpt to 3 Lines === */
/* 背景：部分分类后台未勾选“显示摘要”时，主题会输出空的 .post-excerpt 容器；
之前强制 display:-webkit-box 会导致空容器也占位，从而出现大块空白。 */
/* 空摘要：直接隐藏，不占位 */
.archive .post-list-item .post-excerpt:empty,
.category .post-list-item .post-excerpt:empty,
.tax-ziyuan_cat .post-list-item .post-excerpt:empty {
display: none !important;
margin: 0 !important;
max-height: 0 !important;
}
/* 非空摘要：才做 3 行截断 */
.archive .post-list-item .post-excerpt:not(:empty),
.category .post-list-item .post-excerpt:not(:empty),
.tax-ziyuan_cat .post-list-item .post-excerpt:not(:empty) {
line-clamp: 3 !important;
-webkit-line-clamp: 3 !important; /* Show 3 lines */
-webkit-box-orient: vertical !important;
display: -webkit-box !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.6 !important;
max-height: 4.8em !important; /* 3 lines × 1.6 line-height = 4.8em */
margin: 10px 16px 12px !important;
}
/* === Fix 3: Improve Category Tag Styling === */
/* Make category tags more visually distinct */
.archive .post-list-item .post-list-cat-item,
.category .post-list-item .post-list-cat-item,
.tax-ziyuan_cat .post-list-item .post-list-cat-item {
display: inline-block !important;
padding: 4px 10px !important;
font-size: 11px !important;
font-weight: 500 !important;
color: #666 !important;
background: #f5f5f5 !important;
border-radius: 3px !important;
margin-right: 6px !important;
margin-bottom: 4px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
/* Category tag hover effect */
.archive .post-list-item .post-list-cat-item:hover,
.category .post-list-item .post-list-cat-item:hover,
.tax-ziyuan_cat .post-list-item .post-list-cat-item:hover {
background: #D81E06 !important;
color: #fff !important;
}
/* Ensure category container has proper spacing */
.archive .post-list-item .post-list-cat,
.category .post-list-item .post-list-cat,
.tax-ziyuan_cat .post-list-item .post-list-cat {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 8px !important;
}
/* === Optional: Adjust card height if needed === */
/* If cards need more space for 3-line excerpts */
.archive .post-list-item .post-info,
.category .post-list-item .post-info,
.tax-ziyuan_cat .post-list-item .post-info {
display: flex !important;
flex-direction: column !important;
}
/* Push footer to bottom of card */
.archive .post-list-item .list-footer,
.category .post-list-item .list-footer,
.tax-ziyuan_cat .post-list-item .list-footer {
margin-top: auto !important; /* Push to bottom */
}
/* ============================================
📱 Mobile Responsive Adjustments
============================================ */
@media screen and (max-width: 768px) {
/* Keep 2 lines on mobile to save space */
.archive .post-list-item .post-excerpt:not(:empty),
.category .post-list-item .post-excerpt:not(:empty),
.tax-ziyuan_cat .post-list-item .post-excerpt:not(:empty) {
line-clamp: 2 !important;
-webkit-line-clamp: 2 !important;
max-height: 3.2em !important; /* 2 lines × 1.6 = 3.2em */
}
/* Smaller category tags on mobile */
.archive .post-list-item .post-list-cat-item,
.category .post-list-item .post-list-cat-item,
.tax-ziyuan_cat .post-list-item .post-list-cat-item {
font-size: 10px !important;
padding: 3px 8px !important;
}
}
/* ==========================================
✨ 文章页：上一篇/下一篇改为封面图卡片
========================================== */
/* 隐藏主题默认纯文字上一页/下一页 */
.single .post-pre-next {
display: none !important;
}
.single .b2child-pre-next-title {
margin: 0 0 12px !important;
font-size: 19px !important;
font-weight: 600;
line-height: 1.35;
color: #333;
}
.single .b2child-pre-next-wrap {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.single .b2child-pre-next-item {
position: relative;
aspect-ratio: 3 / 4;
border-radius: 10px;
overflow: hidden;
display: block;
text-decoration: none !important;
background: #f3f3f3;
}
.single .b2child-pre-next-thumb {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform .25s ease;
}
.single .b2child-pre-next-thumb.no-thumb {
background-image: linear-gradient(135deg, #f5f5f5, #e9e9e9);
}
.single .b2child-pre-next-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, .08));
}
.single .b2child-pre-next-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 16px 14px;
color: #fff;
}
.single .b2child-pre-next-content h3 {
margin: 0 0 8px !important;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #fff !important;
}
.single .b2child-pre-next-cat {
font-size: 13px;
color: rgba(255, 255, 255, .82);
}
.single .b2child-pre-next-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
font-size: 48px;
line-height: 1;
color: rgba(255, 255, 255, .9);
}
.single .b2child-pre-next-arrow.arrow-prev {
left: 14px;
}
.single .b2child-pre-next-arrow.arrow-next {
right: 14px;
}
.single .b2child-pre-next-item:hover .b2child-pre-next-thumb {
transform: scale(1.04);
}
@media (max-width: 768px) {
.single .b2child-pre-next-wrap {
grid-template-columns: 1fr 1fr;
}
.single .b2child-pre-next-item {
aspect-ratio: 3 / 4;
}
.single .b2child-pre-next-content h3 {
font-size: 14px;
}
}
@media (max-width: 520px) {
.single .b2child-pre-next-wrap {
grid-template-columns: 1fr;
}
}
/* ============================================
顶部菜单右侧极简搜索（恢复版）
============================================ */
.top-menu {
position: relative;
padding-left: 0 !important;
padding-right: 0 !important;
display: flex !important;
justify-content: center !important;
}
.top-menu > ul {
width: fit-content;
margin-left: auto !important;
margin-right: auto !important;
position: static;
}
.top-menu ul > li:not(.b2child-uiverse-search) {
margin: 0 24px !important;
}
.top-menu .b2child-uiverse-search {
position: absolute !important;
top: 50% !important;
right: 12px !important;
left: auto !important;
transform: translateY(calc(-50% + 8px)) !important;
margin: 0 !important;
z-index: 20;
}
.header-banner-left .menu .b2child-uiverse-search {
position: absolute !important;
top: 50% !important;
right: 12px !important;
left: auto !important;
transform: translateY(calc(-50% + 8px)) !important;
margin: 0 !important;
z-index: 20 !important;
}
.top-menu .b2child-uiverse-search-form {
display: block;
}
.top-menu .b2child-uiverse-search .container {
position: relative;
width: fit-content;
}
.top-menu .b2child-uiverse-search .mainbox {
width: 170px;
height: 42px;
display: flex;
align-items: center;
justify-content: flex-end;
background: transparent !important;
}
.top-menu .b2child-uiverse-search .search_input {
width: 0;
opacity: 0;
height: 30px;
border: 0 !important;
border-bottom: 1px solid #111 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: #111 !important;
padding: 0;
transition: width .24s ease, opacity .24s ease, padding .24s ease;
}
.top-menu .b2child-uiverse-search .search_input::placeholder {
color: #999 !important;
}
.top-menu .b2child-uiverse-search-form.is-open .search_input {
width: 118px;
opacity: 1;
padding: 0 8px 4px 2px;
}
.top-menu .b2child-uiverse-search .iconContainer {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #111 !important;
width: 34px;
height: 34px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 !important;
}
.top-menu .b2child-uiverse-search .iconContainer i {
font-size: 24px !important;
line-height: 1 !important;
}
@media (max-width: 900px) {
.top-menu {
padding-left: 0 !important;
padding-right: 0 !important;
}
.top-menu .b2child-uiverse-search {
display: none !important;
}
}
/* 搜索结果页：隐藏筛选搜索条并收紧顶部空白 */
.search .tax-search,
.search-results .tax-search {
display: none !important;
}
.search .b2-single-content.wrapper.single-sidebar-hidden,
.search-results .b2-single-content.wrapper.single-sidebar-hidden {
margin-top: -18px !important;
}
.search .search-page-title,
.search-results .search-page-title {
margin-top: 0 !important;
margin-bottom: 12px !important;
padding-top: 0 !important;
}
/* 搜索结果页：继续收紧“顶部菜单 ↔ 搜索栏”间距，并让卡片文字居中 */
.search .b2-single-content.wrapper.single-sidebar-hidden,
.search-results .b2-single-content.wrapper.single-sidebar-hidden {
margin-top: -50px !important;
padding-top: 0 !important;
}
.search .search-page-title,
.search-results .search-page-title {
width: 100% !important;
max-width: none !important;
margin: 0 0 12px 0 !important;
padding: 8px 14px 10px !important;
box-sizing: border-box !important;
}
.search .search-page-title form,
.search-results .search-page-title form {
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.search .search-page-title input,
.search-results .search-page-title input {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.search .posts-wrapper,
.search-results .posts-wrapper,
.search .post-loop,
.search-results .post-loop {
margin-top: 24px !important;
}