feat: 添加 Mermaid 图表拖拽和提示功能
- 添加鼠标左键拖拽移动图表 - 拖拽时显示 grabbing 光标,平时显示 grab 光标 - 添加底部提示文本:按住 Ctrl+滚轮缩放 | 拖拽移动 - 提示文本鼠标悬停时显示,支持夜间模式 - 防止拖拽时选中文本
This commit is contained in:
37
style.css
37
style.css
@@ -988,6 +988,43 @@ html.darkmode .mermaid-zoom-level {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* 提示文本 */
|
||||
.mermaid-hint {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
white-space: nowrap;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.mermaid-container:hover .mermaid-hint {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html.darkmode .mermaid-hint {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 拖拽时的光标 */
|
||||
.mermaid-container-inner.dragging {
|
||||
cursor: grabbing !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mermaid-container-inner:not(.dragging) {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
/* Mermaid 淡入动画 */
|
||||
@keyframes mermaidFadeIn {
|
||||
from {
|
||||
|
||||
Reference in New Issue
Block a user