144 lines
3.8 KiB
SCSS
144 lines
3.8 KiB
SCSS
/**
|
|
* Override other styles to support vertical filmstrip mode.
|
|
*/
|
|
.vertical-filmstrip {
|
|
.filmstrip {
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
height: 100%;
|
|
|
|
/**
|
|
* Hide videos by making them slight to the right.
|
|
*/
|
|
.filmstrip__videos {
|
|
right: 0;
|
|
transition: right 2s;
|
|
|
|
&.hidden {
|
|
bottom: auto;
|
|
right: -196px;
|
|
}
|
|
}
|
|
|
|
#filmstripLocalVideo {
|
|
height: auto;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/**
|
|
* Remove unnecssary padding that is normally used to prevent horizontal
|
|
* filmstrip from overlapping the left edge of the screen.
|
|
*/
|
|
#filmstripLocalVideo,
|
|
#filmstripRemoteVideos {
|
|
padding: 0;
|
|
}
|
|
|
|
#filmstripRemoteVideos {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
height: auto;
|
|
overflow-x: hidden !important;
|
|
|
|
.remote-videos-container {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Rotate the hide filmstrip icon so it points towards the right edge
|
|
* of the screen.
|
|
*/
|
|
&__toolbar {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/**
|
|
* Move the remote video menu trigger to the bottom left of the
|
|
* video thumbnail.
|
|
*/
|
|
.remotevideomenu {
|
|
bottom: 0;
|
|
left: 0;
|
|
top: auto;
|
|
right: auto;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
#remoteVideos {
|
|
flex-direction: column-reverse;
|
|
height: 100%;
|
|
}
|
|
|
|
.videocontainer {
|
|
/**
|
|
* Move status icons to the bottom right of the thumbnail.
|
|
*/
|
|
&__toolbar {
|
|
text-align: right;
|
|
|
|
.toolbar-icon {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* These styles are for the video labels that display on the top right. The
|
|
* styles adjust the labels' positioning as the filmstrip itself or
|
|
* filmstrip's remote videos appear and disappear.
|
|
*
|
|
* The class with-filmstrip is for when the filmstrip is visible.
|
|
* The class without-filmstrip is for when the filmstrip has been toggled to
|
|
* be hidden.
|
|
* The class opening is for when the filmstrip is transitioning from hidden
|
|
* to visible.
|
|
* The class with-remote-videos is for when the filmstrip has remote videos
|
|
* displayed, as opposed to 1-on-1 mode where they might be hidden.
|
|
* The class without-remote-videos is for when the filmstrip is visible
|
|
* but it has no videos to display.
|
|
*/
|
|
.video-state-indicator.moveToCorner {
|
|
transition: right 0.5s;
|
|
|
|
&.with-filmstrip.with-remote-videos {
|
|
&#recordingLabel {
|
|
right: 200px;
|
|
}
|
|
|
|
&#videoResolutionLabel {
|
|
right: 150px;
|
|
}
|
|
}
|
|
|
|
&.with-filmstrip.without-remote-videos {
|
|
transition-delay: 0.5s;
|
|
}
|
|
|
|
&.with-filmstrip.with-remote-videos.opening {
|
|
transition: 0.9s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
|
|
&.without-filmstrip {
|
|
transition: 1.2s ease-in-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Move toastr closer to the bottom of the screen and move left to avoid
|
|
* overlapping of videos when they are configured at default height.
|
|
*/
|
|
#toast-container {
|
|
&.notification-bottom-right {
|
|
bottom: 25px;
|
|
right: 130 + 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
|
|
}
|
|
}
|
|
}
|