[mirotalksfu] - improve RTMP Streamer UI

public/css/RtmpStreamer.css

@@ -19,8 +19,9 @@ body {
     padding: 20px;
     background: var(--body-bg);
     color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    border: var(--border);
+    box-shadow: var(--box-shadow);
 }
 
 h1 {
@@ -29,10 +30,10 @@ h1 {
 }
 
 video {
-    border: 0.1px solid #ccc;
     margin: 10px 0;
-    border-radius: 8px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    border: var(--border);
+    box-shadow: var(--box-shadow);
 }
 
 .input-group-inline {
@@ -60,7 +61,7 @@ video {
 
 input,
 button {
-    padding: 10px;
+    padding: 15px;
     font-size: 16px;
     border: none;
     border-radius: 4px;
@@ -71,28 +72,32 @@ button {
 input[type='text'],
 input[type='password'] {
     flex: 1;
-    background: #2c2c2c;
     color: #fff;
+    border: var(--border);
+    background: var(--body-bg);
 }
 
 input[type='text'][readonly] {
-    background: #2c2c2c;
     color: #fff;
+    border: var(--border);
+    background: var(--body-bg);
 }
 
 button {
     cursor: pointer;
-    background-color: #007bff;
     color: #fff;
+    border: var(--border);
+    background: var(--btns-bg-color);
     transition: background-color 0.3s ease;
 }
 
 button:disabled {
-    background: #2c2c2c;
+    color: grey;
+    background: var(--body-bg);
     cursor: not-allowed;
 }
 button:hover {
-    background-color: #0056b3;
+    background-color: var(--select-bg);
 }
 .button-group {
     display: flex;
@@ -114,7 +119,7 @@ button:hover {
     color: white;
     padding: 15px;
     border-radius: 5px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--box-shadow);
     z-index: 1000;
     display: flex;
     align-items: center;
@@ -204,3 +209,46 @@ footer {
         padding: 8px;
     }
 }
+
+/*--------------------------------------------------------------
+# Keyframes
+--------------------------------------------------------------*/
+
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.fadein {
+    -webkit-animation: fadeIn ease-in 1;
+    -moz-animation: fadeIn ease-in 1;
+    animation: fadeIn ease-in 1;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    animation-duration: 1s;
+}