[mirotalk] - style: refactor select inputs, dropdowns, and UI elements for consistent modern styling

public/css/client.css

@@ -115,6 +115,10 @@ body {
 
 #google_translate_element select {
     background: var(--select-bg) !important;
+    padding: 6px 10px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 8px;
+    color: #fff;
 }
 
 /*--------------------------------------------------------------
@@ -195,10 +199,25 @@ body {
     padding: 10px;
     background: var(--select-bg) !important;
     color: white;
-    border: var(--border);
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 8px;
     box-shadow: none;
     cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        background 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+.init-user select:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.init-user select:focus {
+    outline: none;
+    border-color: rgba(70, 120, 249, 0.6);
+    box-shadow: 0 0 0 2px rgba(70, 120, 249, 0.15);
 }
 
 .init-user button {
@@ -325,9 +344,15 @@ body {
     width: auto;
     font-size: 0.8em;
     padding: 8px 16px;
-    border-radius: 0;
+    border-radius: 8px;
     background: none;
-    transition: background 0.2s;
+    transition:
+        background 0.2s ease,
+        transform 0.15s ease;
+}
+
+#bottomButtons .dropdown-menu button:hover {
+    background: rgba(255, 255, 255, 0.08);
 }
 
 #bottomButtons .dropdown {
@@ -338,11 +363,13 @@ body {
     z-index: 9999;
     position: absolute;
     left: 0;
-    padding: 10px 5px;
+    padding: 8px;
     bottom: 45px;
-    border: var(--border);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
     background: var(--body-bg);
-    box-shadow: var(--box-shadow);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(12px);
 }
 
 #bottomButtons #audioMenu,
@@ -1176,8 +1203,10 @@ button {
     width: 240px;
     min-width: 200px;
     background: var(--body-bg);
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(12px);
     padding: 6px 0;
     margin: 4px 35px 0px 0px;
 }
@@ -1686,13 +1715,27 @@ button {
     min-width: 150px;
     max-width: 310px;
     margin-top: 10px;
-    /* height: 40px; */
     background: var(--select-bg) !important;
     color: #fff;
-    border: var(--border);
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 8px;
     box-shadow: none;
     cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        background 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+#mySettings select:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+
+#mySettings select:focus {
+    outline: none;
+    border-color: rgba(70, 120, 249, 0.6);
+    box-shadow: 0 0 0 2px rgba(70, 120, 249, 0.15);
 }
 
 #mySettingsCloseBtn {
@@ -1734,11 +1777,26 @@ button {
     margin-top: 10px;
     margin-bottom: 20px;
     width: 130px;
-    border: var(--border);
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 8px;
     background: var(--select-bg);
     color: white;
     cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        background 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+#themeColorPicker:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+#themeColorPicker:focus {
+    outline: none;
+    border-color: rgba(70, 120, 249, 0.6);
+    box-shadow: 0 0 0 2px rgba(70, 120, 249, 0.15);
 }
 
 #keepCustomTheme {
@@ -2139,9 +2197,10 @@ input:checked + .slider:before {
 --------------------------------------------------------------*/
 
 .swal2-popup {
-    border: var(--border) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 20px !important;
-    /* box-shadow: var(--box-shadow) !important; */
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
+    backdrop-filter: blur(12px);
 }
 
 .swal2-popup .swal2-styled {
@@ -2505,7 +2564,26 @@ progress {
     color: #ffffff;
     font-size: small;
     max-width: 135px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 8px;
+    padding: 6px 10px;
+    transition:
+        border-color 0.2s ease,
+        background 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+#recognitionDialect:hover,
+#recognitionLanguage:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+#recognitionDialect:focus,
+#recognitionLanguage:focus {
+    outline: none;
+    border-color: rgba(70, 120, 249, 0.6);
+    box-shadow: 0 0 0 2px rgba(70, 120, 249, 0.15);
 }
 
 /*--------------------------------------------------------------
@@ -2530,8 +2608,28 @@ progress {
 select {
     height: 40px;
     font-size: 0.9rem;
-    line-height: 40px;
+    padding: 0 10px;
     box-shadow: none;
+    color: #fff;
+    background: var(--select-bg);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 8px;
+    cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        background 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+select:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+select:focus {
+    outline: none;
+    border-color: rgba(70, 120, 249, 0.6);
+    box-shadow: 0 0 0 2px rgba(70, 120, 249, 0.15);
 }
 
 hr {
@@ -2656,10 +2754,18 @@ hr {
 .dropdown-toggle {
     /* padding: 10px 20px; */
     color: #fff;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     background-color: var(--body-bg);
     cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        background 0.2s ease;
+}
+
+.dropdown-toggle:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.06);
 }
 
 /* Styles for the dropdown menu container */
@@ -2667,9 +2773,11 @@ hr {
     display: none;
     margin-top: 5px;
     margin-bottom: 20px;
-    border: none;
-    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
     background-color: var(--body-bg);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(12px);
 }
 
 /*--------------------------------------------------------------
@@ -2689,9 +2797,18 @@ hr {
 /* Style the button that triggers the dropdown */
 .dropdown-toggle-custom {
     color: #fff;
-    border: var(--border);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
     background: var(--body-bg);
     cursor: pointer;
+    transition:
+        border-color 0.2s ease,
+        background 0.2s ease;
+}
+
+.dropdown-toggle-custom:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.06);
 }
 
 /* Dropdown menu */
@@ -2699,11 +2816,13 @@ hr {
     display: none;
     position: fixed;
     right: 0;
-    padding: 10px 0;
+    padding: 8px;
     min-width: 240px;
     border-radius: 12px;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.08);
     background: var(--body-bg);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(12px);
     z-index: 9999;
 }
 
@@ -2726,10 +2845,12 @@ hr {
     font-size: 0.8em;
     cursor: pointer;
     color: #fff;
+    border-radius: 8px;
+    transition: background 0.2s ease;
 }
 
 .dropdown-menu-custom li button:hover {
-    background: var(--select-bg) !important;
+    background: rgba(255, 255, 255, 0.08);
 }
 
 /* Styles for table cell with title (td) */

public/css/documentPiP.css

@@ -16,7 +16,7 @@ body {
 .pipVideo {
     width: 100%;
     object-fit: cover;
-    border-radius: 5px;
+    border-radius: 8px;
     aspect-ratio: 16 / 9;
 }
 

public/css/login.css

@@ -289,6 +289,18 @@
     padding-right: 24px;
     cursor: pointer;
     color: #fff;
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+.login-input-group select.form-input:hover {
+    border-color: rgba(70, 120, 249, 0.4);
+}
+.login-input-group select.form-input:focus {
+    border-color: #4678f9;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(70, 120, 249, 0.15);
 }
 .login-input-group select.form-input option {
     background: #1a1a2e;

public/css/videoGrid.css

@@ -9,7 +9,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    border-radius: 5px;
+    border-radius: 8px;
     opacity: 1;
     align-content: center;
     flex-wrap: wrap;
@@ -45,7 +45,7 @@
     left: 0;
     width: 75%;
     height: 100%;
-    border-radius: 5px;
+    border-radius: 8px;
     box-shadow: var(--box-shadow);
     overflow: hidden;
     /* border: 3px solid lime; */
@@ -250,7 +250,7 @@
     font-size: 12px;
     display: flex;
     align-items: center;
-    border-radius: 5px;
+    border-radius: 8px;
     background: var(--body-bg);
 }
 

public/css/waitingRoom.css

@@ -155,14 +155,14 @@
     flex: 1;
     height: 4px;
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
+    border-radius: 4px;
     overflow: hidden;
 }
 .waiting-audio-progress {
     height: 100%;
     width: 0;
     background: #4678f9;
-    border-radius: 2px;
+    border-radius: 4px;
     transition: width 0.3s linear;
 }
 

public/css/whiteboard.css

@@ -37,7 +37,7 @@
 @media (max-width: 768px) {
     #whiteboard {
         padding: 5px;
-        border-radius: 5px;
+        border-radius: 8px;
     }
 
     .whiteboard-header {
@@ -93,7 +93,7 @@
     background: transparent;
     color: #fff;
     border: none !important;
-    border-radius: 5px;
+    border-radius: 8px;
     transition: all 0.3s ease-in-out;
     transition: background 0.23s;
 }
@@ -182,9 +182,10 @@
     top: 100%;
     right: 0;
     display: none;
-    border-radius: 5px;
+    border-radius: 12px;
     background: var(--body-bg);
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
     overflow-y: auto;
     overflow-x: hidden;
     max-height: var(--wb-height) !important;
@@ -200,12 +201,13 @@
     text-align: left;
     padding: 10px;
     border: none;
+    border-radius: 8px;
     background: none;
     cursor: pointer;
 }
 
 .whiteboard-dropdown-menu button:hover {
-    background: var(--select-bg) !important;
+    background: rgba(255, 255, 255, 0.08);
     color: #ffffff;
 }
 

public/css/widgets/support.css

@@ -156,7 +156,7 @@
     color: #aaa;
     cursor: pointer;
     padding: 4px 6px;
-    border-radius: 4px;
+    border-radius: 8px;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
@@ -184,7 +184,7 @@
     font-size: 18px;
     line-height: 1;
     padding: 4px;
-    border-radius: 4px;
+    border-radius: 8px;
     transition: all 0.2s ease;
     color: #aaa;
 }