zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化Markdown表格样式，完美支持深色模式

Browse Source 
新增特性：
- 现代化表格设计（圆角12px、毛玻璃效果、柔和阴影）
- 完整的深色模式支持（表格、边框、滚动条）
- 响应式设计（移动端横向滚动、第一列冻结）
- 多种表格变体（紧凑型、无边框、高亮）

修复问题：
- 修复深色模式下表格边框显示为白色
- 修复移动端滚动条在深色模式下为白色
- 修复冻结列背景色与行不一致
- 优化深色模式配色，避免刺眼
This commit is contained in:
Vaica committed 2026-06-03 16:33:40 +08:00
1 parent 0a6c41356e
commit c4e0232c1b
3 files changed
+1106
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/性能优化文档/Markdown表格样式使用指南.md
+402
View File
@@ -0,0 +1,402 @@
# Ying主题 Markdown 表格样式使用指南
**创建日期：** 2026-06-03
**版本：** v2.0（重新设计）
**状态：** ✅ 已实现
---
## 📋 表格样式概述
### 设计理念
**完全符合Ying主题风格：**
- ✅ **圆角12px** - 与blockquote一致
- ✅ **毛玻璃效果** - 与.main容器一致
- ✅ **柔和阴影** - 层次丰富不突兀
- ✅ **透明边框** - rgba颜色更自然
- ✅ **深色模式** - 柔和的rgba过渡
- ✅ **斑马条纹** - 提升可读性
- ✅ **悬停效果** - 交互友好
- ✅ **响应式设计** - 移动端自动横向滚动
- ✅ **多种变体** - 紧凑型、无边框、高亮
### 设计参考
**参考元素：**
- blockquote（圆角、阴影、边框风格）
- .main容器（毛玻璃效果）
- 代码块（背景、边框风格）
---
## 🎨 浅色模式设计
### 配色方案
| 元素 | 颜色 | 说明 |
|------|------|------|
| **表格背景** | `rgba(255, 255, 255, 0.95)` | 毛玻璃效果 |
| **表格边框** | `rgba(0, 0, 0, 0.08)` | 透明柔和 |
| **表格阴影** | `0 8px 24px rgba(0, 0, 0, 0.06)` | 层次丰富 |
| **表头背景** | 渐变 `rgba(0,0,0,0.03)` → `rgba(0,0,0,0.01)` | 微妙渐变 |
| **表头文字** | `rgba(30, 30, 30, 0.92)` | 深灰，可读性强 |
| **表头边框** | `rgba(0, 0, 0, 0.1)` | 底部2px |
| **单元格背景** | 白色 / `rgba(0,0,0,0.015)` | 斑马纹 |
| **单元格文字** | `rgba(30, 30, 30, 0.85)` | 中灰 |
| **单元格边框** | `rgba(0, 0, 0, 0.05)` | 浅灰底边 |
| **悬停背景** | `rgba(0, 0, 0, 0.04)` | 柔和高亮 |
| **链接颜色** | 使用主题链接色 | 与正文一致 |
| **代码背景** | `rgba(0, 0, 0, 0.04)` | 浅灰 |
| **代码文字** | `rgba(30, 30, 30, 0.9)` | 深灰 |
### 设计特点
- ✅ **圆角12px** - 与blockquote完全一致
- ✅ **毛玻璃** - `backdrop-filter: blur(8px)`
- ✅ **透明边框** - 使用rgba而不是实色
- ✅ **柔和阴影** - 避免突兀感
---
## 🌙 深色模式设计
### 配色方案
| 元素 | 颜色 | 说明 |
|------|------|------|
| **表格背景** | `rgba(15, 23, 42, 0.95)` | 深蓝毛玻璃 |
| **表格边框** | `rgba(148, 163, 184, 0.18)` | 透明灰边框 |
| **表格阴影** | `0 10px 28px rgba(0, 0, 0, 0.22)` | 更深的阴影 |
| **表头背景** | 渐变 `rgba(30,41,59,0.92)` → `rgba(15,23,42,0.78)` | 深蓝渐变 |
| **表头文字** | `rgba(226, 232, 240, 0.96)` | 浅灰白 |
| **表头边框** | `rgba(148, 163, 184, 0.2)` | 深灰底边 |
| **单元格背景** | 深蓝 / `rgba(30,41,59,0.5)` | 深色斑马纹 |
| **单元格文字** | `rgba(226, 232, 240, 0.9)` | 浅灰 |
| **单元格边框** | `rgba(148, 163, 184, 0.1)` | 深灰底边 |
| **悬停背景** | `rgba(30, 41, 59, 0.8)` | 柔和高亮 |
| **链接颜色** | 使用主题深色链接色 | 与正文一致 |
| **代码背景** | `rgba(148, 163, 184, 0.15)` | 深灰 |
| **代码文字** | `rgba(226, 232, 240, 0.95)` | 浅灰白 |
### 设计特点
- ✅ **柔和过渡** - 使用rgba透明度
- ✅ **避免纯黑** - 深蓝灰更舒适
- ✅ **层次分明** - 半透明边框和阴影
- ✅ **护眼设计** - 减少对比度
---
## 🎯 与主题一致性
### 对比其他元素
| 元素 | 圆角 | 边框 | 阴影 | 背景 |
|------|------|------|------|------|
| **blockquote** | 12px | rgba透明 | 柔和 | 渐变 |
| **.main容器** | 8px | rgba透明 | 层次丰富 | 毛玻璃 |
| **表格** | **12px** | **rgba透明** | **柔和** | **毛玻璃** ✅ |
| **代码块** | 6px | rgba透明 | 无 | 浅灰 |
**表格风格与blockquote高度一致！** ✅
---
## 📱 响应式设计
### 移动端优化（<768px）
**自动处理：**
- ✅ 表格自动横向滚动
- ✅ 第一列固定（sticky定位）
- ✅ 减小内边距（12px → 10px）
- ✅ 减小字体（0.85em）
- ✅ 圆角调整（8px）
- ✅ 触摸友好
**效果：**
- ✅ 在小屏幕完整查看表格
- ✅ 第一列始终可见
- ✅ 流畅滚动体验
- ✅ 性能优化
---
## 🎨 表格变体
### 1. 紧凑型表格（.compact）
**适用场景：** 数据密集型，需要节省空间
**Markdown语法：**
```markdown
| 列1 | 列2 | 列3 | {.compact}
|-----|-----|-----|---------
| 数据 | 数据 | 数据 |
```
**CSS类：** `table.compact`
**效果：**
- ✅ 更小的内边距（10px vs 14px）
- ✅ 更小的字体（0.9em）
- ✅ 保持主题风格
---
### 2. 无边框表格（.borderless）
**适用场景：** 简洁风格，不需要明显边框
**Markdown语法：**
```markdown
| 列1 | 列2 | 列3 | {.borderless}
|-----|-----|-----|-------------
| 数据 | 数据 | 数据 |
```
**CSS类：** `table.borderless`
**效果：**
- ✅ 无外边框
- ✅ 无阴影
- ✅ 透明背景
- ✅ 仅有底部分隔线
- ✅ 更加简洁
---
### 3. 高亮表格（.highlight）
**适用场景：** 需要突出的重要表格
**Markdown语法：**
```markdown
| 列1 | 列2 | 列3 | {.highlight}
|-----|-----|-----|------------
| 数据 | 数据 | 数据 |
```
**CSS类：** `table.highlight`
**效果：**
- ✅ 左侧4px边框（浅色：黑色60%透明，深色：灰色70%透明）
- ✅ 更明显的表头背景
- ✅ 更突出的表头边框
- ✅ 引起注意
---
## 📝 使用示例
### 示例1：基础表格
```markdown
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |
| 王五 | 28 | 产品经理 |
```
**效果：**
- ✅ 圆角12px卡片
- ✅ 毛玻璃背景
- ✅ 斑马条纹
- ✅ 悬停高亮
---
### 示例2：包含代码和链接
```markdown
| 工具 | 版本 | 用途 |
|------|------|------|
| Node.js | `18.0+` | JavaScript运行环境 |
| [Hugo](https://gohugo.io) | `0.128.2` | 静态站点生成器 |
| Git | `2.30+` | 版本控制 |
```
**效果：**
- ✅ 代码块样式（圆角6px，浅灰背景）
- ✅ 链接样式（虚线下划线，悬停变实线）
- ✅ 与主题链接风格一致
---
### 示例3：古风官职表格
```markdown
| 品级 | 官职 | 俸禄 | 说明 |
|------|------|------|------|
| 正一品 | 太师 | 2000 | 最高官职 |
| 从一品 | 太尉 | 1400 | 军事长官 |
| 正二品 | 参知政事 | 1050 | 副宰相 |
| 从二品 | 节度使 | 800 | 地方军政长官 |
| 正三品 | 御史中丞 | 600 | 监察官员 |
| 从三品 | 秘书监 | 480 | 文书管理 |
| 正四品 | 谏议大夫 | 380 | 谏官 |
| 从四品 | 侍读学士 | 300 | 皇帝顾问 |
| 正五品 | 给事中 | 240 | 审查奏章 |
| 从五品 | 知州 | 190 | 地方长官 |
| 正六品 | 侍御史 | 150 | 监察官员 |
| 从六品 | 通判 | 115 | 副地方长官 |
| 正七品 | 知县 | 85 | 县级长官 |
| 从七品 | 殿中侍御史 | 60 | 宫廷监察 |
| 正八品 | 大理评事 | 40 | 司法官员 |
| 从八品 | 录事参军 | 25 | 文书官员 |
| 正九品 | 主簿 | 15 | 县级文书 |
| 从九品 | 司户参军 | 5 | 户籍管理 |
| — | 庶民 | 0 | 普通百姓 |
```
**效果：**
- ✅ 20行数据清晰展示
- ✅ 斑马纹便于阅读
- ✅ 深色模式完美适配
- ✅ 与古风主题协调
---
## 💡 使用技巧
### 1. 对齐方式
```markdown
| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:--------:|-------:|
| 数据 | 数据 | 数据 |
```
**效果：**
- ✅ `:---` 左对齐（默认）
- ✅ `:---:` 居中对齐
- ✅ `---:` 右对齐
---
### 2. 表格内换行
```markdown
| 列1 | 列2 |
|-----|-----|
| 第一行<br>第二行 | 数据 |
```
**效果：**
- ✅ 使用 `<br>` 标签换行
- ✅ 在单元格内显示多行
---
### 3. 代码和链接混合
```markdown
| 工具 | 版本 | 链接 |
|------|------|------|
| Hugo | `0.128.2` | [官网](https://gohugo.io) |
```
**效果：**
- ✅ 代码块特殊样式
- ✅ 链接虚线下划线
- ✅ 悬停效果
---
## 🎨 自定义样式
### 修改圆角
```css
.post-content table {
border-radius: 16px; /* 更大的圆角 */
}
```
### 修改毛玻璃强度
```css
.post-content table {
backdrop-filter: blur(12px); /* 更强的模糊 */
}
```
### 修改阴影
```css
.post-content table {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); /* 更大的阴影 */
}
```
### 修改深色模式透明度
```css
[data-theme="dark"] .post-content table {
background: rgba(15, 23, 42, 0.98); /* 更不透明 */
}
```
---
## ✅ 功能清单
### 基础功能
- [x] 表头样式（微妙渐变）
- [x] 斑马条纹
- [x] 悬停效果
- [x] 圆角12px（与blockquote一致）
- [x] 毛玻璃效果
- [x] 深色模式
### 进阶功能
- [x] 响应式设计
- [x] 移动端横向滚动
- [x] 第一列固定
- [x] 代码块样式
- [x] 链接样式
- [x] 图片样式
### 变体样式
- [x] 紧凑型表格（.compact）
- [x] 无边框表格（.borderless）
- [x] 高亮表格（.highlight）
### 主题一致性
- [x] 与blockquote风格一致
- [x] 与.main容器风格一致
- [x] 使用主题CSS变量
- [x] 深色模式配色协调
---
## 🎉 总结
### 设计优势
1. **完全符合主题** - 与blockquote、.main容器风格统一
2. **视觉舒适** - 毛玻璃、柔和阴影、透明边框
3. **深色模式友好** - rgba颜色、柔和过渡
4. **交互体验好** - 悬停效果、平滑动画
5. **响应式完善** - 移动端优化
6. **易于定制** - CSS变量
### 使用建议
1. **基础表格** - 使用默认样式
2. **数据密集** - 使用紧凑型（.compact）
3. **简洁风格** - 使用无边框（.borderless）
4. **重要表格** - 使用高亮（.highlight）
5. **移动端** - 自动响应式，无需特殊处理
---
**表格样式设计完成！完全符合Ying主题风格！** 🎉
**现在可以在Markdown文章中使用表格了！**
docs/深色模式表格修复指南.md
+288
View File
@@ -0,0 +1,288 @@
# 深色模式表格样式修复指南
## 🔍 问题诊断
**症状：** 深色模式表格样式没有生效
**可能原因：**
1. 浏览器缓存
2. Hugo缓存
3. CSS文件未正确更新
4. 查看的位置不正确
---
## 🚀 完整修复步骤
### 步骤1：确认CSS已更新
**我已经确认CSS文件已更新：**
```
文件：themes/Ying/assets/css/main.css
位置：第723-726行
内容：
[data-theme="dark"] .post-content th {
color: rgba(203, 213, 225, 0.85);
border-bottom-color: rgba(148, 163, 184, 0.15);
}
```
✅ **代码已正确修改**
---
### 步骤2：清理所有缓存
**执行以下命令：**
```bash
cd E:\GitHub\blog
# 1. 清理Hugo构建缓存
hugo --cleanDestinationDir
# 2. 删除public目录（如果存在）
rd /s /q public 2>nul
# 3. 删除Hugo缓存
rd /s /q resources 2>nul
# 4. 重新构建
hugo server -D --noHTTPCache
```
---
### 步骤3：浏览器强制刷新
**Chrome/Edge：**
1. 按 `F12` 打开开发者工具
2. 右键点击刷新按钮
3. 选择 **"清空缓存并硬性重新加载"**
**或者：**
- 按 `Ctrl + Shift + R`
- 或 `Ctrl + F5`
**Firefox：**
- 按 `Ctrl + Shift + R`
---
### 步骤4：禁用浏览器缓存（开发时）
**Chrome DevTools设置：**
1. 按 `F12` 打开开发者工具
2. 切换到 **Network** 面板
3. 勾选 **Disable cache**
4. 保持DevTools打开
5. 刷新页面
---
## 🧪 验证方法
### 方法1：检查CSS加载
**Chrome DevTools：**
1. 按 `F12`
2. 切换到 **Elements** 面板
3. 找到 `<link>` 标签加载CSS
4. 点击CSS链接查看内容
5. 搜索 `post-content th`
6. 确认颜色值是 `rgba(203, 213, 225, 0.85)`
### 方法2：检查元素样式
**Chrome DevTools：**
1. 按 `F12`
2. 点击 **选择元素** 工具（左上角箭头）
3. 点击表格的表头
4. 查看 **Styles** 面板
5. 找到 `color` 属性
6. 确认值
### 方法3：查看源代码
**查看CSS文件：**
```bash
# 在命令行查看
type themes\Ying\assets\css\main.css | findstr "post-content th"
```
**应该看到：**
```css
[data-theme="dark"] .post-content th {
color: rgba(203, 213, 225, 0.85);
border-bottom-color: rgba(148, 163, 184, 0.15);
}
```
---
## 🎨 当前的颜色值
### 深色模式表格配色
| 元素 | 颜色 | 说明 |
|------|------|------|
| **表头文字** | `rgba(203, 213, 225, 0.85)` | 柔和灰白 |
| **单元格文字** | `rgba(203, 213, 225, 0.8)` | 稍暗一点 |
| **表头边框** | `rgba(148, 163, 184, 0.15)` | 透明灰 |
| **单元格边框** | `rgba(148, 163, 184, 0.08)` | 更透明 |
| **表头背景** | 渐变深蓝 | `rgba(30,41,59,0.92)` → `rgba(15,23,42,0.78)` |
| **表格背景** | 深蓝毛玻璃 | `rgba(15, 23, 42, 0.95)` |
---
## 🔧 备用方案
### 如果还是没有变化
**方案A：添加更高优先级的样式**
在CSS文件末尾添加：
```css
/* 强制覆盖深色模式表格样式 */
[data-theme="dark"] .post-content table th {
color: rgba(203, 213, 225, 0.85) !important;
border-bottom-color: rgba(148, 163, 184, 0.15) !important;
}
```
**方案B：使用内联样式测试**
在Markdown文章中使用HTML：
```html
<div data-theme="dark">
<table>
<thead>
<tr>
<th style="color: rgba(203, 213, 225, 0.85);">表头</th>
</tr>
</thead>
</table>
</div>
```
---
## 📋 测试表格
### 创建测试文章
**新建文件：** `content/posts/test-table.md`
```markdown
---
title: "表格样式测试"
date: 2026-06-03
---
## 测试表格
| 项目 | 浅色模式 | 深色模式 | 状态 |
|------|---------|---------|------|
| **表头文字** | 深灰 | 柔和灰白 | 测试中 |
| **单元格文字** | 中灰 | 柔和灰白 | 测试中 |
| **边框** | 浅灰 | 透明灰 | 测试中 |
| **背景** | 白色 | 深蓝毛玻璃 | 测试中 |
### 步骤
1. 访问此页面
2. 点击头像切换深色模式
3. 检查表头文字颜色
```
---
## 🎯 检查清单
### 缓存清理
- [ ] Hugo缓存已清理
- [ ] public目录已删除
- [ ] 浏览器缓存已清理
- [ ] 强制刷新已执行
### CSS验证
- [ ] CSS文件已更新（第723-726行）
- [ ] 颜色值正确：`rgba(203, 213, 225, 0.85)`
- [ ] CSS已正确加载到浏览器
### 功能测试
- [ ] 创建了测试表格
- [ ] 切换到深色模式
- [ ] 表头文字不刺眼
- [ ] 整体视觉舒适
---
## 🔄 进一步调整
### 如果颜色还是太亮
**调整选项1（更柔和）：**
```css
color: rgba(180, 190, 205, 0.8)
```
**调整选项2（更透明）：**
```css
color: rgba(203, 213, 225, 0.7)
```
**调整选项3（更暗）：**
```css
color: rgba(160, 175, 195, 0.85)
```
---
## 💡 常见问题
### Q1：为什么浏览器缓存这么顽固？
**A1：** 现代浏览器会积极缓存CSS/JS文件。开发时建议：
- 始终打开DevTools
- 勾选Disable cache
- 使用强制刷新
### Q2：Hugo缓存在哪里？
**A2：** Hugo缓存位置：
- Windows: `%TEMP%\hugo_cache`
- 或项目目录的 `resources` 文件夹
### Q3：如何确认CSS已加载？
**A3：** 在Chrome DevTools中：
- Elements面板 → 搜索CSS选择器
- 或Network面板 → 查看CSS请求
---
## 🎉 完成确认
### 成功标志
- ✅ 浏览器强制刷新后生效
- ✅ 表头文字为柔和灰白色
- ✅ 不刺眼，视觉舒适
- ✅ 深色模式整体协调
### 如果还是不行
**联系我，我会：**
1. 检查CSS文件完整性
2. 提供内联样式方案
3. 或创建独立的测试文件
---
**文档版本：** v1.0
**创建日期：** 2026-06-03
**适用问题：** 深色模式表格样式未生效
themes/Ying/assets/css/main.css
+416
View File
@@ -593,6 +593,277 @@ ul {
text-align: left; /* Reset text align from .main center */
}
/* ── Markdown 表格样式 ── */
.post-content table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 1.5em 0;
font-size: 0.95em;
line-height: 1.6;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.post-content thead {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
}
.post-content th {
padding: 14px 20px;
text-align: left;
font-weight: 600;
color: rgba(30, 30, 30, 0.92);
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
white-space: nowrap;
font-size: 0.95em;
}
.post-content td {
padding: 14px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
color: rgba(30, 30, 30, 0.85);
vertical-align: top;
}
.post-content tbody tr:last-child td {
border-bottom: none;
}
/* 斑马条纹 */
.post-content tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.015);
}
/* 悬停效果 */
.post-content tbody tr {
transition: background-color 0.3s ease;
}
.post-content tbody tr:hover {
background-color: rgba(0, 0, 0, 0.04);
}
/* 表格内的链接 */
.post-content table a {
color: var(--link-color-light);
text-decoration: none;
border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.post-content table a:hover {
color: var(--link-hover-color-light);
border-bottom-style: solid;
border-bottom-color: var(--link-hover-color-light);
}
/* 表格内的代码 */
.post-content table code {
background: rgba(0, 0, 0, 0.04);
padding: 2px 8px;
border-radius: 6px;
font-size: 0.85em;
color: rgba(30, 30, 30, 0.9);
border: 1px solid rgba(0, 0, 0, 0.06);
}
/* 表格内的图片 */
.post-content table img {
max-width: 100px;
height: auto;
border-radius: 8px;
margin: 4px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 响应式表格 - 移动端 */
@media (max-width: 768px) {
.post-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 0.85em;
border-radius: 8px;
}
.post-content th,
.post-content td {
padding: 12px 14px;
min-width: 100px;
}
/* 第一列固定 */
.post-content th:first-child,
.post-content td:first-child {
position: sticky;
left: 0;
z-index: 2;
min-width: 120px;
/* 背景色在下方单独设置 */
}
/* 浅色模式 - 奇数行第一列 */
.post-content tbody tr:nth-child(odd) th:first-child,
.post-content tbody tr:nth-child(odd) td:first-child {
background: rgba(255, 255, 255, 0.95);
}
/* 浅色模式 - 偶数行第一列（斑马纹） */
.post-content tbody tr:nth-child(even) th:first-child,
.post-content tbody tr:nth-child(even) td:first-child {
background: rgba(0, 0, 0, 0.015);
}
/* 浅色模式 - 表头第一列 */
.post-content thead th:first-child {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
}
}
/* ── 深色模式表格样式 ── */
[data-theme="dark"] .post-content table {
background: rgba(15, 23, 42, 0.95);
border-color: rgba(148, 163, 184, 0.18);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .post-content thead {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.78));
}
[data-theme="dark"] .post-content th {
color: rgba(203, 213, 225, 0.85);
border-bottom-color: rgba(148, 163, 184, 0.15);
}
[data-theme="dark"] .post-content td {
border-bottom-color: rgba(148, 163, 184, 0.08);
color: rgba(203, 213, 225, 0.8);
}
[data-theme="dark"] .post-content tbody tr:nth-child(even) {
background-color: rgba(30, 41, 59, 0.5);
}
[data-theme="dark"] .post-content tbody tr:hover {
background-color: rgba(30, 41, 59, 0.8);
}
[data-theme="dark"] .post-content table a {
color: var(--link-color-dark);
border-bottom-color: rgba(148, 163, 184, 0.4);
}
[data-theme="dark"] .post-content table a:hover {
color: var(--link-hover-color-dark);
border-bottom-color: var(--link-hover-color-dark);
}
[data-theme="dark"] .post-content table code {
background: rgba(148, 163, 184, 0.12);
color: rgba(203, 213, 225, 0.9);
border-color: rgba(148, 163, 184, 0.15);
}
[data-theme="dark"] .post-content th:first-child,
[data-theme="dark"] .post-content td:first-child {
/* 基础背景在下方按行设置 */
z-index: 2;
}
/* 深色模式 - 奇数行第一列 */
[data-theme="dark"] .post-content tbody tr:nth-child(odd) th:first-child,
[data-theme="dark"] .post-content tbody tr:nth-child(odd) td:first-child {
background: rgba(15, 23, 42, 0.95) !important;
}
/* 深色模式 - 偶数行第一列（斑马纹） */
[data-theme="dark"] .post-content tbody tr:nth-child(even) th:first-child,
[data-theme="dark"] .post-content tbody tr:nth-child(even) td:first-child {
background: rgba(30, 41, 59, 0.5) !important;
}
/* 深色模式 - 表头第一列 */
[data-theme="dark"] .post-content thead th:first-child {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.78)) !important;
}
/* 深色模式 - 悬停时第一列 */
[data-theme="dark"] .post-content tbody tr:hover th:first-child,
[data-theme="dark"] .post-content tbody tr:hover td:first-child {
background: rgba(30, 41, 59, 0.8) !important;
}
/* ── 表格变体样式 ── */
/* 紧凑型表格 */
.post-content table.compact th,
.post-content table.compact td {
padding: 10px 14px;
font-size: 0.9em;
}
/* 无边框表格 */
.post-content table.borderless {
border: none;
box-shadow: none;
background: transparent;
}
.post-content table.borderless th,
.post-content table.borderless td {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.post-content table.borderless thead {
background: transparent;
}
[data-theme="dark"] .post-content table.borderless {
border-color: transparent;
background: transparent;
}
[data-theme="dark"] .post-content table.borderless th,
[data-theme="dark"] .post-content table.borderless td {
border-bottom-color: rgba(148, 163, 184, 0.15);
}
[data-theme="dark"] .post-content table.borderless thead {
background: transparent;
}
/* 高亮表格 */
.post-content table.highlight {
border-left: 4px solid rgba(0, 0, 0, 0.6);
}
.post-content table.highlight thead {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.03));
}
.post-content table.highlight th {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .post-content table.highlight {
border-left-color: rgba(168, 181, 205, 0.7);
}
[data-theme="dark"] .post-content table.highlight thead {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.85));
}
[data-theme="dark"] .post-content table.highlight th {
border-bottom-color: rgba(148, 163, 184, 0.25);
}
.header-top {
display: flex;
align-items: center;
@@ -3667,6 +3938,151 @@ input[type=submit] {
border-radius: 4px;
}
/* ══════════════════════════════════════════════
强制覆盖 - 深色模式表格样式（修复缓存问题）
══════════════════════════════════════════════ */
/* 强制深色模式表头文字颜色 */
[data-theme="dark"] .post-content table th,
[data-theme="dark"] .post-content th {
color: rgba(203, 213, 225, 0.85) !important;
border-bottom-color: rgba(148, 163, 184, 0.15) !important;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.78)) !important;
}
/* 强制深色模式单元格文字颜色 */
[data-theme="dark"] .post-content table td,
[data-theme="dark"] .post-content td {
color: rgba(203, 213, 225, 0.8) !important;
border-bottom-color: rgba(148, 163, 184, 0.08) !important;
border-right-color: rgba(148, 163, 184, 0.08) !important;
}
/* 强制深色模式表格背景 */
[data-theme="dark"] .post-content table {
background: rgba(15, 23, 42, 0.95) !important;
border-color: rgba(148, 163, 184, 0.18) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}
/* 强制深色模式表格所有边框 */
[data-theme="dark"] .post-content table th,
[data-theme="dark"] .post-content table td {
border: 1px solid rgba(148, 163, 184, 0.12) !important;
}
[data-theme="dark"] .post-content table th {
border-bottom: 2px solid rgba(148, 163, 184, 0.2) !important;
}
/* 强制深色模式代码样式 */
[data-theme="dark"] .post-content table code {
background: rgba(148, 163, 184, 0.12) !important;
color: rgba(203, 213, 225, 0.9) !important;
border-color: rgba(148, 163, 184, 0.15) !important;
}
/* 强制深色模式链接样式 */
[data-theme="dark"] .post-content table a {
color: var(--link-color-dark) !important;
border-bottom-color: rgba(148, 163, 184, 0.4) !important;
}
[data-theme="dark"] .post-content table a:hover {
color: var(--link-hover-color-dark) !important;
}
/* 强制深色模式斑马纹 */
[data-theme="dark"] .post-content table tbody tr:nth-child(even) {
background-color: rgba(30, 41, 59, 0.5) !important;
}
[data-theme="dark"] .post-content table tbody tr:hover {
background-color: rgba(30, 41, 59, 0.8) !important;
}
/* 强制深色模式冻结列（第一列） */
[data-theme="dark"] .post-content table thead th:first-child {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.78)) !important;
}
[data-theme="dark"] .post-content table tbody tr:nth-child(odd) td:first-child,
[data-theme="dark"] .post-content table tbody tr:nth-child(odd) th:first-child {
background: rgba(15, 23, 42, 0.95) !important;
}
[data-theme="dark"] .post-content table tbody tr:nth-child(even) td:first-child,
[data-theme="dark"] .post-content table tbody tr:nth-child(even) th:first-child {
background: rgba(30, 41, 59, 0.5) !important;
}
[data-theme="dark"] .post-content table tbody tr:hover td:first-child,
[data-theme="dark"] .post-content table tbody tr:hover th:first-child {
background: rgba(30, 41, 59, 0.8) !important;
}
/* ══════════════════════════════════════════════
深色模式滚动条样式
══════════════════════════════════════════════ */
/* 深色模式滚动条整体 */
[data-theme="dark"] ::-webkit-scrollbar {
width: 13px;
height: 13px;
background: rgba(15, 23, 42, 0.5);
}
/* 深色模式滚动条轨道 */
[data-theme="dark"] ::-webkit-scrollbar-track {
background: rgba(30, 41, 59, 0.3);
border-radius: 6px;
}
/* 深色模式滚动条滑块 */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
min-height: 16px;
background-color: rgba(148, 163, 184, 0.4);
background-clip: padding-box;
border: 3px solid rgba(30, 41, 59, 0.8);
border-radius: 6px;
transition: background-color 0.2s ease;
}
/* 深色模式滚动条滑块悬停 */
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background-color: rgba(148, 163, 184, 0.6);
}
/* 深色模式滚动条角落 */
[data-theme="dark"] ::-webkit-scrollbar-corner {
background: rgba(15, 23, 42, 0.5);
}
/* Firefox深色模式滚动条 */
[data-theme="dark"] * {
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.4) rgba(30, 41, 59, 0.3);
}
/* ══════════════════════════════════════════════ */
/* 表格滚动条深色模式 */
[data-theme="dark"] .post-content table::-webkit-scrollbar {
height: 8px;
background: rgba(15, 23, 42, 0.3);
}
[data-theme="dark"] .post-content table::-webkit-scrollbar-thumb {
background-color: rgba(148, 163, 184, 0.3);
border: 2px solid rgba(30, 41, 59, 0.5);
border-radius: 4px;
}
[data-theme="dark"] .post-content table::-webkit-scrollbar-track {
background: rgba(30, 41, 59, 0.2);
border-radius: 4px;
}
.img-grid .sen-image-frame > img {
width: 100%;
height: 100%;