Added 'Show While Paused' option to all themes

now-playing/themes/simple/index.html

@@ -2,6 +2,11 @@
     <div id="album-art-container">
         <div id="album-art-layer"></div>
         <div id="album-art-transition-layer"></div>
+        <div id="pause-overlay">
+            <svg viewBox="0 0 24 24" style="fill: var(--accent-color, #ffffff);">
+                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+            </svg>
+        </div>
     </div>
 
     <div id="song-info-container">

now-playing/themes/simple/script.js

@@ -78,13 +78,19 @@ async function ChangeTrack(mediaProps) {
     }, 250);
 }
 
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
     // Update the label using your naming convention
     currentTimeLabel.innerText =
         ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
 
     durationLabel.innerText =
         ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
+        
+    // Set the pause overlay visibility based on playback status
+    if (playbackStatus === PlaybackStatus.PAUSED)
+        albumArtContainer.classList.add('is-paused');
+    else
+        albumArtContainer.classList.remove('is-paused');
 
     // Set progressbar
     // Ensure we don't divide by zero or exceed 100%
@@ -95,12 +101,12 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
     
     if (!useCustomColors)
     {
-        progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+        document.body.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
         document.body.style.color = accentColorPalette.LightVibrant;
     }
     else
     {
-        progressBarFill.style.setProperty('--accent-color', color1);
+        document.body.style.setProperty('--accent-color', color1);
         document.body.style.color = color1;
     }
 }

now-playing/themes/simple/style.css

@@ -23,6 +23,37 @@
     flex-shrink: 0;
 }
 
+#album-art-container.is-paused #album-art-layer,
+#album-art-container.is-paused #album-art-transition-layer {
+    opacity: 0.7;
+    filter: grayscale(50%);
+}
+
+#pause-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    z-index: 10; 
+    border-radius: inherit;
+}
+
+#pause-overlay svg {
+    height: 40%; 
+    width: auto;
+}
+
+#album-art-container.is-paused #pause-overlay {
+    opacity: 1;
+}
+
 #album-art-layer,
 #album-art-transition-layer {
     position: absolute;