Changes:

- Closes #14
- Removed margin for player (#9)
- Bug Fixes
- Blur theme

src/components/Prefs.vue

@@ -63,6 +63,7 @@ onMounted(() => {
     @change="setTheme($event.target.value)">
     <option value="dark">Dark (Default)</option>
     <option value="light">Light</option>
+    <option value="blur">Blur</option>
     <option value="dracula">Dracula</option>
     <option value="nord">Nord</option>
   </select>

src/components/SearchBar.vue

@@ -30,6 +30,7 @@ const show = ref(false),
 
 <style scoped>
 .popup {
+  background: transparent;
   right: 0;
   top: -0.5rem;
   bottom: -0.5rem;

src/components/StatusBar.vue

@@ -118,38 +118,40 @@ function Save() {
           player.state.lyrics ? player.toggle('lyrics') : '';
           player.state.info ? player.toggle('info') : '';
         "></button>
-      <div id="menu" v-if="showme.menu" class="popup">
-        <button
-          id="info-btn"
-          class="bi bi-info-circle"
-          aria-label="Show Information About Song"
-          @click="player.toggle('info')"></button>
-        <button
-          id="addToPlaylist"
-          title="Add Current Song to a Playlist"
-          aria-label="Add Current Song to a Playlist"
-          class="bi bi-collection"
-          @click="Save"></button>
-        <button
-          id="list-btn"
-          title="Current Playlist"
-          aria-label="Current Playlist"
-          class="bi bi-music-note-list"
-          :data-active="player.state.playlist"
-          @click="player.toggle('playlist')"></button>
-        <button
-          id="btn-lyrics"
-          class="bi bi-file-music"
-          :data-active="player.state.lyrics"
-          @click="player.toggle('lyrics')"></button>
-        <button
-          id="loop-btn"
-          title="Loop"
-          aria-label="Loop"
-          class="bi bi-infinity"
-          :data-active="player.state.loop"
-          @click="player.toggle('loop')"></button>
-      </div>
+      <Transition name="fade">
+        <div id="menu" v-if="showme.menu" class="popup">
+          <button
+            id="info-btn"
+            class="bi bi-info-circle"
+            aria-label="Show Information About Song"
+            @click="player.toggle('info')"></button>
+          <button
+            id="addToPlaylist"
+            title="Add Current Song to a Playlist"
+            aria-label="Add Current Song to a Playlist"
+            class="bi bi-collection"
+            @click="Save"></button>
+          <button
+            id="list-btn"
+            title="Current Playlist"
+            aria-label="Current Playlist"
+            class="bi bi-music-note-list"
+            :data-active="player.state.playlist"
+            @click="player.toggle('playlist')"></button>
+          <button
+            id="btn-lyrics"
+            class="bi bi-file-music"
+            :data-active="player.state.lyrics"
+            @click="player.toggle('lyrics')"></button>
+          <button
+            id="loop-btn"
+            title="Loop"
+            aria-label="Loop"
+            class="bi bi-infinity"
+            :data-active="player.state.loop"
+            @click="player.toggle('loop')"></button>
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -165,12 +167,8 @@ function Save() {
   background: var(--color-background);
   min-height: 15vh;
 }
-.statusbar-left {
-  margin-left: auto;
-}
 .statusbar-right {
   margin-left: 0.5rem;
-  margin-right: auto;
 }
 .bi-play,
 .bi-pause {

src/components/TextModal.vue

@@ -33,6 +33,4 @@
   letter-spacing: 0.1rem;
   font-weight: 600;
 }
-
-@media();
 </style>