aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Miroslav Pejic
2026-03-28 17:13:29 +01:00
parent f78931a68f
commit 81e09ec18f
7 changed files with 169 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/client.css
+142 -21
View File
@@ -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
+1 -1
View File
@@ -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
+12
View File
@@ -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
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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
+7 -5
View File
@@ -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
+2 -2
View File
@@ -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;
}