pulseaudio source-muted css styling?

[ghost]

I am using 2 pulseaudio modules on my bar, one for sink volume and one for source volume. I want to change the style of each module separately when they are muted. I can change the style of the sink module when muted with #pulseaudio.muted but couldn't find an equivalent for changing the style of the source module when muted. Is there a way to do this? Maybe #pulseaudio.source_muted could be added?

[sheenobu]

Can you post your config? If you've got two pulseaudio modules configured with names like "pulseaudio#source" and "pulseaudio#sink", then 'source' and 'sink' are now CSS classes you can select on. you can style 'source muted' like #pulseaudio.source.muted { ... }

[ghost]

I tried that, the issue is that the source module's muted style is applied when the sink is muted, and not when the source is muted. This image should show what I mean https://i.imgur.com/3uuZqFO.png

Here's the style.css for the pulseaudio modules

}
#pulseaudio {
	background-color: #4084d6;
	border-bottom: 2px solid #ffffff;
	padding: 0 6px;
	margin: 0 2px;
	color: #ffffff;
}
#pulseaudio.sink.muted {
	background-color: #404552;
	border-bottom: 2px solid #2f343f;
}
#pulseaudio.source.muted {
	background-color: #404552;
	border-bottom: 2px solid #2f343f;

and the config for them

"pulseaudio#sink": {
	"tooltip": false,
	"format": "{volume}% {icon}",
	"format-icons": ["", "", ""],
	"format-muted": "",
	"on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
	"on-click-right": "pavucontrol-qt"
},
"pulseaudio#source": {
	"tooltip": false,
	"format": "{format_source}",
	"format-source": "{volume}% ",
	"format-source-muted": "",
	"on-click": "pactl set-source-mute @DEFAULT_SOURCE@ toggle",
	"on-click-right": "pavucontrol-qt"
},

[norseghost]

Reproduced here. The pulseaudio.source class has no effect; but picks up styling from the pulseauidio.sink class

[Alexays]

The problem here is that the source and sink are the same label so to make a different style we should split them into two modules but without duplicating the logic behind them

[Surendrajat]

I know this doesn't make much sense, but I got it working with the following config:

#pulseaudio {
    color: #e0a7e0; // source normal
}

#pulseaudio.sink.muted {
    color: #3b4252; // sink muted
}

#pulseaudio.sink:not(.muted) {
    color: #b4eead; // sink normal
}

#pulseaudio.source-muted {
    color: #3b4252; // source muted
}

[abhinandanudupa]

#pulseaudio {
    color: #e0a7e0; // source normal
}

#pulseaudio.sink.muted {
    color: #3b4252; // sink muted
}

#pulseaudio.sink:not(.muted) {
    color: #b4eead; // sink normal
}

#pulseaudio.source-muted {
    color: #3b4252; // source muted
}

Unfortunately this does not work now.

[jistr]

Separate styling for sink/source muting can already be achieved via Pango markup. Pango is less powerful than CSS but text color change can be done. I posted an example here:

https://github.com/Alexays/Waybar/issues/925#issuecomment-2129592968