arrbee99 1560 Posted December 1, 2019 Share Posted December 1, 2019 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. Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 1, 2019 Share Posted December 1, 2019 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 comment Share on other sites More sharing options...
arrbee99 1560 Posted December 1, 2019 Author Share Posted December 1, 2019 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 comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 1, 2019 Share Posted December 1, 2019 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. Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 1, 2019 Author Share Posted December 1, 2019 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 comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by Happy2Play Link to comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by chef 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 1, 2019 Author Share Posted December 1, 2019 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 comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 1, 2019 Share Posted December 1, 2019 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 comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 1, 2019 Author Share Posted December 1, 2019 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 comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by chef Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 1, 2019 Author Share Posted December 1, 2019 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 comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by chef 1 Link to comment Share on other sites More sharing options...
arrbee99 1560 Posted December 1, 2019 Author Share Posted December 1, 2019 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 ? 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by Happy2Play 1 Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by Happy2Play 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Share Posted December 1, 2019 (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. Edited December 1, 2019 by CarlosLima Link to comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 (edited) Edited December 1, 2019 by chef Link to comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 (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 December 1, 2019 by chef Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Share Posted December 1, 2019 @@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 comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Share Posted December 1, 2019 (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 blurredDetail 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 Link to comment Share on other sites More sharing options...
chef 3745 Posted December 1, 2019 Share Posted December 1, 2019 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. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 1, 2019 Share Posted December 1, 2019 Hi, thanks for replying. I understand your information, but I didn't understand where to change it to "1" in the code. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now