Initial commit

src/styles/musicplayer.css

@@ -0,0 +1,173 @@
+@reference "tailwindcss";
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes slide-up {
+    from {
+        translate: 0 100%;
+        opacity: 0;
+    }
+    to {
+        translate: 0 0;
+        opacity: 1;
+    }
+}
+.animate-slide-up {
+    animation: slide-up 0.3s ease-out;
+}
+
+@keyframes rotate {
+    from { rotate: 0deg; }
+    to { rotate: 360deg; }
+}
+
+@keyframes musicWave {
+    0%, 100% { scale: 1 0.5; }
+    50% { scale: 1 1; }
+}
+
+@keyframes spin-continuous {
+    from {
+        rotate: 0deg;
+    }
+    to {
+        rotate: 360deg;
+    }
+}
+.cover-container img {
+    animation: spin-continuous 3s linear infinite;
+    animation-play-state: paused;
+}
+.cover-container img.spinning {
+    animation-play-state: running;
+}
+
+button.bg-\(--primary\) {
+    box-shadow: 0 0 0 2px var(--primary);
+    border: none;
+}
+
+.orb-player {
+    position: relative;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+.orb-player::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    background: linear-gradient(45deg, var(--primary), transparent, var(--primary));
+    border-radius: 50%;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.orb-player:hover::before {
+    opacity: 0.3;
+    animation: rotate 2s linear infinite;
+}
+.orb-player .animate-pulse {
+    animation: musicWave 1.5s ease-in-out infinite;
+}
+
+.music-player {
+    max-width: 320px;
+    user-select: none;
+}
+.expanded-player {
+    width: 320px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+.music-player.expanded .expanded-player {
+    position: relative;
+}
+.music-player.expanded .orb-player {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+.progress-section div:hover,
+.bottom-controls > div:hover {
+    scale: 1 1.2;
+    transition: transform 0.2s ease;
+}
+/* Playlist Scrollbar Styles */
+.playlist-content {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.3s ease;
+}
+.playlist-content:hover {
+    scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+}
+.playlist-content::-webkit-scrollbar {
+    width: 4px;
+}
+.playlist-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+.playlist-content::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+}
+.playlist-content:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(155, 155, 155, 0.5);
+}
+
+@media (hover: none) and (pointer: coarse) {
+    .music-player button,
+    .playlist-item {
+        min-height: 44px;
+    }
+    .progress-section > div,
+    .bottom-controls > div:nth-child(2) {
+        height: 12px;
+    }
+}
+
+@media (max-width: 768px) {
+    .music-player {
+        max-width: 280px;
+        /*left: 8px !important;*/
+        bottom: 8px !important;
+        right: 8px !important;
+    }
+    .music-player.expanded {
+        width: calc(100vw - 16px);
+        max-width: 320px;
+        /*left: 8px !important;*/
+        right: 8px !important;
+    }
+    .expanded-player {
+        width: min(calc(100vw - 16px), 320px) !important;
+    }
+    .playlist-panel {
+        width: min(calc(100vw - 16px), 320px) !important;
+        /*left: 8px !important;*/
+        /*right: 8px !important;*/
+        max-width: none;
+    }
+    .controls {
+        gap: 8px;
+    }
+    .controls button {
+        width: 36px;
+        height: 36px;
+    }
+    .controls button:nth-child(3) {
+        width: 44px;
+        height: 44px;
+    }
+}