Jump to content

Recommended Posts

arrbee99
Posted

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.

Happy2Play
Posted

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
Posted

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
Posted

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

arrbee99
Posted

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
Posted (edited)

 

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
Posted (edited)

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
arrbee99
Posted

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
Posted

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.

Posted

5de33c61803d0_backdropBlur1.png

 

5de33c75b5cae_backdropBlur2.png

arrbee99
Posted

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.

Posted (edited)

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
arrbee99
Posted

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.

Posted (edited)

@@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
arrbee99
Posted

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
Posted (edited)

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
Happy2Play
Posted (edited)

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
Happy2Play
Posted (edited)

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
Posted (edited)

 

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
Posted (edited)
Edited by chef
Posted (edited)

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
Posted

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

Posted (edited)

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
Posted

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.

Posted

Hi, thanks for replying.

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

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