Disable hover/prelight effect on workspace buttons by default

[alecmev]

There's some default GTK CSS for the hover effect which I personally find unappealing, and I think many would concur. I've mitigated it by adding this rule:

#workspaces button:hover {
  box-shadow: inherit;
  text-shadow: inherit;
}

Maybe this could be done out of the box? Alternatively, prelight could be disabled altogether, but I think some may want to have hover effects.

[Alexays]

I don't know, but it can be part of the documentation... that doesn't exist very much at the moment 😂

[Alexays]

I close this, it's documented in the wiki :)

[shasherazi]

Hello, I tried the given CSS, but the hover effect is still visible

With this CSS tho

#workspaces button:hover {
    background: none;
    border: none;
}

The hover effect is gone, but there is still a very slight dimming of the icon on the hover. It's not a big deal, but you can't unsee it once you see it.

Here the 5th workspace is very slightly dimmed coz I was hovering over it. It's not noticeable unless you know it.

My style.css

* {
  font-family: "JetBrains Mono NF", sans-serif;
  font-size: 16px;
}

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

#clock {
  color: #f7768e;
  /* background-color: #24283b; */
}

#battery.discharging {
  color: #f7768e;
}

#battery.charging {
  color: #9ece6a;
}

#pulseaudio.muted {
  color: #f7768e;
}

#workspaces button {
  padding: 2px;
}

#workspaces button.active {
  color: #9ece6a;
}

#workspaces button:hover {
    background: none;
    border: none;
}

[matijabozic]

Had the same issue and solved it with these CSS properties:

button:hover {
  box-shadow: none; /* Remove predefined box-shadow */
  text-shadow: none; /* Remove predefined text-shadow */
  background: none; /* Remove predefined background color (white) */
  transition: none; /* Disable predefined animations */
}

background: none; property is important as without it you can't set background-color through #workspaces button:hover selector. Whatever color you set there, it defaults to white which is not defined in Waybar's style.css. Also, transition: none; removes CSS hover animation.

I know it's an old issue that's closed, but feel it would be nice if this would be changed. Default style.css does not allow you to change background color through #workspaces button:hover selector and defaults to white color, until you set background to none in button:hover selector. And that white color is not defined in style.css but coming from GTK CSS.

Anyways, its solvable with these CSS properties, but it would be nicer if it would work like this out of the box.
And we can always use CSS animations to animate hover effect of buttons if we want to.

[Mr-Pine]

I think one of

#workspaces button:hover {
  border-color: transparent;
}

#workspaces button {
  border: none;
}

is the nicest solution so far. Also, this doesn't seem to be in the wiki anymore (or I just didn't find it)

[kingprawn22]

Had the same issue and solved it with these CSS properties:

button:hover {
  box-shadow: none; /* Remove predefined box-shadow */
  text-shadow: none; /* Remove predefined text-shadow */
  background: none; /* Remove predefined background color (white) */
  transition: none; /* Disable predefined animations */
}

background: none; property is important as without it you can't set background-color through #workspaces button:hover selector. Whatever color you set there, it defaults to white which is not defined in Waybar's style.css. Also, transition: none; removes CSS hover animation.

I know it's an old issue that's closed, but feel it would be nice if this would be changed. Default style.css does not allow you to change background color through #workspaces button:hover selector and defaults to white color, until you set background to none in button:hover selector. And that white color is not defined in style.css but coming from GTK CSS.

Anyways, its solvable with these CSS properties, but it would be nicer if it would work like this out of the box. And we can always use CSS animations to animate hover effect of buttons if we want to.

Thanks for this. Of the multiple solutions provided, this one works best for me to get an almost blank canvas when creating my own style. It's a shame we have to use such a workaround.