jiti-meet/css/_vertical_filmstrip_overrid...

144 lines
3.8 KiB
SCSS
Raw Normal View History

/**
* 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;
}
}
}