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

[mirotalk] - keep original buttons style as more visible

Browse Source
This commit is contained in:
Miroslav Pejic
2024-07-21 09:56:37 +02:00
parent aa25902202
commit 340a6c641e
2 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/client.css
+21 -5
View File
@@ -39,17 +39,17 @@
--tab-btn-active: rgb(30 29 29);
--btn-bar-bg-color: #fff;
--btn-bar-color: #000;
--btn-bar-bg-color: #ffffff;
--btn-bar-color: #000000;
/* left buttons bar vertical default */
--btns-bg-color: rgba(0, 0, 0, 0.7);
--btns-top: 50%;
--btns-right: 0%;
--btns-left: 15px;
--btns-margin-left: 0px;
--btns-width: 40px;
--btns-flex-direction: column;
--btns-bg-color: rgba(0, 0, 0, 0.7);
/* bottom buttons bar horizontal default */
--bottom-btns-top: auto;
@@ -261,8 +261,16 @@ body {
#buttonsBar button {
padding: 5px !important;
border: none !important;
/*
Use this to maintain the theme colors of buttons while making them less visible during video playback.
color: var(--btn-bar-bg-color);
background: var(--btns-bg-color);
background: var(--btns-bg-color);
*/
color: var(--btn-bar-color);
background: var(--btn-bar-bg-color);
font-size: 1.5rem;
border-radius: 5px;
transition: all 0.3s ease-in-out;
@@ -312,10 +320,18 @@ body {
width: 48px;
padding: 10px;
font-size: 1.5rem;
/*
Use this to maintain the theme colors of buttons while making them less visible during video playback.
color: var(--btn-bar-bg-color);
background: var(--btns-bg-color);
*/
color: var(--btn-bar-color);
background: var(--btn-bar-bg-color);
border: none !important;
border-radius: 5px;
background: var(--btns-bg-color) !important;
transition: all 0.3s ease-in-out;
}
public/js/client.js
+8 -4
View File
@@ -26,6 +26,10 @@
// Signaling server URL
const signalingServer = getSignalingServer();
// Get the computed styles of the root element
const root = document.documentElement;
const computedStyles = getComputedStyle(root);
// This room
const myRoomId = getId('myRoomId');
const roomId = getRoomId();
@@ -4739,10 +4743,10 @@ function setRoomEmojiButton() {
function toggleEmojiPicker() {
if (emojiPickerContainer.style.display === 'block') {
elemDisplay(emojiPickerContainer, false);
setColor(roomEmojiPickerBtn, 'white');
setColor(roomEmojiPickerBtn, computedStyles.getPropertyValue('--btn-bar-color').trim());
} else {
emojiPickerContainer.style.display = 'block';
setColor(roomEmojiPickerBtn, 'yellow');
setColor(roomEmojiPickerBtn, 'green');
}
}
}
@@ -7941,7 +7945,7 @@ function handleHideMe(isHideMeActive) {
} else {
elemDisplay(myVideoWrap, true, 'inline-block');
hideMeBtn.className = className.hideMeOff;
setColor(hideMeBtn, 'white');
setColor(hideMeBtn, computedStyles.getPropertyValue('--btn-bar-color').trim());
playSound('on');
}
resizeVideoMedia();
@@ -7960,7 +7964,7 @@ function setMyHandStatus() {
playSound('raiseHand');
} else {
// Lower hand
setColor(myHandBtn, 'white');
setColor(myHandBtn, computedStyles.getPropertyValue('--btn-bar-color').trim());
elemDisplay(myHandStatusIcon, false);
setTippy(myHandBtn, 'Lower your hand', bottomButtonsPlacement);
}