Jump to content

Background blur


arrbee99

Recommended Posts

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

 

5de3052db4cfa_Embybackgroundblur.jpg

 

without the movie, TV detail pages being made blurry -

 

5de305e21ca5f_Embybackgroundblur1.jpg

 

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

Link to post
Share on other sites
Happy2Play

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.

Link to post
Share on other sites

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 ?

Link to post
Share on other sites
Happy2Play

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.

 

5de312e2b80da_home.jpg

 

5de312f3a7e2f_item.jpg

Link to post
Share on other sites

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 ?
Link to post
Share on other sites
Happy2Play

 

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 by Happy2Play
Link to post
Share on other sites

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 by chef
  • Like 1
Link to post
Share on other sites

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.

Link to post
Share on other sites
Happy2Play

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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 by chef
Link to post
Share on other sites

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.

Link to post
Share on other sites

@@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 by chef
  • Like 1
Link to post
Share on other sites

This is excellent , thank you  :)  :)  :)

 

Home Page -

 

5de35be494303_Embybackgroundblur2.jpg

 

Movies -

 

5de35c019f7e6_Embybackgroundblur3.jpg

 

and unaffected details -

 

5de35c359b379_Embybackgroundblur4.jpg

 

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

  • Like 1
Link to post
Share on other sites
CarlosLima

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 by CarlosLima
Link to post
Share on other sites
Happy2Play

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 by Happy2Play
  • Like 1
Link to post
Share on other sites
Happy2Play

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 by Happy2Play
  • Like 1
Link to post
Share on other sites
CarlosLima

 

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.

 

5de3b78170b7b_Capturar.png

Edited by CarlosLima
Link to post
Share on other sites

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 by chef
Link to post
Share on other sites
CarlosLima

@@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.

Link to post
Share on other sites
CarlosLima

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.

 

5de3f4fd20d9d_Capturar.png

Edited by CarlosLima
Link to post
Share on other sites

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.

 

5de3f4fd20d9d_Capturar.png

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.

Link to post
Share on other sites
CarlosLima

Hi, thanks for replying.

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...