diff --git a/index.php b/index.php index b1a7dea..88fc783 100644 --- a/index.php +++ b/index.php @@ -214,15 +214,31 @@ $twitter_link = "https://twitter.com/"; } .track-cover-container { - width: 80px; - height: 80px; - border-radius: 12px; + width: 120px; + height: 120px; + border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; - box-shadow: 0 5px 15px rgba(0,0,0,0.3); - border: 2px solid rgba(255,255,255,0.1); + box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.8); + border: 4px solid #111; transition: transform 0.3s ease, box-shadow 0.1s ease; + animation: spin-vinyl 30s linear infinite; + margin: 0 auto; + } + + .track-cover-container::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 20px; + height: 20px; + background: #111; + border-radius: 50%; + border: 2px solid rgba(255,255,255,0.2); + z-index: 10; } .track-cover-container img { @@ -230,6 +246,19 @@ $twitter_link = "https://twitter.com/"; height: 100%; object-fit: cover; transition: opacity 0.5s ease; + border-radius: 50%; + } + + @keyframes spin-vinyl { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + + @media (max-width: 768px) { + .track-cover-container { + width: 100px; + height: 100px; + } } .track-cover-container i { @@ -1494,8 +1523,8 @@ $twitter_link = "https://twitter.com/";