Copy to clipboard feature for code block (#152)

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
2022-07-03 20:42:35 +02:00
parent 4f088e1312
commit a47218d28c
6 changed files with 114 additions and 14 deletions
--- a/assets/styles/clipboard.scss
+++ b/assets/styles/clipboard.scss
@ -0,0 +1,47 @@
+.clipboard-button {
+  position: absolute;
+  display: flex;
+  float: right;
+  right: 0;
+  padding: 0.69em;
+  margin: 0.5em;
+  color: var(--outlinegray);
+  border-color: var(--dark);
+  background-color: var(--lightgray);
+  filter: contrast(1.1);
+  border: 2px solid;
+  border-radius: 6px;
+  font-size: 0.8em;
+  z-index: 1;
+  opacity: 0;
+  transition: 0.12s;
+  
+  & > svg {
+    fill: var(--light);
+    filter: contrast(0.3);
+  }
+  
+  &:hover {
+    cursor: pointer;
+    border-color: var(--primary);
+    
+    & > svg {
+      fill: var(--primary);
+    }
+  }
+  
+  &:focus {
+    outline: 0;
+  }
+}
+
+.highlight {
+  position: relative;
+  
+  &:hover > .clipboard-button {
+    opacity: 1;
+    transition: 0.2s;
+  }
+}
+
+