niri/workspaces changes background color on hover despite no styling

[adpce]

As the title says, the niri/workspaces module will switch its background-color to white on hover, even if no css is provided which would cause that effect. The background-color will instead start with the background-color provided in css :hover, but then quickly fade to white.

$ waybar --version
Waybar v0.15.0

CSS config which produces this effect:

* {
	border: none;
	font-family:
		JetBrainsMono Nerd Font,
		Font Awesome,
		Roboto,
		Arial,
		Noto Sans Mono,
		sans-serif;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 20px;
}

window#waybar {
	all: unset;
}

.modules-right {
	background-color: #1a1b26;
	margin: 2px 10px 0 0;
}
.modules-center {
	background-color: #1a1b26;
	margin: 2px 0 0 0;
}
.modules-left {
	margin: 2px 0 0 5px;
	background-color: #1a1b26;
}

#workspaces button {
	color: #e0af68;
	padding: 1px 5px;
	background-color: transparent;
}

#workspaces button:hover {
	color: #c0caf5;
}

#clock,
#battery,
#cpu,
#memory,
#temperature,
#network,
#pulseaudio,
#custom-media,
#tray,
#mode,
#custom-power,
#custom-menu,
#idle_inhibitor,
#window,
#custom-clipboard,
#custom-xmr,
#custom-au,
#custom-ag,
#mpd {
	color: #e0af68;
	padding: 0 10px;
}
#mode {
	color: #cc3436;
	font-weight: bold;
}
#custom-power {
	color: #1a1b26;
	background-color: #e0af68;
	border-radius: 100px;
	margin: 5px 5px;
	padding: 1px 1px 1px 6px;
}

#custom-power:hover {
	background-color: #c0caf5;
}

#custom-xmr {
	color: #fa5c00;
}

#custom-au {
	color: #fad600;
}

#custom-ag {
	color: #c0c0c0;
}

Thank you for your time.

[acuteaangle]

Duplicate of #60

The problem here is that the niri/workspaces module has some implicit styling that is added before style.css is applied.

Below is what I am currently using at the top (ordering is significant) of my style.css to fix this.
It unsets the implicit styling of the workspaces module, so that the rest of style.css starts from a blank slate, as expected.

/* Disable implicit CSS on workspace buttons */
/* https://github.com/Alexays/Waybar/issues/60#issuecomment-3558719927 */
#workspaces button {
  background: none;
  border: none;
  padding: 0;
  text-shadow: none;
  box-shadow: none;
  transition: none;
  -gtk-icon-shadow: none;
  -gtk-icon-effect: none;
}

[adpce]

Thank you, this worked. Since this is a duplicate, I will close it.