Merge pull request #14291 from AUTOMATIC1111/on-mouse-hover-show-hide-modal-image-viewer-icons

on mouse hover show / hide modal image viewer icons

modules/shared_gradio_themes.py

@@ -65,3 +65,7 @@ def reload_gradio_theme(theme_name=None):
         except Exception as e:
             errors.display(e, "changing gradio theme")
             shared.gradio_theme = gr.themes.Default(**default_theme_args)
+
+    # append additional values gradio_theme
+    shared.gradio_theme.sd_webui_modal_lightbox_toolbar_opacity = shared.opts.sd_webui_modal_lightbox_toolbar_opacity
+    shared.gradio_theme.sd_webui_modal_lightbox_icon_opacity = shared.opts.sd_webui_modal_lightbox_icon_opacity

modules/shared_options.py

@@ -273,6 +273,8 @@ options_templates.update(options_section(('ui_gallery', "Gallery", "ui"), {
     "js_modal_lightbox_initially_zoomed": OptionInfo(True, "Full page image viewer: show images zoomed in by default"),
     "js_modal_lightbox_gamepad": OptionInfo(False, "Full page image viewer: navigate with gamepad"),
     "js_modal_lightbox_gamepad_repeat": OptionInfo(250, "Full page image viewer: gamepad repeat period").info("in milliseconds"),
+    "sd_webui_modal_lightbox_icon_opacity": OptionInfo(1, "Full page image viewer: control icon unfocused opacity", gr.Slider, {"minimum": 0.0, "maximum": 1, "step": 0.01}, onchange=shared.reload_gradio_theme).info('for mouse only').needs_reload_ui(),
+    "sd_webui_modal_lightbox_toolbar_opacity": OptionInfo(0.9, "Full page image viewer: tool bar opacity", gr.Slider, {"minimum": 0.0, "maximum": 1, "step": 0.01}, onchange=shared.reload_gradio_theme).info('for mouse only').needs_reload_ui(),
     "gallery_height": OptionInfo("", "Gallery height", gr.Textbox).info("can be any valid CSS value, for example 768px or 20em").needs_reload_ui(),
 }))
 

style.css

@@ -679,7 +679,7 @@ table.popup-table .link{
     transition: 0.2s ease background-color;
 }
 .modalControls:hover {
-    background-color:rgba(0,0,0,0.9);
+    background-color:rgba(0,0,0, var(--sd-webui-modal-lightbox-toolbar-opacity));
 }
 .modalClose {
     margin-left: auto;
@@ -749,6 +749,22 @@ table.popup-table .link{
     display: none;
 }
 
+@media (pointer: fine) {
+    .modalPrev:hover,
+    .modalNext:hover,
+    .modalControls:hover ~ .modalPrev,
+    .modalControls:hover ~ .modalNext,
+    .modalControls:hover .cursor {
+        opacity: 1;
+    }
+
+    .modalPrev,
+    .modalNext,
+    .modalControls .cursor {
+        opacity: var(--sd-webui-modal-lightbox-icon-opacity);
+    }
+}
+
 /* context menu (ie for the generate button) */
 
 #context-menu{