[web] Remove remnants of the name forked-daapd in styles

web-src/src/components/CoverArtwork.vue

@@ -1,5 +1,5 @@
 <template>
-  <figure>
+  <figure class="cover has-shadow">
     <img v-lazy="{ src: url, lifecycle }" @click="$emit('click')" />
   </figure>
 </template>
@@ -50,3 +50,58 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@use 'bulma/sass/utilities/mixins';
+
+.cover {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  &.is-small {
+    width: 4rem;
+    height: 4rem;
+    img {
+      border-radius: var(--bulma-radius-small);
+      max-width: 4rem;
+      max-height: 4rem;
+    }
+  }
+  &.is-medium {
+    @include mixins.tablet {
+      justify-content: right;
+    }
+    img {
+      border-radius: var(--bulma-radius);
+      max-height: calc(150px - 1.5rem);
+    }
+  }
+  &.is-normal {
+    img {
+      border-radius: var(--bulma-radius-large);
+      width: 100%;
+    }
+  }
+  &.is-big {
+    @include mixins.mobile {
+      @media screen and (orientation: landscape) {
+        img {
+          display: none;
+        }
+      }
+    }
+    img {
+      border-radius: var(--bulma-radius-large);
+      max-height: calc(100vh - 26rem);
+    }
+    &.is-masked {
+      filter: blur(0.5rem) opacity(0.2);
+    }
+  }
+}
+.has-shadow img {
+  box-shadow:
+    0 0.25rem 0.5rem 0 var(--bulma-background-active),
+    0 0.375rem 1.25rem 0 var(--bulma-background-active);
+}
+</style>

web-src/src/components/ListAlbums.vue

@@ -17,7 +17,7 @@
         :url="item.item.artwork_url"
         :artist="item.item.artist"
         :album="item.item.name"
-        class="media-left fd-has-shadow fd-cover fd-cover-small-image"
+        class="media-left is-small"
       />
       <div class="media-content">
         <div class="is-size-6 has-text-weight-bold" v-text="item.item.name" />

web-src/src/components/ListAlbumsSpotify.vue

@@ -12,7 +12,7 @@
           :url="artwork_url(item)"
           :artist="item.artist"
           :album="item.name"
-          class="fd-has-shadow fd-cover fd-cover-small-image"
+          class="is-small"
         />
       </div>
       <div class="media-content">

web-src/src/components/ModalDialogAlbum.vue

@@ -8,7 +8,7 @@
         :url="item.artwork_url"
         :artist="item.artist"
         :album="item.name"
-        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
+        class="is-normal mb-3"
       />
       <div v-if="media_kind_resolved === 'podcast'" class="buttons">
         <a

web-src/src/components/ModalDialogAlbumSpotify.vue

@@ -8,7 +8,7 @@
         :url="artwork_url(item)"
         :artist="item.artist"
         :album="item.name"
-        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
+        class="is-normal mb-3"
         @load="artwork_loaded"
         @error="artwork_error"
       />

web-src/src/mystyles.scss

@@ -12,12 +12,6 @@
   width: 100%;
 }
 
-.fd-has-shadow img {
-  box-shadow:
-    0 0.25rem 0.5rem 0 var(--bulma-background-active),
-    0 0.375rem 1.25rem 0 var(--bulma-background-active);
-}
-
 .is-full-height {
   min-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
 }
@@ -35,52 +29,6 @@
   justify-content: center;
 }
 
-.fd-cover {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  &-small-image {
-    width: 4rem;
-    height: 4rem;
-    img {
-      border-radius: var(--bulma-radius-small);
-      max-width: 4rem;
-      max-height: 4rem;
-    }
-  }
-  &-medium-image {
-    @include mixins.tablet {
-      justify-content: right;
-    }
-    img {
-      border-radius: var(--bulma-radius);
-      max-height: calc(150px - 1.5rem);
-    }
-  }
-  &-normal-image {
-    img {
-      border-radius: var(--bulma-radius-large);
-      width: 100%;
-    }
-  }
-  &-big-image {
-    @include mixins.mobile {
-      @media screen and (orientation: landscape) {
-        img {
-          display: none;
-        }
-      }
-    }
-    img {
-      border-radius: var(--bulma-radius-large);
-      max-height: calc(100vh - 26rem);
-    }
-    &.is-masked {
-      filter: blur(0.5rem) opacity(0.2);
-    }
-  }
-}
-
 .media:first-of-type {
   padding-top: 1rem;
 }
@@ -106,7 +54,7 @@
 }
 
 .column {
-  &.fd-has-cover {
+  &.has-cover {
     @include mixins.mobile {
       margin: auto;
     }

web-src/src/pages/PageAlbum.vue

@@ -27,7 +27,7 @@
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>

web-src/src/pages/PageAlbumSpotify.vue

@@ -24,7 +24,7 @@
           :url="artwork_url(album)"
           :artist="album.artists[0].name"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -24,7 +24,7 @@
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>

web-src/src/pages/PageNowPlaying.vue

@@ -7,7 +7,7 @@
             :url="track.artwork_url"
             :artist="track.artist"
             :album="track.album"
-            class="is-clickable fd-has-shadow fd-cover-big-image"
+            class="is-clickable is-big"
             :class="{ 'is-masked': lyricsStore.pane }"
             @click="open_dialog(track)"
           />

web-src/src/pages/PagePodcast.vue

@@ -24,7 +24,7 @@
           :url="album.artwork_url"
           :artist="album.artist"
           :album="album.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
+          class="is-clickable is-medium"
           @click="show_details_modal = true"
         />
       </template>

web-src/src/templates/ContentWithHero.vue

@@ -5,7 +5,7 @@
         <div class="columns is-centered">
           <div class="column is-four-fifths">
             <div class="columns is-flex-direction-row-reverse">
-              <div class="column fd-has-cover">
+              <div class="column has-cover">
                 <slot name="heading-right" />
               </div>
               <div
@@ -23,14 +23,10 @@
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
-          <!-- Slot content -->
           <slot name="content" />
-          <!-- Slot footer -->
           <slot name="footer" />
         </div>
       </div>
     </div>
   </section>
 </template>
-
-<script></script>