nice control center

resources/bar.css

@@ -26,6 +26,35 @@ window {
 	font-size: 18px;
 }
 
+.tab-icon {
+	font-family: var(--icon-font-material);
+	font-size: 20px;
+	margin-right: 6px;
+	border-radius: 4px;
+	border: 1px solid transparent;
+	padding: 2px 4px;
+}
+
+.tab-icon:hover {
+	background-color: rgba(255, 255, 255, 0.1);
+	border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.control-center-tab-row {
+	/* mordern and sleek */
+	background-color: rgba(50, 50, 50, 0.8);
+	border-radius: 8px;
+	padding: 2px 4px;
+	margin-bottom: 4px;
+}
+
+.active-button {
+	background-color: #ffffff;
+	color: #1e1e1e;
+	border-radius: 4px;
+	box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
+}
+
 popover {
 	margin-top: 4px;
 	font-family: var(--text-font);
@@ -39,17 +68,22 @@ popover {
 }
 
 .control-center-popover {
-	margin: 0;
-	background-color: rgba(25, 25, 25, 0.95);
-}
-
-.control-center-spotify-container {
-	border: 1px solid rgba(80, 80, 80, 0.8);
+	background-color: rgba(35, 35, 35, 0.95);
+	padding: 12px;
+	padding-top : 6px;
 	border-radius: 8px;
-	background: rgba(30, 30, 30, 0.95);
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+	border: 1px solid rgba(57, 57, 57, 0.8);
 }
 
-.control-center-spotify-artist-label {
+.control-center-player-container {
+	border-radius: 8px;
+	background: rgba(35, 35, 35, 0.95);
+	margin-bottom: 6px;
+}
+
+
+.control-center-player-artist-label {
 	font-size: 14px;
 	font-weight: 600;
 	color: #ffffff;
@@ -60,7 +94,7 @@ popover {
 	text-shadow: 0 0 5px #000000aa;
 }
 
-.control-center-spotify-title-label {
+.control-center-player-title-label {
 	font-size: 12px;
 	color: #cccccc;
 	padding: 2px 6px;
@@ -74,6 +108,7 @@ popover {
 	min-height: 6px;
 	min-width: 120px;
 	margin: 0 6px;
+	border-bottom: 1px solid var(--color-border);
 }
 
 .control-center-seek-bar trough {