Add optional clickable animation to .bi

src/assets/base.css

@@ -200,6 +200,15 @@ button {
 .bi[data-active='true'] {
   color: var(--color-foreground);
 }
+.bi.clickable::before {
+  border-radius: 50%;
+  transition: background-color 0.1s ease, box-shadow 0.1s ease;
+}
+
+.bi.clickable:active::before {
+  background-color: var(--color-border);
+  box-shadow: 0 0 0 0.5rem var(--color-border);
+}
 
 .caps {
   text-transform: capitalize;

src/components/Btn.vue

@@ -4,7 +4,7 @@ defineEmits(['click']);
 </script>
 
 <template>
-  <button :class="'bi bi-' + (ico ? ico : 'play')" @click="$emit('click')">
+  <button :class="'bi clickable bi-' + (ico ? ico : 'play')" @click="$emit('click')">
     <slot name="menu"></slot>
   </button>
 </template>

src/components/Modal.vue

@@ -20,7 +20,7 @@ watch(show, n => {
 <template>
   <Transition name="fade">
     <div class="modal" v-if="show">
-      <span class="bi bi-x-lg modal-close" @click="show = false"></span>
+      <span class="bi bi-x-lg clickable modal-close" @click="show = false"></span>
       <div class="modal-box">
         <div class="modal-title">{{ title }}</div>
         <div class="modal-content">

src/components/NavBar.vue

@@ -43,19 +43,19 @@ function set(page) {
 
     <div class="wrap">
       <span
-        class="nav-ico bi bi-house"
+        class="nav-ico bi bi-house clickable"
         :data-active="nav.state.page == 'home'"
         @click="set('home')"></span>
       <span
-        class="nav-ico bi bi-compass"
+        class="nav-ico bi bi-compass clickable"
         :data-active="nav.state.page == 'explore'"
         @click="set('explore')"></span>
       <span
-        class="nav-ico bi bi-collection"
+        class="nav-ico bi bi-collection clickable"
         :data-active="nav.state.page == 'library'"
         @click="set('library')"></span>
       <span
-        class="nav-ico bi bi-gear"
+        class="nav-ico bi bi-gear clickable"
         :data-active="nav.state.page == 'prefs'"
         @click="set('prefs')"></span>
     </div>

src/components/Search.vue

@@ -141,10 +141,10 @@ onUpdated(() => {
       <template #menu>
         <Transition name="fade">
           <div v-if="albumMenu" class="alb popup">
-            <button class="bi bi-bookmark-plus" @click="saveAlbum"></button>
+            <button class="bi bi-bookmark-plus clickable" @click="saveAlbum"></button>
 
             <button
-              class="bi bi-plus-lg"
+              class="bi bi-plus-lg clickable"
               @click="
                 data.state.urls.push(
                   ...results.items.songs.items.map(i => ({
@@ -155,7 +155,7 @@ onUpdated(() => {
                 )
               "></button>
 
-            <button class="bi bi-shuffle" @click="shuffleAdd"></button>
+            <button class="bi bi-shuffle clickable" @click="shuffleAdd"></button>
           </div>
         </Transition>
       </template>

src/components/SongItem.vue

@@ -117,12 +117,12 @@ onMounted(() => {
           <!-- TODO: Check if user is admin -->
           <span
             v-if="useStore().auth && playlistId"
-            class="bi bi-dash-lg ign"
+            class="bi bi-dash-lg clickable ign"
             @click="Remove"></span>
 
-          <span class="bi bi-plus-lg ign" @click="addSong"></span>
+          <span class="bi bi-plus-lg clickable ign" @click="addSong"></span>
 
-          <span class="bi bi-share ign" @click="Share"></span>
+          <span class="bi bi-share clickable ign" @click="Share"></span>
         </div>
       </Transition>
     </span>

src/components/StatusBar.vue

@@ -144,7 +144,7 @@ async function Like() {
       <button
         id="btn-play-pause"
         aria-label="Play or Pause"
-        class="bi"
+        class="bi clickable"
         :class="'bi-' + player.state.status"
         @click="player.toggle('play')"></button>
 
@@ -167,7 +167,7 @@ async function Like() {
         id="vol-btn"
         aria-label="Volume Buttons"
         @click="showme.vol = !showme.vol"
-        class="popup-wrap bi bi-volume-up">
+        class="popup-wrap bi bi-volume-up clickable">
         <Transition name="fade">
           <div v-if="showme.vol" id="vol" class="popup">
             <input
@@ -182,7 +182,7 @@ async function Like() {
         </Transition>
       </button>
       <button
-        class="bi bi-three-dots"
+        class="bi bi-three-dots clickable"
         aria-label="More Controls"
         @click="
           showme.menu = !showme.menu;
@@ -194,7 +194,7 @@ async function Like() {
         <div id="menu" v-if="showme.menu" class="popup">
           <button
             id="info-btn"
-            class="bi bi-info-circle"
+            class="bi bi-info-circle clickable"
             aria-label="Show Information About Song"
             :data-active="player.state.info"
             @click="player.toggle('info')"></button>
@@ -203,7 +203,7 @@ async function Like() {
             v-if="store.auth"
             id="like-btn"
             title="Add song to favorites"
-            class="bi blink"
+            class="bi blink clickable"
             :class="data.state.url == liked ? 'bi-heart-fill' : 'bi-heart'"
             :data-active="data.state.url == liked"
             :data-loading="liking"
@@ -213,20 +213,20 @@ async function Like() {
             id="addToPlaylist"
             title="Add Current Song to a Playlist"
             aria-label="Add Current Song to a Playlist"
-            class="bi bi-collection"
+            class="bi bi-collection clickable"
             @click="List"></button>
 
           <button
             id="list-btn"
             title="Current Playlist"
             aria-label="Current Playlist"
-            class="bi bi-music-note-list"
+            class="bi bi-music-note-list clickable"
             :data-active="player.state.playlist"
             @click="player.toggle('playlist')"></button>
 
           <button
             id="btn-lyrics"
-            class="bi bi-file-music"
+            class="bi bi-file-music clickable"
             :data-active="player.state.lyrics"
             @click="player.toggle('lyrics')"></button>
 
@@ -234,7 +234,7 @@ async function Like() {
             id="loop-btn"
             title="Loop"
             aria-label="Loop"
-            class="bi"
+            class="bi clickable"
             :class="player.state.loop < 2 ? 'bi-repeat' : 'bi-repeat-1'"
             :data-active="player.state.loop > 0"
             @click="