fix css and js for success animation

proj/y2t/assets/css/colors.css

@@ -1,7 +1,7 @@
 :root {
     --black: #232D37;
     --white: #FAE2D3;
-    --succes: #3CB57F;
+    --success: #3CB57F;
   }
 
 body {

proj/y2t/assets/css/layout.css

@@ -29,7 +29,7 @@ div.y2t-output button {
     display:block;
 }
 
-div.y2t-output div {    
+div.y2t-output div.promptext {    
     max-height: 120px;
     overflow-y: scroll;
     display:block;

proj/y2t/assets/css/style.css

@@ -135,4 +135,38 @@ section#output {
 section#output div.y2t-output {
     margin-top: 40px;
     margin-bottom: 40px;
+}
+
+div.y2t-output {
+    position: relative;
+}
+
+div.copied {
+    position: absolute;
+    background-color: var(--success);
+    color: white;
+    font-size: 1.2rem;
+    padding: 10px;
+    right: -15px;
+    top: -10px;
+    transform: rotate(10deg);
+}
+
+.success {
+  animation: fade-in 3s forwards;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  30% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }

proj/y2t/assets/js/main.js

@@ -31,7 +31,7 @@ Vue.component('copbox',{
       successOk(){
         this.isSuccess = true;
         this.$refs.element.addEventListener('animationend', () => {
-          this.isFaded = false;
+          this.isSuccess = false;
         });
       }
     }