diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index f6c3754bd..28d0de1f9 100644 --- a/css/_filmstrip.scss +++ b/css/_filmstrip.scss @@ -1,16 +1,56 @@ -.filmstrip { - &__videos { - @include flex(); - flex-direction: row-reverse; - flex-wrap: nowrap; - justify-content: flex-start; +%align-right { + @include flex(); + flex-direction: row-reverse; + flex-wrap: nowrap; + justify-content: flex-start; +} - position:absolute; - text-align:right; +.filmstrip { + position: absolute; + bottom: 0; + right: 0; + padding: 10px 10px 17px 5px; + @extend %align-right; + + &__toolbar { + @include flex(); + flex-direction: column-reverse; + flex-wrap: nowrap; + position: relative; + z-index: 1; // Set z-index to make element visible + width: 20px; + + button { + font-size: 14px; + line-height: 1.2; + text-align: center; + background: transparent; + opacity: 0.7; + height: auto; + width: 100%; + padding: 0; + margin: 0 1px; + border: none; + outline: none; + + -webkit-appearance: none; + + &:hover { + opacity: 1; + } + + i { + cursor: pointer; + } + } + } + + &__videos { + @extend %align-right; + position:relative; height:196px; - padding: 10px 10px 17px 5px; + padding: 0; bottom: 0; - right: 0; width:auto; border: 2px solid transparent; z-index: 5; @@ -69,8 +109,4 @@ } } } -} - -.filmstripToolbar + #remoteVideos { - padding-right: 24px; } \ No newline at end of file diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 72e5565f4..326e2a2c5 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -531,35 +531,4 @@ .moveToCorner + .moveToCorner { right: 80px; -} - -.filmstripToolbar { - width: 20px; - position: absolute; - right: 4px; - bottom: 20px; - z-index: 6; - - button { - font-size: 14px; - line-height: 1.2; - text-align: center; - background: transparent; - opacity: 0.7; - height: auto; - width: 100%; - padding: 0; - margin: 0 1px; - border: none; - - -webkit-appearance: none; - - &:hover { - opacity: 1; - } - - i { - cursor: pointer; - } - } } \ No newline at end of file diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index 8cad067f6..431e57925 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/FilmStrip.js @@ -39,7 +39,7 @@ const FilmStrip = { _generateFilmStripToolbar() { let container = document.createElement('div'); let isVisible = this.isFilmStripVisible(); - container.className = 'filmstripToolbar'; + container.className = 'filmstrip__toolbar'; container.innerHTML = `