waybar for mee<3

modules/user/waybar.nix

@@ -11,30 +11,51 @@
     systemd.enable = true;
 
     settings.mainBar = {
-      modules-left = [
+      modules-center = [
+         "group/left"
+         "group/center"
+         "group/right"
+      ];
+
+
+
+      "group/left" = {
+        orientation = "inherit";
+        modules = [
         "hyprland/workspaces"
+        "custom/sep-left"
         "hyprland/language"
         "keyboard-state"
-        "cava"
         ];
+      };
 
-      modules-center = [
+      "group/center" = {
+        orientation = "inherit";
+        modules = [
+        "cava"
         "mpris"
         ];
+      };
 
-      modules-right = [
+      
+      "group/right" = {
+        orientation = "inherit";
+        modules = [
         "tray"
+        "custom/sep-left"
         "group/system"
+        "custom/sep-left"
         "pulseaudio"
+        "custom/sep-left"
         "battery"
         "clock"
         ];
+      };
 
       cava = {
-        bars = 14;
-        sleep_timer = 5;
-        hide_on_silence = true;
+        bars = 9;
         bar_delimiter = 0;
+        stereo = false;
         input_delay = 0;
         format-icons = [" " "▁" "▂" "▃" "▄" "▅" "▆" "▇" "█"];
       };
@@ -62,7 +83,7 @@
 
       mpris = {
         format = "{dynamic}";
-        dynamic-len = if osConfig.host.laptop then 32 else 64;
+        dynamic-len = if osConfig.host.laptop then 16 else 32;
         dynamic-order = [ "title" "artist" "album" ];
       };
 
@@ -72,13 +93,18 @@
           warning = 30;
           critical = 15;
         };
-        format = "{icon} {capacity}%";
+        format = "{icon} {capacity}% | ";
         format-icons = {
           default = ["󰂎" "󰁺" "󰁻" "󰁼" "󰁽" "󰁾" "󰁿" "󰂀" "󰂁" "󰂂" "󰁹"];
           charging = ["󰢟" "󰢜" "󰂆" "󰂇" "󰂈" "󰢝" "󰂉" "󰢞" "󰂊" "󰂋" "󰂅"];
         };
       };
 
+      "custom/sep-left" = {
+      format = " | ";
+      tooltip = false;
+      };
+      
       "keyboard-state" = {
         capslock = true;
         format = "{icon}";

user/chest/modules/waybar.nix

@@ -5,30 +5,45 @@
     accent = colors.base0E;
     scssFile = pkgs.writeText "waybar.scss" /*scss*/ ''
       window#waybar {
-        background: ${colors.base00}80;
+        background: transparent;
         color: ${colors.base05};
         font-weight: bold;
         font-size: .85em;
+        & > * {padding: 0 0 6px 0;}
+      }
+      .modules-center{
+        background: ${colors.base01}CC;
+        border-radius: 12px;
+        padding: 10px;
+        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
       }
 
-      #mpris,
-      #pulseaudio,
-      #network,
-      #battery,
-      #cpu,
-      #temperature,
-      #custom-mem,
-      #clock {
-        background: ${colors.base01};
-        padding: 8px;
+      #left,
+      #right,
+      #center       {
+        background: ${colors.base02};
+        padding: 0 2px;
+        margin: 0 8px;
+        border-radius: 8px;
       }
+      #left{
+        margin-left: 0;}
+
+      #right{
+        margin-right: 0;}
+
+      #clock{
+        padding-right: 10px;}
+
+      #cava {
+        padding: 0 10px;}
 
       #language { padding: 8px; }
 
-      #workspaces,
+      /*#workspaces,
       #tray {
         background: ${colors.base01};
-      }
+      }*/
 
       #workspaces button {
         color: ${colors.base05};
@@ -37,52 +52,51 @@
         border: 1pt solid transparent;
         min-width: 20px;
 
-        &:hover { background: ${colors.base02}; }
+        &:hover { background: ${colors.base03}; }
 
         &.active {
           background: ${accent};
           color: ${colors.base00};
-          min-width: 30px;
+          min-width: 25px;
 
           &:hover {
             border-color: ${accent};
-            background: ${colors.base02};
+            background: ${colors.base03};
             color: ${accent};
           }
         }
       }
 
       #mpris {
-        border-radius: 0 0 20px 20px;
-        padding: 10px;
-        &:hover { background: ${colors.base02}; }
+        border-radius: 8px;
+        padding: 4px;
+        &:hover { background: ${colors.base03}; }
         &.playing {
-          border: 3px solid ${accent};
-          border-top-color: transparent;
-          padding: calc(10px - 3px);
+          border: 2px solid ${accent};
+          padding: 2px;
         }
       }
 
       #tray {
         widget {
           border: 1pt solid transparent;
-          &:hover { background: ${colors.base02}; }
+          &:hover { background: ${colors.base03}; }
           & > image { padding: 8px; }
         }
 
-        & > .passive { border-color: ${colors.base02}; }
+        & > .passive { border-color: ${colors.base03}; }
         & > .needs-attention { border-color: ${colors.base09}; }
       }
 
       #pulseaudio {
-        &:hover { background: ${colors.base02}; }
+        &:hover { background: ${colors.base03}; }
         &.muted {
           background: ${colors.base08};
-          color: ${colors.base00};
+          color: ${colors.base01};
 
           &:hover {
             color: ${colors.base08};
-            background: ${colors.base02};
+            background: ${colors.base03};
           }
         }
       }