ref(filmstrip): move some small video specific styling to own file

css/filmstrip/_horizontal_filmstrip.scss

@@ -48,58 +48,6 @@
         .remote-videos-container {
             display: flex;
         }
-
-        .videocontainer {
-            display: none;
-            position: relative;
-            background-size: contain;
-            border: $thumbnailVideoBorder solid transparent;
-            border-radius: $borderRadius;
-            margin: 0 $thumbnailVideoMargin;
-
-            &.videoContainerFocused, &:hover {
-                cursor: hand;
-            }
-
-            /**
-             * Focused video thumbnail.
-             */
-            &.videoContainerFocused {
-                transition-duration: 0.5s;
-                -webkit-transition-duration: 0.5s;
-                -webkit-animation-name: greyPulse;
-                -webkit-animation-duration: 2s;
-                -webkit-animation-iteration-count: 1;
-                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
-                box-shadow: inset 0 0 3px $videoThumbnailSelected,
-                0 0 3px $videoThumbnailSelected !important;
-            }
-
-            .remotevideomenu > .icon-menu {
-                display: none;
-            }
-
-            /**
-             * Hovered video thumbnail.
-             */
-            &:hover {
-                cursor: hand;
-                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
-                box-shadow: inset 0 0 3px $videoThumbnailHovered,
-                0 0 3px $videoThumbnailHovered;
-
-                .remotevideomenu > .icon-menu {
-                    display: inline-block;
-                }
-            }
-
-            & > video {
-                cursor: hand;
-                border-radius: $borderRadius;
-                object-fit: cover;
-                overflow: hidden;
-            }
-        }
     }
 
     /**

css/filmstrip/_small_video.scss

@@ -0,0 +1,51 @@
+.filmstrip__videos .videocontainer {
+    display: none;
+    position: relative;
+    background-size: contain;
+    border: $thumbnailVideoBorder solid transparent;
+    border-radius: $borderRadius;
+    margin: 0 $thumbnailVideoMargin;
+
+    &.videoContainerFocused, &:hover {
+        cursor: hand;
+    }
+
+    /**
+     * Focused video thumbnail.
+     */
+    &.videoContainerFocused {
+        transition-duration: 0.5s;
+        -webkit-transition-duration: 0.5s;
+        -webkit-animation-name: greyPulse;
+        -webkit-animation-duration: 2s;
+        -webkit-animation-iteration-count: 1;
+        border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
+        box-shadow: inset 0 0 3px $videoThumbnailSelected,
+        0 0 3px $videoThumbnailSelected !important;
+    }
+
+    .remotevideomenu > .icon-menu {
+        display: none;
+    }
+
+    /**
+     * Hovered video thumbnail.
+     */
+    &:hover {
+        cursor: hand;
+        border: $thumbnailVideoBorder solid $videoThumbnailHovered;
+        box-shadow: inset 0 0 3px $videoThumbnailHovered,
+        0 0 3px $videoThumbnailHovered;
+
+        .remotevideomenu > .icon-menu {
+            display: inline-block;
+        }
+    }
+
+    & > video {
+        cursor: hand;
+        border-radius: $borderRadius;
+        object-fit: cover;
+        overflow: hidden;
+    }
+}

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -119,6 +119,30 @@
             transform: rotate(-90deg);
         }
 
+        #remoteVideos {
+            @include minHWAutoFix();
+
+            flex-direction: column;
+            flex-grow: 1;
+        }
+    }
+
+    /**
+     * Overrides for small videos in vertical filmstrip mode.
+     */
+    .filmstrip__videos .videocontainer {
+        /**
+         * Move status icons to the bottom right of the thumbnail.
+         */
+        .videocontainer__toolbar {
+            text-align: right;
+
+            .right {
+                float: none;
+                margin: auto;
+            }
+        }
+
         /**
          * Move the remote video menu trigger to the bottom left of the
          * video thumbnail.
@@ -134,27 +158,6 @@
         .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 {

css/main.scss

@@ -71,6 +71,7 @@
 @import 'popover';
 @import 'filmstrip/filmstrip_toolbar';
 @import 'filmstrip/horizontal_filmstrip';
+@import 'filmstrip/small_video';
 @import 'filmstrip/vertical_filmstrip_overrides';
 @import 'unsupported-browser/main';
 @import 'modals/invite/add-people';