gistfile1.txt

{
  "layer": "top",
  "position": "top",
  "mod": "dock",
  "exclusive": true,
  "passthrough": false,
  "gtk-layer-shell": true,
  "height": 30,
  "spacing": 22,
  "modules-left": ["wlr/workspaces"],
  "modules-center": ["hyprland/window"],
  "modules-right": ["cpu", "memory", "network", "pulseaudio", "clock"],

  "wlr/workspaces": {
    "format": "{icon}",
    "all-outputs": true,
    "disable-scroll": true,
    "on-click": "activate",
    "format-icons": {
      "8": "",
      "9": "",
      "10": ""
    },
    "sort-by-number": true
  },

  "hyprland/window": {
    "max-length": 30
  },

  "cpu": {
    "interval": 10,
    "format": " {usage}%"
  },

  "memory": {
    "interval": 10,
    "format": " {percentage}%"
  },

  "network": {
    "format-ethernet": " {ifname}",
    "format-disconnected": "",
    "tooltip-format-ethernet": "{ipaddr}"
  },

  "clock": {
    "format": "{:%I:%M %p}"
  },

  "pulseaudio": {
    "format": "{icon}",
    "format-muted": "",
    "format-icons": {
      "default": ["", "", ""]
    },
    "on-click-right": "pavucontrol",
    "on-click": "~/.config/waybar/scripts/volume --toggle",
    "scroll-step": 5,
    "on-scroll-up": "~/.config/waybar/scripts/volume --inc",
    "on-scroll-down": "~/.config/waybar/scripts/volume --dec",
    "tooltip": true,
    "tooltip-format": "{icon} at {volume}%"
  }
}

gistfile2.txt

* {
    border: none;
    min-height: 0;
    font-family: "SF Pro Rounded", "Font Awesome 6 Free";
    font-size: 14px;
    font-weight: 500;
}

window#waybar {
    background: rgba(0, 0, 0, 0.5);
}

.modules-left {
    margin-left: 8px;
}

.modules-right {
    margin-right: 8px;
}

#custom-launch_wofi {
    color: #fff;
}

#workspaces {
    padding: 4px;
}

#workspaces button {
    padding: 3px;
    margin-right: 6px;
}

#workspaces button.active {
    /* background: #3a7f96;
    color: #fff; */
    animation-name: fade;
    animation-duration: 500ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}


@keyframes fade {
    to {
        background: rgba(229, 94, 156, 0.5);
        color: #fff;
    }
}