From 030011d6f2f0afc870000c13c678a11c9dc597a1 Mon Sep 17 00:00:00 2001
From: Alexander Brown <DrJKL0424@gmail.com>
Date: Sat, 27 May 2023 13:47:06 -0700
Subject: [PATCH 1/4] Style the controlnet controls

Mainly just aligns the radio buttons vertically.
---
 javascript/style.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/javascript/style.css b/javascript/style.css
index 5df2f53d7..dc9b07208 100644
--- a/javascript/style.css
+++ b/javascript/style.css
@@ -675,3 +675,24 @@ footer {
 
 #extras_generate, #extras_interrupt, #extras_skip { display: block !important; position: relative; height: 36px; }
 #extras_upscale { margin-top: 10px }
+
+#controlnet_control_type .controlnet_control_type_filter_group .wrap:last-of-type {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+#controlnet_preprocessor_model {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: 1fr max-content;
+}
+
+#controlnet_preprocessor_model button.gradio-button {
+    align-self: center;
+}
+
+.controlnet_resize_mode_radio .wrap:last-of-type,
+.controlnet_control_mode_radio .wrap:last-of-type {
+    flex-direction: column;
+}

From d818ed5ea419ccaf7b342fcf01092500c12aab0c Mon Sep 17 00:00:00 2001
From: Alexander Brown <DrJKL0424@gmail.com>
Date: Sun, 28 May 2023 11:26:12 -0700
Subject: [PATCH 2/4] classes, not ids

---
 javascript/style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/javascript/style.css b/javascript/style.css
index fab461254..523e50aba 100644
--- a/javascript/style.css
+++ b/javascript/style.css
@@ -676,19 +676,19 @@ footer {
 #extras_generate, #extras_interrupt, #extras_skip { display: block !important; position: relative; height: 36px; }
 #extras_upscale { margin-top: 10px }
 
-#controlnet_control_type .controlnet_control_type_filter_group .wrap:last-of-type {
+.controlnet_control_type .controlnet_control_type_filter_group .wrap:last-of-type {
     display: grid;
     grid-auto-flow: row;
     grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-#controlnet_preprocessor_model {
+.controlnet_preprocessor_model {
     display: grid;
     grid-auto-flow: row;
     grid-template-columns: 1fr max-content;
 }
 
-#controlnet_preprocessor_model button.gradio-button {
+.controlnet_preprocessor_model button.gradio-button {
     align-self: center;
 }
 

From 094fc50d4591c327b834eb0d8282a057c5e0b476 Mon Sep 17 00:00:00 2001
From: Alexander Brown <DrJKL0424@gmail.com>
Date: Sun, 28 May 2023 12:44:46 -0700
Subject: [PATCH 3/4] Add weight/steps styling

Increase specificity for preprocessor/model now that they're class selectors
---
 javascript/style.css | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/javascript/style.css b/javascript/style.css
index 523e50aba..b3f27cac9 100644
--- a/javascript/style.css
+++ b/javascript/style.css
@@ -682,19 +682,28 @@ footer {
     grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.controlnet_preprocessor_model {
+div.controlnet_preprocessor_model {
     display: grid;
     grid-auto-flow: row;
     grid-template-columns: 1fr max-content;
 }
 
-.controlnet_preprocessor_model button.gradio-button {
+div.controlnet_preprocessor_model button.gradio-button {
     align-self: center;
 }
 
-.controlnet_resize_mode_radio .wrap:last-of-type,
-.controlnet_control_mode_radio .wrap:last-of-type {
+fieldset.controlnet_resize_mode_radio .wrap:last-of-type,
+fieldset.controlnet_control_mode_radio .wrap:last-of-type {
     flex-direction: column;
 }
 
+div.controlnet_weight_steps > div.form {
+    display: grid;
+    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
+}
+
+div.controlnet_weight_steps .controlnet_control_weight_slider {
+    grid-column: 1 / 3;
+}
+
 #modelmerger_interp_description { margin-top: 1em; margin-bottom: 1em; }

From 813f6fdc23736a2ac90f01406fa100e224d0f9f8 Mon Sep 17 00:00:00 2001
From: Alexander Brown <DrJKL0424@gmail.com>
Date: Sun, 28 May 2023 15:49:11 -0700
Subject: [PATCH 4/4] Styling for the upper controls

---
 javascript/style.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/javascript/style.css b/javascript/style.css
index b3f27cac9..2f99669ea 100644
--- a/javascript/style.css
+++ b/javascript/style.css
@@ -703,7 +703,25 @@ div.controlnet_weight_steps > div.form {
 }
 
 div.controlnet_weight_steps .controlnet_control_weight_slider {
-    grid-column: 1 / 3;
+    grid-column: 1 / -1;
+}
+div.controlnet_image_controls {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+}
+
+div.controlnet_image_controls .controlnet_invert_warning {
+    grid-column: 1 / -1;
+}
+
+div.controlnet_image_controls button {
+    justify-self: center;
+}
+
+div.controlnet_main_options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: row;
 }
 
 #modelmerger_interp_description { margin-top: 1em; margin-bottom: 1em; }