monochromic progress bars not showing

[AstroTheAstronaut]

Describe what and where does not get themed by Ultrachromic A clear on concise description. The progress bars have no themeing, so they're transparent (can't see what the progress is). Everything from the progress bars in the main menu to the media status prorgress bar and volume. Screenshots They really help.

[AstroTheAstronaut]

Okay I managed to find the "broken"/missing css rules:

.mdl-slider-background-lower {
    background-color: #fff;
}
.iconOsdProgressInner {
    background: #fff;
}

.itemProgressBarForeground {
    background-color: rgba(255, 255, 255, 0.35);
}

I used white because I think it works well with the monochromic variant

[ebkalderon]

Still seeing this issue occur, and it's quite annoying. Seems it primarily affects itemProgressBarForeground and a few other things here and there, nowadays.

[ebkalderon]

Found the root cause of the issue. It seems that type/light.css and type/colorful.css set the --accent color, but neither type/dark.css (used by the Monochromic preset) and type/dark_withaccent.css set this CSS variable. It seems that itemProgressBarForeground assumes this --accent variable exists and uses it to set its own color, and silently fails to do so when --accent doesn't exist.

If you add this additional line of custom CSS to your Jellyfin "General" config:

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css');
:root {--accent: 255, 255, 255; } /* New! Add this here. */

you should see itemProgressBar working as expected now, along with all other missing Monochromic progress bars and hoverglow (if enabled).

Before

After

This seems like a bug to me. Perhaps @CTalvio can give additional context? (apologies for the direct ping!)