You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_horizontal_filmstrip.scss 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. %align-right {
  2. @include flex();
  3. flex-direction: row-reverse;
  4. flex-wrap: nowrap;
  5. justify-content: flex-start;
  6. }
  7. .horizontal-filmstrip .filmstrip {
  8. bottom: 0;
  9. right: 0;
  10. padding: 10px 5px;
  11. @extend %align-right;
  12. transition: bottom .3s;
  13. z-index: $filmstripVideosZ;
  14. box-sizing: border-box;
  15. width: 100%;
  16. position: fixed;
  17. /*
  18. * Firefox sets flex items to min-height: auto and min-width: auto,
  19. * preventing flex children from shrinking like they do on other browsers.
  20. * Setting min-height and min-width 0 is a workaround for the issue so
  21. * Firefox behaves like other browsers.
  22. * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
  23. */
  24. @mixin minHWAutoFix() {
  25. min-height: 0;
  26. min-width: 0;
  27. }
  28. &.reduce-height {
  29. bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
  30. }
  31. &__videos {
  32. position:relative;
  33. padding: 0;
  34. /* The filmstrip should not be covered by the left toolbar. */
  35. bottom: 0;
  36. width:auto;
  37. &#remoteVideos {
  38. border: $thumbnailsBorder solid transparent;
  39. transition: bottom 2s;
  40. flex-grow: 1;
  41. display: flex;
  42. flex-direction: row-reverse;
  43. @include minHWAutoFix()
  44. }
  45. /**
  46. * The local video identifier.
  47. */
  48. &#filmstripLocalVideo {
  49. align-self: flex-end;
  50. display: block;
  51. margin-bottom: 8px;
  52. }
  53. &.hidden {
  54. bottom: calc(-196px - #{$newToolbarSizeWithPadding});
  55. }
  56. }
  57. .remote-videos {
  58. & > div {
  59. transition: opacity 1s;
  60. position: absolute;
  61. }
  62. &.is-not-overflowing > div {
  63. right: 2px;
  64. }
  65. }
  66. &.hide-videos {
  67. .remote-videos {
  68. & > div {
  69. opacity: 0;
  70. pointer-events: none;
  71. }
  72. }
  73. }
  74. .videocontainer {
  75. margin-bottom: 10px;
  76. }
  77. }