From 89bd5e3f45cf1f77666bf0937957709d44cd66d8 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Sun, 23 Jan 2022 17:49:52 +0800
Subject: [PATCH] upd: update style of drawio

---
 src/renderer/plugins/markdown-drawio.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/renderer/plugins/markdown-drawio.ts b/src/renderer/plugins/markdown-drawio.ts
index 5068959c..3ffe8672 100644
--- a/src/renderer/plugins/markdown-drawio.ts
+++ b/src/renderer/plugins/markdown-drawio.ts
@@ -120,10 +120,7 @@ const Drawio = defineComponent({
         h('div', { class: 'drawio-wrapper reduce-brightness', style: 'position: relative' }, [
           h(
             'div',
-            {
-              class: 'no-print',
-              style: 'position: absolute; right: 15px; top: 3px; z-index: 1;'
-            },
+            { class: 'drawio-action no-print' },
             [
               button(t('drawio.fit-height'), resize),
               button(t('reload'), reload),
@@ -424,6 +421,21 @@ export default {
   register: ctx => {
     ctx.markdown.registerPlugin(MarkdownItPlugin)
 
+    ctx.theme.addStyles(`
+      .markdown-view .markdown-body .drawio-wrapper .drawio-action {
+        position: absolute;
+        right: 15px;
+        top: 2px;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity .2s;
+      }
+
+      .markdown-view .markdown-body .drawio-wrapper:hover .drawio-action {
+        opacity: 1;
+      }
+    `)
+
     ctx.registerHook('TREE_NODE_SELECT', async ({ node }) => {
       if (node.path.toLowerCase().includes('.drawio')) {
         const { repo, path, name, type } = node