refactor(Ui): Move style into component

front/src/components/artist/Card.vue

@@ -42,3 +42,34 @@ const image = artist.cover
     </template>
   </fw-card>
 </template>
+
+<style scoped>
+.funkwhale {
+  &.card.artist-card {
+    --fw-border-radius: 12px;
+    --fw-card-width: 208px;
+    --fw-card-image-width: calc(var(--fw-card-width) - 16px);
+    --fw-card-padding: 16px;
+
+    > .card-image {
+      border-radius: 50% !important;
+      width: var(--fw-card-image-width);
+      margin: calc(-1 * var(--fw-card-padding) + 8px) calc(-1 * var(--fw-card-padding) + 8px) 0;
+    }
+
+    .play-button {
+      top: calc(var(--fw-card-width) - 44px - 8px) !important;
+    }
+
+    > .card-title {
+      font-size: 1rem;
+      text-align: left !important;
+    }
+
+    > .card-content {
+      padding-top: 6px !important;
+      text-align: left !important;
+    }
+  }
+}
+</style>

front/src/components/artist/style.scss

@@ -1,28 +0,0 @@
-.funkwhale {
-  &.card.artist-card {
-    --fw-border-radius: 12px;
-    --fw-card-width: 208px;
-    --fw-card-image-width: calc(var(--fw-card-width) - 16px);
-    --fw-card-padding: 16px;
-
-    > .card-image {
-      border-radius: 50% !important;
-      width: var(--fw-card-image-width);
-      margin: calc(-1 * var(--fw-card-padding) + 8px) calc(-1 * var(--fw-card-padding) + 8px) 0;
-    }
-
-    .play-button {
-      top: calc(var(--fw-card-width) - 44px - 8px) !important;
-    }
-
-    > .card-title {
-      font-size: 1rem;
-      text-align: left !important;
-    }
-
-    > .card-content {
-      padding-top: 6px !important;
-      text-align: left !important;
-    }
-  }
-}