Add notification that clipboard copy was successful

static/css/quay.css

@@ -72,6 +72,7 @@ p.editable:hover i {
   float: right;
   display: inline-block;
   font-size: 1.2em;
+  position: relative;
 }
 
 .repo .pull-command .pull-container {
@@ -94,6 +95,49 @@ p.editable:hover i {
   cursor: pointer;
 }
 
+.repo #copyClipboard.zeroclipboard-is-hover {
+  background: #428bca;
+  color: white;
+}
+
+.repo #clipboardCopied {
+   position: absolute;
+   right: 0px;
+   top: 40px;
+
+   font-size: 0.8em;
+
+   background: black;
+   color: white;
+   padding: 6px;
+   border-radius: 4px;
+
+ 
+    -webkit-animation: fadeOut ease-in-out 1;
+    -moz-animation: fadeOut ease-in-out 1;
+    -ms-animation: fadeOut ease-in-out 1;
+    -o-animation: fadeOut ease-in-out 1;
+    animation: fadeOut ease-in-out 1;
+
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    -ms-animation-fill-mode: forwards;
+    -o-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+ 
+    -webkit-animation-duration: 4s;
+    -moz-animation-duration: 4s;
+    -ms-animation-duration: 4s;
+    -o-animation-duration: 4s;
+    animation-duration: 4s;
+}
+
+@-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-moz-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-ms-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-o-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+
 .repo .settings-cog {
   margin-left: 20px;
 }