feat: 优化Markdown表格样式，完美支持深色模式
新增特性： - 现代化表格设计（圆角12px、毛玻璃效果、柔和阴影） - 完整的深色模式支持（表格、边框、滚动条） - 响应式设计（移动端横向滚动、第一列冻结） - 多种表格变体（紧凑型、无边框、高亮） 修复问题： - 修复深色模式下表格边框显示为白色 - 修复移动端滚动条在深色模式下为白色 - 修复冻结列背景色与行不一致 - 优化深色模式配色，避免刺眼
This commit is contained in:
Vaica committed
1 parent
9ecad14b6b
commit
75af2e3c6a
3 files changed
+1106
No files matched your search
@@ -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%;
|
||||
|
||||
Reference in new issue
Block a user