feat: 🌈🐈️

src/assets/css/slider.css

@@ -62,3 +62,40 @@
 .volume-control:hover .vue-slider-process {
   background-color: #335eea;
 }
+
+/* nyancat */
+
+.nyancat .vue-slider-rail {
+  background-color: rgba(128, 128, 128, 0.18);
+  padding: 2.5px 0px;
+  border-radius: 0;
+}
+
+.nyancat .vue-slider-process {
+  padding: 0px 1px;
+  top: -2px;
+  border-radius: 0;
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0, #f00),
+    color-stop(17%, #f90),
+    color-stop(33%, #ff0),
+    color-stop(50%, #3f0),
+    color-stop(67%, #09f),
+    color-stop(83%, #63f)
+  );
+}
+
+.nyancat .vue-slider-dot-handle {
+  background: url("/img/logos/nyancat.gif");
+  background-size: 36px;
+  width: 36px;
+  height: 24px;
+  margin-top: -6px;
+  box-shadow: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  visibility: visible;
+}

src/components/Player.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="player">
-    <div class="progress-bar">
+    <div class="progress-bar" :class="{ nyancat: settings.nyancatStyle }">
       <vue-slider
         v-model="progress"
         :min="0"

src/views/settings.vue

@@ -106,6 +106,22 @@
           </div>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title" style="transform: scaleX(-1)">🐈️ 🏳️‍🌈</div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              type="checkbox"
+              name="nyancat-style"
+              id="nyancat-style"
+              v-model="nyancatStyle"
+            />
+            <label for="nyancat-style"></label>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -174,6 +190,18 @@ export default {
         });
       },
     },
+    nyancatStyle: {
+      get() {
+        if (this.settings.nyancatStyle === undefined) return false;
+        return this.settings.nyancatStyle;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "nyancatStyle",
+          value,
+        });
+      },
+    },
   },
   methods: {
     logout() {