jiti-meet/css/_videolayout_default.scss

713 lines
14 KiB
SCSS
Raw Normal View History

#videoconference_page {
min-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;
&__background {
@include topLeft();
2017-01-09 21:32:25 +00:00
background-color: black;
2017-01-26 23:04:29 +00:00
border-radius: $borderRadius;
width: 100%;
height: 100%;
}
2016-11-11 15:09:07 +00:00
/**
* The toolbar of the video thumbnail.
*/
&__toolbar,
&__toptoolbar {
position: absolute;
left: 0;
pointer-events: none;
z-index: $zindex10;
2016-11-11 15:09:07 +00:00
width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width.
/**
* FIXME (lenny): Disabling pointer-events is a pretty big sin that
* sidesteps the problems. There are z-index wars occurring within
* videocontainer and AtlasKit Tooltips rely on their parent z-indexe
* being higher than whatever they need to appear over. So set a higher
* z-index for the tooltip containers but make any empty space not block
* mouse overs for various mouseover triggers.
*/
pointer-events: none;
* {
pointer-events: auto;
}
.indicator-container {
display: inline-block;
float: left;
pointer-events: all;
}
2016-11-11 15:09:07 +00:00
}
2016-11-11 15:09:07 +00:00
&__toolbar {
bottom: 0;
height: $thumbnailToolbarHeight;
padding: 0 5px 0 5px;
2016-11-11 15:09:07 +00:00
}
2016-11-11 15:09:07 +00:00
&__toptoolbar {
$toolbarIconMargin: 5px;
2016-11-11 15:09:07 +00:00
top: 0;
padding-bottom: 0;
/**
* Override text-align center as icons need to be left justified.
*/
text-align: left;
/**
* Intentionally use margin on the icon itself as AtlasKit InlineDialog
* positioning depends on the trigger (indicator icon).
*/
.indicator {
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
margin-left: 5px;
margin-top: $toolbarIconMargin;
}
.indicator-container:nth-child(1) .indicator {
margin-left: $toolbarIconMargin;
}
.indicator-container {
display: inline-block;
vertical-align: top;
.popover-trigger {
display: inline-block;
}
}
.connection-indicator,
.indicator {
position: relative;
2016-11-11 15:09:07 +00:00
font-size: 8px;
text-align: center;
line-height: $thumbnailIndicatorSize;
padding: 0;
@include circle($thumbnailIndicatorSize);
box-sizing: border-box;
z-index: $zindex3;
2016-11-11 15:09:07 +00:00
background: $dominantSpeakerBg;
color: $thumbnailPictogramColor;
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
.indicatoricon {
@include absoluteAligning();
}
2016-11-11 15:09:07 +00:00
.connection {
position: relative;
display: inline-block;
2016-11-11 15:09:07 +00:00
margin: 0 auto;
left: 0;
@include transform(translate(0, -50%));
2016-11-11 15:09:07 +00:00
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
&_empty,
&_lost
2016-11-11 15:09:07 +00:00
{
color: #8B8B8B;/*#FFFFFF*/
overflow: hidden;
}
&_full
{
@include topLeft();
color: #FFFFFF;/*#15A1ED*/
overflow: hidden;
}
&_ninja
{
font-size: 1.5em;
}
2016-11-11 15:09:07 +00:00
}
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
.icon-gsm-bars {
cursor: pointer;
2016-11-11 15:09:07 +00:00
font-size: 1em;
}
}
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
.hide-connection-indicator {
display: none;
}
2016-11-11 15:09:07 +00:00
}
2016-11-11 15:09:07 +00:00
&__hoverOverlay {
2017-01-09 21:32:25 +00:00
background: rgba(0,0,0,.6);
border-radius: $borderRadius;
position: absolute;
top: 0px;
left: 0px;
2016-11-11 15:09:07 +00:00
width: 100%;
height: 100%;
visibility: hidden;
z-index: $zindex2;
2016-11-11 15:09:07 +00:00
}
&.shift-right {
&#largeVideoContainer {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
}
}
}
#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;
}
#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,
#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;
}
/**
* Positions video thumbnail display name and editor.
*/
#alwaysOnTop .displayname,
.videocontainer .displayname,
.videocontainer .editdisplayname {
2016-09-15 02:20:54 +00:00
display: inline-block;
position: absolute;
2016-10-20 19:28:10 +00:00
left: 10%;
width: 80%;
top: 50%;
2016-10-26 09:51:51 +00:00
@include transform(translateY(-40%));
2016-09-15 02:20:54 +00:00
color: $participantNameColor;
text-align: center;
text-overflow: ellipsis;
2016-09-15 02:20:54 +00:00
font-size: 12px;
font-weight: 100;
overflow: hidden;
white-space: nowrap;
line-height: $thumbnailToolbarHeight;
z-index: $zindex2;
2016-09-15 02:20:54 +00:00
}
#alwaysOnTop .displayname {
font-size: 15px;
position: inherit;
width: 100%;
left: 0px;
top: 0px;
margin-top: 10px;
}
/**
* Positions video thumbnail display name editor.
*/
.videocontainer .editdisplayname {
2016-09-15 02:20:54 +00:00
outline: none;
border: none;
background: none;
box-shadow: none;
padding: 0;
}
#localVideoContainer .displayname:hover {
cursor: text;
}
.videocontainer .displayname {
pointer-events: none;
2017-01-09 21:32:25 +00:00
padding: 0 3px 0 3px;
}
.videocontainer .editdisplayname {
height: auto;
}
#localDisplayName {
pointer-events: auto !important;
}
.videocontainer>a.displayname {
display: inline-block;
position: absolute;
color: #FFFFFF;
bottom: 0;
right: 0;
padding: 3px 5px;
font-size: 9pt;
cursor: pointer;
z-index: $zindex2;
}
/**
* Video thumbnail toolbar icon.
*/
.videocontainer .toolbar-icon {
font-size: 8pt;
2014-06-18 11:42:31 +00:00
text-align: center;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
color: #FFFFFF;
width: 12px;
line-height: $thumbnailToolbarHeight;
height: $thumbnailToolbarHeight;
padding: 0;
border: 0;
margin: 0px 5px 0px 0px;
}
/**
* Toolbar icon internal i elements (font icons).
*/
2019-08-30 16:39:06 +00:00
.toolbar-icon>div {
height: $thumbnailToolbarHeight;
display: flex;
flex-direction: column;
justify-content: center;
}
/**
* Toolbar icons positioned on the right.
*/
.moderator-icon {
display: inline-block;
&.right {
float: right;
margin: 0px 0px 0px 5px;
}
.toolbar-icon {
margin: 0;
}
}
.raisehandindicator {
2016-10-26 03:05:32 +00:00
background: $raiseHandBg;
}
.connection-indicator {
feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json.
2017-09-26 16:55:09 +00:00
background: $connectionIndicatorBg;
&.status-high {
background: green;
}
&.status-med {
background: #FFD740;
}
&.status-lost {
background: gray;
}
&.status-low {
background: #BF2117;
}
&.status-other {
background: $connectionIndicatorBg;
}
2016-10-26 03:05:32 +00:00
}
.remote-video-menu-trigger,
2016-10-26 03:05:32 +00:00
.remotevideomenu
{
display: inline-block;
position: absolute;
top: 0px;
right: 0;
z-index: $zindex2;
2016-10-26 03:05:32 +00:00
width: 18px;
height: 13px;
color: #FFF;
2017-07-12 22:12:35 +00:00
font-size: 10pt;
2019-03-11 15:56:36 +00:00
margin-right: $remoteVideoMenuIconMargin;
2017-07-12 22:12:35 +00:00
>i{
cursor: hand;
}
}
.remote-video-menu-trigger {
margin-top: 7px;
}
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!*/
}
.audiolevel {
display: inline-block;
position: absolute;
z-index: $zindex0;
border-radius:1px;
pointer-events: none;
}
#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-avatar-with-name {
.avatar-container {
visibility: visible;
}
.displayNameContainer {
visibility: visible;
}
.videocontainer__hoverOverlay {
visibility: visible;
}
video {
visibility: hidden;
}
}
.display-name-on-black {
.avatar-container {
visibility: hidden;
}
.displayNameContainer {
visibility: visible;
}
.videocontainer__hoverOverlay {
visibility: hidden;
}
video {
opacity: 0.2;
visibility: visible;
}
}
.display-video {
.avatar-container {
visibility: hidden;
}
.displayNameContainer {
visibility: hidden;
}
.videocontainer__hoverOverlay {
visibility: hidden;
}
video {
visibility: visible;
}
}
.display-name-on-video {
.avatar-container {
visibility: hidden;
}
.displayNameContainer {
visibility: visible;
}
.videocontainer__hoverOverlay {
visibility: visible;
}
video {
visibility: visible;
}
}
.display-avatar-only {
.avatar-container {
visibility: visible;
}
.displayNameContainer {
visibility: hidden;
}
.videocontainer__hoverOverlay {
visibility: hidden;
}
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%;
}