Changes:

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

src/App.vue

@@ -173,6 +173,7 @@ async function getAlbum(e) {
   });
 
   useRoute(e);
+  nav.state.page = 'home';
 
   artist.reset();
 }
@@ -200,6 +201,7 @@ async function getArtist(e) {
   artist.set(json);
 
   useRoute('/channel/' + e);
+  nav.state.page = 'home';
 }
 
 async function getNext(hash) {
@@ -385,11 +387,17 @@ onMounted(() => {
     <Prefs v-if="nav.state.page == 'prefs'" />
   </main>
 
-  <Playlists v-if="player.state.playlist" @playthis="playThis" />
+  <Transition name="fade">
+    <Playlists v-if="player.state.playlist" @playthis="playThis" />
+  </Transition>
 
-  <Lyrics v-if="player.state.lyrics" />
+  <Transition name="fade">
+    <Lyrics v-if="player.state.lyrics" />
+  </Transition>
 
-  <Info v-if="player.state.info" :text="data.state.description" />
+  <Transition name="fade">
+    <Info v-if="player.state.info" :text="data.state.description" />
+  </Transition>
 
   <StatusBar @save="SaveTrack" />
 

src/assets/base.css

@@ -38,6 +38,24 @@ body[data-theme='dark'] {
   --color-text: var(--vt-c-text-dark-2);
 }
 
+body[data-theme='black'] {
+  --color-background: #000;
+  --color-shadow: var(--vt-c-black);
+}
+
+body[data-theme='blur'] #statusbar,
+body[data-theme='blur'] .txt-modal,
+body[data-theme='blur'] .pl-modal,
+body[data-theme='blur'] .modal-box,
+body[data-theme='blur'] .popup input[type='text'] {
+  background: #11111199;
+  backdrop-filter: blur(10px);
+}
+
+body[data-theme='blur'] .modal {
+  backdrop-filter: blur(5px);
+}
+
 body[data-theme='light'] {
   --color-foreground: cornflowerblue;
   --color-background: var(--vt-c-white);

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>

src/main.js

@@ -3,6 +3,8 @@ import { createPinia } from 'pinia';
 
 import App from './App.vue';
 
+import('bootstrap-icons/font/bootstrap-icons.css');
+
 const pinia = createPinia(),
   app = createApp(App);