feat: add songs via Apple Music

2026-09-10 14:25:24 +02:00 · 2026-09-01 12:51:39 +02:00
parent a2b93e9624
commit 3a0f8210dd
33 changed files with 513 additions and 98 deletions
@@ -0,0 +1,92 @@
+.song-list-element {
+  display: flex;
+  width: 100%;
+
+  >.song-cover-wrapper {
+    height: 10rem;
+    width: 10rem;
+    position: relative;
+
+    .song-cover,
+    .fa-solid {
+      height: 10rem;
+      width: 10rem;
+      font-size: 7rem;
+      line-height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    >.play-overlay {
+      background-color: var(--overlay-color);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      &.hover {
+        display: none;
+      }
+    }
+
+    &:hover {
+      >.play-overlay.hover {
+        display: block;
+      }
+    }
+  }
+}
+
+.playing-symbols {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  margin: 0;
+  padding-left: 20%;
+  padding-right: 20%;
+  width: 60%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+
+  .playing-bar {
+    height: 40%;
+    background-color: white;
+    width: 12%;
+    border-radius: 50px;
+    margin: auto;
+  }
+
+  #bar-1 {
+    animation: music-playing 0.9s infinite ease-in-out;
+  }
+
+  #bar-2 {
+    animation: music-playing 0.9s infinite ease-in-out;
+    animation-delay: 0.3s;
+  }
+
+  #bar-3 {
+    animation: music-playing 0.9s infinite ease-in-out;
+    animation-delay: 0.6s;
+  }
+
+  @keyframes music-playing {
+    0% {
+      transform: scaleY(1);
+    }
+
+    50% {
+      transform: scaleY(0.5);
+    }
+
+    100% {
+      transform: scaleY(1);
+    }
+  }
+}