Added pop-ups, guide, fixed selection when dragging and duplicating links

src/assets/css/creation.css

@@ -223,4 +223,4 @@ html {
 .disabled-button {
   opacity: 0.2;
   cursor: auto;
-}
+}

src/assets/css/graph.css

@@ -13,7 +13,7 @@
   background-color: var(--body-color);
 }
 
-body>#app {
+body > #app {
   margin: 0;
   font-family: "Formular";
   height: 100%;
@@ -308,7 +308,7 @@ header {
   width: 20px;
   height: 20px;
   opacity: 0.6;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .menu-icon:last-child {
@@ -394,7 +394,8 @@ p {
   font-weight: 500;
 }
 
-.menu-prompt, .prompt {
+.menu-prompt,
+.prompt {
   left: 100%;
   position: absolute;
   z-index: 6;
@@ -410,7 +411,7 @@ p {
   border-radius: 4px;
   opacity: 0;
   box-shadow: 0px 1px 5px 1px 0px 1px 5px 1px rgb(56 58 63 / 35%);
-  transition: .2s;
+  transition: 0.2s;
   display: block;
   width: -webkit-max-content;
   width: -moz-max-content;
@@ -457,10 +458,11 @@ p {
   transform: translate(-50%, 0);
 }
 
-.menu-icon:hover .menu-prompt, .control-button:hover .prompt {
+.menu-icon:hover .menu-prompt,
+.control-button:hover .prompt {
   opacity: 1;
   visibility: visible;
-  transition-delay: .5s;
+  transition-delay: 0.5s;
 }
 
 .error {
@@ -474,6 +476,7 @@ p {
   position: absolute;
   z-index: 5;
   box-shadow: 0px 1px 5px 1px rgb(56 58 63 / 15%);
+  cursor: pointer;
 }
 
 .popup-el.popup-button-cont {
@@ -504,4 +507,23 @@ p {
   z-index: 0;
   color: gray;
   font-size: 14px;
-}
+}
+
+.fade-enter-active {
+  animation: fade-in 0.5s;
+}
+
+.fade-leave-active {
+  animation: fade-in 0.5s reverse;
+}
+
+@keyframes fade-in {
+  from {
+    transform: translateY(-40px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}