1: Attempting more Waybar config

home/modules/hyprland/waybar.nix

@@ -23,6 +23,44 @@
           separate-outputs = true;
         };
 
+	# ----------------------------------------------
+
+	"tray" = {
+	  icon-size = 21;
+	  spacing = 10;
+	};
+
+	# ----------------------------------------------
+
+	"pulseaudio" = {
+	  format = "{icon} {volume}%";
+	  format-muted = " {volume}%";
+	  format-icons = {
+	    default = [ "" "" "" ];
+	  };
+	};
+
+	"backlight" = {
+	  format = "󰃠 {percent}%";
+	};
+
+	"battery" = {
+	  states = {
+	    warning = 30;
+	    critical = 15;
+	  };
+	  
+	  format = " {capacity}%";
+	  format-charging = " {capacity}%";
+	};
+
+	"clock" = {
+	  timezone = "America/Los_Angeles";
+	  tooltip-format = "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>";
+	  format-alt = "󰃭 {:%d/%m/%Y}";
+	  format = " {:%H:%M}";
+	};
+
         "custom/power" = {
           tooltip = false;
           on-click = "wlogout &";
@@ -89,6 +127,83 @@
                background-color: @red;
       	 color: @base;
             }
+
+      #waybar {
+        background: transparent;
+        color: @text;
+        margin: 5px 5px;
+      }
+
+      #workspaces {
+        border-radius: 1rem;
+        margin: 5px;
+        background-color: @surface0;
+        margin-left: 1rem;
+      }
+
+      #workspaces button {
+        color: @lavender;
+        border-radius: 1rem;
+        padding: 0.4rem;
+      }
+
+      #workspaces button.active {
+        color: @sky;
+        border-radius: 1rem;
+      }
+
+      #workspaces button:hover {
+        color: @sapphire;
+        border-radius: 1rem;
+      }
+
+      #custom-music,
+      #tray,
+      #backlight,
+      #clock,
+      #battery,
+      #pulseaudio,
+      #custom-lock,
+      #clock {
+        color: @blue;
+        border-radius: 0px 1rem 1rem 0px;
+        margin-right: 1rem;
+      }
+
+      #backlight {
+        color: @yellow;
+      }
+
+      #backlight, #battery {
+          border-radius: 0;
+      }
+
+      #pulseaudio {
+        color: @maroon;
+        border-radius: 1rem 0px 0px 1rem;
+        margin-left: 1rem;
+      }
+
+      #custom-music {
+        color: @mauve;
+        border-radius: 1rem;
+      }
+
+      #custom-lock {
+          border-radius: 1rem 0px 0px 1rem;
+          color: @lavender;
+      }
+
+      #custom-power {
+          margin-right: 1rem;
+          border-radius: 0px 1rem 1rem 0px;
+          color: @red;
+      }
+
+      #tray {
+        margin-right: 1rem;
+        border-radius: 1rem;
+      }
     '';
   };
 }