• Styling updates

• Added entries for future themes

now-playing/themes/standard/style.css

@@ -1,3 +1,8 @@
+:root {
+    --border-radius: 20px;
+    --component-radius: calc(var(--border-radius) * 0.75);
+}
+
 #main-wrapper {
     width: 500px;
     display: flex;
@@ -10,13 +15,15 @@
 
 #album-art-container {
     /* 1. Tell it to maintain a 1:1 square ratio */
+    height: 100%;
     aspect-ratio: 1 / 1;
     overflow: hidden;
-    border-radius: 1em;
+    border-radius: var(--component-radius);
     position: relative;
     background-size: cover;
     background-position: center;
     display: var(--show-album-art);
+    flex-shrink: 0;
 }
 
 #album-art-layer,
@@ -44,11 +51,13 @@
     position: relative;
     flex: 1;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    border-radius: 1em;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    gap: 1.5em;
+    padding: 0.75em 1em;
 }
 
 /* The background now fills the frame */
@@ -82,10 +91,15 @@
     position: relative; /* Keeps it in the document flow */
     z-index: 2;         /* Sits above the background-layer */
     
-    padding: 1em 1.75em;
+    /* padding: 1em 1.75em; */
     display: flex;
     flex-direction: column;
     gap: 0.3em;
+    
+    margin: 0.5em 0em;
+
+    flex-grow: 1;
+    min-width: 0;
 }
 
 #track-label {
@@ -111,9 +125,11 @@
 
 #progress-container {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+    align-items: center;
 	gap: 0.2em;
 	margin-top: 0.2em;
+    gap: 0.5em;
 }
 
 #progress-bar-track {
@@ -135,34 +151,15 @@
     position: relative; 
 }
 
-#progress-bar-fill::after {
-    content: '';
-    position: absolute;
-    right: -6px; /* Adjust to center the circle on the end of the bar */
-    top: 50%;
-    transform: translateY(-50%);
-    
-    width: 0.8em;  /* Diameter of your circle */
-    height: 0.8em;
-    background-color: var(--accent-color, #ffffff);
-    border-radius: 50%;
-    filter: brightness(1.4); 
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
-    
-    /* Optional: Hide it if the width is too small */
-    opacity: 0; 
-    transition: all 1s ease-in-out;
-}
-
-/* Show the handle when the progress bar is active */
-#progress-bar-track:hover #progress-bar-fill::after,
-#progress-bar-fill:not([style*="width: 0%"])::after {
-    opacity: 1;
-}
-
-#time-container {
+/* #time-container {
 	display: flex;
 	justify-content: space-between;
 	font-size: 0.7em;
 	opacity: 0.5;
+    display: none;
+} */
+
+.progress-text {
+	font-size: 0.7em;
+	opacity: 0.5;
 }