Update .config/waybar/config.jsonc

Update .config/waybar/modules.jsonc
Update .config/waybar/style.css

private_dot_config/waybar/config.jsonc

@@ -15,7 +15,8 @@
         ],
 
         "modules-center": [
-            "mpris"
+            "mpris",
+            "cava"
         ],
 
         "modules-left": [
@@ -30,41 +31,15 @@
         "include": [
             "~/.config/waybar/modules.jsonc"
         ]
-    },
-    {
-    "name":"overlay",
-    "layer":"bottom",
-    "position":"top",
-    "passtrough":true,
-    "margin-top":-30,
-    "width":300,
-    "exclusive":false,
-    "modules-center":["cava"],
-    "cava": {
-        "framerate": 144,
-        "autosens": 1,
-        "sensitivity": 2,
-        "bars": 24,
-        "lower_cutoff_freq": 50,
-        "higher_cutoff_freq": 10000,
-        "hide_on_silence": false,
-        "format_silent": "quiet",
-        "method": "pulse",
-        "source": "auto",
-        "stereo": true,
-        "reverse": false,
-        "bar_delimiter": 0,
-        "monstercat": false,
-        "waves": false,
-        "noise_reduction": 0.77,
-        "input_delay": 2,
-        "bar_width": 2,
-        "bar_spacing": 10,
-        "format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█" ],
-        "actions": {
-                   "on-click-right": "mode"
-                   },
-        "cava_config": "/home/yarne/.config/cava/config"
-        }
     }
+    // {
+    // "name":"overlay",
+    // "layer":"bottom",
+    // "position":"top",
+    // "passtrough":true,
+    // "margin-top":-30,
+    // "width":300,
+    // "exclusive":false,
+    // "modules-center":["cava"]
+    // }
 ]

private_dot_config/waybar/modules.jsonc

@@ -225,5 +225,31 @@
         "tooltip-format": "{title}",
         "on-click": "activate",
         "on-click-middle": "close"
+    },
+    "cava": {
+        "framerate": 144,
+        "autosens": 1,
+        "sensitivity": 2,
+        "bars": 24,
+        "lower_cutoff_freq": 50,
+        "higher_cutoff_freq": 10000,
+        "hide_on_silence": false,
+        "format_silent": "quiet",
+        "method": "pulse",
+        "source": "auto",
+        "stereo": true,
+        "reverse": false,
+        "bar_delimiter": 0,
+        "monstercat": false,
+        "waves": false,
+        "noise_reduction": 0.77,
+        "input_delay": 2,
+        "bar_width": 2,
+        "bar_spacing": 10,
+        "format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█" ],
+        "actions": {
+                   "on-click-right": "mode"
+                   },
+        "cava_config": "/home/yarne/.config/cava/config"
     }
 }

private_dot_config/waybar/style.css

@@ -83,6 +83,22 @@ button:hover {
     box-shadow: inset 0 -3px #ffffff;
 }
 
+.modules-left,
+.modules-center,
+.modules-right
+{
+    background: rgba(0, 0, 8, .7);
+    margin: 5px 10px;
+    padding: 0 5px;
+    border-radius: 15px;
+}
+.modules-left {
+    padding: 0;
+}
+.modules-center {
+    padding: 0 10px;
+}
+
 #clock,
 #battery,
 #cpu,
@@ -265,6 +281,7 @@ label:focus {
 #cava {
     font-size: 24px;
     color: rgba(255, 255, 255, 0.15);
+    z-index: -1;
 }
 
 #mpd {