[mirotalk] - improve settings UI

app/src/server.js

@@ -40,7 +40,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.52
+ * @version 1.3.53
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.3.52",
+    "version": "1.3.53",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {

public/css/client.css

@@ -699,8 +699,20 @@ a:hover {
     color: #fff;
 }
 
+button {
+    padding: 10px 20px;
+    font-size: 15px;
+    cursor: pointer;
+    transition:
+        color 0.3s ease,
+        background-color 0.3s ease,
+        border-color 0.3s ease,
+        transform 0.3s ease;
+    outline: none;
+}
+
 button:hover {
-    transform: var(--btns-hover-scale);
+    color: grey;
 }
 
 /*--------------------------------------------------------------
@@ -1061,7 +1073,7 @@ button:hover {
 
 #extraInfo {
     padding: 10px;
-    font-size: 0.8rem;
+    font-size: 14px;
     color: #fff;
     /* background: var(--select-bg); */
     border-radius: 10px;
@@ -1177,7 +1189,7 @@ th {
     padding: 10px;
     overflow: hidden;
     border-radius: 5px;
-    width: 35%;
+    width: 40%;
     background-color: var(--body-bg);
     min-height: 480px;
     display: flex;
@@ -1187,16 +1199,17 @@ th {
 
 .tabActions {
     position: relative;
-    width: 65%;
+    width: 60%;
     background-color: var(--body-bg);
     min-height: 500px;
-    max-height: 500px;
+    max-height: 550px;
     overflow-x: none;
     overflow-y: auto;
 }
 
 @media screen and (max-width: 830px) {
     .tab {
+        display: inline;
         width: 100%;
         min-height: auto;
         flex-direction: row;
@@ -1731,10 +1744,6 @@ hr {
     margin-bottom: 15px;
 }
 
-button {
-    cursor: pointer;
-}
-
 .hidden {
     display: none;
 }

public/css/whiteboard.css

@@ -154,7 +154,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    width: 220px;
+    width: 160px;
     font-size: 0.8em;
     text-align: left;
     padding: 8px 16px;

public/js/client.js

@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.51
+ * @version 1.3.53
  *
  */
 
@@ -10116,7 +10116,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: '<strong>WebRTC P2P v1.3.51</strong>',
+        title: '<strong>WebRTC P2P v1.3.53</strong>',
         imageAlt: 'mirotalk-about',
         imageUrl: images.about,
         customClass: { image: 'img-about' },