diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css index c442b09..68733c1 100644 --- a/media_server/static/css/styles.css +++ b/media_server/static/css/styles.css @@ -492,6 +492,7 @@ h1 { .player-layout { display: flex; flex-direction: column; + perspective: 800px; } .player-details { @@ -504,6 +505,13 @@ h1 { justify-content: center; margin-bottom: 2rem; position: relative; + transform-style: preserve-3d; + animation: albumArt3D 8s ease-in-out infinite; +} + +@keyframes albumArt3D { + 0%, 100% { transform: rotateY(-8deg) rotateX(2deg); } + 50% { transform: rotateY(8deg) rotateX(-2deg); } } .album-art-glow { @@ -546,7 +554,7 @@ h1 { width: 210px; height: 210px; margin: 45px; - filter: saturate(0.8) brightness(0.92) contrast(1.05); + filter: saturate(0.55) sepia(0.12) brightness(0.92) contrast(1.08); box-shadow: 0 0 0 3px var(--vinyl-groove), 0 0 0 5px var(--vinyl-ring),