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>

web_src/css/base.css

@@ -30,6 +30,7 @@
   --page-spacing: 16px; /* space between page elements */
   --page-margin-x: 32px; /* minimum space on left and right side of page */
   --page-space-bottom: 64px; /* space between last page element and footer */
+  --transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */
 
   /* z-index */
   --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */

web_src/css/markup/codecopy.css

@@ -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;
+  }
 }

web_src/css/modules/animations.css

@@ -82,15 +82,6 @@ code.language-math.is-loading::after {
   }
 }
 
-@keyframes fadeout {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
 /* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
 @keyframes pulse-1p5 {
   0% {