Feat: Improve waybar workspace status indicatiors for multi-monitor

[epmoyer]

• On multi-monitor systems currently:
  • The waybar on each monitor is identical, so it is not possible to tell which workspace is on which monitor.
  • The active workspace's number is obscured.
  • It is somewhat difficult to differentiate between workspaces which contain windows and those which don't.
• This change:
  • Makes the waybar workspace indicators unique-per-monitor.
  • Shows which workspace is on each (now unique) waybar's monitor by placing a box around the indicator.
  • Shows the active workspace by inverting the indicator.
    • This appears only on the waybar of the monitor containing the active workspace.
  • Decreases the opacity of workspaces with no windows, to improve the differentiation.
    • The combination of inversion and opacity reduction now makes the indication of a selected workspace with no windows "obvious".

Monitor 1:

Monitor 2:

Monitor 1 (workspace 8 active, which contains no windows):

[epmoyer]

I made a second commit to simplify/clarify/refine the CSS.

[akarray]

Hope will be merged. It's a smart feature !

[jscorbalan]

This looks like a promising feature and clearly solves several multi-monitor usability issues. However, I personally prefer the simplicity of the current waybar. For me, the combination of per-monitor uniqueness, inversion, opacity changes, and outlines adds some visual and conceptual complexity compared to the existing behavior.

[RushiChaganti]

I have configured Waybar to show only occupied workspaces instead of all
available workspaces. This significantly improves multi-monitor workflow
by displaying only workspace numbers that have active windows:

"hyprland/workspaces": {
  "format": "{name}",
  "on-click": "activate",
  "all-outputs": false,
  "disable-scroll": true,
  "show-special": false
}

The key change is "all-outputs": false, which filters the workspace
display to show only workspaces with windows, reducing visual clutter
across multiple monitors.