[mirotalksfu] - #171 add new feature and UI/UX improvements

public/css/Room.css

@@ -163,7 +163,7 @@ body {
 #control {
     z-index: 3;
     position: absolute;
-    display: none;
+    display: flex;
     padding: 5px;
 
     top: var(--btns-top);
@@ -247,6 +247,20 @@ body {
     background: var(--body-bg) !important;
 }
 
+@media screen and (max-width: 500px) {
+    #bottomButtons button {
+        width: 46px;
+        font-size: 1.2rem;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    #bottomButtons button {
+        width: 36px;
+        font-size: 1rem;
+    }
+}
+
 /*--------------------------------------------------------------
 # Room QR
 --------------------------------------------------------------*/

public/css/VideoGrid.css

@@ -117,6 +117,22 @@
 }
 
 .videoMenuBar {
+    z-index: 2;
+    position: fixed;
+    display: inline;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.9);
+    font-size: small;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    cursor: default;
+    overflow: hidden;
+}
+
+.videoMenuBarShare {
     z-index: 2;
     position: absolute;
     display: inline;
@@ -133,7 +149,9 @@
 }
 
 .videoMenuBar input,
-.videoMenuBar button {
+.videoMenuBar button,
+.videoMenuBarShare button {
+    font-size: 1.2rem;
     float: right;
     color: #fff;
     background: transparent;
@@ -142,6 +160,7 @@
     border: none;
 }
 
+.videoMenuBarShare button:hover,
 .videoMenuBar button:hover {
     color: grey;
     transition: all 0.3s ease-in-out;
@@ -247,9 +266,19 @@ input[type='range'] {
     .username {
         font-size: 12px;
     }
+    .videoMenuBar input,
+    .videoMenuBar button,
+    .videoMenuBarShare button {
+        font-size: 1rem;
+    }
 }
 @media screen and (max-width: 500px) {
     .username {
         font-size: 10px;
     }
+    .videoMenuBar input,
+    .videoMenuBar button,
+    .videoMenuBarShare button {
+        font-size: 0.9rem;
+    }
 }