1 files changed, 98 insertions, 36 deletions
diff --git a/style.css b/style.css
index 101d2052..26ae36a5 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,28 @@
+.container {
+    max-width: 100%;
+}
+
+#txt2img_token_counter {
+    height: 0px;
+}
+
+#img2img_token_counter {
+    height: 0px;
+}
+
+#sh{
+    min-width: 2em;
+    min-height: 2em;
+    max-width: 2em;
+    max-height: 2em;
+    flex-grow: 0;
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+    margin: 0.1em 0;
+    opacity: 0%;
+    cursor: default;	
+}
+
 .output-html p {margin: 0 0.5em;}
 
 .row > *,
@@ -9,9 +34,10 @@
 .performance {
     font-size: 0.85em;
     color: #444;
-    display: flex;
-    justify-content: space-between;
-    white-space: nowrap;
+}
+
+.performance p{
+    display: inline-block;
 }
 
 .performance .time {
@@ -19,8 +45,6 @@
 }
 
 .performance .vram {
-    margin-left: 0;
-    text-align: right;
 }
 
 #txt2img_generate, #img2img_generate {
@@ -90,7 +114,7 @@
     padding: 0.4em 0;
 }
 
-#roll, #paste{
+#roll, #paste, #style_create, #style_apply{
     min-width: 2em;
     min-height: 2em;
     max-width: 2em;
@@ -101,14 +125,14 @@
     margin: 0.1em 0;
 }
 
-#style_apply, #style_create, #interrogate{
-    margin: 0.75em 0.25em 0.25em 0.25em;
-    min-width: 5em;
+#interrogate_col{
+    min-width: 0 !important;
+    max-width: 8em !important;
 }
-
-#style_apply, #style_create, #deepbooru{
-    margin: 0.75em 0.25em 0.25em 0.25em;
-    min-width: 5em;
+#interrogate, #deepbooru{
+    margin: 0em 0.25em 0.9em 0.25em;
+    min-width: 8em;
+    max-width: 8em;
 }
 
 #style_pos_col, #style_neg_col{
@@ -142,18 +166,6 @@ button{
     align-self: stretch !important;
 }
 
-#prompt, #negative_prompt{
-    border: none !important;
-}
-#prompt textarea, #negative_prompt textarea{
-    border: none !important;
-}
-
-
-#img2maskimg .h-60{
-    height: 30rem;
-}
-
 .overflow-hidden, .gr-panel{
     overflow: visible !important;
 }
@@ -203,6 +215,8 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500,  label.block s
     border-top: 1px solid #eee;
     border-left: 1px solid #eee;
     border-right: 1px solid #eee;
+
+    z-index: 300;
 }
 
 .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span{
@@ -215,19 +229,13 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500,  label.block s
 #settings fieldset span.text-gray-500, #settings .gr-block.gr-box span.text-gray-500, #settings label.block span{
     position: relative;
     border: none;
+    margin-right: 8em;
 }
 
 .gr-panel div.flex-col div.justify-between label span{
     margin: 0;
 }
 
-.gr-panel div.flex-col div.justify-between div{
-  position: absolute;
-  top: -0.1em;
-  right: 1em;
-  padding: 0 0.5em;
-}
-
 #settings .gr-panel div.flex-col div.justify-between div{
     position: relative;
     z-index: 200;
@@ -300,6 +308,8 @@ input[type="range"]{
   height: 100%;
   overflow: auto;
   background-color: rgba(20, 20, 20, 0.95);
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .modalControls {
@@ -423,10 +433,6 @@ input[type="range"]{
     --tw-bg-opacity: 0 !important;
 }
 
-#img2img_image div.h-60{
-    height: 480px;
-}
-
 #context-menu{
     z-index:9999;
     position:absolute;
@@ -453,3 +459,59 @@ input[type="range"]{
 .context-menu-items a:hover{
     background: #a55000;
 }
+
+#quicksettings {
+    gap: 0.4em;
+}
+
+#quicksettings > div{
+    border: none;
+    background: none;
+    flex: unset;
+    gap: 0.5em;
+}
+
+#quicksettings > div > div{
+    max-width: 32em;
+    min-width: 24em;
+    padding: 0;
+}
+
+#refresh_sd_model_checkpoint, #refresh_sd_hypernetwork, #refresh_train_hypernetwork_name, #refresh_train_embedding_name, #refresh_localization{
+    max-width: 2.5em;
+    min-width: 2.5em;
+    height: 2.4em;
+}
+
+
+canvas[key="mask"] {
+    z-index: 12 !important;
+    filter: invert();
+    mix-blend-mode: multiply;
+    pointer-events: none;
+}
+
+
+/* gradio 3.4.1 stuff for editable scrollbar values */
+.gr-box > div > div > input.gr-text-input{
+    position: absolute;
+    right: 0.5em;
+    top: -0.6em;
+    z-index: 200;
+    width: 8em;
+}
+#quicksettings .gr-box > div > div > input.gr-text-input {
+  top: -1.12em;
+}
+
+.row.gr-compact{
+    overflow: visible;
+}
+
+#img2img_image, #img2img_image > .h-60, #img2img_image > .h-60 > div, #img2img_image > .h-60 > div > img,
+img2maskimg, #img2maskimg > .h-60, #img2maskimg > .h-60 > div, #img2maskimg > .h-60 > div > img
+{
+    height: 480px !important;
+    max-height: 480px !important;
+    min-height: 480px !important;
+}