Currently I am working on creating an application using GTK and styling it with CSS. One of the requirements is to change the background of a button when clicked, specifically for a built-in video player. The desired behavior is to have the 'play' button's background change when the video is playing, revert back to default when paused, and for both buttons to reset to default when stopped. What would be the best approach to implement this functionality?
I came across the function
gtk_widget_override_background_colorbutton:focus in CSS did not produce the desired results. The background color changes on click, but interactions like adjusting volume also trigger the change, which is not intended.
UPDATE.
Upon reflection, I may have phrased my question in a misleading manner. While button:focus does work as expected, it does not fully meet my needs. Allow me to clarify with an example:
1. Initially (after selecting a video), the screen displays a message "press play"
https://i.sstatic.net/XYBjO.jpg
- When 'play' is clicked, the 'play' button receives focus in the CSS
Code snippet from C:
gtk_widget_set_name(GTK_WIDGET(play_button), "play_button_1");
And in the CSS:
button#play_button_1:focus {
background-color: #67181B;
}Resulting in the player looking like this after clicking "play": https://i.sstatic.net/kUNJs.jpg
- This setup works well as long as only the "play", "pause", and "stop" buttons are used. However, when other controls like "+" or "-" (for volume) are interacted with, the 'play' button loses focus and appears like this (the video continues playing despite no focus on the "-"): https://i.sstatic.net/0ySlF.jpg
My goal is to maintain the changed background of the "play" button while the video is playing, regardless of focus on other buttons. I hope this clarifies my objective further.