jitsi_app_c0/css/modals/video-quality/_video-quality.scss

.video-quality-dialog {
    .hide-warning {
        height: 0;
        visibility: hidden;
    }

    .video-quality-dialog-title {
        margin-bottom: 10px;
    }

    .video-quality-dialog-contents {
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 10px;
        min-width: 250px;

        .video-quality-dialog-slider-container {
            width: 100%;
            text-align: center;
        }

        .video-quality-dialog-slider {
            width: calc(100% - 5px);

            @mixin sliderTrackStyles() {
                height: 15px;
                border-radius: 10px;
                background: rgb(14, 22, 36);
            }

            &::-ms-track {
                @include sliderTrackStyles();
            }

            &::-moz-range-track {
                @include sliderTrackStyles();
            }

            &::-webkit-slider-runnable-track {
                @include sliderTrackStyles();
            }

            @mixin sliderThumbStyles() {
                top: 50%;
                border: none;
                position: relative;
                opacity: 0;
            }

            &::-ms-thumb {
                @include sliderThumbStyles();
            }

            &::-moz-range-thumb {
                @include sliderThumbStyles();

            }

            &::-webkit-slider-thumb {
                @include sliderThumbStyles();
            }
        }

        .video-quality-dialog-labels {
            box-sizing: border-box;
            display: flex;
            margin-top: 5px;
            position: relative;
            width: 90%;
        }

        .video-quality-dialog-label-container {
            position: absolute;
            text-align: center;
            transform: translate(-50%, 0%);

            &::before {
                content: '';
                border-radius: 50%;
                left: 0;
                height: 6px;
                margin: 0 auto;
                pointer-events: none;
                position: absolute;
                right: 0;
                top: -16px;
                width: 6px;
            }
        }

        .video-quality-dialog-label-container.active {
            color: $videoQualityActive;

            &::before {
                background: $videoQualityActive;
                height: 12px;
                top: -19px;
                width: 12px;
            }
        }

        .video-quality-dialog-label-container:first-child {
            position: relative;
        }

        .video-quality-dialog-label {
            display: table-caption;
            word-spacing: unset;
        }
    }

    &.video-not-supported {
        .video-quality-dialog-labels {
            color: gray;
        }

        .video-quality-dialog-slider {
            @mixin sliderTrackDisabledStyles() {
                background: rgba(14, 22, 36, 0.1);
            }

            &::-ms-track {
                @include sliderTrackDisabledStyles();
            }

            &::-moz-range-track {
                @include sliderTrackDisabledStyles();
            }

            &::-webkit-slider-runnable-track {
                @include sliderTrackDisabledStyles();
            }
        }
    }
}

.modal-dialog-form {
    .video-quality-dialog-title {
        display: none;
    }
}

.video-state-indicator {
    background: $videoStateIndicatorBackground;
    cursor: default;
    font-size: 13px;
    height: $videoStateIndicatorSize;
    line-height: 20px;
    text-align: left;
    min-width: $videoStateIndicatorSize;
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;

    &.is-recording {
        background: none;
        opacity: 0.9;
        padding: 0;
    }

    i {
        line-height: $videoStateIndicatorSize;
    }

    /**
     * Give the label padding so it has more volume and can be easily clicked.
     */
    .video-quality-label-status {
        line-height: $videoStateIndicatorSize;
        min-width: $videoStateIndicatorSize;
        text-align: center;
    }

    .recording-icon,
    .recording-icon i {
        color: rgb(255, 86, 48);
        line-height: $videoStateIndicatorSize;
        font-size: $videoStateIndicatorSize;
        opacity: 0.9;
        position: relative;
    }

    .recording-icon-background {
        background: white;
        height: 25%;
        left: 50%;
        opacity: 0.9;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
    }

    #recordingLabelText {
        display: inline-block;
    }
}

.centeredVideoLabel.moveToCorner {
    z-index: $zindex3;
}

#videoResolutionLabel {
    z-index: $zindex3 + 1;
}

.centeredVideoLabel {
    bottom: 45%;
    border-radius: 2px;
    display: none;
    padding: 10px;
    transform: translate(-50%, 0);
    z-index: $centeredVideoLabelZ;

    &.moveToCorner {
        bottom: auto;
        transform: none;
    }
}

.moveToCorner {
    position: absolute;
    top: 30px;
    right: 30px;
}

.moveToCorner + .moveToCorner {
    right: 80px;
}