nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化 Mermaid 工具栏显示效果

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

需求：11.1, 11.2, 11.3-11.5, 20.2
This commit is contained in:
nanhaoluo
2026-01-25 00:57:11 +08:00
parent 0616150dae
commit 621341500f
1 changed files with 90 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
style.css
View File

@@ -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,