@import "./theme";

.mfunsPlayer-video-wrap {
    &.browser-fullscreen {
        width: 100%;
        height: 100%;
        background: #000;
        position: fixed;
        z-index: 100000;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        transform: translate(0, 0);
        .mfunsPlayer-bezel {
            bottom: 80px !important;
        }
        .mfunsPlayer-tip-container {
            bottom: 90px;
        }
        .mfunsPlayer-video-mask {
            border: none;
        }
        .mfunsPlayer-activity {
            transform: scale(1.2);
        }
        .mfunsPlayer-controller-mask {
            .mfunsPlayer-bezel {
                margin-top: -35px;
            }
            .mfunsPlayer-highEnergy-bar {
                bottom: 55px;
            }
            .mfunsPlayer-controller-label {
                font-size: 17px;
            }
            .mfunsPlayer-controller-icon {
                font-size: 24px;
            }
            .mfunsPlayer-video-danmaku-root {
                width: 35%;
                height: 30px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                .input_box {
                    border: none;
                    border-radius: $theme-border-radius;
                    background: hsla(0, 0%, 100%, 0.35);
                }
                .mfunsPlayer-controller-button {
                    padding: 0 5px;
                }

                .mfunsPlayer-controller-danmaku-style {
                    .icon-text {
                        color: #f5f5f5;
                        &:hover {
                            color: $theme-color-light;
                        }
                    }
                }
                .mfunsPlayer-controller-danmaku-settings {
                    .icon-danmaku-settings {
                        color: #e0e0e0;
                        &:hover {
                            color: #fff;
                        }
                    }
                }
                .mfunsPlayer-danmaku-text {
                    border: none;
                    color: #f5f5f5;
                    &::-webkit-input-placeholder {
                        color: #fff;
                    }
                }
                .mfunsPlayer-danmaku-emit {
                    height: 100%;
                    border-radius: 0 $theme-border-radius $theme-border-radius 0;
                }
                .mfunsPlayer-danmaku-status-not-logged-in {
                    color: #f5f5f5;
                    .mfunsPlayer-toLogin {
                        color: #0ff;
                    }
                }
            }
            .mfunsPlayer-controller {
                height: 60px;
                .mfunsPlayer-controller-wrap {
                    .mfunsPlayer-video-danmaku-root {
                        display: flex;
                        .mfunsPlayer-controller-button {
                            // 按钮
                            padding: 0 5px;
                        }
                    }
                    .mfunsPlayer-controller-tip {
                        bottom: 160%;
                    }
                    .mfunsPlayer-controller-button {
                        // 按钮
                        padding: 0 12px;
                    }
                    .mfunsPlayer-controller-left {
                        width: auto;
                        padding-right: 16px;
                    }

                    .mfunsPlayer-controller-right {
                        .mfunsPlayer-controller-fullscreen {
                            .icon-fullscreen {
                                display: none;
                            }
                            .icon-fullscreen-exit {
                                display: block;
                            }
                        }
                    }
                }
            }
        }

        .mfunsPlayer-danmaku {
            // .mfunsPlayer-danmaku-item {
            //     &.lock{
            //     animation: danmaku 8s linear;
            //     animation-play-state: paused !important;
            //     z-index:103!important;
            //   }
            // }
            .mfunsPlayer-danmaku-top,
            .mfunsPlayer-danmaku-bottom {
                &.mfunsPlayer-danmaku-move {
                    animation: danmaku-center 5s linear;
                    animation-play-state: inherit;
                }
            }

            .mfunsPlayer-danmaku-right {
                &.mfunsPlayer-danmaku-move {
                    animation: danmaku 8s linear;
                    // animation-play-state: inherit;
                    &.low {
                        animation: danmaku 10s linear;
                    }
                    &.lowest {
                        animation: danmaku 12s linear;
                    }
                    &.fast {
                        animation: danmaku 6s linear;
                    }
                    &.fastest {
                        animation: danmaku 4s linear;
                    }
                }
            }
            .mfunsPlayer-danmaku-left {
                &.mfunsPlayer-danmaku-move {
                    animation: danmaku-reverse 8s linear;
                    animation-play-state: inherit;
                    &.low {
                        animation: danmaku-reverse 10s linear;
                    }
                    &.lowest {
                        animation: danmaku-reverse 12s linear;
                    }
                    &.fast {
                        animation: danmaku-reverse 6s linear;
                    }
                    &.fastest {
                        animation: danmaku-reverse 4s linear;
                    }
                }
            }
        }
    }
    &.mfunsPlayer-web-fullscreen {
        @extend .browser-fullscreen;
        position: fixed;
        z-index: 100000;
        left: 0;
        top: 0;
        width: 100% !important;
        height: 100% !important;
        .mfunsPlayer-controller-mask {
            .mfunsPlayer-controller {
                height: 60px;
                .mfunsPlayer-controller-right {
                    .mfunsPlayer-controller-webfull {
                        .icon-web-fullscreen {
                            display: none;
                        }
                        .icon-web-fullscreen-exit {
                            display: block;
                        }
                    }
                }
                .mfunsPlayer-controller-fullscreen {
                    .icon-fullscreen {
                        display: block !important;
                    }
                    .icon-fullscreen-exit {
                        display: none !important;
                    }
                }
            }
        }
    }
}