Added more settings

now-playing/themes/card/script.js

@@ -30,24 +30,16 @@ const durationLabel = document.getElementById('duration');
 // PAGE SETUP //
 ////////////////
 
+// Set property visibility
+trackLabel.style.display = showPrimary ? '' : 'none';
+artistLabel.style.display = showSecondary ? '' : 'none';
+
+// Set container width
 if (maxWidth > 0)
     mainWrapper.style.width = `${maxWidth}px`;
 else
     mainWrapper.style.width = `100%`;
 
-// Set album art style
-switch (albumArt)
-{
-    case 'none':
-        albumArtContainer.style.display = 'none';
-        break;
-    case 'show':
-        albumArtContainer.style.display = '';
-        break;
-    case 'spinny':
-        break;
-}
-
 // Set progress bar visibility
 if (!showProgressBar)
     progressContainer.style.display = 'none';
@@ -169,8 +161,8 @@ async function ChangeTrack(mediaProps) {
     
     // Wait for fade (0.5s), then swap the real text and hide overlay
     setTimeout(() => {
-        trackLabel.innerText = mediaProps.Title;
-        artistLabel.innerText = mediaProps.Artist;        
+        trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
+        artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;     
 
         // Extract the image source string (use fallback if Windows has no art)
         const newArtUrl = mediaProps.Base64Image;

now-playing/themes/card/style.css

@@ -17,6 +17,7 @@
     background-size: cover;
     background-position: center;
 	margin: 0em 0em 1em 0em;
+    display: var(--show-album-art);
 }
 
 #album-art-layer,
@@ -90,19 +91,21 @@
 #track-label {
 	font-size: 1em;
 	font-weight: 600;
+    text-align: var(--text-alignment);
 }
 
 #artist-label {
 	font-size: 0.8em;
 	font-weight: 300;
 	opacity: 0.6;
+    text-align: var(--text-alignment);
 }
 
 .text-label {
 	white-space: nowrap;
     /* overflow: hidden; */
-    mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
-    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    mask-image: var(--trailing-fade);
+    -webkit-mask-image: var(--trailing-fade);
     transition: opacity 0.25s ease-in-out;
 }
 
@@ -110,7 +113,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 0.2em;
-	margin-top: 0.2em;
+	margin-top: 1em;
 }
 
 #progress-bar-track {