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

.art-video-player {
    .art-settings {
        display: none;
        position: absolute;
        z-index: 90;
        right: 10px;
        bottom: 50px;
        height: auto;
        overflow: auto;
        font-size: 13px;
        border-radius: 3px;
        max-height: 300px;
        transition: all 0.2s ease;
        background-color: rgba(0, 0, 0, 0.9);

        .art-setting-panel {
            display: none;

            &.art-current {
                display: block;
            }

            .art-setting-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 35px;
                padding: 0 5px;
                line-height: 1;
                cursor: pointer;
                overflow: hidden;
                color: rgba(255, 255, 255, 0.8);

                &:hover,
                &.art-current {
                    color: #fff;
                    background-color: rgba(255, 255, 255, 0.1);
                }

                .art-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 30px;
                    height: 30px;
                }

                .art-icon-check {
                    visibility: hidden;
                    height: 15px;
                }

                &.art-current .art-icon-check {
                    visibility: visible;
                }

                .art-setting-item-left {
                    display: flex;
                    align-items: center;
                    white-space: nowrap;

                    .art-setting-item-left-icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 24px;
                        width: 24px;
                        margin-right: 10px;
                    }
                }

                .art-setting-item-right {
                    display: flex;
                    align-items: center;

                    .art-setting-item-right-tooltip {
                        font-size: 12px;
                        white-space: nowrap;
                        color: rgba(255, 255, 255, 0.5);
                    }

                    .art-setting-item-right-icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 24px;
                        width: 24px;
                    }
                }
            }

            .art-setting-item-back {
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
        }
    }

    &.art-setting-show {
        .art-settings {
            display: block;
        }
    }

    &.art-mobile {
        .art-settings {
            max-height: 200px;
        }
    }
}