:hover does not falltrhough

[ugoCapetoOfficial]

I have a drawer that does not open when I normally hover. On version 0.10.2 it opens flawlessly when I hover the container, when I upgraded to 0.10.3(arch) it's now broken, It doesn't open the drawer, but hovers the first item just fine.

I've seen similar issues here before, maybe it broke again.

I just wanted to point this out so it doesn't go unnoticed, I would like to fix the issue myself, but I am not yet familiar enough with the codebase, so keep up the good work, this is one of the best packages ever!

[haug1]

It's likely because you have padding or margin on your group, you can move that to the inside and achieve the same effect #group > * {/*apply padding and margin here instead*/}. In 0.10.3, this commit, we gained :hover on group and an issue was fixed where the drawer would get stuck open. But seems that putting margin or padding on the group now causes the hovering issue. Not sure what will happen next, it's up to @Alexays. Revert the commit or users will have to adapt and I could help adding some documentation about the restriction. I don't know how to fix it without reverting or having the new CSS limitation. At least not for the moment, might be a trivial fix so that we can move forward, but I've not found it unfortunately.

I also have a feeling that this issue might be connected to that commit although no mention of using group and I haven't tested anything myself: https://github.com/Alexays/Waybar/issues/3237.

[ugoCapetoOfficial]

@haug1 I have margin on my group, setting it to 0 does not solve the issue for me, although I also feel like it's margin related, because if I hover just below the bottom border, the drawer briefly opens (I didn't mention this, feel free to ask for details if you think it's helpful)

[haug1]

In that case maybe it's a new problem. Would you mind sharing your group config and related CSS? I can have a look when I have time.

[ugoCapetoOfficial]

I isolated one of the groups for you

inside config.jsonc

{
	"reload_style_on_change": true,
	"position": "top",
	"layer": "top",
	"margin-left": 20,
	"margin-right": 20,
	"spacing": 5,
	"modules-left": ["group/apps"],

	"group/apps": {
		"orientation": "horizontal",
		"modules": [
			"custom/launcher", 
			"custom/terminal", 
			"custom/browser", 
			"custom/explorer"
		],
		"drawer": {
			"transition-duration": 500,
			"children-class": "not-launcher",
			"transition-left-to-right": true
		}
	},
	"custom/launcher": {
		"format": "",
		"on-click": "rofi -show",
		"tooltip": false
	},
	"custom/terminal": {
		"format": "",
		"on-click": "kitty",
		"tooltip": false
	},
	"custom/browser": {
		"format": "",
		"on-click": "firefox",
		"tooltip": false
	},
	"custom/explorer": {
		"format": "",
		"on-click": "thunar",
		"tooltip": false
	}
}

inside style.css

* {
	font-family: JetBrainsMonoNerdFontMono;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
}

window#waybar {
	background-color: transparent;
}

#apps {
	margin-top: 4px;
	margin-bottom: 4px;
	border-radius: 16px;
	border: 1px solid #282828;
	background: rgba(30, 30, 46, 0.5);
}

#apps * {
	font-size: 22px;
}

#custom-launcher, 
#custom-terminal,
#custom-browser,
#custom-explorer {
	padding-left: 1em;
	padding-right: 1em;
	color: #F4D9E1;
	border-radius: 16px;
}

#custom-launcher:hover, 
#custom-terminal:hover, 
#custom-browser:hover, 
#custom-explorer:hover {
	color: navy;
	border: none;
	background: linear-gradient(200deg, #FF2020, #FFFF20, #20C0FF, #C020FF);
	transition: 5000ms cubic-bezier(0, 1, 0, 1);
}

[haug1]

It seems that also border introduces the issue. The best I can do to achieve the same effect without bugs for you in 0.10.3 is this:

#apps {
  background: rgba(30, 30, 46, 0.5);
  border-radius: 16px;
}

#apps box {
  border-radius: 16px;
  border: 1px solid #282828;
}

#apps > * {
  border: 1px solid #282828;
  border-radius: 16px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 22px;
}

#apps:hover > * {
  border-radius: 16px 0 0 16px;
  border-right: 0;
}

#apps:hover box {
  border-radius: 0 16px 16px 0;
  border-left: 0;
}

#custom-launcher,
#custom-terminal,
#custom-browser,
#custom-explorer {
  padding-left: 1em;
  padding-right: 1em;
  color: #f4d9e1;
  border-radius: 16px;
}

#custom-launcher:hover,
#custom-terminal:hover,
#custom-browser:hover,
#custom-explorer:hover {
  color: navy;
  border: none;
  background: linear-gradient(200deg, #ff2020, #ffff20, #20c0ff, #c020ff);
  transition: 5000ms cubic-bezier(0, 1, 0, 1);
}

Of course, it's not a great solution because it's a lot more unintuitive for the user to configure the group like this, and also it will not be completely smooth closing transition animation when the hover style disappears.

[m-hearn]

I agree it's padding / margin related. Interestingly - on my instance the drawer 'misbehaves' when entering from the right or above. But works if approached from below or left. After changing style.css from

#group-power
{
  color: #8a8a8a; background-color: #333333;
  border-radius: 2px 18px 2px 18px;
  border-width: 0px;
  padding: 0px 10px 0px 10px;
  margin:  2px -4px 2px -4px;
  font-size: 1.2em;
}

to

#group-power
{
  border-radius: 2px 18px 2px 18px;
  color: #8a8a8a; background-color: #333333;
  font-size: 1.2em;
}

config -

  ,"group/group-power": {
    "orientation": "horizontal",
    "drawer" : {
      "transition-duration": 500,
      "transition-left-to-right": false
    },
    "modules": [
      "custom/power",
      "custom/shutdown",
      "custom/reboot",
      "custom/quit"
    ]

[hrdl-github]

Coming from https://github.com/Alexays/Waybar/issues/3029#issuecomment-2112363957: something like

#group-power
{
  color: #8a8a8a; background-color: #333333;
  border-radius: 2px 18px 2px 18px;
  border-width: 0px;
  font-size: 1.2em;
}

#group-power > * > * {
  padding: 0px 10px 0px 10px;
  margin:  2px -4px 2px -4px;
}

simplifies things a bit, but introduces extra padding and margins between elements. Visually this might make sense in some cases.

[haug1]

simplifies things a bit, but introduces extra padding and margins between elements. Visually this might make sense in some cases.

With some more tinkering you should be able to properly target the margin and padding only on the drawer leader element and the last revealer child. Make use of the functionality to inspect the GTK DOM using waybar -l debug, knowing what the DOM looks like demystifies how to write the CSS a lot.

[ashish-kus]

That's an issue caused by margin Try removing that from the element once then check

Use gtk inspector and make the size of element that accepts hover full.