309fcf9672
Hardcoding an offset from the bottom of 32px causes issues in horizontal filmstrip when there is no invite button, because then the local video just displays 32px from the bottom as there is no button to take up space above it. Instead leverage flex alignments to align the bottom of the video to the bototm of the filmstrip.
286 lines
7.9 KiB
SCSS
286 lines
7.9 KiB
SCSS
/**
|
|
* Override other styles to support vertical filmstrip mode.
|
|
*/
|
|
.vertical-filmstrip {
|
|
/*
|
|
* 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;
|
|
}
|
|
|
|
#etherpad,
|
|
#sharedvideo {
|
|
text-align: left;
|
|
}
|
|
|
|
.filmstrip {
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
height: 100%;
|
|
/**
|
|
* fixed positioning is necessary for remote menus and tooltips to pop
|
|
* out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
|
|
* a library called popper which will position its elements fixed if
|
|
* any parent is also fixed.
|
|
*/
|
|
position: fixed;
|
|
|
|
/**
|
|
* z-index adjusting is needed because the video state indicator has to
|
|
* display over the filmstrip when no videos are displayed but still be
|
|
* clickable but its inline dialogs must display over the video state
|
|
* indicator when videos are displayed.
|
|
*/
|
|
z-index: #{$tooltipsZ + 1};
|
|
|
|
/**
|
|
* Hide videos by making them slight to the right.
|
|
*/
|
|
.filmstrip__videos {
|
|
right: 0;
|
|
|
|
&.hidden {
|
|
bottom: auto;
|
|
right: -196px;
|
|
}
|
|
|
|
/**
|
|
* An id selector is used to match id specificity with existing
|
|
* filmstrip styles.
|
|
*/
|
|
&#remoteVideos {
|
|
/**
|
|
* Remove horizontal filmstrip padding used to prevent videos
|
|
* from overlapping the left-side toolbar. An id selector is
|
|
* used to match id specificity with filmstrip styles.
|
|
*/
|
|
padding-left: 0;
|
|
transition: right 2s;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Re-styles the local Video and invite button to better fit the
|
|
* vertical filmstrip layout.
|
|
*/
|
|
#filmstripLocalVideo {
|
|
align-self: initial;
|
|
bottom: 5px;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
height: auto;
|
|
justify-content: flex-start;
|
|
|
|
.filmstrip__invite {
|
|
padding-bottom: 0px;
|
|
padding-top: 5px;
|
|
z-index: $dropdownZ;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Remove unnecssary padding that is normally used to prevent horizontal
|
|
* filmstrip from overlapping the left edge of the screen.
|
|
*/
|
|
#filmstripLocalVideo,
|
|
#filmstripRemoteVideos {
|
|
padding: 0;
|
|
}
|
|
|
|
#filmstripRemoteVideos {
|
|
@include minHWAutoFix();
|
|
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
height: auto;
|
|
justify-content: flex-end;
|
|
|
|
#filmstripRemoteVideosContainer {
|
|
flex-direction: column-reverse;
|
|
/**
|
|
* Add padding as a hack for Firefox not to show scrollbars when
|
|
* unnecessary.
|
|
*/
|
|
padding: 1px 0;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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,
|
|
.remote-video-menu-trigger {
|
|
bottom: 0;
|
|
left: 0;
|
|
top: auto;
|
|
right: auto;
|
|
}
|
|
|
|
.remote-video-menu-trigger {
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
#remoteVideos {
|
|
@include minHWAutoFix();
|
|
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.videocontainer {
|
|
/**
|
|
* Move status icons to the bottom right of the thumbnail.
|
|
*/
|
|
&__toolbar {
|
|
text-align: right;
|
|
|
|
.right {
|
|
float: none;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.filmstrip-only {
|
|
.filmstrip {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.filmstrip__videos-filmstripOnly {
|
|
height: 100%;
|
|
}
|
|
|
|
/**
|
|
* In filmstrip only mode, the toolbar is normally displayed in the
|
|
* vertical center of the filmstrip strip. In vertical filmstrip mode,
|
|
* that alignment makes the toolbar appear floating and detached from
|
|
* the filmstrip. So, instead anchor the toolbar next to the local
|
|
* video.
|
|
*/
|
|
.toolbar_filmstrip-only {
|
|
bottom: 0;
|
|
top: auto;
|
|
transform: 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.
|
|
*/
|
|
.video-state-indicator.moveToCorner {
|
|
transition: right 0.5s;
|
|
|
|
&.with-filmstrip {
|
|
&#recordingLabel {
|
|
right: 200px;
|
|
}
|
|
|
|
&#videoResolutionLabel {
|
|
right: 150px;
|
|
}
|
|
}
|
|
|
|
&.with-filmstrip.opening {
|
|
transition: 0.9s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
|
|
&.without-filmstrip {
|
|
transition: 1.2s ease-in-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Apply hardware acceleration to prevent flickering on scroll. The
|
|
* selectors are specific to icon wrappers to prevent fixed position dialogs
|
|
* and tooltips from getting a new location context due to translate3d.
|
|
*/
|
|
.connection-indicator,
|
|
.remote-video-menu-trigger,
|
|
.indicator-icon-container {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.indicator-container {
|
|
float: none;
|
|
}
|
|
|
|
/**
|
|
* FIXME: disable pointer to allow any elements moved below to still be
|
|
* clickable. The real fix would to make sure those moved elements are
|
|
* actually part of the toolbar instead of positioning being faked.
|
|
*/
|
|
.videocontainer__toolbar {
|
|
pointer-events: none;
|
|
|
|
> div {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toolbar-icon {
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Workarounds for Edge, IE11, and Firefox not handling scrolling properly
|
|
* with flex-direction: column-reverse. The remove videos in filmstrip should
|
|
* start scrolling from the bottom of the filmstrip, but in those browsers the
|
|
* scrolling won't happen. Per W3C spec, scrolling should happen from the
|
|
* bottom. As such, use css hacks to get around the css issue, with the intent
|
|
* being to remove the hacks as the spec is supported.
|
|
*/
|
|
@mixin undoColumnReverseVideos() {
|
|
.vertical-filmstrip {
|
|
#remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Firefox detection hack **/
|
|
@-moz-document url-prefix() {
|
|
@include undoColumnReverseVideos();
|
|
}
|
|
|
|
/** IE11 detection hack **/
|
|
@media screen and (-ms-high-contrast: active),
|
|
screen and (-ms-high-contrast: none) {
|
|
@include undoColumnReverseVideos();
|
|
}
|
|
|
|
/** Edge detection hack **/
|
|
@supports (-ms-ime-align:auto) {
|
|
@include undoColumnReverseVideos();
|
|
}
|