From 621341500f0ca05d2116fe3516d4f2b35c8f4bbf Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Sun, 25 Jan 2026 00:57:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20Mermaid=20?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现工具栏自动隐藏：鼠标移出时自动隐藏，移入时显示
- 优化工具栏样式：使用半透明背景和毛玻璃效果
- 添加平滑的显示/隐藏动画过渡
- 为按钮添加自定义 tooltip 提示
- 支持夜间模式下的样式适配

需求：11.1, 11.2, 11.3-11.5, 20.2
---
 style.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 90 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index 91eee0a..abd35b4 100644
--- a/style.css
+++ b/style.css
@@ -941,14 +941,25 @@ article .wp-block-separator {
 	display: flex;
 	gap: 5px;
 	z-index: 10;
-	background: rgba(255, 255, 255, 0.9);
+	background: rgba(255, 255, 255, 0.85);
+	backdrop-filter: blur(10px);
 	border-radius: 6px;
 	padding: 5px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	opacity: 0;
+	transform: translateY(-10px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+	pointer-events: none;
+}
+
+.mermaid-container:hover .mermaid-zoom-controls {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
 }
 
 html.darkmode .mermaid-zoom-controls {
-	background: rgba(30, 30, 30, 0.9);
+	background: rgba(30, 30, 30, 0.85);
 }
 
 .mermaid-zoom-btn {
@@ -988,6 +999,38 @@ html.darkmode .mermaid-zoom-level {
 	color: #aaa;
 }
 
+/* 按钮 tooltip */
+.mermaid-zoom-btn[title] {
+	position: relative;
+}
+
+.mermaid-zoom-btn[title]::after {
+	content: attr(title);
+	position: absolute;
+	bottom: -35px;
+	left: 50%;
+	transform: translateX(-50%);
+	background: rgba(0, 0, 0, 0.85);
+	color: white;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 12px;
+	white-space: nowrap;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.2s ease;
+	z-index: 100;
+}
+
+.mermaid-zoom-btn[title]:hover::after {
+	opacity: 1;
+}
+
+html.darkmode .mermaid-zoom-btn[title]::after {
+	background: rgba(255, 255, 255, 0.9);
+	color: #333;
+}
+
 /* 提示文本 */
 .mermaid-hint {
 	position: absolute;
@@ -16787,14 +16830,25 @@ html.darkmode .mermaid-error-container .error-code code {
 	display: flex;
 	gap: 5px;
 	z-index: 10;
-	background: rgba(255, 255, 255, 0.9);
+	background: rgba(255, 255, 255, 0.85);
+	backdrop-filter: blur(10px);
 	border-radius: 6px;
 	padding: 5px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	opacity: 0;
+	transform: translateY(-10px);
+	transition: opacity 0.3s ease, transform 0.3s ease;
+	pointer-events: none;
+}
+
+.mermaid-container:hover .mermaid-zoom-controls {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
 }
 
 html.darkmode .mermaid-zoom-controls {
-	background: rgba(30, 30, 30, 0.9);
+	background: rgba(30, 30, 30, 0.85);
 }
 
 .mermaid-zoom-btn {
@@ -16834,6 +16888,38 @@ html.darkmode .mermaid-zoom-level {
 	color: #aaa;
 }
 
+/* 按钮 tooltip */
+.mermaid-zoom-btn[title] {
+	position: relative;
+}
+
+.mermaid-zoom-btn[title]::after {
+	content: attr(title);
+	position: absolute;
+	bottom: -35px;
+	left: 50%;
+	transform: translateX(-50%);
+	background: rgba(0, 0, 0, 0.85);
+	color: white;
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 12px;
+	white-space: nowrap;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.2s ease;
+	z-index: 100;
+}
+
+.mermaid-zoom-btn[title]:hover::after {
+	opacity: 1;
+}
+
+html.darkmode .mermaid-zoom-btn[title]::after {
+	background: rgba(255, 255, 255, 0.9);
+	color: #333;
+}
+
 /* ---------- 卡片内的 Mermaid 图表 ---------- */
 .card .mermaid-container,
 .post-card .mermaid-container,