first commit

src/assets/css/nprogress.css

@@ -0,0 +1,41 @@
+/* Make clicks pass-through */
+#nprogress {
+    pointer-events: none;
+}
+
+#nprogress .bar {
+    background: #335eea;
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #335eea,
+    0 0 5px #335eea;
+    opacity: 1.0;
+
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+}
+
+.nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+}
+
+.nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+}

src/assets/css/slider.css

@@ -0,0 +1,65 @@
+/* rail style */
+.vue-slider-rail {
+    background-color: #eee;
+    border-radius: 15px;
+}
+
+/* process style */
+.vue-slider-process {
+    background-color: #335eea;
+    border-radius: 15px;
+}
+
+/* dot style */
+.vue-slider-dot-handle {
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #fff;
+    box-sizing: border-box;
+    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.12);
+    visibility: hidden;
+}
+
+/* tooltip style  */
+.vue-slider-dot-tooltip-wrapper {
+    opacity: 0;
+    transition: all 1s;
+}
+
+.vue-slider-dot-tooltip-wrapper-show {
+    opacity: 1;
+}
+
+.vue-slider-dot-tooltip-inner {
+    font-size: 14px;
+    white-space: nowrap;
+    padding: 2px 6px;
+    min-width: 20px;
+    text-align: center;
+    color: #000;
+    border-radius: 5px;
+    border-color: #fff;
+    background-color: #fff;
+    box-sizing: content-box;
+    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.08);
+}
+
+
+/* hover */
+.vue-slider:hover .vue-slider-dot-handle,
+.vue-slider:active .vue-slider-dot-handle {
+    visibility: visible;
+}
+
+
+/* volume style */
+.volume-control .vue-slider-process {
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 15px;
+}
+
+.volume-control:hover .vue-slider-process {
+    background-color: #335eea;
+}