Change Color of Progress Widget with SCSS

[samEngineering]

Is anyone having trouble theming the progress widget?
I'm running into a problem with the color. setting the color property in the css class of my progress bar widget has no effect. I can set background, border-radius, etc. successfully but cannot set or change the color, so I suspect there is a class that I do not know about to set the foreground color of the little meter.

Something unknown happens when I comment out all: unset; in my * class and the progress bar suddenly appears. Therefore, there must be something GTK is setting that I am not. However, I inspected the CSS nodes with and without that line commented out. I replicated the working CSS from the inspector but still no progress bar :(

Here is the whole yuck:

(defvar volume_symbol "/usr/share/icons/Adwaita/32x32/status/audio-volume-high-symbolic.symbolic.png")
(defvar volume_level 10)


(defwidget volume []
   (box :class "popup"
        :orientation "vertical"
      (image :class "volume_image"
             :path "${volume_symbol}")
      (label :class "text"
             :text "${volume_level}")
      (progress :class "volume_meter"
                :width: "80px"
                :height: "20px"
                :orientation: "horizontal"
                :halign "center"
                :valign "center"
                :value {volume_level})))

(defwindow volume_popup
   :monitor 1
   :geometry (geometry :anchor "top center"
                       :width "100px"
                       :height "100px")
   (volume))

I also tried setting the min-width for > throughas suggested in the documentation but I still don't have the progress bar.

.volume_meter {
   border-radius: 10px;
   color: #{$green};
}

.volume_meter > through {
   min-width: 10px;
}

Does anyone know what the magic CSS property is?

[Niahex]

Hey !

this can help you :

/*background of progress bar*/
progressbar {
	background-color: black;
}

/*active progress bar*/
progress {
	background-color: white;
}

For your modification use eww inspector and select CSS nodes you can see the name of differents elements of gtk. And in last solution go into your theme /usr/share/theme -> gtk3 folder and looking for your element in css files.

I hope I've been able to help you!

[samEngineering]

Thanks for the reply :)

What I don't get is how to specify :class "progress" for the active part of the progressbar if :class "progressbar" is already used. I have replicated your css but it just makes the whole bar the color specified in progressbar class. Here is my css:

.progressbar {
   background-color: #{$purple};
}

.progress {
   background-color: #{$blue};
}

and here is my widget:

(defwidget volume []
   (box :class "popup_backdrop"
        :orientation "vertical"
      (image :class "volume_image"
             :path "${volume_symbol}")
      (label :class "text"
             :text "${volume_level}%")
      (progress :class "progressbar"
                :halign "center"
                :valign "center"
                :value {volume_level})))

Forgive me, this is my first encounter with css ^_^

[samEngineering]

My genius web dev waifu helped me solve this. Here it is if anyone needs.

in eww.yuck:

(defwidget volume []
      ...
      (progress :class "volume_meter"
                :value {volume_level})))

in eww.scss:

.volume_meter {
   background-color: #{$empty_portion_of_bar};
}

.volume_meter > trough > progress {
   background-color: #{$full_portion_of_bar};
}

The value {volume_level} in eww.yuck is obtained from a shell script.
All the css nodes for gtk progressbar can be found here: https://docs.gtk.org/gtk4/class.ProgressBar.html