| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- %align-right {
- @include flex();
- flex-direction: row-reverse;
- flex-wrap: nowrap;
- justify-content: flex-start;
- }
-
- .horizontal-filmstrip .filmstrip {
- bottom: 0;
- right: 0;
- padding: 10px 5px;
- @extend %align-right;
- transition: bottom .3s;
- z-index: $filmstripVideosZ;
- 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;
- }
-
- &.reduce-height {
- bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
- }
-
- &__videos {
- position:relative;
- padding: 0;
- /* The filmstrip should not be covered by the left toolbar. */
- bottom: 0;
- width:auto;
-
- &#remoteVideos {
- border: $thumbnailsBorder solid transparent;
- transition: bottom 2s;
- flex-grow: 1;
- display: flex;
- flex-direction: row-reverse;
- @include minHWAutoFix()
- }
-
- /**
- * The local video identifier.
- */
- &#filmstripLocalVideo {
- align-self: flex-end;
- display: block;
- margin-bottom: 8px;
- }
-
- &.hidden {
- bottom: calc(-196px - #{$newToolbarSizeWithPadding});
- }
- }
-
- .remote-videos {
- & > div {
- transition: opacity 1s;
- position: absolute;
- }
-
- &.is-not-overflowing > div {
- right: 2px;
- }
- }
-
- &.hide-videos {
- .remote-videos {
- & > div {
- opacity: 0;
- pointer-events: none;
- }
- }
- }
-
- .videocontainer {
- margin-bottom: 10px;
- }
- }
|