78 lines
1.6 KiB
SCSS
78 lines
1.6 KiB
SCSS
%align-right {
|
|
@include flex();
|
|
flex-direction: row-reverse;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.horizontal-filmstrip .filmstrip {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 10px 5px;
|
|
@extend %align-right;
|
|
transition: bottom .3s;
|
|
z-index: $filmstripVideosZ;
|
|
|
|
&.reduce-height {
|
|
bottom: $newToolbarSizeWithPadding;
|
|
}
|
|
|
|
&__videos {
|
|
@extend %align-right;
|
|
position:relative;
|
|
padding: 0;
|
|
/* The filmstrip should not be covered by the left toolbar. */
|
|
bottom: 0;
|
|
width:auto;
|
|
overflow: visible !important;
|
|
|
|
&#remoteVideos {
|
|
border: $thumbnailsBorder solid transparent;
|
|
padding-left: $defaultToolbarSize + 5;
|
|
transition: bottom 2s;
|
|
}
|
|
|
|
/**
|
|
* The local video identifier.
|
|
*/
|
|
&#filmstripLocalVideo {
|
|
align-self: flex-end;
|
|
display: block;
|
|
}
|
|
|
|
&.hidden {
|
|
bottom: calc(-196px - #{$newToolbarSizeWithPadding});
|
|
}
|
|
|
|
.remote-videos-container {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Style the filmstrip videos in filmstrip-only mode.
|
|
*/
|
|
&__videos-filmstripOnly {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
|
|
.filmstrip__videos {
|
|
&#filmstripLocalVideo {
|
|
bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.remote-videos-container {
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
&.hide-videos {
|
|
.remote-videos-container {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|