Custom CSS for overfilled progress bars

Custom CSS & Theme Design
1

What I’m trying to do

I’m using Minimal Theme and trying to write some custom css to give a color value to overfilled progress bars. Currently, a progress bar with a value over 100% defaults to whatever color is defined as “Red” in the Style Settings plugin. I like the dynamic color changing that Minimal has, but would like to customize the color for a beyond 100% value.

Things I have tried

I’ve found a variety of useful websites describing CSS, but either none contain the answer, or I’m missing something.

https://forum.obsidian.md/t/styling-progress-progress-with-css/28315
https://stackoverflow.com/questions/42290719/custom-styling-progress-bar-in-css
https://css-tricks.com/html5-progress-element/

2

I think that one of the relevant issues is that css reads progress bar values as strings, and has no “greater than” function anyhow.

3

Assuming you are using something like this:

90 -> <progress max="100" value="90" ></progress>

100 -> <progress max="100" value="100" ></progress>

110-> <progress max="100" value="110" ></progress>

the red for over 100 values looks like it’s coming from here:

https://github.com/kepano/obsidian-minimal/blob/30b63903333c4241c41e7beb5ab1dec409de0e4f/Minimal.css#L1131

You could extract a few sections and play around. Using unset for a few things may be an option here as well.

.markdown-rendered progress[value='100']::-webkit-progress-value,
.markdown-source-view.is-live-preview progress[value='100']::-webkit-progress-value,
.markdown-preview-view progress[value='100']::-webkit-progress-value {
    background-color: orange; }

.markdown-rendered progress[value^='1']::-webkit-progress-value, 
.markdown-source-view.is-live-preview progress[value^='1']::-webkit-progress-value,
.markdown-preview-view progress[value^='1']::-webkit-progress-value {
    background-color: hotpink; }

Screenshot 2024-04-12 122404

4

How do you generate those progress bars? Do they come from some query capable of providing extra classes in case over the max, or similar?

This shouldn’t be that hard to code using Dataview or similar. Other than that you’re kind of stuck since the CSS attribute selectors treats everything as strings, and one hack I’ve seen uses a variable definition in setting the values, and if you can do that, you should rather set a given class if above the maximum value, and use that for styling.

1 Like