jiti-meet/css/_vertical_filmstrip_overrides.scss

/**
 * Override other styles to support vertical filmstrip mode.
 */
.vertical-filmstrip {
    .filmstrip {
        align-items: flex-end;
        box-sizing: border-box;
        display: flex;
        flex-direction: column-reverse;
        height: 100%;

        /**
         * Hide videos by making them slight to the right.
         */
        .filmstrip__videos {
            right: 0;
            transition: right 2s;

            &.hidden {
                bottom: auto;
                right: -196px;
            }
        }

        #filmstripLocalVideo {
            height: auto;
            justify-content: flex-end;
        }

        /**
         * Remove unnecssary padding that is normally used to prevent horizontal
         * filmstrip from overlapping the left edge of the screen.
         */
        #filmstripLocalVideo,
        #filmstripRemoteVideos {
            padding: 0;
        }

        #filmstripRemoteVideos {
            display: flex;
            flex: 1;
            flex-direction: column;
            height: auto;
            overflow-x: hidden !important;

            .remote-videos-container {
                flex-direction: column;
            }
        }

        /**
         * Rotate the hide filmstrip icon so it points towards the right edge
         * of the screen.
         */
        &__toolbar {
            transform: rotate(-90deg);
        }

        /**
         * Move the remote video menu trigger to the bottom left of the
         * video thumbnail.
         */
        .remotevideomenu {
            bottom: 0;
            left: 0;
            top: auto;
            right: auto;
            margin-bottom: 7px;
            transform: translate3d(0,0,0);
        }

        #remoteVideos {
            flex-direction: column-reverse;
            flex-grow: 1;
        }

        .videocontainer {
            &__toolbar,
            &__toptoolbar {
                transform: translate3d(0,0,0);
            }

            /**
             * Move status icons to the bottom right of the thumbnail.
             */
            &__toolbar {
                text-align: right;

                .toolbar-icon {
                    float: none;
                    margin: auto;
                }
            }
        }
    }

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

        /**
         * In filmstrip only mode, the toolbar is normally displayed in the
         * vertical center of the filmstrip strip. In vertical filmstrip mode,
         * that alignment makes the toolbar appear floating and detached from
         * the filmstrip. So, instead anchor the toolbar next to the local
         * video.
         */
        .toolbar_filmstrip-only {
            bottom: 0;
            top: auto;
            transform: none;
        }

    }

    /**
     * These styles are for the video labels that display on the top right. 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.
     * The class with-remote-videos is for when the filmstrip has remote videos
     * displayed, as opposed to 1-on-1 mode where they might be hidden.
     * The class without-remote-videos is for when the filmstrip is visible
     * but it has no videos to display.
     */
    .video-state-indicator.moveToCorner {
        transition: right 0.5s;

        &.with-filmstrip.with-remote-videos {
            &#recordingLabel {
                right: 200px;
            }

            &#videoResolutionLabel {
                right: 150px;
            }
        }

        &.with-filmstrip.without-remote-videos {
            transition-delay: 0.5s;
        }

        &.with-filmstrip.with-remote-videos.opening {
            transition: 0.9s;
            transition-timing-function: ease-in-out;
        }

        &.without-filmstrip {
            transition: 1.2s ease-in-out;
            transition-delay: 0.1s;
        }
    }

    /**
     * Move toastr closer to the bottom of the screen and move left to avoid
     * overlapping of videos when they are configured at default height.
     */
    #toast-container {
        &.notification-bottom-right {
            bottom: 25px;
            right: 130 + 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
        }
    }
}