feat: tweak copy/paste icon

vjousse · Jul 16, 2024 · 2490054 · 2490054
1 parent 3a5ba05
commit 2490054
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/content.rs b/src/content.rs
@@ -251,7 +251,7 @@ pub fn convert_md_to_html(md_content: &str, settings: &Settings, path: Option<&s
                 ));
 
                 events.push(Event::Html(
-                        "<button class=\"copy-to-clipboard\"><svg class=\"h-6 w-6 fill-white\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\"><path d=\"M 4 2 C 2.895 2 2 2.895 2 4 L 2 17 C 2 17.552 2.448 18 3 18 C 3.552 18 4 17.552 4 17 L 4 4 L 17 4 C 17.552 4 18 3.552 18 3 C 18 2.448 17.552 2 17 2 L 4 2 z M 8 6 C 6.895 6 6 6.895 6 8 L 6 20 C 6 21.105 6.895 22 8 22 L 20 22 C 21.105 22 22 21.105 22 20 L 22 8 C 22 6.895 21.105 6 20 6 L 8 6 z M 8 8 L 20 8 L 20 20 L 8 20 L 8 8 z\"></path></svg></button>\n" .into(),
+                        "<button class=\"copy-to-clipboard\" title=\"Copy to clipboard\"><svg class=\"h-6 w-6 fill-white\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\"><path d=\"M 4 2 C 2.895 2 2 2.895 2 4 L 2 17 C 2 17.552 2.448 18 3 18 C 3.552 18 4 17.552 4 17 L 4 4 L 17 4 C 17.552 4 18 3.552 18 3 C 18 2.448 17.552 2 17 2 L 4 2 z M 8 6 C 6.895 6 6 6.895 6 8 L 6 20 C 6 21.105 6.895 22 8 22 L 20 22 C 21.105 22 22 21.105 22 20 L 22 8 C 22 6.895 21.105 6 20 6 L 8 6 z M 8 8 L 20 8 L 20 20 L 8 20 L 8 8 z\"></path></svg></button>\n" .into(),
                 ));
                 events.push(Event::Html(begin.into()));
             }

diff --git a/static/css/emmett.css b/static/css/emmett.css
@@ -351,31 +351,43 @@ footer p {
 .code-block {
   position: relative;
 }
+
 .code-block button {
-  background-color: transparent;
-  border-radius: var(--standard-border-radius);
+  border-radius: 0.3rem;
   cursor: pointer;
   border: none;
+  transition: 0.3s;
+  padding: 0.5rem;
+}
+
+.code-block button:hover {
+  background-color: var(--text);
 }
 
 .code-block .language-name {
   display: inline-block;
-  background-color: #2b303b;
-  color: #ffffff;
+  background-color: #e0e0e0;
+  color: #333333;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 
   box-shadow: 0.3rem 0rem 0.3rem -0.05rem rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid white;
+
+  border-top-right-radius: var(--standard-border-radius);
 }
 
 .copy-to-clipboard {
   position: absolute;
   right: 0.5rem;
-  top: 2.2rem;
+  top: 2rem;
+  background-color: #2b303b;
 }
 .copy-to-clipboard svg {
   width: 1rem;
   height: 1rem;
   fill: white;
 }
+
+.copy-to-clipboard svg.fill-green {
+  fill: #9acc76;
+}
diff --git a/static/js/emmett.js b/static/js/emmett.js
@@ -30,7 +30,7 @@ function copyTextToClipboard(text, clickedElement) {
     function () {
       console.log("Async: Copying to clipboard was successful!");
       clickedElement.innerHTML =
-        '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 498.138 498.138" xml:space="preserve"> <g> <path d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472 c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457 C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474 l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917 H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47 c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051 c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745 c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/> </g> </svg>';
+        '<svg fill="#9acc76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="fill-green" viewBox="0 0 78.369 78.369" xml:space="preserve"> <g> <path d="M78.049,19.015L29.458,67.606c-0.428,0.428-1.121,0.428-1.548,0L0.32,40.015c-0.427-0.426-0.427-1.119,0-1.547l6.704-6.704 c0.428-0.427,1.121-0.427,1.548,0l20.113,20.112l41.113-41.113c0.429-0.427,1.12-0.427,1.548,0l6.703,6.704 C78.477,17.894,78.477,18.586,78.049,19.015z"/> </g> </svg>';
     },
     function (err) {
       console.error("Async: Could not copy text: ", err);