diff --git a/public/css/client.css b/public/css/client.css index d3852c92..f32d2647 100755 --- a/public/css/client.css +++ b/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) */ diff --git a/public/css/documentPiP.css b/public/css/documentPiP.css index 2cce250c..e67abb4c 100644 --- a/public/css/documentPiP.css +++ b/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; } diff --git a/public/css/login.css b/public/css/login.css index 7f11f1ca..05a0e8a9 100644 --- a/public/css/login.css +++ b/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; diff --git a/public/css/videoGrid.css b/public/css/videoGrid.css index dadec213..94a920f3 100644 --- a/public/css/videoGrid.css +++ b/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); } diff --git a/public/css/waitingRoom.css b/public/css/waitingRoom.css index dc33e6d5..f1431325 100644 --- a/public/css/waitingRoom.css +++ b/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; } diff --git a/public/css/whiteboard.css b/public/css/whiteboard.css index ad91bd87..a3d8deef 100644 --- a/public/css/whiteboard.css +++ b/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; } diff --git a/public/css/widgets/support.css b/public/css/widgets/support.css index ce76fefd..5d29373d 100644 --- a/public/css/widgets/support.css +++ b/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; }