on mouse hover show / hide modal image viewer icons

[w-e-w]

Description

future request #14288 Fullscreen Preview control fading/disable.

• for mouse usere, show and hide fullscreen image viewer icon on mouse hover

• this CSS is only in effect when using Mouse, so mobile are not affected

personally I think it looks better when it's automatically hidden
but ideally they should be an option to toggle this behavior, currently I haven't figured out how to do so

demo video

2023-12-13.01_59_20_248.chrome.mp4

Checklist:

• I have read contributing wiki page
• I have performed a self-review of my own code
• My code follows the style guidelines
• My code passes tests

[jefferysanders]

Perfect thanks!

[AUTOMATIC1111]

For a user who doesn't know about those elements at top it could be difficult to find out about them if they are invisible. Maybe a setting toggle?

[w-e-w]

I implemented a strange method of making it optional
and also add an option to configure the opacity of the entire top toolbar
I couldn't find a more elegant method of making a certain css rule optional
any advice?

[akx]

I implemented a strange method

I think a CSS variable is absolutely fine for this 👍