From a70ae917ea86270f365f1347674980e4e7b0bfb2 Mon Sep 17 00:00:00 2001
From: AUTOMATIC <16777216c@gmail.com>
Date: Mon, 27 Mar 2023 08:05:55 +0300
Subject: [PATCH] update  button pressed down style for #8569

---
 modules/ui_extra_networks.py |  2 +-
 style.css                    | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 2a3b8553..7f73131e 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -252,7 +252,7 @@ def create_ui(container, button, tabname):
 
     def toggle_visibility(is_visible):
         is_visible = not is_visible
-        return is_visible, gr.update(visible=is_visible), gr.update(variant=("primary" if is_visible else "tool"))
+        return is_visible, gr.update(visible=is_visible), gr.update(variant=("secondary-down" if is_visible else "secondary"))
 
     state_visible = gr.State(value=False)
     button.click(fn=toggle_visibility, inputs=[state_visible], outputs=[state_visible, container, button])
diff --git a/style.css b/style.css
index 6a6f73d7..7a979f22 100644
--- a/style.css
+++ b/style.css
@@ -138,6 +138,18 @@ div.gradio-html.min{
     border-radius: 0.5em;
 }
 
+.gradio-button.secondary-down{
+    background: var(--button-secondary-background-fill);
+    color: var(--button-secondary-text-color);
+}
+.gradio-button.secondary-down, .gradio-button.secondary-down:hover{
+    box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset;
+}
+.gradio-button.secondary-down:hover{
+    background: var(--button-secondary-background-fill-hover);
+    color: var(--button-secondary-text-color-hover);
+}
+
 .checkboxes-row{
     margin-bottom: 0.5em;
     margin-left: 0em;
@@ -810,10 +822,3 @@ footer {
 .extra-network-cards .card ul a:hover{
     color: red;
 }
-
-button[id$='_extra_networks'] {
-    max-width: 2.2em;
-    min-width: 2.2em !important;
-    height: 2.4em;
-    line-height: 1em !important;
-}