setting button

src/DPlayer.scss

@@ -1,5 +1,6 @@
 .dplayer {
     position: relative;
+    overflow: hidden;
 
     &:-webkit-full-screen {
         width: 100%;
@@ -46,6 +47,14 @@
         }
     }
 
+    .dplayer-danmaku {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+
     .dplayer-controller-mask {
         background-repeat: repeat-x;
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
@@ -240,6 +249,120 @@
                     }
                 }
             }
+
+            .dplayer-setting {
+                display: inline-block;
+                height: 100%;
+
+                .dplayer-setting-box {
+                    position: absolute;
+                    right: 0;
+                    bottom: 50px;
+                    transform: translateX(170px);
+                    width: 150px;
+                    height: 60px;
+                    border-radius: 2px;
+                    background: rgba(28, 28, 28, 0.9);
+                    padding: 7px 0;
+                    transition: all .3s ease-in-out;
+                    overflow: hidden;
+
+                    &.dplayer-setting-box-open {
+                        transform: translateX(0);
+                    }
+
+                    &.dplayer-setting-box-narrow {
+                        width: 70px;
+                        height: 180px;
+                    }
+                }
+
+                .dplayer-setting-item,
+                .dplayer-setting-speed-item {
+                    height: 30px;
+                    padding: 5px 10px;
+                    box-sizing: border-box;
+                    cursor: pointer;
+
+                    &:hover {
+                        background-color: rgba(255,255,255,.1);
+                    }
+                }
+            }
+
+            .dplayer-label {
+                color: #eee;
+                font-size: 13px;
+                display: inline-block;
+                vertical-align: middle;
+            }
+
+            .dplayer-toggle {
+                width: 32px;
+                height: 100%;
+                text-align: center;
+                display: inline-block;
+                font-size: 0;
+                vertical-align: middle;
+                float: right;
+            }
+
+            input#dplayer-toggle {
+                max-height: 0;
+                max-width: 0;
+                display: none;
+            }
+            input#dplayer-toggle + 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#dplayer-toggle + label:before {
+                content: "";
+                position: absolute;
+                display: block;
+                height: 18px;
+                width: 18px;
+                top: 0;
+                left: 0;
+                border-radius: 15px;
+                transition: .2s ease-in-out;
+            }
+
+            input#dplayer-toggle + 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#dplayer-toggle:checked + label {
+                border-color: rgba(255, 255, 255, 0.5);
+            }
+
+            input#dplayer-toggle:checked + label:before {
+                width: 30px;
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            input#dplayer-toggle:checked + label:after {
+                left: 12px;
+            }
         }
     }
 }