feat(esx_textui): new design

[core]/esx_textui/nui/css/style.css

@@ -1,6 +1,6 @@
 :root {
     --color: white;
-    --bgColor: #212121;
+    --bgColor: rgba(15, 15, 15, 0.9);
 }
 
 * {
@@ -24,22 +24,32 @@ body {
     min-width: 15%;
     width: fit-content;
     height: 50px;
-    background: rgba(5, 5, 5, 0.9);
+    background: rgba(15, 15, 15, 0.9);
     border-radius: 0.5rem;
-    animation: growDown 300ms ease-in-out;
     align-items: center;
 }
 
+.fadeIn {
+    animation: growUp 300ms ease-in-out;
+}
+
+.fadeOut {
+    animation: growDown 300ms ease-in-out;
+}
+
 .error {
-    border-left: 5px solid #c0392b;
+    border-left: 3px solid #c0392b;
+    border-right: 3px solid #c0392b;
 }
 
 .success {
-    border-left: 5px solid #2ecc71;
+    border-left: 3px solid #2ecc71;
+    border-right: 3px solid #2ecc71;
 }
 
 .info {
-    border-left: 5px solid #2980b9;
+    border-left: 3px solid #fb9b04;
+    border-right: 3px solid #fb9b04;
 }
 
 .innerText {
@@ -62,9 +72,21 @@ body {
 
 @keyframes growDown {
     0% {
+        transform: scaleY(1);
+    }
+    50% {
+        transform: scaleY(1.1);
+    }
+    100% {
         transform: scaleY(0);
     }
-    80% {
+}
+
+@keyframes growUp {
+    0% {
+        transform: scaleY(0);
+    }
+    50% {
         transform: scaleY(1.1);
     }
     100% {

[core]/esx_textui/nui/js/script.js

@@ -20,15 +20,15 @@ const types = {
 
 // the color codes example `i ~r~love~s~ donuts`
 const codes = {
-    "~r~": "red",
+    "~r~": "#c0392b",
     "~b~": "#378cbf",
-    "~g~": "green",
+    "~g~": "#2ecc71",
     "~y~": "yellow",
     "~p~": "purple",
     "~c~": "grey",
     "~m~": "#212121",
     "~u~": "black",
-    "~o~": "orange",
+    "~o~": "#fb9b04",
 };
 
 w.addEventListener("message", (event) => {
@@ -47,7 +47,11 @@ w.addEventListener("message", (event) => {
         }
     } else if (event.data.action === "hide") {
         if (lastType !== "") {
-            doc.getElementById(lastType).style.display = "none";
+            doc.getElementById(lastType).classList.add("fadeOut");
+            setTimeout(() => {
+                doc.getElementById(lastType).classList.remove("fadeOut");
+                doc.getElementById(lastType).style.display = "none";
+            }, 300);
         } else {
             console.log("There isn't a textUI displaying!?");
         }
@@ -78,6 +82,10 @@ notification = (data) => {
     }
 
     doc.getElementById(types[data.type]["id"]).style.display = "block";
-    lastType = types[data.type]["id"];
-    doc.getElementById(types[data.type]["message"]).innerHTML = data["message"];
+    doc.getElementById(types[data.type]["id"]).classList.add("fadeIn");
+    setTimeout(() => {
+        doc.getElementById(types[data.type]["id"]).classList.remove("fadeIn");
+        lastType = types[data.type]["id"];
+        doc.getElementById(types[data.type]["message"]).innerHTML = data["message"];
+    }, 300);
 };