Final ExpandedPlayer Layout

styles/controlcenter.css

@@ -556,7 +556,7 @@
 /* macOS-style expanded player - more compact */
 #macos-outer-player-box {
   min-height: 110px; /* Reduced height */
-  min-width: 420px;  /* Slightly wider to accommodate expanded track info */
+  min-width: 420px; /* Slightly wider to accommodate expanded track info */
   border-radius: 12px;
   margin: 10px;
   padding: 15px; /* Reduced padding */
@@ -571,20 +571,21 @@
 }
 
 #macos-album-image {
-  min-width: 80px;
-  min-height: 80px;
-  border-radius: 8px;
+  min-width: 70px;
+  min-height: 70px;
+  border-radius: 9px;
   box-shadow: 0 2px 8px alpha(#000, 0.3);
 }
 
 #macos-album-cover-image {
-  min-width: 80px;
-  min-height: 80px;
-  border-radius: 8px;
+  min-width: 70px;
+  min-height: 70px;
+  border-radius: 9px;
 }
 
 /* Track info container that expands to fill available space */
 #macos-track-info {
+  margin-top: 5px;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -598,11 +599,18 @@
 
 #macos-player-artist {
   font-weight: 400;
+  margin-top: -2px;
   font-size: 13px;
-  color: alpha(#fff, 0.8);
-  margin-bottom: 8px;
+  color: alpha(#999, 0.8);
 }
 
+#macos-player-album {
+  font-weight: 400;
+  margin-top: -4px;
+  font-size: 13px;
+  color: alpha(#999, 0.8);
+  margin-bottom: 8px;
+}
 /* macOS seek bar styling */
 #macos-seek-bar {
   background-color: transparent;
@@ -612,6 +620,7 @@
 
 #macos-seek-bar trough {
   min-width: 200px;
+
   min-height: 2px;
   border-radius: 2px;
   background-color: alpha(#fff, 0.25);
@@ -627,16 +636,16 @@
 #macos-seek-bar slider {
   background: #ffffff;
   border: none;
-  border-radius: 50%;
-  min-width: 12px;
-  min-height: 12px;
-  margin: -4px;
+  border-radius: 20%;
+  min-width: 1px;
+  min-height: 8px;
+  margin: -3px;
   box-shadow: 0 1px 3px alpha(#000, 0.3);
   transition: all 0.1s ease;
 }
 
 #macos-seek-bar slider:hover {
-  min-width: 14px;
+  min-width: 4px;
   min-height: 14px;
   margin: -5px;
   box-shadow: 0 2px 6px alpha(#000, 0.4);
@@ -645,13 +654,13 @@
 #macos-position-label,
 #macos-length-label {
   font-size: 11px;
-  color: alpha(#fff, 0.7);
+  color: alpha(#999, 0.9);
   font-weight: 400;
 }
 
 /* macOS control buttons - more compact */
 #macos-button-box {
-  margin-top: 6px; /* Reduced top margin */
+  margin-top: -1px; /* Reduced top margin */
 }
 
 #macos-control-button {
@@ -693,12 +702,12 @@
 
 .macos-switcher-dot {
   background: alpha(#fff, 0.3);
-  border: none;
+  /* border: none; */
   border-radius: 50%;
-  min-width: 6px; /* Smaller dots */
-  min-height: 6px;
+  min-width: 12px; /* Smaller dots */
+  min-height: 12px;
   margin: 2px; /* Reduced margins */
-  transition: all 0.2s ease;
+  /* transition: all 0.2s ease; */
 }
 
 .macos-switcher-dot:hover {

styles/player.css

@@ -1,8 +1,8 @@
 #player-stack-button {
-  /* border-radius: 5px; */
-  /* min-width: 7px; */
-  /* min-height: 7px; */
-  /* margin: 10px 3px; */
+  border-radius: 5px;
+  min-width: 7px;
+  min-height: 7px;
+  margin: 10px 3px;
 }
 
 #button-box-c {
@@ -22,8 +22,8 @@
 }
 
 #outer-player-box {
-  min-height: 100px;
-  min-width: 300px;
+  min-height: 110px;
+  min-width: 320px;
   border-radius: 10px;
   margin: 0 6px;
   background-color: alpha(#000, 0.3);
@@ -32,7 +32,7 @@
 
 #outer-player-box-c {
   min-height: 55px;
-  min-width: 220px;
+  min-width: 260px;
   border-radius: 8px;
   /* margin: 0 6px; */
   /* background-color: alpha(#000, 0.3); */
@@ -126,12 +126,12 @@
   border-radius: 5px;
 }
 .album-image {
-  min-width: 75px;
+  min-width: 70px;
   min-height: 70px;
   background-position: center;
   background-size: cover;
   margin-left: 12px;
-  border-radius: 5px;
+  border-radius: 9px;
 }
 
 #seek-bar slider {