fix cover rotation and remove inner gap

Author: Enkianssus

assets/overlay-preview.png

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "id": "us.enkianss.awoo.retro-cmd",
   "name": "复古 CMD 点歌组件",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "entry": "index.html",
   "author": "Enkianssus",
   "description": "为 OBS、直播姬浏览器捕捉设计的复古 Windows 命令行风格点歌组件，封面会像唱片一样缓慢旋转。",

overlay.json

@@ -186,18 +186,12 @@ body {
   display: grid;
   width: 118px;
   height: 118px;
-  padding: 9px;
   place-items: center;
   overflow: hidden;
   border: 2px solid #e9e9e9;
   border-radius: 50%;
-  background:
-    repeating-radial-gradient(circle at center, #242424 0 2px, #0a0a0a 3px 5px),
-    #080808;
+  background: #080808;
   box-shadow: 0 0 0 2px #4f4f4f, 6px 6px 0 rgba(0, 0, 0, 0.75);
-  animation: cover-spin 24s linear infinite;
-  transform: translateZ(0);
-  will-change: transform;
 }
 
 .cover-frame img,
@@ -211,6 +205,10 @@ body {
 .cover-frame img {
   display: block;
   object-fit: cover;
+  animation: cover-spin 24s linear infinite;
+  transform: scale(1.035) translateZ(0);
+  transform-origin: center;
+  will-change: transform;
 }
 
 .cover-fallback {
@@ -236,8 +234,11 @@ body {
   transform: translate(-50%, -50%);
 }
 
-.now-playing[data-paused="true"] .cover-frame {
+.now-playing[data-paused="true"] .cover-frame img {
   animation-play-state: paused;
+}
+
+.now-playing[data-paused="true"] .cover-frame {
   filter: grayscale(0.75) contrast(1.1);
 }
 
@@ -545,8 +546,12 @@ body {
 }
 
 @keyframes cover-spin {
+  from {
+    transform: scale(1.035) rotate(0deg) translateZ(0);
+  }
+
   to {
-    transform: rotate(360deg) translateZ(0);
+    transform: scale(1.035) rotate(360deg) translateZ(0);
   }
 }
 
@@ -577,7 +582,6 @@ body {
   .cover-frame {
     width: 90px;
     height: 90px;
-    padding: 7px;
   }
 
   .disc-caption {
@@ -624,7 +628,6 @@ body {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .cover-frame,
   .cursor {
     animation: none;
   }