2016-11-03 15:07:48 +00:00
|
|
|
%align-right {
|
|
|
|
@include flex();
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
justify-content: flex-start;
|
|
|
|
}
|
|
|
|
|
2018-06-25 21:44:05 +00:00
|
|
|
.horizontal-filmstrip .filmstrip {
|
2016-11-03 15:54:23 +00:00
|
|
|
padding: 10px 5px;
|
2016-11-03 15:07:48 +00:00
|
|
|
@extend %align-right;
|
2017-08-15 22:14:49 +00:00
|
|
|
z-index: $filmstripVideosZ;
|
2019-12-16 17:57:53 +00:00
|
|
|
box-sizing: border-box;
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Firefox sets flex items to min-height: auto and min-width: auto,
|
|
|
|
* preventing flex children from shrinking like they do on other browsers.
|
|
|
|
* Setting min-height and min-width 0 is a workaround for the issue so
|
|
|
|
* Firefox behaves like other browsers.
|
|
|
|
* https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
|
|
|
|
*/
|
|
|
|
@mixin minHWAutoFix() {
|
|
|
|
min-height: 0;
|
|
|
|
min-width: 0;
|
|
|
|
}
|
2016-11-03 15:07:48 +00:00
|
|
|
|
2018-06-22 22:12:23 +00:00
|
|
|
&.reduce-height {
|
2019-12-16 17:57:53 +00:00
|
|
|
bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
|
2018-06-22 22:12:23 +00:00
|
|
|
}
|
|
|
|
|
2016-11-03 15:07:48 +00:00
|
|
|
&__videos {
|
|
|
|
position:relative;
|
|
|
|
padding: 0;
|
2017-04-06 18:09:05 +00:00
|
|
|
/* The filmstrip should not be covered by the left toolbar. */
|
2016-11-03 14:18:28 +00:00
|
|
|
bottom: 0;
|
|
|
|
width:auto;
|
|
|
|
|
2017-05-26 18:54:33 +00:00
|
|
|
&#remoteVideos {
|
|
|
|
border: $thumbnailsBorder solid transparent;
|
2017-10-24 18:49:40 +00:00
|
|
|
transition: bottom 2s;
|
2019-12-16 17:57:53 +00:00
|
|
|
flex-grow: 1;
|
2021-03-26 20:23:05 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: row-reverse;
|
2019-12-16 17:57:53 +00:00
|
|
|
@include minHWAutoFix()
|
2017-10-03 16:30:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The local video identifier.
|
|
|
|
*/
|
2022-04-04 18:57:58 +00:00
|
|
|
&#filmstripLocalVideo,
|
|
|
|
&#filmstripLocalScreenShare {
|
2018-03-20 19:28:09 +00:00
|
|
|
align-self: flex-end;
|
2017-10-24 19:00:22 +00:00
|
|
|
display: block;
|
2020-01-24 16:28:47 +00:00
|
|
|
margin-bottom: 8px;
|
2017-10-03 16:30:42 +00:00
|
|
|
}
|
2017-05-17 21:05:48 +00:00
|
|
|
|
2016-11-03 14:18:28 +00:00
|
|
|
&.hidden {
|
2022-01-14 12:13:13 +00:00
|
|
|
bottom: calc(-196px - #{$newToolbarSizeWithPadding} + 50px);
|
2016-11-03 14:18:28 +00:00
|
|
|
}
|
|
|
|
}
|
2017-04-06 18:09:05 +00:00
|
|
|
|
2021-03-26 20:23:05 +00:00
|
|
|
.remote-videos {
|
2021-10-07 23:10:54 +00:00
|
|
|
overscroll-behavior: contain;
|
|
|
|
|
2021-03-26 20:23:05 +00:00
|
|
|
& > div {
|
|
|
|
transition: opacity 1s;
|
|
|
|
position: absolute;
|
|
|
|
}
|
2017-05-19 00:40:14 +00:00
|
|
|
|
2021-03-26 20:23:05 +00:00
|
|
|
&.is-not-overflowing > div {
|
|
|
|
right: 2px;
|
2017-05-19 00:40:14 +00:00
|
|
|
}
|
|
|
|
}
|
2019-12-16 17:57:53 +00:00
|
|
|
|
2021-03-26 20:23:05 +00:00
|
|
|
&.hide-videos {
|
|
|
|
.remote-videos {
|
|
|
|
& > div {
|
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
2019-12-16 17:57:53 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.videocontainer {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|