Waybar

config

{
  "layer": "top",
    "modules-left": ["custom/arch", "hyprland/workspaces"],
    "modules-center": ["clock"],
    "modules-right": ["pulseaudio", "network", "custom/poweroff"],
    "custom/arch": {
      "format": "  ",
      "tooltip": false,
      "on-click": "rofi -show drun"
    },
    "custom/poweroff": {
      "format": " ⏻",
      "tooltip": false,
      "on-click": "systemctl poweroff"
    },
    "hyprland/workspaces": {
      "format": "{name}",
      "format": "{icon}",
      "tooltip": false,
      "all-outputs": true,
      "format-icons": {
        "active": "",
        "default": ""
      }
    },
    "clock": {
      "format": "<span color='#ff757f'> </span>{:%I:%M %p}",
    },
    "pulseaudio": {
      "format": "<span color='#067f61'>{icon}</span> {volume}%",
      "format-muted": "",
      "tooltip": false,
      "format-icons": {
        "headphone": "",
        "default": ["", "", "󰕾", "󰕾", "󰕾", "", "", ""]
      },
      "scroll-step": 1,
    },
    "network": {
      "interface": "enp2s0",
      "format": "{ifname}",
      "format-ethernet": "<span color='#7aa2f7'> </span> Connected",
      "format-disconnected": "<span color='#b4befe'>󰖪 </span>No Network",
      "tooltip": false
    }
}

style.css

* {
  border: none;
  font-family: 'JetBrains Mono Nerd Font', 'Symbols Nerd Font Mono';
  font-size: 12px;
  font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
  min-height: 10px;
}

window#waybar {
  background: transparent;
}

#custom-arch, #custom-poweroff, #workspaces {
  border-radius: 10px;
  background-color: #11111b;
  color: #b4befe;
  margin-top: 15px;
  margin-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 3px;
  padding-right: 10px;
}

#custom-arch, #custom-poweroff {
  font-size: 15px;
}

#custom-arch {
  margin-left: 15px;
  color: #1793d1;
}

#custom-poweroff {
  padding-right: 15px;
  color: #c53b53;
}

#workspaces button {
  background: #11111b;
  color: #b4befe;
}

#clock, #pulseaudio, #network{
  border-radius: 10px;
  background-color: #11111b;
  color: #cdd6f4;
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 15px;
}

#pulseaudio {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 10px;
  margin-right: 0px;
}

#network {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 5px;
}

#clock {
  margin-right: 0;
}