Progress bars are not themed inside Libraries

[stpnwf]

Describe what and where does not get themed by Ultrachromic Progress bars are not themed inside Libraries (Movies, TV Shows, etc) when using the Floating progress bar style (and I believe the overlay style doesn't look properly there as well).

Screenshots

They look correctly on the Home page

But they are not themed inside Movie and TV Show Libraries

---

Probably a separate issue, but I noticed this happens to progress bars for a few moments after you stop playing media.

[ebkalderon]

Seeing the same issue where library progress bars aren't being themed like they are in the dashboard.

[ebkalderon]

I was able to fix this by not importing progress/floating.css and pasting in its place the following CSS instead:

#indexPage .innerCardFooterClear,
.libraryPage .innerCardFooterClear,
#itemDetailPage .innerCardFooterClear {
    background-color: transparent !important;
    box-shadow: none;
}
#indexPage .itemProgressBarForeground,
.libraryPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground,
#indexPage .itemProgressBar,
.libraryPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
    border-radius: var(--rounding);
}
#indexPage .itemProgressBarForeground,
.libraryPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground  {
    background-color: rgba(var(--accent), 0.95) !important;
}
#indexPage .itemProgressBar,
.libraryPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
    height: 6px;
    background: rgba(0,0,0,0.4);
    margin: .5em .8em;
}
/*Accommodate play button on mobile*/
@media all and (max-width: 100em){
  #indexPage .itemProgressBar,
  .libraryPage .itemProgressBar,
  #itemDetailPage .itemProgressBar {
    margin-right: 3.2em;
  }
}
@supports (backdrop-filter: blur(15px)) {
  #indexPage .itemProgressBar,
  .libraryPage .itemProgressBar,
  #itemDetailPage .itemProgressBar{
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.35) !important;
  }
}

This is simply the existing progress/floating.css stylesheet with a few modifications, as explained below.

Click to see diff of the above code against the current progress/floating.css in the main branch

```diff #indexPage .innerCardFooterClear, + .libraryPage .innerCardFooterClear, #itemDetailPage .innerCardFooterClear { background-color: transparent !important; box-shadow: none; } #indexPage .itemProgressBarForeground, + .libraryPage .itemProgressBarForeground, #itemDetailPage .itemProgressBarForeground, #indexPage .itemProgressBar, .libraryPage .itemProgressBar, #itemDetailPage .itemProgressBar { border-radius: var(--rounding); } #indexPage .itemProgressBarForeground, + .libraryPage .itemProgressBarForeground, #itemDetailPage .itemProgressBarForeground { background-color: rgba(var(--accent), 0.95) !important; } #indexPage .itemProgressBar, + .libraryPage .itemProgressBar, #itemDetailPage .itemProgressBar { height: 6px; background: rgba(0,0,0,0.4); margin: .5em .8em; } /*Accommodate play button on mobile*/ @media all and (max-width: 100em){ #indexPage .itemProgressBar, + .libraryPage .itemProgressBar, #itemDetailPage .itemProgressBar { margin-right: 3.2em; } } @supports (backdrop-filter: blur(15px)) { #indexPage .itemProgressBar, + .libraryPage .itemProgressBar, #itemDetailPage .itemProgressBar{ backdrop-filter: blur(4px); background: rgba(0, 0, 0, 0.35) !important; } } ```

Final result looks like this:

This has been tested to work with the "movies", "music videos", and "mixed movies and shows" library types on my end.

[stpnwf]

I was able to fix this by not importing progress/floating.css and pasting in its place the following CSS instead:

#indexPage .innerCardFooterClear,
.libraryPage .innerCardFooterClear,
#itemDetailPage .innerCardFooterClear {
    background-color: transparent !important;
    box-shadow: none;
}
#indexPage .itemProgressBarForeground,
.libraryPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground,
#indexPage .itemProgressBar,
.libraryPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
    border-radius: var(--rounding);
}
#indexPage .itemProgressBarForeground,
.libraryPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground  {
    background-color: rgba(var(--accent), 0.95) !important;
}
#indexPage .itemProgressBar,
.libraryPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
    height: 6px;
    background: rgba(0,0,0,0.4);
    margin: .5em .8em;
}
/*Accommodate play button on mobile*/
@media all and (max-width: 100em){
  #indexPage .itemProgressBar,
  .libraryPage .itemProgressBar,
  #itemDetailPage .itemProgressBar {
    margin-right: 3.2em;
  }
}
@supports (backdrop-filter: blur(15px)) {
  #indexPage .itemProgressBar,
  .libraryPage .itemProgressBar,
  #itemDetailPage .itemProgressBar{
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.35) !important;
  }
}

This is simply the existing progress/floating.css stylesheet with a few modifications, as explained below. Click to see diff of the above code against the current progress/floating.css in the main branch

Final result looks like this:

This has been tested to work with the "movies", "music videos", and "mixed movies and shows" library types on my end.

Oh, thanks for the reply. Sorry it took forever for me to answer back. I ended up removing that code and just ported over the floating bar from another theme (JellyTheme I believe). Then I ended up making my own theme, mixing a bunch of others, and its working so far, but if I stumble into issues, I will look at you css code.