Merge pull request #31 from Junyi-99/feat-copy-btn

change the style of copy-btn
Junyi-99 · Apr 9, 2024 · d57d8a7 · d57d8a7
2 parents 81966ce + b83804c
commit d57d8a7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -803,7 +803,7 @@ ul.footer-menu>li {
 
 .highlight:hover .highlight-copy-btn {
     display: inline-block;
-    border: 1px solid var(--bg-color);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .highlight-copy-btn {
@@ -812,20 +812,20 @@ ul.footer-menu>li {
     top: 18px;
     right: 2px;
     border: 0;
-    border-radius: 4px;
+    border-radius: 6px;
     padding: 1px;
     font-size: 0.7em;
     line-height: 1.8;
     color: #fff;
-    background-color: #777;
+    background-color: rgba(255, 255, 255, 0.1);
     min-width: 25px;
     text-align: center;
+    transition: border 0.3s;
 }
 
 .highlight-copy-btn:hover {
     transition-duration: .1s;
-    background-color: #666;
-    border: 1px solid var(--bq-color) !important;
+    background-color: rgba(255, 255, 255, 0.3);
     cursor: pointer;
 }
 

diff --git a/assets/js/copy-code.js b/assets/js/copy-code.js
@@ -11,9 +11,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
     return;
   }
 
-  let svgCopyCode = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25"><path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14z"/></svg>';
-  let svgSuccessCode = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>';
-  let svgFailCode = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>';
+  let svgCopyCode = '<svg  xmlns="http://www.w3.org/2000/svg"  width="16"  height="16"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>';
+  let svgSuccessCode = '<svg  xmlns="http://www.w3.org/2000/svg"  width="16"  height="16"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M9 14l2 2l4 -4" /></svg>';
+  let svgFailCode = '<svg  xmlns="http://www.w3.org/2000/svg"  width="16"  height="16"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M10 12l4 4m0 -4l-4 4" /></svg>';
 
   function changeIcon(el, innerHtml) {
     el.innerHTML = innerHtml;