Upload user.css

user.css

@@ -0,0 +1,161 @@
+#txt2img_gallery, #img2img_gallery {
+  /* Output height */
+  height: 680px;
+}
+
+#txt2img_results, #img2img_results {
+  /* Output width */
+  min-width: 50%;
+}
+
+#txt2img_gallery > .grid-wrap, #txt2img_gallery > .preview,
+#img2img_gallery > .grid-wrap, #img2img_gallery > .preview {
+  max-height: none;
+}
+
+#txt2img_extra_networks:not(div), #img2img_extra_networks:not(div) {
+  order: 1 !important;
+}
+
+#setting_show_progress_every_n_steps > div.wrap > div > label > span {
+  white-space: nowrap;
+  overflow: hidden;
+  width: 220px;
+  text-overflow: ellipsis;
+}
+
+/* Fixing Sampling steps covered up on phone */
+
+@media screen and (min-width: 420px) {
+  #sampler_selection_txt2img, #sampler_selection_img2img {
+    flex-direction: row;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  #sampler_selection_txt2img, #sampler_selection_img2img {
+    flex-direction: column;
+  }
+}
+
+#txt2img_script_container > * .block.padded, #img2img_script_container > * .block.padded {
+  padding: 10px !important;
+}
+
+div.compact {
+  gap: 5px !important;
+}
+
+.tab-nav.scroll-hide.svelte-1g805jl {
+  row-gap: 5px !important;
+}
+
+#txt2img_script_container > div, #img2img_script_container > div {
+  margin-bottom: 10px;
+}
+
+#tabs > .tab-nav > button.selected,
+#txt2img_extra_tabs > .tab-nav > button.selected,
+#img2img_extra_tabs > .tab-nav > button.selected,
+#mode_img2img > .tab-nav > button.selected {
+  color: var(--button-secondary-text-color);
+}
+
+.gradio-container {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+}
+
+span.svelte-s1r2yt {
+  margin-top: -3px;
+}
+
+.svelte-1ojmf70.primary {
+  top: -1px;
+  margin-right: 5px;
+}
+
+.svelte-1ojmf70.input-accordion-checkbox {
+  top: -1px;
+}
+
+.extra-network-pane .card {
+  width: 238px !important;
+  height: 334px !important;
+  font-size: 60% !important;
+  border-radius: 0;
+  transition: .3s ease;
+  text-align: center;
+}
+
+.extra-network-pane .card:hover {
+  box-shadow: 0 0 10px 3px #00d4ff;
+}
+
+.extra-network-pane .card .preview {
+  object-position: top;
+}
+
+.extra-network-pane .card .button-row {
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  visibility: visible;
+  transition: .2s ease;
+}
+
+.extra-network-pane .card:hover .button-row {
+  opacity: 1;
+}
+
+.extra-network-pane .card-button {
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.extra-network-pane .card .actions {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  border-bottom: 0;
+  box-shadow: 0 0 5px 1px #000;
+  background: transparent;
+  pointer-events: none;
+  transition: background-color .2s ease;
+}
+
+.extra-network-pane .card .actions > * {
+  pointer-events: auto;
+}
+
+.extra-network-pane .card:hover .actions {
+  background: rgb(0 0 0 / 60%);
+}
+
+.extra-network-pane .card .actions .name {
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--section-header-text-size);
+  font-weight: normal;
+  background: rgb(0 0 0 / 70%);
+  width: 100%;
+  padding: .3em;
+  bottom: 0;
+  border-radius: 0;
+  box-shadow: 0 0 5px 1px #000;
+}
+
+.extra-network-pane .card .actions .description {
+  display: none !important;
+}
+
+#quicksettings > #setting_sd_vae {
+  min-width: 210px !important;
+  max-width: 210px !important;
+}