Style and animation transitions

2 files changed, 22 insertions, 22 deletions

diff --git a/css/main.css b/css/main.css
index f2fa87a..679e762 100644
--- a/css/main.css
+++ b/css/main.css
@@ -268,26 +268,10 @@ table, td, tr, th {
     cursor: pointer;
 }
 
-/*#audioTable tbody tr.table-active:not(.success-transition) {
-    transition: background-color 2s;
-}
-
-#audioTable tbody tr.success-transition {
-    background-color: #c3e6cb;
-}*/
-
 #subtitleTable tbody tr {
     cursor: pointer;
 }
 
-/*#subtitleTable tbody tr.table-active:not(.success-transition) {
-    transition: background-color 2s;
-}
-
-#subtitleTable tbody tr.success-transition {
-    background-color: #c3e6cb;
-}*/
-
 .table-active {
     background-color: rgba(192, 118, 0.8,.20);
 }
@@ -300,4 +284,20 @@ table, td, tr, th {
 .table-hover .table-active:hover {
     background-color: rgba(192, 118, 0.8,.4);
     transition: none;
+}
+
+@keyframes successFadeOut {
+    0%   { background-color: rgba(0,188,140,0.4); }
+    15%  { background-color: rgba(0,188,140,0.4); }
+    100% { background-color: rgba(192, 118, 0.8,.20); }
+}
+
+#audioTable tbody tr.success-transition {
+    color: #fff;
+    animation: successFadeOut 1.5s ease-out;
+}
+
+#subtitleTable tbody tr.success-transition {
+    color: #fff;
+    animation: successFadeOut 1.5s ease-out;
 }
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 94ba542..4dadb2e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -360,11 +360,11 @@ async function setAudioStream(partsId, streamId, row) {
             },
             "success": (data) => {
                 //console.log("success");
-                $(row).siblings().removeClass("table-active").removeClass("table-success");
+                $(row).siblings().removeClass("table-active");
                 $(row).addClass("table-active").addClass("success-transition");
-                setTimeout(function() {
+                setTimeout(() => {
                     $(row).removeClass('success-transition');
-                }, 100);
+                }, 1500);
             },
             "error": (data) => {
                 console.log("ERROR L283");
@@ -526,11 +526,11 @@ async function setSubtitleStream(partsId, streamId, row) {
             },
             "success": (data) => {
                 //console.log("success");
-                $(row).siblings().removeClass("table-active").removeClass("table-success");
+                $(row).siblings().removeClass("table-active");
                 $(row).addClass("table-active").addClass("success-transition");
-                setTimeout(function() {
+                setTimeout(() => {
                     $(row).removeClass('success-transition');
-                }, 100);
+                }, 1500);
             },
             "error": (data) => {
                 console.log("ERROR L449");