modularized css

src/css/balloon.scss

@@ -0,0 +1,14 @@
+@import '../../node_modules/balloon-css/balloon.css';
+
+[data-balloon]:before {
+    display: none;
+}
+
+[data-balloon]:after {
+    padding: 0.3em 0.7em;
+    background: rgba(17, 17, 17, 0.7);
+}
+
+[data-balloon][data-balloon-pos="up"]:after {
+    margin-bottom: 0;
+}

src/css/bezel.scss

@@ -0,0 +1,85 @@
+.dplayer-bezel {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    font-size: 22px;
+    color: #fff;
+    pointer-events: none;
+    .dplayer-bezel-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -26px 0 0 -26px;
+        height: 52px;
+        width: 52px;
+        padding: 12px;
+        box-sizing: border-box;
+        background: rgba(0, 0, 0, .5);
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        &.dplayer-bezel-transition {
+            animation: bezel-hide .5s linear;
+        }
+        @keyframes bezel-hide {
+            from {
+                opacity: 1;
+                transform: scale(1);
+            }
+            to {
+                opacity: 0;
+                transform: scale(2);
+            }
+        }
+    }
+    .dplayer-danloading {
+        position: absolute;
+        top: 50%;
+        margin-top: -7px;
+        width: 100%;
+        text-align: center;
+        font-size: 14px;
+        line-height: 14px;
+        animation: my-face 5s infinite ease-in-out;
+    }
+    .diplayer-loading-icon {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -18px 0 0 -18px;
+        height: 36px;
+        width: 36px;
+        pointer-events: none;
+        .diplayer-loading-hide {
+            display: none;
+        }
+        .diplayer-loading-dot {
+            animation: diplayer-loading-dot-fade .8s ease infinite;
+            opacity: 0;
+            fill: #fff;
+            transform-origin: 4px 4px;
+            @for $i from 7 through 1 {
+                &.diplayer-loading-dot-#{$i} {
+                    animation-delay: .1s * $i;
+                }
+            }
+        }
+        @keyframes diplayer-loading-dot-fade {
+            0% {
+                opacity: .7;
+                transform: scale(1.2, 1.2)
+            }
+            50% {
+                opacity: .25;
+                transform: scale(.9, .9)
+            }
+            to {
+                opacity: .25;
+                transform: scale(.85, .85)
+            }
+        }
+    }
+}

src/css/controller.scss

@@ -0,0 +1,609 @@
+.dplayer-controller-mask {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
+    height: 98px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    transition: all 0.3s ease;
+}
+
+.dplayer-controller {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 41px;
+    padding: 0 20px;
+    user-select: none;
+    transition: all 0.3s ease;
+    &.dplayer-controller-comment {
+        .dplayer-icons {
+            display: none;
+        }
+        .dplayer-icons.dplayer-comment-box {
+            display: block;
+        }
+    }
+    .dplayer-bar-wrap {
+        padding: 5px 0;
+        cursor: pointer;
+        position: absolute;
+        bottom: 33px;
+        width: calc(100% - 40px);
+        height: 3px;
+        &:hover {
+            .dplayer-bar .dplayer-played .dplayer-thumb {
+                transform: scale(1);
+            }
+        }
+        .dplayer-bar-preview {
+            position: absolute;
+            background: #fff;
+            pointer-events: none;
+            display: none;
+            background-size: auto 100%;
+        }
+        .dplayer-bar-preview-canvas {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            pointer-events: none;
+        }
+        .dplayer-bar-time {
+            &.hidden {
+                opacity: 0;
+            }
+            position: absolute;
+            left: 0px;
+            top: -20px;
+            width: 30px;
+            border-radius: 4px;
+            padding: 5px 7px;
+            background-color: rgba(0, 0, 0, 0.62);
+            color: #fff;
+            font-size: 12px;
+            text-align: center;
+            opacity: 1;
+            transition: opacity .1s ease-in-out;
+            word-wrap: normal;
+            word-break: normal;
+            z-index: 2;
+            pointer-events: none;
+        }
+        .dplayer-bar {
+            position: relative;
+            height: 3px;
+            width: 100%;
+            background: rgba(255, 255, 255, .2);
+            cursor: pointer;
+            .dplayer-loaded {
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                background: rgba(255, 255, 255, .4);
+                height: 3px;
+                transition: all 0.5s ease;
+                will-change: width;
+            }
+            .dplayer-played {
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                height: 3px;
+                will-change: width;
+                .dplayer-thumb {
+                    position: absolute;
+                    top: 0;
+                    right: 5px;
+                    margin-top: -4px;
+                    margin-right: -10px;
+                    height: 11px;
+                    width: 11px;
+                    border-radius: 50%;
+                    cursor: pointer;
+                    transition: all .3s ease-in-out;
+                    transform: scale(0);
+                }
+            }
+        }
+    }
+    .dplayer-icons {
+        height: 38px;
+        position: absolute;
+        bottom: 0;
+        &.dplayer-comment-box {
+            display: none;
+            position: absolute;
+            transition: all .3s ease-in-out;
+            z-index: 2;
+            height: 38px;
+            bottom: 0;
+            left: 20px;
+            right: 20px;
+            color: #fff;
+            .dplayer-icon {
+                padding: 7px;
+            }
+            .dplayer-comment-setting-icon {
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+            .dplayer-send-icon {
+                position: absolute;
+                right: 0;
+                top: 0;
+            }
+            .dplayer-comment-setting-box {
+                position: absolute;
+                background: rgba(28, 28, 28, 0.9);
+                bottom: 41px;
+                left: 0;
+                box-shadow: 0 0 25px rgba(0, 0, 0, .3);
+                border-radius: 4px;
+                padding: 10px 10px 16px;
+                font-size: 14px;
+                width: 204px;
+                transition: all .3s ease-in-out;
+                transform: scale(0);
+                &.dplayer-comment-setting-open {
+                    transform: scale(1);
+                }
+                input[type=radio] {
+                    display: none;
+                }
+                label {
+                    cursor: pointer;
+                }
+                .dplayer-comment-setting-title {
+                    font-size: 13px;
+                    color: #fff;
+                    line-height: 30px;
+                }
+                .dplayer-comment-setting-type {
+                    font-size: 0;
+                    .dplayer-comment-setting-title {
+                        margin-bottom: 6px;
+                    }
+                    label {
+                        &:nth-child(2) {
+                            span {
+                                border-radius: 4px 0 0 4px;
+                            }
+                        }
+                        &:nth-child(4) {
+                            span {
+                                border-radius: 0 4px 4px 0;
+                            }
+                        }
+                    }
+                    span {
+                        width: 33%;
+                        padding: 4px 6px;
+                        line-height: 16px;
+                        display: inline-block;
+                        font-size: 12px;
+                        color: #fff;
+                        border: 1px solid #fff;
+                        margin-right: -1px;
+                        box-sizing: border-box;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+                    input:checked+span {
+                        background: #E4E4E6;
+                        color: #1c1c1c;
+                    }
+                }
+                .dplayer-comment-setting-color {
+                    font-size: 0;
+                    label {
+                        font-size: 0;
+                        padding: 6px;
+                        display: inline-block;
+                    }
+                    span {
+                        width: 22px;
+                        height: 22px;
+                        display: inline-block;
+                        border-radius: 50%;
+                        box-sizing: border-box;
+                        cursor: pointer;
+                        &:hover {
+                            animation: my-face 5s infinite ease-in-out;
+                        }
+                    }
+                }
+            }
+            .dplayer-comment-input {
+                outline: none;
+                border: none;
+                padding: 8px 31px;
+                font-size: 14px;
+                line-height: 18px;
+                text-align: center;
+                border-radius: 4px;
+                background: none;
+                margin: 0;
+                height: 100%;
+                box-sizing: border-box;
+                width: 100%;
+                color: #fff;
+                &::placeholder {
+                    color: #fff;
+                    opacity: 0.8;
+                }
+            }
+        }
+        &.dplayer-icons-left {
+            .dplayer-icon {
+                padding: 7px;
+            }
+        }
+        &.dplayer-icons-right {
+            right: 20px;
+            .dplayer-icon {
+                padding: 8px;
+            }
+        }
+        .dplayer-time,
+        .dplayer-live-badge {
+            line-height: 38px;
+            color: #eee;
+            text-shadow: 0 0 2px rgba(0, 0, 0, .5);
+            vertical-align: middle;
+            font-size: 13px;
+            cursor: default;
+        }
+        .dplayer-live-dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            vertical-align: 4%;
+            margin-right: 5px;
+            content: '';
+            border-radius: 6px;
+        }
+        .dplayer-icon {
+            width: 40px;
+            height: 100%;
+            border: none;
+            background-color: transparent;
+            outline: none;
+            cursor: pointer;
+            vertical-align: middle;
+            box-sizing: border-box;
+            display: inline-block;
+            .dplayer-icon-content {
+                transition: all .2s ease-in-out;
+                opacity: .8;
+            }
+            &:hover {
+                .dplayer-icon-content {
+                    opacity: 1;
+                }
+            }
+            &.dplayer-quality-icon {
+                color: #fff;
+                width: auto;
+                line-height: 22px;
+                font-size: 14px;
+            }
+            &.dplayer-comment-icon {
+                padding: 10px 9px 9px;
+            }
+            &.dplayer-setting-icon {
+                padding-top: 8.5px;
+            }
+            &.dplayer-volume-icon {
+                width: 43px;
+            }
+        }
+        .dplayer-volume {
+            position: relative;
+            display: inline-block;
+            cursor: pointer;
+            height: 100%;
+            &:hover {
+                .dplayer-volume-bar-wrap .dplayer-volume-bar {
+                    width: 45px;
+                }
+                .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {
+                    transform: scale(1);
+                }
+            }
+            &.dplayer-volume-active {
+                .dplayer-volume-bar-wrap .dplayer-volume-bar {
+                    width: 45px;
+                }
+                .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {
+                    transform: scale(1);
+                }
+            }
+            .dplayer-volume-bar-wrap {
+                display: inline-block;
+                margin: 0 10px 0 -5px;
+                vertical-align: middle;
+                height: 100%;
+                .dplayer-volume-bar {
+                    position: relative;
+                    top: 17px;
+                    width: 0;
+                    height: 3px;
+                    background: #aaa;
+                    transition: all 0.3s ease-in-out;
+                    .dplayer-volume-bar-inner {
+                        position: absolute;
+                        bottom: 0;
+                        left: 0;
+                        height: 100%;
+                        transition: all 0.1s ease;
+                        will-change: width;
+                        .dplayer-thumb {
+                            position: absolute;
+                            top: 0;
+                            right: 5px;
+                            margin-top: -4px;
+                            margin-right: -10px;
+                            height: 11px;
+                            width: 11px;
+                            border-radius: 50%;
+                            cursor: pointer;
+                            transition: all .3s ease-in-out;
+                            transform: scale(0);
+                        }
+                    }
+                }
+            }
+        }
+        .dplayer-subtitle-btn {
+            display: inline-block;
+            height: 100%;
+        }
+        .dplayer-setting {
+            display: inline-block;
+            height: 100%;
+            .dplayer-setting-box {
+                position: absolute;
+                right: 0;
+                bottom: 50px;
+                transform: scale(0);
+                width: 150px;
+                border-radius: 2px;
+                background: rgba(28, 28, 28, 0.9);
+                padding: 7px 0;
+                transition: all .3s ease-in-out;
+                overflow: hidden;
+                z-index: 2;
+                &>div {
+                    display: none;
+                    &.dplayer-setting-origin-panel {
+                        display: block;
+                    }
+                }
+                &.dplayer-setting-box-open {
+                    transform: scale(1);
+                }
+                &.dplayer-setting-box-narrow {
+                    width: 70px;
+                    height: 180px;
+                    text-align: center;
+                }
+                &.dplayer-setting-box-speed {
+                    .dplayer-setting-origin-panel {
+                        display: none;
+                    }
+                    .dplayer-setting-speed-panel {
+                        display: block;
+                    }
+                }
+            }
+            .dplayer-setting-item,
+            .dplayer-setting-speed-item {
+                height: 30px;
+                padding: 5px 10px;
+                box-sizing: border-box;
+                cursor: pointer;
+                position: relative;
+                &:hover {
+                    background-color: rgba(255, 255, 255, .1);
+                }
+            }
+            .dplayer-setting-danmaku {
+                padding: 5px 0;
+                .dplayer-label {
+                    padding: 0 10px;
+                    display: inline;
+                }
+                &:hover {
+                    .dplayer-label {
+                        display: none;
+                    }
+                    .dplayer-danmaku-bar-wrap {
+                        display: inline-block;
+                    }
+                }
+                &.dplayer-setting-danmaku-active {
+                    .dplayer-label {
+                        display: none;
+                    }
+                    .dplayer-danmaku-bar-wrap {
+                        display: inline-block;
+                    }
+                }
+                .dplayer-danmaku-bar-wrap {
+                    padding: 0 10px;
+                    box-sizing: border-box;
+                    display: none;
+                    vertical-align: middle;
+                    height: 100%;
+                    width: 100%;
+                    .dplayer-danmaku-bar {
+                        position: relative;
+                        top: 8.5px;
+                        width: 100%;
+                        height: 3px;
+                        background: #fff;
+                        transition: all 0.3s ease-in-out;
+                        .dplayer-danmaku-bar-inner {
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            height: 100%;
+                            transition: all 0.1s ease;
+                            background: #aaa;
+                            will-change: width;
+                            .dplayer-thumb {
+                                position: absolute;
+                                top: 0;
+                                right: 5px;
+                                margin-top: -4px;
+                                margin-right: -10px;
+                                height: 11px;
+                                width: 11px;
+                                border-radius: 50%;
+                                cursor: pointer;
+                                transition: all .3s ease-in-out;
+                                background: #aaa;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .dplayer-full {
+            display: inline-block;
+            height: 100%;
+            position: relative;
+            &:hover {
+                .dplayer-full-in-icon {
+                    display: block;
+                }
+            }
+            .dplayer-full-in-icon {
+                position: absolute;
+                top: -30px;
+                z-index: 1;
+                display: none;
+            }
+        }
+        .dplayer-quality {
+            position: relative;
+            display: inline-block;
+            height: 100%;
+            z-index: 2;
+            &:hover {
+                .dplayer-quality-list {
+                    display: block;
+                }
+                .dplayer-quality-mask {
+                    display: block;
+                }
+            }
+            .dplayer-quality-mask {
+                display: none;
+                position: absolute;
+                bottom: 38px;
+                left: -18px;
+                width: 80px;
+                padding-bottom: 12px;
+            }
+            .dplayer-quality-list {
+                display: none;
+                font-size: 12px;
+                width: 80px;
+                border-radius: 2px;
+                background: rgba(28, 28, 28, 0.9);
+                padding: 5px 0;
+                transition: all .3s ease-in-out;
+                overflow: hidden;
+                color: #fff;
+                text-align: center;
+            }
+            .dplayer-quality-item {
+                height: 25px;
+                box-sizing: border-box;
+                cursor: pointer;
+                line-height: 25px;
+                &:hover {
+                    background-color: rgba(255, 255, 255, .1);
+                }
+            }
+        }
+        .dplayer-comment {
+            display: inline-block;
+            height: 100%;
+        }
+        .dplayer-label {
+            color: #eee;
+            font-size: 13px;
+            display: inline-block;
+            vertical-align: middle;
+            white-space: nowrap;
+        }
+        .dplayer-toggle {
+            width: 32px;
+            height: 20px;
+            text-align: center;
+            font-size: 0;
+            vertical-align: middle;
+            position: absolute;
+            top: 5px;
+            right: 10px;
+            input {
+                max-height: 0;
+                max-width: 0;
+                display: none;
+            }
+            input+label {
+                display: inline-block;
+                position: relative;
+                box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
+                border: 1px solid rgb(223, 223, 223);
+                height: 20px;
+                width: 32px;
+                border-radius: 10px;
+                box-sizing: border-box;
+                cursor: pointer;
+                transition: .2s ease-in-out;
+            }
+            input+label:before {
+                content: "";
+                position: absolute;
+                display: block;
+                height: 18px;
+                width: 18px;
+                top: 0;
+                left: 0;
+                border-radius: 15px;
+                transition: .2s ease-in-out;
+            }
+            input+label:after {
+                content: "";
+                position: absolute;
+                display: block;
+                left: 0;
+                top: 0;
+                border-radius: 15px;
+                background: #fff;
+                transition: .2s ease-in-out;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+                height: 18px;
+                width: 18px;
+            }
+            input:checked+label {
+                border-color: rgba(255, 255, 255, 0.5);
+            }
+            input:checked+label:before {
+                width: 30px;
+                background: rgba(255, 255, 255, 0.5);
+            }
+            input:checked+label:after {
+                left: 12px;
+            }
+        }
+    }
+}

src/css/danmaku.scss

@@ -0,0 +1,56 @@
+.dplayer-danmaku {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    font-size: 22px;
+    color: #fff;
+    .dplayer-danmaku-item {
+        display: inline-block;
+        pointer-events: none;
+        user-select: none;
+        cursor: default;
+        white-space: nowrap;
+        text-shadow: .5px .5px .5px rgba(0, 0, 0, .5);
+        &--demo {
+            position: absolute;
+            visibility: hidden;
+        }
+    }
+    .dplayer-danmaku-right {
+        position: absolute;
+        right: 0;
+        transform: translateX(100%);
+        &.dplayer-danmaku-move {
+            will-change: transform;
+            animation: danmaku 5s linear;
+            animation-play-state: paused;
+        }
+    }
+    @keyframes danmaku {
+        from {
+            transform: translateX(100%);
+        }
+    }
+    .dplayer-danmaku-top,
+    .dplayer-danmaku-bottom {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        visibility: hidden;
+        &.dplayer-danmaku-move {
+            will-change: visibility;
+            animation: danmaku-center 4s linear;
+            animation-play-state: paused;
+        }
+    }
+    @keyframes danmaku-center {
+        from {
+            visibility: visible;
+        }
+        to {
+            visibility: visible;
+        }
+    }
+}

src/css/global.scss

@@ -0,0 +1,153 @@
+@keyframes my-face {
+    2% {
+        transform: translate(0, 1.5px) rotate(1.5deg);
+    }
+    4% {
+        transform: translate(0, -1.5px) rotate(-0.5deg);
+    }
+    6% {
+        transform: translate(0, 1.5px) rotate(-1.5deg);
+    }
+    8% {
+        transform: translate(0, -1.5px) rotate(-1.5deg);
+    }
+    10% {
+        transform: translate(0, 2.5px) rotate(1.5deg);
+    }
+    12% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    14% {
+        transform: translate(0, -1.5px) rotate(1.5deg);
+    }
+    16% {
+        transform: translate(0, -0.5px) rotate(-1.5deg);
+    }
+    18% {
+        transform: translate(0, 0.5px) rotate(-1.5deg);
+    }
+    20% {
+        transform: translate(0, -1.5px) rotate(2.5deg);
+    }
+    22% {
+        transform: translate(0, 0.5px) rotate(-1.5deg);
+    }
+    24% {
+        transform: translate(0, 1.5px) rotate(1.5deg);
+    }
+    26% {
+        transform: translate(0, 0.5px) rotate(0.5deg);
+    }
+    28% {
+        transform: translate(0, 0.5px) rotate(1.5deg);
+    }
+    30% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    32% {
+        transform: translate(0, 1.5px) rotate(-0.5deg);
+    }
+    34% {
+        transform: translate(0, 1.5px) rotate(-0.5deg);
+    }
+    36% {
+        transform: translate(0, -1.5px) rotate(2.5deg);
+    }
+    38% {
+        transform: translate(0, 1.5px) rotate(-1.5deg);
+    }
+    40% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    42% {
+        transform: translate(0, 2.5px) rotate(-1.5deg);
+    }
+    44% {
+        transform: translate(0, 1.5px) rotate(0.5deg);
+    }
+    46% {
+        transform: translate(0, -1.5px) rotate(2.5deg);
+    }
+    48% {
+        transform: translate(0, -0.5px) rotate(0.5deg);
+    }
+    50% {
+        transform: translate(0, 0.5px) rotate(0.5deg);
+    }
+    52% {
+        transform: translate(0, 2.5px) rotate(2.5deg);
+    }
+    54% {
+        transform: translate(0, -1.5px) rotate(1.5deg);
+    }
+    56% {
+        transform: translate(0, 2.5px) rotate(2.5deg);
+    }
+    58% {
+        transform: translate(0, 0.5px) rotate(2.5deg);
+    }
+    60% {
+        transform: translate(0, 2.5px) rotate(2.5deg);
+    }
+    62% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    64% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    66% {
+        transform: translate(0, 1.5px) rotate(-0.5deg);
+    }
+    68% {
+        transform: translate(0, -1.5px) rotate(-0.5deg);
+    }
+    70% {
+        transform: translate(0, 1.5px) rotate(0.5deg);
+    }
+    72% {
+        transform: translate(0, 2.5px) rotate(1.5deg);
+    }
+    74% {
+        transform: translate(0, -0.5px) rotate(0.5deg);
+    }
+    76% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    78% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    80% {
+        transform: translate(0, 1.5px) rotate(1.5deg);
+    }
+    82% {
+        transform: translate(0, -0.5px) rotate(0.5deg);
+    }
+    84% {
+        transform: translate(0, 1.5px) rotate(2.5deg);
+    }
+    86% {
+        transform: translate(0, -1.5px) rotate(-1.5deg);
+    }
+    88% {
+        transform: translate(0, -0.5px) rotate(2.5deg);
+    }
+    90% {
+        transform: translate(0, 2.5px) rotate(-0.5deg);
+    }
+    92% {
+        transform: translate(0, 0.5px) rotate(-0.5deg);
+    }
+    94% {
+        transform: translate(0, 2.5px) rotate(0.5deg);
+    }
+    96% {
+        transform: translate(0, -0.5px) rotate(1.5deg);
+    }
+    98% {
+        transform: translate(0, -1.5px) rotate(-0.5deg);
+    }
+    0%,
+    100% {
+        transform: translate(0, 0) rotate(0deg);
+    }
+}

src/css/index.scss

@@ -1,1335 +1,11 @@
-@import '../../node_modules/balloon-css/balloon.css';
-
-.dplayer {
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-    line-height: 1;
-
-    * {
-        box-sizing: content-box;
-    }
-
-    &:-webkit-full-screen {
-        width: 100%;
-        height: 100%;
-        background: #000;
-        position: fixed;
-        z-index: 100000;
-        left: 0;
-        top: 0;
-
-        .dplayer-danmaku {
-            .dplayer-danmaku-top,
-            .dplayer-danmaku-bottom {
-                &.dplayer-danmaku-move {
-                    animation: danmaku-center 6s linear;
-                    animation-play-state: paused;
-                }
-            }
-
-            .dplayer-danmaku-right {
-                &.dplayer-danmaku-move {
-                    animation: danmaku 8s linear;
-                    animation-play-state: paused;
-                }
-            }
-        }
-    }
-
-    &.dplayer-no-danmaku {
-        .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
-            .dplayer-setting-showdan,
-            .dplayer-setting-danmaku,
-            .dplayer-setting-danunlimit {
-                display: none;
-            }
-        }
-
-        .dplayer-controller .dplayer-icons .dplayer-comment {
-            display: none;
-        }
-
-        .dplayer-danmaku {
-            display: none;
-        }
-    }
-
-    &.dplayer-live {
-        .dplayer-time {
-            display: none;
-        }
-        .dplayer-bar-wrap {
-            display: none;
-        }
-        .dplayer-setting-speed {
-            display: none;
-        }
-        .dplayer-setting-loop {
-            display: none;
-        }
-    }
-
-    &.dplayer-arrow {
-        .dplayer-danmaku {
-            font-size: 18px
-        }
-    }
-
-    &.dplayer-playing {
-
-        .dplayer-danmaku .dplayer-danmaku-move {
-            animation-play-state: running !important;
-        }
-
-        @media (min-width: 900px) {
-            .dplayer-controller-mask {
-                opacity: 0;
-            }
-            .dplayer-controller {
-                opacity: 0;
-            }
-
-            &:hover {
-                .dplayer-controller-mask {
-                    opacity: 1;
-                }
-                .dplayer-controller {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
-    &.dplayer-loading {
-        .dplayer-bezel .diplayer-loading-icon {
-            display: block;
-        }
-
-        .dplayer-danmaku .dplayer-danmaku-move {
-            animation-play-state: paused !important;
-        }
-    }
-
-    &.dplayer-hide-controller {
-        cursor: none;
-
-        .dplayer-controller-mask {
-            opacity: 0;
-            transform: translateY(100%);
-        }
-        .dplayer-controller {
-            opacity: 0;
-            transform: translateY(100%);
-        }
-    }
-    &.dplayer-show-controller {
-        .dplayer-controller-mask {
-            opacity: 1;
-        }
-        .dplayer-controller {
-            opacity: 1;
-        }
-    }
-    &.dplayer-fulled {
-        position: fixed;
-        z-index: 100000;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-    }
-    &.dplayer-mobile {
-        .dplayer-volume,
-        .dplayer-camera-icon {
-            display: none !important;
-        }
-
-        .dplayer-full-in-icon {
-            position: static !important;
-            display: inline-block !important;
-        }
-
-        .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-input {
-            width: 200px;
-        }
-
-        .dplayer-comment-setting-title {
-            display: none;
-        }
-
-        .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box {
-            left: 17px;
-        }
-
-        .dplayer-controller .dplayer-icons .dplayer-icon {
-            width: 40px;
-        }
-    }
-
-    .dplayer-mask {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 1;
-        display: none;
-
-        &.dplayer-mask-show {
-            display: block;
-        }
-    }
-
-    .dplayer-video-wrap {
-        position: relative;
-        background: #000;
-        font-size: 0;
-        width: 100%;
-        height: 100%;
-
-        .dplayer-video {
-            width: 100%;
-            height: 100%;
-            display: none;
-        }
-
-        .dplayer-video-current {
-            display: block;
-        }
-
-        .dplayer-video-prepare {
-            display: none;
-        }
-    }
-
-    .dplayer-danmaku {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        font-size: 22px;
-        color: #fff;
-
-        .dplayer-danmaku-item {
-            display: inline-block;
-            pointer-events: none;
-            user-select: none;
-            cursor: default;
-            white-space: nowrap;
-            text-shadow: .5px .5px .5px rgba(0,0,0,.5);
-
-            &--demo {
-                position: absolute;
-                visibility: hidden;
-            }
-        }
-
-        .dplayer-danmaku-right {
-            position: absolute;
-            right: 0;
-            transform: translateX(100%);
-
-            &.dplayer-danmaku-move {
-                will-change: transform;
-                animation: danmaku 5s linear;
-                animation-play-state: paused;
-            }
-        }
-
-        @keyframes danmaku {
-            from {
-                transform: translateX(100%);
-            }
-        }
-
-        .dplayer-danmaku-top,
-        .dplayer-danmaku-bottom {
-            position: absolute;
-            width: 100%;
-            text-align: center;
-            visibility: hidden;
-
-            &.dplayer-danmaku-move {
-                will-change: visibility;
-                animation: danmaku-center 4s linear;
-                animation-play-state: paused;
-            }
-        }
-
-        @keyframes danmaku-center {
-            from {
-                visibility: visible;
-            }
-            to {
-                visibility: visible;
-            }
-        }
-    }
-
-    .dplayer-subtitle {
-        position: absolute;
-        bottom: 40px;
-        width: 90%;
-        left: 5%;
-        text-align: center;
-        color: #fff;
-        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
-        font-size: 20px;
-
-        &.dplayer-subtitle-hide {
-            display: none;
-        }
-    }
-
-    .dplayer-bezel {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        font-size: 22px;
-        color: #fff;
-        pointer-events: none;
-
-        .dplayer-bezel-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin: -26px 0 0 -26px;
-            height: 52px;
-            width: 52px;
-            padding: 12px;
-            box-sizing: border-box;
-            background: rgba(0, 0, 0, .5);
-            border-radius: 50%;
-            opacity: 0;
-            pointer-events: none;
-
-            &.dplayer-bezel-transition {
-                animation: bezel-hide .5s linear;
-            }
-
-            @keyframes bezel-hide {
-                from {
-                    opacity: 1;
-                    transform: scale(1);
-                }
-                to {
-                    opacity: 0;
-                    transform: scale(2);
-                }
-            }
-        }
-
-        .dplayer-danloading {
-            position: absolute;
-            top: 50%;
-            margin-top: -7px;
-            width: 100%;
-            text-align: center;
-            font-size: 14px;
-            line-height: 14px;
-            animation: my-face 5s infinite ease-in-out;
-        }
-
-        .diplayer-loading-icon {
-            display: none;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin: -18px 0 0 -18px;
-            height: 36px;
-            width: 36px;
-            pointer-events: none;
-
-            .diplayer-loading-hide {
-                display: none;
-            }
-
-            .diplayer-loading-dot {
-                animation: diplayer-loading-dot-fade .8s ease infinite;
-                opacity: 0;
-                fill: #fff;
-                transform-origin: 4px 4px;
-
-                @for $i from 7 through 1 {
-                    &.diplayer-loading-dot-#{$i} {
-                        animation-delay: .1s * $i;
-                    }
-                }
-            }
-
-            @keyframes diplayer-loading-dot-fade {
-                0% {
-                    opacity:.7;
-                    transform:scale(1.2,1.2)
-                }
-                50% {
-                    opacity:.25;
-                    transform:scale(.9,.9)
-                }
-                to {
-                    opacity:.25;
-                    transform:scale(.85,.85)
-                }
-            }
-        }
-    }
-
-    .dplayer-controller-mask {
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
-        height: 98px;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-        transition: all 0.3s ease;
-    }
-
-    .dplayer-controller {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 41px;
-        padding: 0 20px;
-        user-select: none;
-        transition: all 0.3s ease;
-
-        &.dplayer-controller-comment {
-            .dplayer-icons {
-                display: none;
-            }
-
-            .dplayer-icons.dplayer-comment-box {
-                display: block;
-            }
-        }
-
-        .dplayer-bar-wrap {
-            padding: 5px 0;
-            cursor: pointer;
-            position: absolute;
-            bottom: 33px;
-            width: calc(100% - 40px);
-            height: 3px;
-
-            &:hover {
-                .dplayer-thumb {
-                    transform: scale(1) !important;
-                }
-            }
-
-            .dplayer-bar-preview {
-                position: absolute;
-                background: #fff;
-                pointer-events: none;
-                display: none;
-                background-size: auto 100%;
-            }
-
-            .dplayer-bar-preview-canvas {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                z-index: 1;
-                pointer-events: none;
-            }
-
-            .dplayer-bar-time {
-                &.hidden {
-                    opacity: 0;
-                }
-                position: absolute;
-                left: 0px;
-                top: -20px;
-                width: 30px;
-                border-radius: 4px;
-                padding: 5px 7px;
-                background-color: rgba(0, 0, 0, 0.62);
-                color: #fff;
-                font-size: 12px;
-                text-align: center;
-                opacity: 1;
-                transition: opacity .1s ease-in-out;
-                word-wrap: normal;
-                word-break: normal;
-                z-index: 2;
-                pointer-events: none;
-            }
-
-            .dplayer-bar {
-                position: relative;
-                height: 3px;
-                width: 100%;
-                background: rgba(255, 255, 255, .2);
-                cursor: pointer !important;
-
-                .dplayer-loaded {
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    bottom: 0;
-                    background: rgba(255, 255, 255, .4);
-                    height: 3px;
-                    transition: all 0.5s ease;
-                    will-change: width;
-                }
-
-                .dplayer-played {
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    bottom: 0;
-                    height: 3px;
-                    will-change: width;
-
-                    .dplayer-thumb {
-                        position: absolute;
-                        top: 0;
-                        right: 5px;
-                        margin-top: -4px;
-                        margin-right: -10px;
-                        height: 11px;
-                        width: 11px;
-                        border-radius: 50%;
-                        cursor: pointer !important;
-                        transition: all .3s ease-in-out;
-                        transform: scale(0);
-                    }
-                }
-            }
-        }
-
-        .dplayer-icons {
-            height: 38px;
-            position: absolute;
-            bottom: 0;
-
-            &.dplayer-comment-box {
-                display: none;
-                position: absolute;
-                transition: all .3s ease-in-out;
-                z-index: 2;
-                height: 38px;
-                bottom: 0;
-                left: 20px;
-                right: 20px;
-                color: #fff;
-
-                .dplayer-icon {
-                    padding: 7px;
-                }
-
-                .dplayer-comment-setting-icon {
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                }
-
-                .dplayer-send-icon {
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                }
-
-                .dplayer-comment-setting-box {
-                    position: absolute;
-                    background: rgba(28, 28, 28, 0.9);
-                    bottom: 41px;
-                    left: 0;
-                    box-shadow: 0 0 25px rgba(0,0,0,.3);
-                    border-radius: 4px;
-                    padding: 10px 10px 16px;
-                    font-size: 14px;
-                    width: 204px;
-                    transition: all .3s ease-in-out;
-                    transform: scale(0);
-
-                    &.dplayer-comment-setting-open {
-                        transform: scale(1);
-                    }
-
-                    input[type=radio] {
-                        display: none;
-                    }
-
-                    label {
-                        cursor: pointer;
-                    }
-
-                    .dplayer-comment-setting-title {
-                        font-size: 13px;
-                        color: #fff;
-                        line-height: 30px;
-                    }
-
-                    .dplayer-comment-setting-type {
-                        font-size: 0;
-
-                        .dplayer-comment-setting-title {
-                            margin-bottom: 6px;
-                        }
-
-                        label {
-                            &:nth-child(2) {
-                                span {
-                                    border-radius: 4px 0 0 4px;
-                                }
-                            }
-                            &:nth-child(4) {
-                                span {
-                                    border-radius: 0 4px 4px 0;
-                                }
-                            }
-                        }
-
-                        span {
-                            width: 33%;
-                            padding: 4px 6px;
-                            line-height: 16px;
-                            display: inline-block;
-                            font-size: 12px;
-                            color: #fff;
-                            border: 1px solid #fff;
-                            margin-right: -1px;
-                            box-sizing: border-box;
-                            text-align: center;
-                            cursor: pointer;
-                        }
-
-                        input:checked+span {
-                            background: #E4E4E6;
-                            color: #1c1c1c;
-                        }
-                    }
-
-                    .dplayer-comment-setting-color {
-                        font-size: 0;
-
-                        label {
-                            font-size: 0;
-                            padding: 6px;
-                            display: inline-block;
-                        }
-
-                        span {
-                            width: 22px;
-                            height: 22px;
-                            display: inline-block;
-                            border-radius: 50%;
-                            box-sizing: border-box;
-                            cursor: pointer;
-
-                            &:hover {
-                                animation: my-face 5s infinite ease-in-out;
-                                box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-                            }
-                        }
-
-                        input:checked+span {
-                            box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-                            border: none !important;
-                        }
-                    }
-                }
-
-                .dplayer-comment-input {
-                    outline: none;
-                    border: none;
-                    padding: 8px 31px;
-                    font-size: 14px;
-                    line-height: 18px;
-                    text-align: center;
-                    border-radius: 4px;
-                    background: none;
-                    margin: 0;
-                    height: 100%;
-                    box-sizing: border-box;
-                    width: 100%;
-                    color: #fff;
-
-                    &::placeholder {
-                        color: #fff;
-                        opacity: 0.8;
-                    }
-                }
-            }
-
-            &.dplayer-icons-left {
-                .dplayer-icon {
-                    padding: 7px;
-                }
-            }
-            &.dplayer-icons-right {
-                right: 20px;
-
-                .dplayer-icon {
-                    padding: 8px;
-                }
-            }
-
-            .dplayer-time,
-            .dplayer-live-badge {
-                line-height: 38px;
-                color: #eee;
-                text-shadow: 0 0 2px rgba(0,0,0,.5);
-                vertical-align: middle;
-                font-size: 13px;
-                cursor: default;
-            }
-
-            .dplayer-live-dot {
-                display: inline-block;
-                width: 6px;
-                height: 6px;
-                vertical-align: 4%;
-                margin-right: 5px;
-                content: '';
-                border-radius: 6px;
-            }
-
-            .dplayer-icon {
-                width: 40px;
-                height: 100%;
-                border: none;
-                background-color: transparent;
-                outline: none;
-                cursor: pointer;
-                vertical-align: middle;
-                box-sizing: border-box;
-                display: inline-block;
-
-                .dplayer-icon-content {
-                    transition: all .2s ease-in-out;
-                    opacity: .8;
-                }
-
-                &:hover {
-                    .dplayer-icon-content {
-                        opacity: 1;
-                    }
-                }
-
-                &.dplayer-quality-icon {
-                    color: #fff;
-                    width: auto;
-                    line-height: 22px;
-                    font-size: 14px;
-                }
-
-                &.dplayer-comment-icon {
-                    padding: 10px 9px 9px;
-                }
-
-                &.dplayer-setting-icon {
-                    padding-top: 8.5px;
-                }
-
-                &.dplayer-volume-icon {
-                    width: 43px;
-                }
-            }
-
-            .dplayer-volume {
-                position: relative;
-                display: inline-block;
-                cursor: pointer !important;
-                height: 100%;
-
-                &:hover {
-                    .dplayer-volume-bar {
-                        width: 45px !important;
-                    }
-
-                    .dplayer-thumb {
-                        transform: scale(1) !important;
-                    }
-                }
-
-                &.dplayer-volume-active {
-                    .dplayer-volume-bar {
-                        width: 45px !important;
-                    }
-
-                    .dplayer-thumb {
-                        transform: scale(1) !important;
-                    }
-                }
-
-                .dplayer-volume-bar-wrap {
-                    display: inline-block;
-                    margin: 0 10px 0 -5px;
-                    vertical-align: middle;
-                    height: 100%;
-
-                    .dplayer-volume-bar {
-                        position: relative;
-                        top: 17px;
-                        width: 0;
-                        height: 3px;
-                        background: #aaa;
-                        transition: all 0.3s ease-in-out;
-
-                        .dplayer-volume-bar-inner {
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            height: 100%;
-                            transition: all 0.1s ease;
-                            will-change: width;
-
-                            .dplayer-thumb {
-                                position: absolute;
-                                top: 0;
-                                right: 5px;
-                                margin-top: -4px;
-                                margin-right: -10px;
-                                height: 11px;
-                                width: 11px;
-                                border-radius: 50%;
-                                cursor: pointer !important;
-                                transition: all .3s ease-in-out;
-                                transform: scale(0);
-                            }
-                        }
-                    }
-                }
-            }
-
-            .dplayer-subtitle-btn {
-                display: inline-block;
-                height: 100%;
-            }
-
-            .dplayer-setting {
-                display: inline-block;
-                height: 100%;
-
-                .dplayer-setting-box {
-                    position: absolute;
-                    right: 0;
-                    bottom: 50px;
-                    transform: scale(0);
-                    width: 150px;
-                    border-radius: 2px;
-                    background: rgba(28, 28, 28, 0.9);
-                    padding: 7px 0;
-                    transition: all .3s ease-in-out;
-                    overflow: hidden;
-                    z-index: 2;
-
-                    & > div {
-                        display: none;
-
-                        &.dplayer-setting-origin-panel {
-                            display: block;
-                        }
-                    }
-
-                    &.dplayer-setting-box-open {
-                        transform: scale(1);
-                    }
-
-                    &.dplayer-setting-box-narrow {
-                        width: 70px;
-                        height: 180px;
-                        text-align: center;
-                    }
-
-                    &.dplayer-setting-box-speed {
-                        .dplayer-setting-origin-panel {
-                            display: none;
-                        }
-                        .dplayer-setting-speed-panel {
-                            display: block;
-                        }
-                    }
-                }
-
-                .dplayer-setting-item,
-                .dplayer-setting-speed-item {
-                    height: 30px;
-                    padding: 5px 10px;
-                    box-sizing: border-box;
-                    cursor: pointer;
-                    position: relative;
-
-                    &:hover {
-                        background-color: rgba(255,255,255,.1);
-                    }
-                }
-
-                .dplayer-setting-danmaku {
-                    padding: 5px 0;
-
-                    .dplayer-label {
-                        padding: 0 10px;
-                        display: inline;
-                    }
-
-                    &:hover {
-                        .dplayer-label {
-                            display: none;
-                        }
-                        .dplayer-danmaku-bar-wrap {
-                            display: inline-block;
-                        }
-                    }
-
-                    &.dplayer-setting-danmaku-active {
-                        .dplayer-label {
-                            display: none;
-                        }
-                        .dplayer-danmaku-bar-wrap {
-                            display: inline-block;
-                        }
-                    }
-
-                    .dplayer-danmaku-bar-wrap {
-                        padding: 0 10px;
-                        box-sizing: border-box;
-                        display: none;
-                        vertical-align: middle;
-                        height: 100%;
-                        width: 100%;
-
-                        .dplayer-danmaku-bar {
-                            position: relative;
-                            top: 8.5px;
-                            width: 100%;
-                            height: 3px;
-                            background: #fff;
-                            transition: all 0.3s ease-in-out;
-
-                            .dplayer-danmaku-bar-inner {
-                                position: absolute;
-                                bottom: 0;
-                                left: 0;
-                                height: 100%;
-                                transition: all 0.1s ease;
-                                background: #aaa;
-                                will-change: width;
-
-                                .dplayer-thumb {
-                                    position: absolute;
-                                    top: 0;
-                                    right: 5px;
-                                    margin-top: -4px;
-                                    margin-right: -10px;
-                                    height: 11px;
-                                    width: 11px;
-                                    border-radius: 50%;
-                                    cursor: pointer !important;
-                                    transition: all .3s ease-in-out;
-                                    background: #aaa;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .dplayer-full {
-                display: inline-block;
-                height: 100%;
-                position: relative;
-
-                &:hover {
-                    .dplayer-full-in-icon {
-                        display: block;
-                    }
-                }
-
-                .dplayer-full-in-icon {
-                    position: absolute;
-                    top: -30px;
-                    z-index: 1;
-                    display: none;
-                }
-            }
-
-            .dplayer-quality {
-                position: relative;
-                display: inline-block;
-                height: 100%;
-                z-index: 2;
-
-                &:hover {
-                    .dplayer-quality-list {
-                        display: block;
-                    }
-                    .dplayer-quality-mask {
-                        display: block;
-                    }
-                }
-
-                .dplayer-quality-mask {
-                    display: none;
-                    position: absolute;
-                    bottom: 38px;
-                    left: -18px;
-                    width: 80px;
-                    padding-bottom: 12px;
-                }
-
-                .dplayer-quality-list {
-                    display: none;
-                    font-size: 12px;
-                    width: 80px;
-                    border-radius: 2px;
-                    background: rgba(28, 28, 28, 0.9);
-                    padding: 5px 0;
-                    transition: all .3s ease-in-out;
-                    overflow: hidden;
-                    color: #fff;
-                    text-align: center;
-                }
-
-                .dplayer-quality-item {
-                    height: 25px;
-                    box-sizing: border-box;
-                    cursor: pointer;
-                    line-height: 25px;
-
-                    &:hover {
-                        background-color: rgba(255,255,255,.1);
-                    }
-                }
-            }
-
-            .dplayer-comment {
-                display: inline-block;
-                height: 100%;
-
-                
-            }
-
-            .dplayer-label {
-                color: #eee;
-                font-size: 13px;
-                display: inline-block;
-                vertical-align: middle;
-                white-space: nowrap;
-            }
-
-            .dplayer-toggle {
-                width: 32px;
-                height: 20px;
-                text-align: center;
-                font-size: 0;
-                vertical-align: middle;
-                position: absolute;
-                top: 5px;
-                right: 10px;
-
-                input {
-                    max-height: 0;
-                    max-width: 0;
-                    display: none;
-                }
-                input + label {
-                    display: inline-block;
-                    position: relative;
-                    box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
-                    border: 1px solid rgb(223, 223, 223);
-                    height: 20px;
-                    width: 32px;
-                    border-radius: 10px;
-                    box-sizing: border-box;
-                    cursor: pointer;
-                    transition: .2s ease-in-out;
-                }
-
-                input + label:before {
-                    content: "";
-                    position: absolute;
-                    display: block;
-                    height: 18px;
-                    width: 18px;
-                    top: 0;
-                    left: 0;
-                    border-radius: 15px;
-                    transition: .2s ease-in-out;
-                }
-
-                input + label:after {
-                    content: "";
-                    position: absolute;
-                    display: block;
-                    left: 0;
-                    top: 0;
-                    border-radius: 15px;
-                    background: #fff;
-                    transition: .2s ease-in-out;
-                    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-                    height: 18px;
-                    width: 18px;
-                }
-
-                input:checked + label {
-                    border-color: rgba(255, 255, 255, 0.5);
-                }
-
-                input:checked + label:before {
-                    width: 30px;
-                    background: rgba(255, 255, 255, 0.5);
-                }
-
-                input:checked + label:after {
-                    left: 12px;
-                }
-            }
-        }
-    }
-
-    .dplayer-menu {
-        position: absolute;
-        width: 170px;
-        border-radius: 2px;
-        background: rgba(28, 28, 28, 0.85);
-        padding: 5px 0;
-        overflow: hidden;
-        z-index: 3;
-        display: none;
-
-        &.dplayer-menu-show {
-            display: block;
-        }
-
-        .dplayer-menu-item {
-            height: 30px;
-            box-sizing: border-box;
-            cursor: pointer;
-
-            &:hover {
-                background-color: rgba(255,255,255,.1);
-            }
-
-            a {
-                display: inline-block;
-                padding: 0 10px;
-                line-height: 30px;
-                color: #eee;
-                font-size: 13px;
-                display: inline-block;
-                vertical-align: middle;
-                width: 100%;
-                box-sizing: border-box;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-
-                &:hover {
-                    text-decoration: none;
-                }
-            }
-        }
-    }
-
-    .dplayer-logo {
-        pointer-events: none;
-        position: absolute;
-        left: 20px;
-        top: 20px;
-        max-width: 50px;
-        max-height: 50px;
-
-        img {
-            max-width: 100%;
-            max-height: 100%;
-            background: none;
-        }
-    }
-
-    .dplayer-notice {
-        opacity: 0;
-        position: absolute;
-        bottom: 60px;
-        left: 20px;
-        font-size: 14px;
-        border-radius: 2px;
-        background: rgba(28, 28, 28, 0.9);
-        padding: 7px 20px;
-        transition: all .3s ease-in-out;
-        overflow: hidden;
-        color: #fff;
-        pointer-events: none;
-    }
-}
-
-@keyframes my-face {
-    2% {
-        transform: translate(0, 1.5px) rotate(1.5deg);
-    }
-    4% {
-        transform: translate(0, -1.5px) rotate(-0.5deg);
-    }
-    6% {
-        transform: translate(0, 1.5px) rotate(-1.5deg);
-    }
-    8% {
-        transform: translate(0, -1.5px) rotate(-1.5deg);
-    }
-    10% {
-        transform: translate(0, 2.5px) rotate(1.5deg);
-    }
-    12% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    14% {
-        transform: translate(0, -1.5px) rotate(1.5deg);
-    }
-    16% {
-        transform: translate(0, -0.5px) rotate(-1.5deg);
-    }
-    18% {
-        transform: translate(0, 0.5px) rotate(-1.5deg);
-    }
-    20% {
-        transform: translate(0, -1.5px) rotate(2.5deg);
-    }
-    22% {
-        transform: translate(0, 0.5px) rotate(-1.5deg);
-    }
-    24% {
-        transform: translate(0, 1.5px) rotate(1.5deg);
-    }
-    26% {
-        transform: translate(0, 0.5px) rotate(0.5deg);
-    }
-    28% {
-        transform: translate(0, 0.5px) rotate(1.5deg);
-    }
-    30% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    32% {
-        transform: translate(0, 1.5px) rotate(-0.5deg);
-    }
-    34% {
-        transform: translate(0, 1.5px) rotate(-0.5deg);
-    }
-    36% {
-        transform: translate(0, -1.5px) rotate(2.5deg);
-    }
-    38% {
-        transform: translate(0, 1.5px) rotate(-1.5deg);
-    }
-    40% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    42% {
-        transform: translate(0, 2.5px) rotate(-1.5deg);
-    }
-    44% {
-        transform: translate(0, 1.5px) rotate(0.5deg);
-    }
-    46% {
-        transform: translate(0, -1.5px) rotate(2.5deg);
-    }
-    48% {
-        transform: translate(0, -0.5px) rotate(0.5deg);
-    }
-    50% {
-        transform: translate(0, 0.5px) rotate(0.5deg);
-    }
-    52% {
-        transform: translate(0, 2.5px) rotate(2.5deg);
-    }
-    54% {
-        transform: translate(0, -1.5px) rotate(1.5deg);
-    }
-    56% {
-        transform: translate(0, 2.5px) rotate(2.5deg);
-    }
-    58% {
-        transform: translate(0, 0.5px) rotate(2.5deg);
-    }
-    60% {
-        transform: translate(0, 2.5px) rotate(2.5deg);
-    }
-    62% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    64% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    66% {
-        transform: translate(0, 1.5px) rotate(-0.5deg);
-    }
-    68% {
-        transform: translate(0, -1.5px) rotate(-0.5deg);
-    }
-    70% {
-        transform: translate(0, 1.5px) rotate(0.5deg);
-    }
-    72% {
-        transform: translate(0, 2.5px) rotate(1.5deg);
-    }
-    74% {
-        transform: translate(0, -0.5px) rotate(0.5deg);
-    }
-    76% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    78% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    80% {
-        transform: translate(0, 1.5px) rotate(1.5deg);
-    }
-    82% {
-        transform: translate(0, -0.5px) rotate(0.5deg);
-    }
-    84% {
-        transform: translate(0, 1.5px) rotate(2.5deg);
-    }
-    86% {
-        transform: translate(0, -1.5px) rotate(-1.5deg);
-    }
-    88% {
-        transform: translate(0, -0.5px) rotate(2.5deg);
-    }
-    90% {
-        transform: translate(0, 2.5px) rotate(-0.5deg);
-    }
-    92% {
-        transform: translate(0, 0.5px) rotate(-0.5deg);
-    }
-    94% {
-        transform: translate(0, 2.5px) rotate(0.5deg);
-    }
-    96% {
-        transform: translate(0, -0.5px) rotate(1.5deg);
-    }
-    98% {
-        transform: translate(0, -1.5px) rotate(-0.5deg);
-    }
-    0%, 100% {
-        transform: translate(0, 0) rotate(0deg);
-    }
-}
-
-[data-balloon]:before {
-    display: none;
-}
-
-[data-balloon]:after {
-    padding: 0.3em 0.7em;
-    background: rgba(17, 17, 17, 0.7);
-}
-
-[data-balloon][data-balloon-pos="up"]:after {
-    margin-bottom: 0;
-}
-
-// To hide scroll bar, apply this class to <body>
-.dplayer-web-fullscreen-fix {
-    position: fixed;
-    top: 0;
-    left: 0;
-    margin: 0;
-    padding: 0;
-}
+@import './global';
+@import './player';
+@import './balloon';
+@import './bezel';
+@import './controller';
+@import './danmaku';
+@import './logo';
+@import './menu';
+@import './notice';
+@import './subtitle';
+@import './video';

src/css/logo.scss

@@ -0,0 +1,13 @@
+.dplayer-logo {
+    pointer-events: none;
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    max-width: 50px;
+    max-height: 50px;
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        background: none;
+    }
+}

src/css/menu.scss

@@ -0,0 +1,38 @@
+.dplayer-menu {
+    position: absolute;
+    width: 170px;
+    border-radius: 2px;
+    background: rgba(28, 28, 28, 0.85);
+    padding: 5px 0;
+    overflow: hidden;
+    z-index: 3;
+    display: none;
+    &.dplayer-menu-show {
+        display: block;
+    }
+    .dplayer-menu-item {
+        height: 30px;
+        box-sizing: border-box;
+        cursor: pointer;
+        &:hover {
+            background-color: rgba(255, 255, 255, .1);
+        }
+        a {
+            display: inline-block;
+            padding: 0 10px;
+            line-height: 30px;
+            color: #eee;
+            font-size: 13px;
+            display: inline-block;
+            vertical-align: middle;
+            width: 100%;
+            box-sizing: border-box;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+    }
+}

src/css/notice.scss

@@ -0,0 +1,14 @@
+.dplayer-notice {
+    opacity: 0;
+    position: absolute;
+    bottom: 60px;
+    left: 20px;
+    font-size: 14px;
+    border-radius: 2px;
+    background: rgba(28, 28, 28, 0.9);
+    padding: 7px 20px;
+    transition: all .3s ease-in-out;
+    overflow: hidden;
+    color: #fff;
+    pointer-events: none;
+}

src/css/player.scss

@@ -0,0 +1,163 @@
+.dplayer {
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1;
+
+    * {
+        box-sizing: content-box;
+    }
+
+    &:-webkit-full-screen {
+        width: 100%;
+        height: 100%;
+        background: #000;
+        position: fixed;
+        z-index: 100000;
+        left: 0;
+        top: 0;
+
+        .dplayer-danmaku {
+            .dplayer-danmaku-top,
+            .dplayer-danmaku-bottom {
+                &.dplayer-danmaku-move {
+                    animation: danmaku-center 6s linear;
+                    animation-play-state: paused;
+                }
+            }
+
+            .dplayer-danmaku-right {
+                &.dplayer-danmaku-move {
+                    animation: danmaku 8s linear;
+                    animation-play-state: paused;
+                }
+            }
+        }
+    }
+
+    &.dplayer-no-danmaku {
+        .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
+            .dplayer-setting-showdan,
+            .dplayer-setting-danmaku,
+            .dplayer-setting-danunlimit {
+                display: none;
+            }
+        }
+
+        .dplayer-controller .dplayer-icons .dplayer-comment {
+            display: none;
+        }
+
+        .dplayer-danmaku {
+            display: none;
+        }
+    }
+
+    &.dplayer-live {
+        .dplayer-time {
+            display: none;
+        }
+        .dplayer-bar-wrap {
+            display: none;
+        }
+        .dplayer-setting-speed {
+            display: none;
+        }
+        .dplayer-setting-loop {
+            display: none;
+        }
+    }
+
+    &.dplayer-arrow {
+        .dplayer-danmaku {
+            font-size: 18px
+        }
+        .dplayer-icon {
+            margin: 0 -3px;
+        }
+    }
+
+    &.dplayer-playing {
+
+        .dplayer-danmaku .dplayer-danmaku-move {
+            animation-play-state: running;
+        }
+
+        @media (min-width: 900px) {
+            .dplayer-controller-mask {
+                opacity: 0;
+            }
+            .dplayer-controller {
+                opacity: 0;
+            }
+
+            &:hover {
+                .dplayer-controller-mask {
+                    opacity: 1;
+                }
+                .dplayer-controller {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    &.dplayer-loading {
+        .dplayer-bezel .diplayer-loading-icon {
+            display: block;
+        }
+
+        .dplayer-danmaku .dplayer-danmaku-move {
+            animation-play-state: paused;
+        }
+    }
+
+    &.dplayer-hide-controller {
+        cursor: none;
+
+        .dplayer-controller-mask {
+            opacity: 0;
+            transform: translateY(100%);
+        }
+        .dplayer-controller {
+            opacity: 0;
+            transform: translateY(100%);
+        }
+    }
+    &.dplayer-show-controller {
+        .dplayer-controller-mask {
+            opacity: 1;
+        }
+        .dplayer-controller {
+            opacity: 1;
+        }
+    }
+    &.dplayer-fulled {
+        position: fixed;
+        z-index: 100000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+    &.dplayer-mobile .dplayer-controller .dplayer-icons {
+        .dplayer-volume,
+        .dplayer-camera-icon {
+            display: none;
+        }
+
+        .dplayer-full .dplayer-full-in-icon {
+            position: static;
+            display: inline-block;
+        }
+    }
+}
+
+// To hide scroll bar, apply this class to <body>
+.dplayer-web-fullscreen-fix {
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}

src/css/subtitle.scss

@@ -0,0 +1,13 @@
+.dplayer-subtitle {
+    position: absolute;
+    bottom: 40px;
+    width: 90%;
+    left: 5%;
+    text-align: center;
+    color: #fff;
+    text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
+    font-size: 20px;
+    &.dplayer-subtitle-hide {
+        display: none;
+    }
+}

src/css/video.scss

@@ -0,0 +1,31 @@
+.dplayer-mask {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    display: none;
+    &.dplayer-mask-show {
+        display: block;
+    }
+}
+
+.dplayer-video-wrap {
+    position: relative;
+    background: #000;
+    font-size: 0;
+    width: 100%;
+    height: 100%;
+    .dplayer-video {
+        width: 100%;
+        height: 100%;
+        display: none;
+    }
+    .dplayer-video-current {
+        display: block;
+    }
+    .dplayer-video-prepare {
+        display: none;
+    }
+}