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

[mirotalk] - css refactoring

Browse Source
This commit is contained in:
Miroslav Pejic
2022-01-19 16:42:21 +01:00
parent 54bfe69371
commit 3d9d41ebe9
3 changed files with 39 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/client.css
+17 -117
View File
@@ -278,16 +278,6 @@ body {
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
/* fadeIn effect */
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
overflow: hidden;
}
@@ -322,12 +312,12 @@ body {
.videoAvatarImage {
z-index: 8;
display: none;
position: absolute;
/*center*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
/*--------------------------------------------------------------
@@ -353,15 +343,6 @@ body {
border-radius: 20px;
background: transparent;
box-shadow: var(--box-shadow);
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
overflow: hidden;
}
@@ -373,6 +354,12 @@ body {
padding: 4px;
border-radius: 5px;
opacity: var(--btn-opc);
color: var(--btn-color);
}
#buttonsBar button:hover {
color: var(--hover-color);
transform: var(--btns-hover-scale);
}
#buttonsBar button:focus {
@@ -391,45 +378,7 @@ body {
transition: all 0.3s ease-in-out;
}
#shareRoomBtn,
#audioBtn,
#videoBtn,
#screenShareBtn,
#recordStreamBtn,
#fullScreenBtn,
#swapCameraBtn,
#chatRoomBtn,
#captionBtn,
#myHandBtn,
#whiteboardBtn,
#fileShareBtn,
#mySettingsBtn,
#aboutBtn,
#leaveRoomBtn {
color: var(--btn-color);
}
#initAudioBtn:hover,
#initVideoBtn:hover,
#shareRoomBtn:hover,
#audioBtn:hover,
#videoBtn:hover,
#screenShareBtn:hover,
#recordStreamBtn:hover,
#fullScreenBtn:hover,
#swapCameraBtn:hover,
#chatRoomBtn:hover,
#captionBtn:hover,
#myHandBtn:hover,
#fileShareBtn:hover,
#whiteboardBtn:hover,
#mySettingsBtn:hover,
#aboutBtn:hover {
color: var(--hover-color);
transform: var(--btns-hover-scale);
}
#leaveRoomBtn:hover {
#buttonsBar #leaveRoomBtn:hover {
color: red;
transform: var(--btns-hover-scale);
}
@@ -439,10 +388,6 @@ body {
color: #e74c3c !important;
}
button {
cursor: pointer;
}
/*--------------------------------------------------------------
# Chat room aka msger
--------------------------------------------------------------*/
@@ -460,15 +405,6 @@ button {
width: var(--msger-width);
background: var(--msger-bg);
/* text-align: justify; */
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
overflow: hidden;
border-radius: 5px;
box-shadow: var(--box-shadow);
@@ -708,16 +644,6 @@ button:hover {
height: 50%;
cursor: default;
background: var(--msger-private-bg);
/* fade in */
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
overflow: hidden;
}
@@ -920,11 +846,6 @@ video:fullscreen {
display: none;
z-index: 16;
min-width: 320px;
/* center */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* gui */
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
@@ -932,16 +853,6 @@ video:fullscreen {
box-shadow: var(--box-shadow);
padding: 10px;
min-width: 330px;
/* fade in */
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
overflow: hidden;
}
@@ -1084,11 +995,9 @@ video:fullscreen {
background-color: transparent !important;
}
/*
.swal2-popup {
font-size: 0.8rem !important;
}
*/
/* .swal2-popup {
font-size: 0.8 !important;
} */
.swal2-select {
background-color: black !important;
@@ -1201,21 +1110,6 @@ progress {
height: var(--iframe-height);
box-shadow: var(--box-shadow);
border-radius: 5px;
/* center */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* fade in */
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
#videoUrlHeader {
@@ -1335,6 +1229,10 @@ progress {
# Common
--------------------------------------------------------------*/
button {
cursor: pointer;
}
.hidden {
display: none;
}
@@ -1348,6 +1246,8 @@ progress {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.center-img {
public/js/client.js
+16 -17
View File
@@ -58,6 +58,19 @@ const wbImageInput = 'image/*';
const wbWidth = 800;
const wbHeight = 600;
const chatInputEmoji = {
'<3': '\u2764\uFE0F',
'</3': '\uD83D\uDC94',
':D': '\uD83D\uDE00',
':)': '\uD83D\uDE03',
';)': '\uD83D\uDE09',
':(': '\uD83D\uDE12',
':p': '\uD83D\uDE1B',
';p': '\uD83D\uDE1C',
":'(": '\uD83D\uDE22',
':+1:': '\uD83D\uDC4D',
}; // https://github.com/wooorm/gemoji/blob/main/support.md
let myPeerId;
// video cam - screen max frame rate
@@ -112,21 +125,7 @@ let peerMediaElements = {}; // keep track of our peer <video> tags, indexed by p
let chatMessages = []; // collect chat messages to save it later if want
let transcripts = []; //collect all the transcripts to save it later if you need
let backupIceServers = [{ urls: 'stun:stun.l.google.com:19302' }]; // backup iceServers
let chatInputEmoji = {
'<3': '\u2764\uFE0F',
'</3': '\uD83D\uDC94',
':D': '\uD83D\uDE00',
':)': '\uD83D\uDE03',
';)': '\uD83D\uDE09',
':(': '\uD83D\uDE12',
':p': '\uD83D\uDE1B',
';p': '\uD83D\uDE1C',
":'(": '\uD83D\uDE22',
':+1:': '\uD83D\uDC4D',
}; // https://github.com/wooorm/gemoji/blob/main/support.md
let countTime;
let countTime; // conference count time
// init audio-video
let initAudioBtn;
let initVideoBtn;
@@ -1318,7 +1317,7 @@ function loadLocalMedia(stream) {
// menu Status
myStatusMenu.setAttribute('id', 'myStatusMenu');
myStatusMenu.className = 'statusMenu';
myStatusMenu.className = 'statusMenu fadein';
// session time
myCountTimeImg.setAttribute('id', 'countTimeImg');
@@ -1448,7 +1447,7 @@ function loadRemoteMediaStream(stream, peers, peer_id) {
// menu Status
remoteStatusMenu.setAttribute('id', peer_id + '_menuStatus');
remoteStatusMenu.className = 'statusMenu';
remoteStatusMenu.className = 'statusMenu fadein';
// remote peer name element
remoteVideoParagraphImg.setAttribute('id', peer_id + '_nameImg');
public/view/client.html
+6 -6
View File
@@ -79,7 +79,7 @@ access to use this app.
https://fontawesome.com/icons?d=gallery
-->
<div id="buttonsBar">
<div id="buttonsBar" class="fadein">
<button id="shareRoomBtn" class="fas fa-users"></button>
<button id="audioBtn" class="fas fa-microphone"></button>
<button id="videoBtn" class="fas fa-video"></button>
@@ -103,7 +103,7 @@ access to use this app.
https://getemoji.com
-->
<section id="msgerDraggable" class="msger-draggable">
<section id="msgerDraggable" class="msger-draggable fadein">
<section id="msger" class="msger">
<header id="msgerHeader" class="msger-header">
<div class="msger-header-title"><i class="fas fa-comment-alt"></i> Chat</div>
@@ -139,7 +139,7 @@ access to use this app.
<!-- Start private msg -->
<section id="msgerCP">
<section id="msgerCP" class="center fadein">
<section id="msgerCPSec" class="msger">
<header id="msgerCPHeader" class="msger-private-header">
<div class="msger-header-title"><i class="fas fa-comment-alt"></i> Send Private messages</div>
@@ -170,7 +170,7 @@ access to use this app.
<!-- Start of caption section -->
<section id="captionDraggable" class="msger-draggable">
<section id="captionDraggable" class="msger-draggable fadein">
<section id="caption" class="msger">
<header id="captionHeader" class="msger-header">
<div class="msger-header-title"><i class="fas fa-comment-alt"></i> Captions</div>
@@ -195,7 +195,7 @@ access to use this app.
<!-- Start my settings -->
<section id="mySettings">
<section id="mySettings" class="center fadein">
<header id="mySettingsHeader">
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
</header>
@@ -365,7 +365,7 @@ access to use this app.
<!-- Start video URL iframe -->
<div id="videoUrlCont">
<div id="videoUrlCont" class="center fadein">
<div id="videoUrlHeader">
<button id="videoUrlCloseBtn" class="fas fa-times"></button>
</div>