Remove blur / vignette effect from playback navigation overlay?

[EmblemJD 18]

Pretty straight-forward question: Is there any way to remove the blurry overlay (with the navigation menu and timeline to navigate content) when hovering over content in the web player?

Could not find a specific setting, so I assume you could do some custom CSS? Any hints would be appreciated, thanks!

 

[Luke 39624]

Hi, can you show a screenshot example? I'm not sure what you're referring to. Thanks.

[EmblemJD 18]

Hi @Luke

I was refering to the navigation "shadow" effect (gradient?) that is supposed to highlight the playback buttons. I have attached an animation to show it better in front of a bright backdrop.

Please let me know the official term for this one, as I cannot figure it our

Thanks!

 

Edited September 23, 2022 by EmblemJD
"gradient"

[Luke 39624]

Ok there's no option for that so you'd have to use custom css. But that drop shadow also makes the text easier to read.

[arrbee99 1693]

Think this works -

/* Remove fade from video OSD when visible */
div.videoOsdBottom.flex.videoOsdBottom-video {background: transparent;}

Just in case, beware of unintended consequences...

[EmblemJD 18]

3 minutes ago, Luke said:

Ok there's no option for that so you'd have to use custom css. But that drop shadow also makes the text easier to read.

Agreed in general, just like to fiddle around with options Thanks for confirming, maybe someone in the community can let me how to tweak the CSS so I will leave it at that for now!

Have a nice weekend @Lukeand thanks as usual for the fast support!

EDIT: Looks like @arrbee99beat me to it lol - Thanks, will try it out!

Edited September 23, 2022 by EmblemJD
Answer provided while posting

[EmblemJD 18]

So @arrbee99that works like a charm for the lower portion, any chance you have the upper part of the OSD at hand too? I am fiddling around with the inspection tool, but given my HTML skills this would probably take me all weekend to figure out haha

[Happy2Play 9351]

22 minutes ago, EmblemJD said:

So @arrbee99that works like a charm for the lower portion, any chance you have the upper part of the OSD at hand too? I am fiddling around with the inspection tool, but given my HTML skills this would probably take me all weekend to figure out haha

You need to add the skinheader.

div.videoOsdBottom-video, div.skinHeader.semiTransparent::before {
    background: transparent;
}

 

[arrbee99 1693]

4 minutes ago, Happy2Play said:

You need to add the skinheader.

div.videoOsdBottom-video, div.skinHeader.semiTransparent::before {
    background: transparent;
}

 

Would there be a better version of my effort as well maybe  ? As I'm sure you've noticed, I'm totally the trial and error (not actual thinking) type...

[Happy2Play 9351]

3 minutes ago, arrbee99 said:

Would there be a better version of my effort as well maybe  ? As I'm sure you've noticed, I'm totally the trial and error (not actual thinking) type...

You can look at yours vs mine and see the better version.

div.videoOsdBottom.flex.videoOsdBottom-video

vs

div.videoOsdBottom-video

Both accomplish the same thing, but try to stay as close to original as possible.  Unless other elements are needed to target.

[arrbee99 1693]

Well yes, that is true.

Is there a really, really, really basic guide somewhere about how to do this kind of stuff in a slightly less (for me) hit and miss fashion ?

[Happy2Play 9351]

20 minutes ago, arrbee99 said:

Well yes, that is true.

Is there a really, really, really basic guide somewhere about how to do this kind of stuff in a slightly less (for me) hit and miss fashion ?

Probably but it is trial and error for me as I know nothing technical about html/css as I just figured it out looking in browser console and sometimes the actual server css file.

[shorage 0]

Just found this after searching forever. Doesnt seem to work for me.

Do i put this under the settings section?

 

[shorage 0]

I am trying to make it so the video does not get brighter or change at all when i hover over it with the mouse. The slider overlay is fine, but i dont want the video or black background to get brighter or change at all. Is this what was trying to be achieved in this post?

Thanks In Advance!

Frank

[shorage 0]

 

[Happy2Play 9351]

Not sure as I don't see that behavior using above code in FF 132 or 134.

[shorage 0]

I have "Use HDR" enabled in windows. Looks like some firefpx/hdr problem.

Temp fix is

 

[Asazen 6]

Sorry for posting it here, it's so I don't create a new post.

I don't know why the custom CCs doesn't work for me, I add code and it doesn't save, it just keeps an icon spinning and never ends...

 

https://prnt.sc/1r5CQuQzedDA

Edited December 30, 2024 by Asazen

[Happy2Play 9351]

14 hours ago, Asazen said:

Sorry for posting it here, it's so I don't create a new post.

I don't know why the custom CCs doesn't work for me, I add code and it doesn't save, it just keeps an icon spinning and never ends...

 

https://prnt.sc/1r5CQuQzedDA

Probably need to see the server log from when you did this.