From 14c30985353c49fe70e8b8e8bf82e94e8aa27236 Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Sat, 11 Apr 2026 19:43:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/butterfly/source/css/style.css | 87 +++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/themes/butterfly/source/css/style.css b/themes/butterfly/source/css/style.css
index f5e5bc9..a00a8e4 100644
--- a/themes/butterfly/source/css/style.css
+++ b/themes/butterfly/source/css/style.css
@@ -697,3 +697,90 @@
 [data-theme='dark'] .my-footer-social-amoeba-path {
     fill: #2b3f49;
 }
+
+/* 仿照 Liushen & Butterfly 逻辑的高级表格美化 */
+
+/* 1. 表格容器处理 - 关键响应式滚动层 */
+#article-container .table-wrap,
+#article-container > table {
+    background: var(--liushen-card-bg);
+    border: var(--liushen-card-border);
+    border-radius: 12px;
+    box-shadow: var(--card-box-shadow);
+    margin: 20px 0;
+    backdrop-filter: blur(10px);
+    
+    /* 开启横向滚动逻辑 */
+    width: 100%;
+    overflow-x: auto; /* 小屏幕自动开启滚动 */
+    display: block;   /* 必须设为 block 滚动才生效 */
+}
+
+/* 2. 针对数据表格的结构重置（排除代码块 .highlight） */
+#article-container :not(.highlight) > table {
+    display: table; /* 容器内部恢复为 table 模式 */
+    border-collapse: separate;
+    border-spacing: 0;
+    border: none !important; 
+    width: 100%;
+    min-width: 500px; /* 强制表格在窄屏下不收缩过猛，从而触发容器滚动 */
+}
+
+/* 3. 表头美化 - 渐变风格 */
+#article-container :not(.highlight) > table thead {
+    background: linear-gradient(-45deg, #3eb8be, #6ecad0);
+}
+
+#article-container :not(.highlight) > table th {
+    color: #fff !important;
+    font-weight: 700;
+    padding: 12px 16px;
+    border: none !important;
+    text-align: left;
+}
+
+/* 4. 单元格美化 */
+#article-container :not(.highlight) > table td {
+    padding: 10px 16px;
+    color: var(--liushen-text);
+    /* 仅保留底部细线，模仿 Liushen 的极简风格 */
+    border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important;
+    border-right: none !important; 
+    border-top: none !important;
+    border-left: none !important;
+    transition: background 0.3s;
+}
+
+/* 5. 隔行变色 */
+#article-container :not(.highlight) > table tbody tr:nth-child(even) {
+    background: rgba(153, 169, 191, 0.05);
+}
+
+/* 6. 悬停高亮 */
+#article-container :not(.highlight) > table tbody tr:hover td {
+    background: rgba(62, 184, 190, 0.1);
+}
+
+/* 7. 滚动条美化 (仿照你代码中的蓝色滚动条) */
+#article-container .table-wrap::-webkit-scrollbar {
+    height: 4px; /* 横向滚动条高度 */
+}
+#article-container .table-wrap::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color, #2679cc);
+    border-radius: 10px;
+}
+
+/* 8. 黑夜模式适配 */
+[data-theme='dark'] #article-container .table-wrap,
+[data-theme='dark'] #article-container > table {
+    background: var(--liushen-card-secondbg);
+}
+
+[data-theme='dark'] #article-container :not(.highlight) > table thead {
+    background: linear-gradient(-45deg, #1f4a4d, #3eb8be);
+}
+
+[data-theme='dark'] #article-container :not(.highlight) > table td {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+    color: rgba(255, 255, 255, 0.7);
+}
\ No newline at end of file