ArtPlayer/packages/artplayer/src/style/setting.scss

.art-video-player {
    .art-settings {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 90;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;

        .art-setting-inner {
            position: absolute;
            top: 0;
            right: -300px;
            bottom: 0;
            width: 300px;
            height: 100%;
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0.9);
            transition: all 0.2s ease-in-out;
            overflow: auto;

            .art-setting-body {
                overflow-y: auto;
                width: 100%;
                height: 100%;
                .art-setting {
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    padding: 10px 15px;
                    .art-setting-header {
                        margin-bottom: 5px;
                    }
                }
            }
        }

        .art-setting-radio {
            display: flex;
            .art-radio-item {
                flex: 1;
                padding: 0 2px;
                button {
                    height: 22px;
                    width: 100%;
                    border: none;
                    outline: none;
                    color: #fff;
                    background-color: rgba(255, 255, 255, 0.2);
                    border-radius: 2px;

                    &:active {
                        background-color: #00a1d6;
                    }
                }
                &.current button {
                    background-color: #00a1d6;
                }
            }
        }

        .art-setting-range {
            input {
                width: 100%;
                height: 3px;
                outline: none;
                appearance: none;
                background-color: rgba(255, 255, 255, 0.5);
            }
        }

        .art-setting-checkbox {
            display: flex;
            align-items: center;
            input {
                height: 14px;
                width: 14px;
                margin-right: 5px;
            }
        }

        .art-setting-upload {
            display: flex;
            .art-upload-btn {
                width: 80px;
                height: 22px;
                line-height: 22px;
                border: none;
                outline: none;
                color: #fff;
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 2px;
                text-align: center;
            }
            .art-upload-value {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 22px;
                line-height: 22px;
                padding-left: 10px;
            }
        }
    }

    &.art-setting-show {
        .art-settings {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            .art-setting-inner {
                right: 0;
            }
        }
    }
}