Background blur

[arrbee99 1712]

Sorry to trouble again. If the Home Page, Movies page, TV page show a background, can that background be made blurry somehow -

 

 

without the movie, TV detail pages being made blurry -

 

 

so, first image made blurry, second left as is. Thank you.

[Happy2Play 9445]

With some trial and error, something like this.  

.overflowYScroll:not(.withSectionTabs) div.backgroundContainer.withBackdrop {
    opacity: .3;
}

Ensure to remove/replace existing code.  This applies the default .88 to pages and .3 to itemdetails.

[arrbee99 1712]

Doesn't seem to have any effect. What does 'Ensure to remove/replace existing code' mean - get rid of all the other css I've added ?

[Happy2Play 9445]

Doesn't seem to have any effect. What does 'Ensure to remove/replace existing code' mean - get rid of all the other css I've added ?

I would assume you have existing code removing the backdrop blur/opacity.

 

With only that code I get this.

 

 

[arrbee99 1712]

I have existing code that makes the background brighter and also makes the colours more washed out -

 

/*Make backdrop brighter*/

.backgroundContainer.withBackdrop {

    background: rgba(0,0,0,.10)!important;

}

 

/*Make Music (?) backdrop almost back and white*/

.backgroundContainer.withBackdrop {

     filter: blur(0px) grayscale(80%)!important;;

}

 

 

/*Make Movie (?) backdrop almost back and white*/

.backdropContainer {

     filter: blur(0px) grayscale(80%)!important;

}

 

Not sure how they affect things.

 

Also, shouldn't your code make the background blurrier in your first image ?

[Happy2Play 9445]

 

I have existing code that makes the background brighter and also makes the colours more washed out -

 

/*Make backdrop brighter*/

.backgroundContainer.withBackdrop {

    background: rgba(0,0,0,.10)!important;

}

 

/*Make Music (?) backdrop almost back and white*/

.backgroundContainer.withBackdrop {

     filter: blur(0px) grayscale(80%)!important;;

}

 

 

/*Make Movie (?) backdrop almost back and white*/

.backdropContainer {

     filter: blur(0px) grayscale(80%)!important;

}

 

Not sure how they affect things.

 

Also, shouldn't your code make the background blurrier in your first image ?

 

 

Code with !important will take priority.  This is why I try to target without !important unless absolutely necessary.  You would need to remove the highlighted code. 

 

And adjust my code according to .1.

 

Or change it to reflect the element I am pointing to.

 

I just used the default opacity, without any additional blur.  But your existing blur code will still work.

Edited December 1, 2019 by Happy2Play

[chef 3808]

One of the effects that I really like in the web app UI is when this CSS is used on the button and cards:

background: rgba(43, 43, 43, .4) !important; /*Change this color to whatever, it's about the transparency*/
-webkit-backdrop-filter: saturate(1.8) blur(1.5em) !important; 
backdrop-filter: saturate(1.8) blur(1.5em) !important;

It makes items look blurred but still allows transparency of the items behind it.

 

Perhaps you could use some sort of pseudo element (':after' maybe) on the backdropContainer to add this effect.

Edited December 1, 2019 by chef

[arrbee99 1712]

I tried commenting out the item you marked in red, but changing the opacity in the code you provided doesn't seem to have any effect on the background under the Home Page or main Movie or TV pages, whether I make it 0,1,.8,.3...

 

Obviously I don't know what I'm doing.

[Happy2Play 9445]

I would first remove all your code and test just the code above to see it it does what you want.  Or if you have a test build and test.

[chef 3808]

 

[arrbee99 1712]

I would first remove all your code and test just the code above to see it it does what you want.  Or if you have a test build and test.

 

After doing that, so its got your code and nothing else, changing the opacity seems to leave the background image on the Home page unaffected (and dark) but it does change that brightness of the movie and TV item detail pages.

 

So I think the effect should be the other way round.

 

Am hoping to get it to be like chef has above - blurry in his second image, but the Movie / TV detail images should not be blurry i.e. they are controlled separately.

[chef 3808]

If you want that to happen, then it might take some more then just CSS.

 

Something like this to trigger the backdrop blur on everything but the details page.

               function applyBlur() {
                    if (document.querySelector('#itemDetailPage.page.libraryPage.itemDetailPage.page-windowScroll.hide')) { //If the details page is hidden - or you are not viewing it
                        if (document.querySelector('div.backgroundContainer.withBackdrop')) { //and the background is 'withBackDrop'
                            var container = document.querySelector('div.backgroundContainer.withBackdrop'); //choose the backdrop
                            container.style.backdropFilter  = "saturate(1.8) blur(1em)"; //apply Blur to the image and saturate it with color
                            container.style.backgroundColor = "transparent"; //Remove the shaded overlay
                        }
                    }
                }

However you're going to have to trigger this function and for that I would suggest using mutationObserver.

 

 

And you may have to switch the details Page back and remove the blur, which would just use an other conditional statement.

Edited December 1, 2019 by chef

[arrbee99 1712]

urgh, that looks way out of my league. 'Watch for changes being made to a DOM tree' I saw somewhere.

 

Looks like its not going to happen, apologies for taking up everyones time.

[chef 3808]

@@arrbee99

 

Here you go! Never say never my friend:

          blurIt(); 
         
          function blurIt() {      
               var observer = new MutationObserver(function(mutations) {
                    if (document.querySelector('#itemDetailPage')) {
                        if (document.querySelector('#itemDetailPage').classList.contains('hide')) {
                            var backdrop = document.querySelector('.backgroundContainer.withBackdrop');
                            backdrop.style.backdropFilter = "saturate(1.8) blur(1em)";
                            backdrop.style.backgroundColor = "transparent";
                        } else {
                            var backdrop = document.querySelector('.backgroundContainer.withBackdrop');
                            backdrop.style.backdropFilter = "saturate(0) blur(0px)";
                        }
                    } else {
                        if (document.querySelector('.backgroundContainer.withBackdrop')) {
                            var backdrop = document.querySelector('.backgroundContainer.withBackdrop');
                            backdrop.style.backdropFilter = "saturate(1.8) blur(1em)";
                            backdrop.style.backgroundColor = "transparent";
                        }
                    }

                });
                observer.observe(document, {
                    childList: true,
                    subtree: true,
                    attributes: true,
                    attributeOldValue: true,
                });
}

to make it work:

 

1. open index.html (AppData\Roaming\Emby-Server\system\dashboard-ui\index.html)

2. at the bottom just before the final '/<body>' tags add '<script></script>' tags

3. paste the code above between them.

 

P.S. It's a little rough, no one judge my quick code! I know I "var'd" backdrop three times.

Edited December 1, 2019 by chef

[arrbee99 1712]

This is excellent , thank you     

 

Home Page -

 

 

Movies -

 

 

and unaffected details -

 

 

If I want to maybe change the degree of blur and/or brightness of those blurry backgrounds, is that possible at all ?

[Guest]

hi,

i would like a code that would make the images on all pages 100% bright but all in black and white, no blur and super sharp, so how is this last image.

Edited December 1, 2019 by CarlosLima

[Happy2Play 9445]

Well this should do what you want @@arrbee99 with css

.overflowYScroll.withSectionTabs div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em)
}

.overflowYScroll div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,.10);
}

Might need to add the "-webkit-backdrop-filter" for other browsers as shown in post 7. Edited December 1, 2019 by Happy2Play

[Happy2Play 9445]

hi,

i would like a code that would make the images on all pages 100% bright but all in black and white, no blur and super sharp, so how is this last image.

 

Like this, you can up the percentage on grayscale if needed.

div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,0);
}

/*Make backdrop almost black and white*/
div.backdropContainer {
     filter: blur(0px) grayscale(80%)
}
 

Edited December 1, 2019 by Happy2Play

[Guest]

 

Like this, you can up the percentage on grayscale if needed.

div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,0);
}

/*Make backdrop almost black and white*/
div.backdropContainer {
     filter: blur(0px) grayscale(80%)
}
 

 

Did not work.

Maybe my post was written in a confusing way.

What I would like is to have the images all original, without any editing, in black and white, extremely sharp, without any artifact about them, just like this picture, but in black and white on all emby pages, and in color (originals) on the details page.

 

Edited December 1, 2019 by CarlosLima

[chef 3808]

Edited December 1, 2019 by chef

[chef 3808]

Well this should do what you want @@arrbee99 with css

 

.overflowYScroll.withSectionTabs div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,.10); backdrop-filter: saturate(1.8) blur(1.5em)
}

.overflowYScroll div.backgroundContainer.withBackdrop {
    background: rgba(0,0,0,.10);
}

Might need to add the "-webkit-backdrop-filter" for other browsers as shown in post 7.

Nice catch!

 

.withSectionTabs

Edited December 1, 2019 by chef

[Guest]

@@arrbee99

 

Here you go! Never say never my friend:

          blurIt(); 
         
          function blurIt() {      
               var observer = new MutationObserver(function(mutations) {
                    if (document.querySelector('#itemDetailPage')) {
                        if (document.querySelector('#itemDetailPage').classList.contains('hide')) {
                            var backdrop = document.querySelector('.backgroundContainer.withBackdrop');
                            backdrop.style.backdropFilter = "saturate(1.8) blur(1em)";
                            backdrop.style.backgroundColor = "transparent";
                        } else {
                            var backdrop = document.querySelector('.backgroundContainer.withBackdrop');
                            backdrop.style.backdropFilter = "saturate(0) blur(0px)";
                        }
                    } else {
                        if (document.querySelector('.backgroundContainer.withBackdrop')) {
                            var backdrop = document.querySelector('.backgroundContainer.withBackdrop');
                            backdrop.style.backdropFilter = "saturate(1.8) blur(1em)";
                            backdrop.style.backgroundColor = "transparent";
                        }
                    }

                });
                observer.observe(document, {
                    childList: true,
                    subtree: true,
                    attributes: true,
                    attributeOldValue: true,
                });
}

to make it work:

 

1. open index.html (AppData\Roaming\Emby-Server\system\dashboard-ui\index.html)

2. at the bottom just before the final '/<body>' tags add '<script></script>' tags

3. paste the code above between them.

 

P.S. It's a little rough, no one judge my quick code! I know I "var'd" backdrop three times.

 

 

Out of curiosity, I applied, it worked perfect.

 

I was surprised by the effect this code gives, a really pleasant surprise. I liked the details page better (which is what I wanted), but the blurring effect on home is different, I liked it and I'm using it on my server.

 

Thanks for sharing.

[Guest]

Ooops, something seems to have gone wrong.
When navigating a few minutes through the interface, on some detail pages, the image turns out to be colorful and blurred as well.
Maybe I got it wrong, thinking that ALL detail pages would be in black and white and without any artifact, without any blur.
Is it possible to change the code to look like this?
Home pages = colored and blurred
Detail pages (movies, series, etc.) = black and white, no artifacts, no blur, fully sharp, like a portrait.
Thank you.

PS: I would like to have ALL detail pages look like this.

 

Edited December 1, 2019 by CarlosLima

[chef 3808]

Ooops, something seems to have gone wrong.

When navigating a few minutes through the interface, on some detail pages, the image turns out to be colorful and blurred as well.

Maybe I got it wrong, thinking that ALL detail pages would be in black and white and without any artifact, without any blur.

Is it possible to change the code to look like this?

Home pages = colored and blurred

Detail pages (movies, series, etc.) = black and white, no artifacts, no blur, fully sharp, like a portrait.

Thank you.

 

PS: I would like to have ALL detail pages look like this.

 

The effect you are looking at is a zero based saturation.

 

It was by accident in the code. To have normalized color it should be set to 1.

 

It is possible that the mutationObserver could miss some changes in the DOM while browsing.

 

Happy2Play had a really good target a couple of posts back. He was able to figure out the differences by using the divs classes.

 

When the class ".withSelectionTabs" is added we know that the backdrop div is not showing itemdetails.

 

Quite brilliant actually.

 

Let's see if we can use that to target custom css.

[Guest]

Hi, thanks for replying.

I understand your information, but I didn't understand where to change it to "1" in the code.