285 lines
7.9 KiB
SCSS
285 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 {
|
|
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();
|
|
}
|