Add CSS for buttons that get dimmer when checked

src/alsa-scarlett-gui.css

@@ -55,6 +55,7 @@
   background: #801010;
 }
 
+/* Default button style */
 button {
   padding: 0px 5px 0px 5px;
   border: 1px solid #303030;
@@ -175,6 +176,45 @@ button.direct-monitor.selected-stereo > label {
   text-shadow: 0 0 5px #00c000, 0 0 15px #00c000;
 }
 
+/* Button controls where checked is dimmer */
+
+/* Mute button */
+button.mute {
+  color: #ffffff;
+  -gtk-icon-shadow: 0 0 5px #00c000, 0 0 15px #00c000;
+  border-color: #404040;
+}
+
+button.mute:checked {
+  -gtk-icon-shadow: 0 0 5px #ff0000, 0 0 15px #c00000;
+  border-color: #303030;
+}
+
+/* Dim button */
+button.dim {
+  color: #ffffff;
+  -gtk-icon-shadow: 0 0 5px #00c000, 0 0 15px #00c000;
+  border-color: #404040;
+}
+
+button.dim:checked {
+  -gtk-icon-shadow: 0 0 5px #ffc000, 0 0 15px #ffc000;
+  border-color: #303030;
+}
+
+/* SW/HW button */
+button.sw-hw {
+  color: #ffffff;
+  -gtk-icon-shadow: 0 0 5px #00c000, 0 0 15px #00c000;
+  border-color: #404040;
+}
+
+button.sw-hw:checked {
+  color: #808080;
+  -gtk-icon-shadow: 0 0 5px #ffc000, 0 0 15px #ffc000;
+  border-color: #303030;
+}
+
 /* Bigger buttons in the startup window */
 .window-startup button {
   padding: 5px;

src/iface-mixer.c

@@ -576,6 +576,7 @@ static void create_output_controls(
         w = make_boolean_alsa_elem(
           elem, "*audio-volume-high", "*audio-volume-muted"
         );
+        gtk_widget_add_css_class(w, "mute");
         if (has_hw_vol) {
           gtk_widget_set_tooltip_text(
             w,
@@ -589,6 +590,7 @@ static void create_output_controls(
         );
       } else if (strstr(elem->name, "Volume Control Playback Enum")) {
         w = make_boolean_alsa_elem(elem, "SW", "HW");
+        gtk_widget_add_css_class(w, "sw-hw");
         gtk_widget_set_tooltip_text(
           w,
           "Set software-controlled (SW) or hardware-controlled (HW) "
@@ -634,12 +636,14 @@ static void create_output_controls(
       w = make_boolean_alsa_elem(
         elem, "*audio-volume-high", "*audio-volume-muted"
       );
+      gtk_widget_add_css_class(w, "mute");
       gtk_widget_set_tooltip_text(w, "Mute HW controlled outputs");
       gtk_grid_attach(GTK_GRID(output_grid), w, 0, 2, 1, 1);
     } else if (strcmp(elem->name, "Dim Playback Switch") == 0) {
       w = make_boolean_alsa_elem(
         elem, "*audio-volume-medium", "*audio-volume-low"
       );
+      gtk_widget_add_css_class(w, "dim");
       gtk_widget_set_tooltip_text(
         w, "Dim (lower volume) of HW controlled outputs"
       );