imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use mic mute icons

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-29 15:05:26 +02:00
parent 152168ef2d
commit cb89dd408c
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
4 changed files with 103 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

10
res/css/views/voip/_CallView.scss
View file

@ -76,16 +76,22 @@ limitations under the License.
&.mx_VideoFeed_voice {
// We don't want to collide with the call controls that have 52px of height
padding-bottom: 52px;
margin-bottom: 52px;
background-color: $inverted-bg-color;
display: flex;
justify-content: center;
align-items: center;
}
&.mx_VideoFeed_video {
.mx_VideoFeed_video {
height: 100%;
background-color: #000;
}
.mx_VideoFeed_mic {
left: 10px;
bottom: 10px;
}
}
}

11
res/css/views/voip/_CallViewSidebar.scss
View file

@ -35,12 +35,23 @@ limitations under the License.
width: 100%;
&.mx_VideoFeed_voice {
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
}
.mx_VideoFeed_video {
border-radius: 4px;
}
.mx_VideoFeed_mic {
left: 6px;
bottom: 6px;
}
}
&.mx_CallViewSidebar_pipMode {

48
res/css/views/voip/_VideoFeed.scss
View file

@ -15,18 +15,52 @@ limitations under the License.
*/
.mx_VideoFeed {
border-radius: 4px;
overflow: hidden;
position: relative;
&.mx_VideoFeed_voice {
background-color: $inverted-bg-color;
}
&.mx_VideoFeed_video {
.mx_VideoFeed_video {
width: 100%;
background-color: transparent;
&.mx_VideoFeed_video_mirror {
transform: scale(-1, 1);
}
}
.mx_VideoFeed_mic {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: rgba(0, 0, 0, 0.5); // Same on both themes
border-radius: 100%;
&::before {
position: absolute;
content: "";
width: 16px;
height: 16px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: white; // Same on both themes
border-radius: 7px;
}
&.mx_VideoFeed_mic_muted::before {
mask-image: url('$(res)/img/voip/mic-muted.svg');
}
&.mx_VideoFeed_mic_unmuted::before {
mask-image: url('$(res)/img/voip/mic-unmuted.svg');
}
}
}
.mx_VideoFeed_mirror {
transform: scale(-1, 1);
}