Popup on copy link.

assets/src/css/base.css

@@ -2,7 +2,6 @@ body {
   font-family: 'Roboto', sans-serif;
   padding-top: 4em;
   background-color: #f8f8f8;
-  user-select: none;
   color: #212121;
 }
 

assets/src/css/prompts.css

@@ -206,3 +206,24 @@
   margin-right: .5em;
   border: 1px solid #dadada;
 }
+
+.prompt#share .action.copy-clipboard::after {
+  content: 'Copied!';
+  position: absolute;
+  left: -25%;
+  width: 150%;
+  font-size: .6em;
+  text-align: center;
+  background: #44a6f5;
+  color: #fff;
+  padding: .5em .2em;
+  border-radius: .4em;
+  top: -2em;
+  transition: .1s ease opacity;
+  opacity: 0;
+}
+
+.prompt#share .action.copy-clipboard.active::after {
+  opacity: 1;
+}
+

assets/src/css/styles.css

@@ -1,4 +1,5 @@
 @import "~normalize.css/normalize.css";
+@import "~noty/lib/noty.css";
 @import "./fonts.css";
 @import "./base.css";
 @import "./header.css";
@@ -180,6 +181,17 @@
  *            PROMPT           *
  * * * * * * * * * * * * * * * */
 
+.noty_buttons {
+  text-align: right;
+  padding: 0 10px 10px !important;
+}
+
+.noty_buttons button {
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0,0,0,0.1);
+  box-shadow: 0 0 0 0;
+  font-size: 14px;
+}
 
 /* * * * * * * * * * * * * * * *
  *            FOOTER           *