Complete Overhaul of per app volume per app, Desgined new sliders

styles/controlcenter.css

@@ -284,14 +284,31 @@
 }
 
 #control-center-menu slider {
-  background-image: none;
-  background-color: transparent;
-  padding: 2px;
-  min-width: 4px;
-  min-height: 20px;
-  border-radius: 20px;
+  background: linear-gradient(135deg, #ffffff 0%, #f0f1f2 100%);
+  border-color: #000;
+  min-width: 28px;
+  min-height: 28px;
+  margin: -2px;
+  border-radius: 50%;
+  /* background-image: none; */
+  /* background-color: transparent; */
+  /* min-width: 4px; */
+  /* min-height: 40px; */
+  /* margin: -9px; */
 }
 
+#control-center-menu slider:hover {
+  border-color: #999;
+  min-width: 30px;
+  min-height: 30px;
+  margin: -3px;
+  border-radius: 50%;
+  /* background-image: none; */
+  /* background-color: transparent; */
+  /* min-width: 4px; */
+  /* min-height: 40px; */
+  /* margin: -9px; */
+}
 #control-center-menu scale {
   background-color: transparent;
   margin-top: 10px;
@@ -324,17 +341,14 @@
 
 /* Per-app volume control styles */
 #per-app-volume-control {
-  margin: 0px;
-
-  background-color: alpha(#999, 0.1);
-
   min-height: 140px;
-
-  min-width: 140px;
-
+  min-width: 350px;
+  /* background-color: alpha(#000, 0.3); */
+  background-color: alpha(#999, 0.1);
+  /* box-shadow: inset 0 0 200px 0 alpha(#111, 0.3); */
   border: 0.5px solid alpha(#000, 0.4);
-
   border-radius: 8px;
+  padding: 1rem;
 
   /* padding: 1rem; */
 }
@@ -353,7 +367,6 @@
   font-weight: 500;
   transition: background-color 0.2s ease;
 }
-
 #back-button:hover {
   background-color: alpha(#fff, 0.18);
 }
@@ -750,3 +763,24 @@
   background: #ffffff;
   box-shadow: 0 0 0 1px alpha(#fff, 0.3); /* Smaller glow */
 }
+
+/* Per app-volume-item */
+
+.compact-app-volume-item {
+  padding-bottom: 5px;
+  padding-right: 14px;
+  border-bottom: 1px solid alpha(#fff, 0.1);
+}
+#app-icon {
+  margin-top: 8px;
+}
+.app-name-compact {
+  font-size: 14px;
+  font-weight: bold;
+  margin-top: 8px;
+}
+
+#compact-app-volume-slider scale {
+  margin-right: 8px;
+  padding-right: 8px;
+}