[mirotalksfu] - resize main buttons

public/css/Room.css

@@ -48,7 +48,7 @@
     /* buttons bar horizontal */
     --btns-top: 50%;
     --btns-right: 0%;
-    --btns-left: 20px;
+    --btns-left: 10px;
     --btns-margin-left: 0px;
     --btns-width: 60px;
     --btns-flex-direction: column;
@@ -102,6 +102,7 @@ body {
     z-index: 2;
     position: absolute;
     display: flex;
+    padding: 5px;
 
     top: var(--btns-top);
     right: var(--btns-right);
@@ -110,9 +111,8 @@ body {
     width: var(--btns-width);
     flex-direction: var(--btns-flex-direction);
 
+    justify-content: space-around;
     grid-gap: 0.4rem;
-    align-items: center;
-    justify-content: center;
 
     -webkit-transform: translate(0%, -50%);
     -ms-transform: translate(0%, -50%);
@@ -123,13 +123,13 @@ body {
 
 #control button {
     border: none;
-    font-size: 1.2rem;
+    font-size: 1.8rem;
+    padding: 4px;
     transition: all 0.3s ease-in-out;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 10px;
-    width: 100%;
-    height: 100%;
 }
+
 #control p {
     font-size: small;
     cursor: default;

public/js/RoomClient.js

@@ -1309,8 +1309,8 @@ class RoomClient {
         switch (position) {
             case 'vertical':
                 document.documentElement.style.setProperty('--btns-top', '50%');
-                document.documentElement.style.setProperty('--btns-right', '0px');
+                document.documentElement.style.setProperty('--btns-right', '0%');
-                document.documentElement.style.setProperty('--btns-left', '20px');
+                document.documentElement.style.setProperty('--btns-left', '10px');
                 document.documentElement.style.setProperty('--btns-margin-left', '0px');
                 document.documentElement.style.setProperty('--btns-width', '60px');
                 document.documentElement.style.setProperty('--btns-flex-direction', 'column');