Custom CSS help

[Dopedangel]

Hi I am trying to blur the preview images of unwatched shows to avoid spoilers.  It is mostly working fine but it is also blurring images on the home page which I do not want as jellyfin already has the option of using default images instead of screen shots so is not needed on the main page. So what should I do so that my code is not applied on the main page.



         
/* Blur episode preview images ONLY for unwatched episodes (no played indicator) */
.listItemImage.listItemImage-large.itemAction.lazy:not(:has(.playedIndicator)) {
  filter: blur(10px); /* Adjust blur radius as needed */
}

   


The below code is what is bluring the homepage images as well

/* Blur unwatched episode images, but NOT season posters */
.card.overflowBackdropCard .cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast:not(:has(.cardIndicators .playedIndicator)) {
  filter: blur(5px); /* Adjust blur radius if needed */
}

   

[Crazzzy DucK]

If you only want things on certain areas, look for the ID of the containers of that section.
Add : #itemDetailPage
for the season page

If you don't want the cards on the homepage to be blurred try;

#indexPage .overflowBackdropCard .cardImageContainer {
filter: blur(0px);
}


It may need an !important

---

What I haven't been able to work out is how to not have the play button blurred as well