Merge pull request 'Add background color to items for accessibility' (#33) from Denevola/Hyperpipe:patch-accessibility-bgcolor into main

Reviewed-on: https://codeberg.org/Hyperpipe/Hyperpipe/pulls/33

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;
@@ -229,21 +238,27 @@ img {
   border-radius: 50%;
 }
 
-.pop {
-  --shadow: none;
-  --translate: 0;
-}
 .pop,
 .pop-2 {
-  transition: box-shadow 0.4s ease, transform 0.4s ease;
+  transition: background-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease, transform 0.4s ease;
 }
-.pop:hover {
-  --shadow: 0.5rem 0.5rem 1rem var(--color-shadow);
-  --translate: -1.25rem;
+.pop {
+  --background: none;
+  --shadow: none;
+  --translate: 0;
+  background: var(--background);
   box-shadow: var(--shadow);
   transform: translateX(calc(var(--translate) / 2))
     translateY(calc(var(--translate) / 2));
 }
+.pop:hover {
+  --background: var(--color-background-soft);
+  --shadow: 0.5rem 0.5rem 1rem var(--color-shadow);
+  --translate: -1.25rem;
+}
+.pop:active {
+  --background: var(--color-border);
+}
 .pop-2 {
   transform: translateX(var(--translate)) translateY(var(--translate));
   box-shadow: var(--shadow);

src/components/AlbumItem.vue

@@ -38,9 +38,6 @@ defineEmits(['open-album']);
   padding: 1rem;
   margin: auto;
 }
-.card:hover {
-  background-color: var(--color-background);
-}
 .card-bg {
   --grad: v-bind('grad || rand');
   height: 13rem;

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/Genres.vue

@@ -126,10 +126,14 @@ onMounted(get);
   letter-spacing: 0.125rem;
   background-color: var(--color-background-mute);
   color: var(--btn-color);
+  transition: background-color 0.1s ease;
 }
 .btn:hover {
   background-color: var(--color-background-soft);
 }
+.btn:active {
+  background-color: var(--color-border);
+}
 .head {
   margin-top: 1.75rem;
   text-align: center;

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">
@@ -91,6 +91,7 @@ watch(show, n => {
   font-size: 1rem;
   font-weight: bold;
   border-right: 1px solid var(--color-shadow);
+  transition: background-color 0.1s ease;
 }
 .modal-buttons button:first-child {
   color: indianred;
@@ -103,6 +104,9 @@ watch(show, n => {
 .modal-buttons button:hover {
   background-color: var(--color-background-mute);
 }
+.modal-buttons button:active {
+  background-color: var(--color-border);
+}
 
 @media (max-width: 530px) {
   .modal-box {

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/NewPlaylist.vue

@@ -341,16 +341,13 @@ h2 {
   padding-bottom: 5rem;
 }
 .npl-box {
+  --background: var(--color-background-mute);
   margin: 0 auto 2rem auto;
   border-radius: 0.5rem;
-  background-color: var(--color-background-mute);
   padding: 2rem 3rem;
   font-size: 4rem;
   width: 10rem;
 }
-.npl-box:hover {
-  background-color: var(--color-background-soft);
-}
 .npl-round {
   float: left;
   display: inline-block;

src/components/Playlists.vue

@@ -62,10 +62,14 @@ defineEmits(['playthis']);
   margin: 0.125rem;
   border-radius: 0.25rem;
   background: var(--color-background);
+  transition: background-color 0.1s ease;
 }
 .pl-item:hover {
   background: var(--color-background-soft);
 }
+.pl-item:active {
+  background: var(--color-border);
+}
 .pl-main {
   overflow: hidden;
   white-space: nowrap;

src/components/Search.vue

@@ -148,10 +148,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 => ({
@@ -162,7 +162,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

@@ -121,12 +121,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="