Add viewer controller for mermaid (zoom, drag) (#36557)

Fix #25803

Now the rendered mermaid chart can be dragged or zoomed.

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
wxiaoguang
2026-02-10 14:36:31 +08:00
committed by GitHub
parent 09a88fb17e
commit 5e5703694d
5 changed files with 166 additions and 21 deletions

View File

@@ -3,8 +3,9 @@
top: 8px;
right: 6px;
padding: 9px;
visibility: hidden;
animation: fadeout 0.2s both;
visibility: hidden; /* prevent from click events even opacity=0 */
opacity: 0;
transition: var(--transition-hover-fade);
}
/* adjustments for comment content having only 14px font size */
@@ -23,8 +24,17 @@
background: var(--color-secondary-dark-1) !important;
}
/* all rendered code-block elements are in their container,
the manually written code-block elements on "packages" pages don't have the container */
.markup .code-block-container:hover .code-copy,
.markup .code-block:hover .code-copy {
visibility: visible;
animation: fadein 0.2s both;
opacity: 1;
}
@media (hover: none) {
.markup .code-copy {
visibility: visible;
opacity: 1;
}
}