feature: modal darowizn

src/styles/animations.scss

@@ -1,7 +1,11 @@
+$animDuration: 150ms;
+$animType: ease-in-out;
+
+// List animation
 .list-anim-move,
 .list-anim-enter-active,
 .list-anim-leave-active {
-  transition: all 250ms ease;
+  transition: all $animDuration ease;
 }
 
 .list-anim-enter-from,
@@ -15,6 +19,21 @@
   width: 100%;
 }
 
+// View animation
+.view-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0.02;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+    min-height: 100%;
+  }
+}
+
+// Data status list animation
 .status-anim {
   &-enter-from,
   &-leave-to {
@@ -22,10 +41,38 @@
   }
 
   &-enter-active {
-    transition: all 100ms ease-out;
+    transition: all $animDuration ease-out;
   }
 
   &-leave-active {
-    transition: all 100ms ease-out;
+    transition: all $animDuration ease-out;
+  }
+}
+
+// Card animation
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.45);
+  }
+}
+
+// Modal animation
+.modal-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(-25%);
+    opacity: 0;
   }
 }

src/styles/global.scss

@@ -14,6 +14,8 @@
   --clr-error: #df3e3e;
   --clr-warning: #c59429;
 
+  --clr-honorable: #f47fff;
+
   font-size: 16px;
 }
 
@@ -54,38 +56,6 @@ body {
   }
 }
 
-.g-tooltip {
-  position: relative;
-
-  display: inline-block;
-  vertical-align: middle;
-
-  .content {
-    position: absolute;
-    left: 0;
-
-    z-index: 100;
-
-    visibility: hidden;
-    opacity: 0;
-
-    min-width: 250px;
-
-    background-color: #202020;
-    text-align: center;
-
-    border-radius: 0.5em;
-
-    transition: opacity 0.3s;
-    padding: 0.25em;
-  }
-
-  &:hover > .content {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
 button,
 input,
 select {
@@ -187,16 +157,23 @@ ul {
   &--grayed {
     color: #ccc;
   }
+
+  &--honorable {
+    color: var(--clr-honorable);
+    text-shadow: var(--clr-honorable) 0 0 10px;
+  }
 }
 
 button {
   cursor: pointer;
   color: white;
   background: none;
+  border-radius: 0.25em;
 
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5em;
 
   padding: 0.25em 0.5em;
 
@@ -211,7 +188,6 @@ button {
 
 button.btn--filled {
   background-color: #1a1a1a;
-  border-radius: 0.25em;
 
   &:hover {
     background-color: #2a2a2a;
@@ -245,7 +221,6 @@ button.btn--image {
 
   img {
     width: 1.5em;
-    margin-right: 0.5em;
     vertical-align: middle;
   }
 }

src/styles/variables.scss

@@ -12,6 +12,3 @@ $accent2Col: #ff3d5d;
 
 $skr: #ff5100;
 $twr: #ffbb00;
-
-$animDuration: 150ms;
-$animType: ease-in-out;