on mouse hover show / hide modal image viewer icons

[w-e-w]

Description

future request https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/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

https://github.com/AUTOMATIC1111/stable-diffusion-webui/assets/40751091/83e5e5e7-402a-4389-b36a-323b5a877226

Checklist:

• [x] I have read contributing wiki page
• [x] I have performed a self-review of my own code
• [x] My code follows the style guidelines
• [x] 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 👍