jiti-meet/css/_videolayout_default.scss

349 lines
6.2 KiB
SCSS
Raw Normal View History

#videoconference_page {
min-height: 100%;
position: relative;
transform: translate3d(0, 0, 0);
width: 100%;
}
#layout_wrapper {
@include ltr;
display: flex;
height: 100%;
}
#videospace {
display: block;
height: 100%;
width: 100%;
min-height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
overflow: hidden;
}
fix(large-video): do not show background for Firefox and temasys (#2316) * ref(large-video): reactify background This is pre-requisite work for disabling the background on certain browsers, namely Firefox. By moving the component to react, and in general encapsulating background logic, selectively disabling the background will be easier. The component was left for LargeVideo to update so it can continue to coordinate update timing with the actual large video display. If the background were moved completely into react and redux with LargeVideo, then background updates would occur before large video updates causing visual jank. * fix(large-video): do not show background for Firefox and temasys Firefox has performance issues with adding filter effects on animated elements. On temasys, the background videos weren't really displaying anyway. * some props refactoring Instead of passing in classes to LargeVideoBackground, rely on explicit props. At some point LargeVideo will have to be reactified and the relationsihp between it and LargeVideoBackground might change, so for now make use of props to be explicit about how LargeVideoBackground can be modified. Also, set the jitsiTrack to display on LargeVideoBackground to null if the background is not displayed. This was an existing optimization, although previously done with pausing and playing. * squash: use newly exposed RTCBrowserType * squash: rebase and use new lib browser util * squash: move hiding logic all into LargeVideo * squash: remove hiding of background on stream change. hopefully doesnt break anything
2018-02-13 00:29:29 +00:00
#largeVideoBackgroundContainer,
.large-video-background {
2017-06-09 19:22:07 +00:00
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
2017-05-10 10:07:00 +00:00
width: 100%;
fix(large-video): do not show background for Firefox and temasys (#2316) * ref(large-video): reactify background This is pre-requisite work for disabling the background on certain browsers, namely Firefox. By moving the component to react, and in general encapsulating background logic, selectively disabling the background will be easier. The component was left for LargeVideo to update so it can continue to coordinate update timing with the actual large video display. If the background were moved completely into react and redux with LargeVideo, then background updates would occur before large video updates causing visual jank. * fix(large-video): do not show background for Firefox and temasys Firefox has performance issues with adding filter effects on animated elements. On temasys, the background videos weren't really displaying anyway. * some props refactoring Instead of passing in classes to LargeVideoBackground, rely on explicit props. At some point LargeVideo will have to be reactified and the relationsihp between it and LargeVideoBackground might change, so for now make use of props to be explicit about how LargeVideoBackground can be modified. Also, set the jitsiTrack to display on LargeVideoBackground to null if the background is not displayed. This was an existing optimization, although previously done with pausing and playing. * squash: use newly exposed RTCBrowserType * squash: rebase and use new lib browser util * squash: move hiding logic all into LargeVideo * squash: remove hiding of background on stream change. hopefully doesnt break anything
2018-02-13 00:29:29 +00:00
#largeVideoBackground {
min-height: 100%;
min-width: 100%;
fix(large-video): do not show background for Firefox and temasys (#2316) * ref(large-video): reactify background This is pre-requisite work for disabling the background on certain browsers, namely Firefox. By moving the component to react, and in general encapsulating background logic, selectively disabling the background will be easier. The component was left for LargeVideo to update so it can continue to coordinate update timing with the actual large video display. If the background were moved completely into react and redux with LargeVideo, then background updates would occur before large video updates causing visual jank. * fix(large-video): do not show background for Firefox and temasys Firefox has performance issues with adding filter effects on animated elements. On temasys, the background videos weren't really displaying anyway. * some props refactoring Instead of passing in classes to LargeVideoBackground, rely on explicit props. At some point LargeVideo will have to be reactified and the relationsihp between it and LargeVideoBackground might change, so for now make use of props to be explicit about how LargeVideoBackground can be modified. Also, set the jitsiTrack to display on LargeVideoBackground to null if the background is not displayed. This was an existing optimization, although previously done with pausing and playing. * squash: use newly exposed RTCBrowserType * squash: rebase and use new lib browser util * squash: move hiding logic all into LargeVideo * squash: remove hiding of background on stream change. hopefully doesnt break anything
2018-02-13 00:29:29 +00:00
}
2017-05-10 10:07:00 +00:00
}
#largeVideoBackgroundContainer {
filter: blur(40px);
}
2017-05-10 10:07:00 +00:00
.videocontainer {
position: relative;
text-align: center;
overflow: 'hidden';
}
#localVideoWrapper {
display:inline-block;
}
.flipVideoX {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
}
#localVideoWrapper video,
#localVideoWrapper object {
2017-01-09 21:32:25 +00:00
border-radius: $borderRadius !important;
cursor: hand;
object-fit: cover;
}
#largeVideo,
#largeVideoWrapper,
#largeVideoContainer {
overflow: hidden;
text-align: center;
&.transition {
transition: width 1s, height 1s, top 1s;
}
}
#largeVideoContainer {
height: 100%;
width: 100%;
}
2017-05-10 10:07:00 +00:00
#largeVideoWrapper {
box-shadow: 0 0 20px -2px #444;
}
#largeVideo,
#largeVideoWrapper
{
object-fit: cover;
}
#sharedVideo video {
width: 100%;
height: 100%;
}
#sharedVideo.disable-pointer {
pointer-events: none;
}
#sharedVideo,
#etherpad,
#localVideoWrapper video,
#localVideoWrapper object,
#localVideoWrapper,
#largeVideoWrapper,
#largeVideoWrapper>video,
#largeVideoWrapper>object,
.videocontainer>video,
.videocontainer>object {
position: absolute;
left: 0;
top: 0;
z-index: $zindex1;
width: 100%;
height: 100%;
}
2016-09-22 16:00:11 +00:00
#etherpad {
text-align: center;
}
#etherpad {
z-index: $zindex0;
}
#alwaysOnTop .displayname {
font-size: 15px;
position: inherit;
width: 100%;
left: 0px;
top: 0px;
margin-top: 10px;
}
2016-09-28 21:31:40 +00:00
/**
* Audio indicator on video thumbnails.
*/
.videocontainer>span.audioindicator,
.videocontainer>.audioindicator-container {
2016-09-28 21:31:40 +00:00
position: absolute;
display: inline-block;
left: 6px;
top: 50%;
2016-09-29 05:22:05 +00:00
margin-top: -17px;
2016-09-28 21:31:40 +00:00
width: 6px;
2016-09-29 05:22:05 +00:00
height: 35px;
z-index: $zindex2;
2016-09-28 21:31:40 +00:00
border: none;
.audiodot-top,
2016-09-29 05:22:05 +00:00
.audiodot-bottom,
.audiodot-middle {
2016-09-28 21:31:40 +00:00
opacity: 0;
display: inline-block;
2016-09-29 05:22:05 +00:00
@include circle(5px);
background: $audioLevelShadow;
2016-09-28 21:31:40 +00:00
margin: 1px 0 1px 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
2016-09-29 05:22:05 +00:00
}
span.audiodot-top::after,
span.audiodot-bottom::after,
span.audiodot-middle::after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
-webkit-filter: blur(0.5px);
filter: blur(0.5px);
background: $audioLevelBg;
2016-09-28 21:31:40 +00:00
}
}
#reloadPresentation {
display: none;
position: absolute;
color: #FFFFFF;
top: 0;
right:0;
padding: 10px 10px;
font-size: 11pt;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
border-radius: 5px;
background-clip: padding-box;
-webkit-border-radius: 5px;
-webkit-background-clip: padding-box;
z-index: $reloadZ; /*The reload button should appear on top of the header!*/
}
#dominantSpeaker {
visibility: hidden;
width: 300px;
height: 300px;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#mixedstream {
display:none !important;
}
#dominantSpeakerAvatarContainer,
2016-09-28 21:31:40 +00:00
.dynamic-shadow {
width: 200px;
height: 200px;
2016-09-28 21:31:40 +00:00
}
#dominantSpeakerAvatarContainer {
top: 50px;
margin: auto;
position: relative;
overflow: hidden;
visibility: inherit;
}
2016-09-28 21:31:40 +00:00
.dynamic-shadow {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
transition: box-shadow 0.3s ease;
}
.avatar-container {
@include maxSize(60px);
2016-10-27 13:09:27 +00:00
@include absoluteAligning();
display: flex;
justify-content: center;
height: 50%;
width: auto;
overflow: hidden;
.userAvatar {
height: 100%;
object-fit: cover;
width: 100%;
top: 0px;
left: 0px;
position: absolute;
}
}
#videoNotAvailableScreen {
text-align: center;
#avatarContainer {
border-radius: 50%;
display: inline-block;
height: 50vh;
margin-top: 25vh;
overflow: hidden;
width: 50vh;
#avatar {
height: 100%;
object-fit: cover;
width: 100%;
}
}
}
.sharedVideoAvatar {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
object-fit: cover;
}
.videoMessageFilter {
-webkit-filter: grayscale(.5) opacity(0.8);
filter: grayscale(.5) opacity(0.8);
}
#remotePresenceMessage,
#remoteConnectionMessage {
position: absolute;
width: auto;
z-index: $zindex2;
font-weight: 600;
font-size: 14px;
text-align: center;
color: #FFF;
left: 50%;
transform: translate(-50%, 0);
}
#remotePresenceMessage .presence-label,
#remoteConnectionMessage {
opacity: .80;
text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
0px 1px 1px rgba(0,0,0,0.3),
1px 0px 1px rgba(0,0,0,0.3),
0px 0px 1px rgba(0,0,0,0.3);
background: rgba(0,0,0,.5);
border-radius: 5px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#remoteConnectionMessage {
display: none;
}
.display-video {
.avatar-container {
visibility: hidden;
}
video {
visibility: visible;
}
}
.display-avatar-only {
.avatar-container {
visibility: visible;
}
video {
visibility: hidden;
}
}
.presence-label {
color: $participantNameColor;
font-size: 12px;
font-weight: 100;
left: 0;
margin: 0 auto;
overflow: hidden;
pointer-events: none;
right: 0;
text-align: center;
text-overflow: ellipsis;
top: calc(50% + 30px);
white-space: nowrap;
width: 100%;
}