How to make a floating, interactive bar in the bottom right corner?

[Ashe]

Hey everyone, I'm really struggling here. For some reason, my floaty bar A: has a background no matter what I try in css, and B: takes up space and fails to float on top of windows.

Setting mode to overlay does work, but this means the bar is no longer interactive. The background also remains non-transparent. Here's how it looks.

Here's a gist I made with my entire config

The important bits though:

  "name": "float",
  "layer": "top",
  "position": "bottom",
  "mode": "dock",
  "height": 75,
  "exclusive": false,
  "passthrough": true,
  "gtk-layer-shell": true,
  "margin-right": 10,
  "margin-bottom": 10,

* {
border: none;
border-radius: 0px;
font-family: "FiraCode Nerd Font";
font-weight: bold;
font-size: 18px;
min-height: 10px;
}

/* Default colours for if theme doesn't exist */
@define-color bar-bg rgba(0, 0, 0, 0);
@define-color main-bg #26233a;
@define-color main-fg #ebbcba;
@define-color wb-act-bg #31748f;
@define-color wb-act-fg #9ccfd8;
@define-color wb-hvr-bg #eb6f92;

window#waybar.full {
background: @bar-bg;
}

window#waybar.float {
background-color: transparent;
}

I'm on hyprland on nixos. I hope someone has an idea on how to achieve this. As a reminder:

1. The long bar is invisbile, only the background of my modules should be visible
2. The bar renders on top of other windows and doesn't reserve space
3. Is interactive (so mode: overlay won't work)

I hope someone has the answer I thought this would be easier :(

I'm unsure how i achieved this but the bottom bar kind of blurs and darkens my wallpaper, makes me wonder if its some GTK thing or if somehow hyprland can operate on waybar? But I have no rules to trigger this to my knowledge.

[Ashe]

Still working out the floating stuff but I think this is a hyprland issue?

• The blur is because of blurls = waybar in my hyprland config
• Still no idea why 'margin' and 'exclusive=false' isn't letting the bar render over other things
• A clue might be that waybar is apparently on the 'bottom' layer despite my config

  "name": "float",
  "layer": "top",
  "position": "bottom",
  "mode": "dock",
  "height": 60,
  "exclusive": false,
  "passthrough": true,
  "gtk-layer-shell": true,
  "margin-right": 10,
  "margin-bottom": 10,

.dotfiles on  theme-switching [!] 
❯ hyprctl layers 
Monitor DP-2:
	Layer level 0 (background):
		Layer 2757770: xywh: 0 0 5120 1440, namespace: swww
	Layer level 1 (bottom):
		Layer 2244240: xywh: 0 1380 5120 60, namespace: waybar
	Layer level 2 (top):
	Layer level 3 (overlay):
		Layer 2771a10: xywh: 4580 0 540 631, namespace: notifications

[Ashe]

Okay, needed to get rid of mode: dock. I thought the config said this was the default value but evidently not - having this explictly written fixes layering issues on hyprland. Now I need to figure out if I can distinguish one configuration from another based on the bar's 'name' property.. somehow?

[Ashe]

Fixed with this

bar_type=$(grep -oP '"name": "\K[^"]+' "$config_path")


# Manage hyprland rules

if command -v hyprctl &>/dev/null; then
  hyprctl keyword layerrule unset,waybar
  if [ "$bar_type" != "float" ]; then
    hyprctl keyword layerrule blur,waybar
  fi
fi


# Restart waybar

pkill waybar
sleep 0.1
waybar > /dev/null 2>&1 &

and by remove mode from config.