fix: toolbar buttons may be hard to see when in some theme. #3

lee88688 · Jul 12, 2023 · 0dca149 · 0dca149
1 parent e6e042b
commit 0dca149
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -90,14 +90,15 @@ function main() {
         template: `
 <div class="drawio-plugin__preview">
   ${svg}
+  <div class="overlay"></div>
   <div class="drawio-plugin__toolbar">
     <div class="drawio-plugin__toolbar-title"></div>
     <div class="drawio-plugin__toolbar-actions">
       <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="edit">
         <svg width="18" height="18" stroke="currentColor" viewBox="0 0 24 24" fill="none"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path></svg>
       </button>
       <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="download">
-        <svg viewBox="0 0 1024 1024" width="18" height="18"><path d="M810.666667 938.666667H213.333333c-72.533333 0-128-55.466667-128-128v-170.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v170.666667c0 25.6 17.066667 42.666667 42.666666 42.666666h597.333334c25.6 0 42.666667-17.066667 42.666666-42.666666v-170.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v170.666667c0 72.533333-55.466667 128-128 128z" p-id="2296"></path><path d="M512 682.666667c-12.8 0-21.333333-4.266667-29.866667-12.8l-213.333333-213.333334c-17.066667-17.066667-17.066667-42.666667 0-59.733333s42.666667-17.066667 59.733333 0l183.466667 183.466667 183.466667-183.466667c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-213.333333 213.333334c-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="2297"></path><path d="M512 682.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v512c0 25.6-17.066667 42.666667-42.666667 42.666667z" p-id="2298"></path></svg>
+        <svg viewBox="0 0 1024 1024" width="18" height="18" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M810.666667 938.666667H213.333333c-72.533333 0-128-55.466667-128-128v-170.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v170.666667c0 25.6 17.066667 42.666667 42.666666 42.666666h597.333334c25.6 0 42.666667-17.066667 42.666666-42.666666v-170.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v170.666667c0 72.533333-55.466667 128-128 128z"></path><path d="M512 682.666667c-12.8 0-21.333333-4.266667-29.866667-12.8l-213.333333-213.333334c-17.066667-17.066667-17.066667-42.666667 0-59.733333s42.666667-17.066667 59.733333 0l183.466667 183.466667 183.466667-183.466667c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733333l-213.333333 213.333334c-8.533333 8.533333-17.066667 12.8-29.866667 12.8z"></path><path d="M512 682.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v512c0 25.6-17.066667 42.666667-42.666667 42.666667z"></path></svg>
       </button>
       <button data-file-name="${fileName}" data-uuid="${payload.uuid}" data-on-click="remove">
         <svg width="18" height="18" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="4" y1="7" x2="20" y2="7"></line><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path></svg>

diff --git a/src/styles/provide.css b/src/styles/provide.css
@@ -12,13 +12,22 @@
     max-width: 100%;
 }
 
+.drawio-plugin__preview > .overlay {
+    display: none;
+    @apply absolute left-0 right-0 top-0 bottom-0;
+    background-image: linear-gradient(var(--ls-primary-background-color),transparent);
+}
+
+.drawio-plugin__preview:hover > .overlay {
+    display: block;
+}
+
 .drawio-plugin__toolbar {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    @apply backdrop-blur-3xl;
 }
 
 .drawio-plugin__preview:hover .drawio-plugin__toolbar {