Remove blur / vignette effect from playback navigation overlay?

[EmblemJD 17]

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 37022]

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

[EmblemJD 17]

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 37022]

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 1551]

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 17]

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 17]

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 8250]

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 1551]

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 8250]

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 1551]

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 8250]

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.