jiti-meet/css/filmstrip/_vertical_filmstrip_overrides.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;
    }

    .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;
        top: 0;
        transition: height .3s ease-in;
        z-index: $filmstripVideosZ;

        /**
         * Adjust the height of the filmstrip as the toolbar is displayed.
         */
        &.reduce-height {
            height: calc(100% - #{$newToolbarSizeWithPadding});
        }

        /**
         * 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 getting near the left-side of the screen.
                 * An id selector is used to match id specificity with filmstrip
                 * styles.
                 */
                padding-left: 0;
                transition: right 2s;
            }
        }

        /**
         * Re-styles the local Video to better fit vertical filmstrip layout.
         */
        #filmstripLocalVideo {
            align-self: initial;
            bottom: 5px;
            display: flex;
            flex-direction: column-reverse;
            height: auto;
            justify-content: flex-start;
        }

        /**
         * 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);
        }

        #remoteVideos {
            @include minHWAutoFix();

            flex-direction: column;
            flex-grow: 1;
        }
    }

    &.filmstrip-only {
        .filmstrip {
            flex-direction: row-reverse;
        }
        .filmstrip__videos-filmstripOnly {
            height: 100%;
        }
    }
}

/**
 * Overrides for video containers that should not be centered aligned to avoid=
 * clashing with the filmstrip.
 */
.vertical-filmstrip #etherpad,
.vertical-filmstrip #sharedvideo {
    text-align: left;
}

/**
 * Overrides for small videos in vertical filmstrip mode.
 */
.vertical-filmstrip .filmstrip__videos .videocontainer {
    /**
     * Move status icons to the bottom right of the thumbnail.
     */
    .videocontainer__toolbar {
        /**
         * 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.
         */
        pointer-events: none;
        text-align: right;

        > div {
            pointer-events: none;
        }

        .right {
            float: none;
            margin: auto;
        }

        .toolbar-icon {
            pointer-events: all;
        }
    }

    /**
     * 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;
    }

    /**
     * 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;
    }
}

/**
 * Overrides for quality labels in filmstrip only mode. 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.
 */
.vertical-filmstrip .large-video-labels {
    &.with-filmstrip {
        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;
    }
}

/**
 * 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();
}

/** Edge detection hack **/
@supports (-ms-ime-align:auto) {
    @include undoColumnReverseVideos();
}