user.css

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
/*! End of modern-normalize */

:root, * , quickcss_target {

  /* Color palette --------------------------------------------------------- */

  --theme_color_green: #73C991; /* e.g. OK */
  --theme_color_red: #DB6A5E; /* e.g. error/warning */
  --theme_color_blue: #1475E2; /* e.g. notice, accent */

  /* Inputs */
  --theme_color_text_highlight: #EEEEEE;
  --theme_color_text_main: #CCCCCC; /* main text */
  --theme_color_text_main_greyed_out: #8C8C8C; /* e.g. disabled, passive, unavailable */
  --theme_color_text_low_importance: #666666; /* e.g. footer */
  --theme_color_input_highlight_background: var(--theme_color_blue);
  --theme_color_input_background: #3C3C3C;

  /* Borders */
  --theme_color_border_main: #474747;
  --theme_color_border_low_visibility: #414141; /* use against darkest #1E1E1E background*/

  /* Panels */
  --theme_color_global_background: #1E1E1E;
  --theme_color_panel_background: #252526;

  /* Mapping palette colors to interface types ----------------------------- */

  --background_color: var(--theme_color_global_background);

  --input_text_color: var(--theme_color_text_main); /* text and numbers in input fields, dropdown selected text */
  --input_focus_color: var(--theme_color_text_highlight); /* text when hovered, dropdown item text*/
  --input_focus_background_color: var(--theme_color_panel_background); /* background color when hovering input fields and dropdown menus */

  /* Number input field, the ones accompanying sliders with the up/down arrow buttons */
  --input_number_border_color: var(--theme_color_border_main);
  --input_number_border_hover_color: var(--theme_color_blue);

  /* Secondary buttons */
  --button_border_color: var(--theme_color_border_main);
  --button_background_color: var(--theme_color_panel_background);
  --button_text_color: var(--theme_color_text_main_greyed_out);
  --button_background_hover_color: var(--theme_color_input_highlight_background);

  /* Slider */
  --slider_lower_fill_color: var(--theme_color_blue);
  --slider_track_background_hover_color: var(--theme_color_input_highlight_background);
  --slider_grabbed_knob_background_color: var(--theme_color_blue);

  /* Progress bar shown when generating images */
  --progress_bar_color: var(--theme_color_green);
  --progress_bar_text_color: var(--theme_color_text_highlight);

  /* Gallery */
  --image_border_color: var(--theme_color_border_low_visibility);
  --gallery_panel_background_color: var(--theme_color_global_background);

  --font_family: "Segoe UI", "Source Sans Pro", Arial, sans-serif; /* Webui provides Source Sans Pro */
  --left-column-width: 800px;
  --border_radius: 0;
  --favicon: url('file=favicon.svg');
}


/* Quickcss extension */
#hidden{
  visibility: hidden;
}

#quickcss_colorpicker {
  max-width: 10vw;
}

input[type=color] {
  width: 100%;
}

/* Gradio app font */
.gradio-container {
  font-family: var(--font_family);
}

/* Hide Gradio text, progress bar and animations */
* .wrap.m-12,
* .wrap.z-20,
* .meta-text-center,
* .meta-text,
* .wrap.m-12 svg,
* .wrap.z-20 svg,
* .wrap.svelte-1w9161c {
  display:none;
  inset: 100%;
}

/* Show loading text on SD models selector */
#setting_sd_model_checkpoint .wrap.svelte-1w9161c {
  inset: 0;
  display: flex;
  justify-content: center;
  color: var(--input_text_color);
}

/* Gradio 3.8 adds opacity to progress bar which makes it blink; disable it here */
.dark .transition.opacity-20 {
  opacity: 1;
}

/* Remove rounded borders from all UI components */
.gr-compact .gr-box {
  border-radius: 0 !important;
}

/* Main UI tab, most of the UI is inside a tab */
.tabitem {
  border: 0;
  padding: 20px 0;
}

/* Tab buttons */
div.tabs > div:first-of-type button {
  font-family: var(--font_family);
  text-transform: capitalize;
  border-bottom: 2px solid var(--background_color);
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

div.tabs > div:first-of-type button:hover {
  text-shadow: 0px 0px 1px var(--theme_color_text_highlight);
  border-bottom: 2px solid var(--theme_color_text_highlight);
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

/* Remove horizontal ruler below tab buttons */
div.tabs > div.border-b-2 {
  border: 0;
}

/* Active tab button */
div.tabs > div.border-b-2 > button.bg-white {
  text-shadow: 0px 0px 1px var(--theme_color_text_highlight);
  border: 2px solid var(--input_focus_background_color) !important;
  border-bottom: 2px solid var(--theme_color_text_highlight) !important;
  background-color: var(--input_focus_background_color);
}

.dark .border,
.border-gray-200,
.dark\:border-gray-700 {
  border-color: var(--theme_color_border_main) !important;
}

/* UI border radius */
.gradio-container * {
  border-radius: var(--border_radius) !important;
}

/* Selected text colors */
*::selection {
  color: var(--theme_color_text_low_importance) !important;
  background-color: var(--input_focus_color) !important;
}

/* App Colors */
.dark,
.dark\:bg-gray-900,
.dark .dark\:text-gray-200,
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900,
.dark .text-gray-500,
.dark .\!text-gray-700,
.dark .\!text-gray-800 {
  color: var(--theme_color_text_main);
}

/* Input fields (text input, dropdowns) */

/* Make text input more readable by not having monitor-wide lines */
#txt2img_prompt_container,
#img2img_prompt_container {
  max-width: 1100px;
}

/* Put positive and negative prompts right next to each other */
#txt2img_prompt,
#img2img_prompt {
  padding-top: 0; /* Remove top padding to align positive prompt with generate button*/
  padding-bottom: 0;
  z-index: 1;
  margin-bottom: -1px;
}

#txt2img_neg_prompt,
#img2img_neg_prompt {
  padding-top: 0;
  padding-bottom: 0;
}


.dark .gr-input {
  font-family: var(--font_family);
  color: var(--input_text_color);
  transition: all 0.1s ease-in-out;
  border-color: var(--theme_color_border_main);
}

.dark .gr-input:focus,
.dark .gr-input:hover  {
  color: var(--input_focus_color);
  background-color: var(--input_focus_background_color);
  border-color: var(--input_focus_color);
}

.dark .gr-input::selection {
  color: var(--input_focus_color);
  background-color: var(--background_color);
}

/* Token counters in prompt text fields ------------------------------------ */

.token-counter {
  right: 1em;
  bottom: 0; /* Move tokens from top-right to bottom-right */
}

#txt2img_token_counter > span,
#img2img_token_counter > span,
#txt2img_negative_token_counter > span,
#img2img_negative_token_counter > span {
  border: none; /*1px solid var(--theme_color_border_low_visibility);*/
  font-size: 85%;
  color: var(--theme_color_text_low_importance);
  background: transparent; /*var(--input_focus_background_color);*/
}

/* "Loading..." text over the token counter if you update the prompt quickly
and hit generate. This info seems totally pointless*/
#txt2img_token_counter > div.inset-x-0,
#img2img_token_counter > div.inset-x-0,
#txt2img_negative_token_counter > div.inset-x-0,
#img2img_negative_token_counter > div.inset-x-0 {
  display: none;
}

/* Background colors ------------------------------------------------------- */
.dark,
.dark .gr-button,
.dark .bg-white,
.dark .gr-panel,
.dark .gr-button-lg,
.dark .gr-box,
.dark .gr-button-tool,
.dark .dark\:bg-gray-700,
.dark .dark\:bg-gray-950,
.dark .bg-gray-700,
.dark .bg-gray-950,
.dark fieldset span.text-gray-500,
.dark .gr-block.gr-box span.text-gray-500,
.dark label.block span,
#quicksettings,
#tabs .tabitem .gr-compact {
  background-color: var(--background_color);
}

/* Small text labels on top-left of dropdown & slider inputs */
.dark .gr-block.gr-box span.text-gray-500 {
  border: 0;
  padding: 0px;
  margin: 0;
  background: transparent;
}

.dark .dark\:bg-gray-200,
.dark .bg-gray-200 {
  background-color: transparent !important;
}

/* Gallery (the area where resulting images appear) ------------------------ */

[id$="_gallery"].gr-block.gr-box {
  border-radius: var(--border_radius) !important;
  border-color: var(--theme_color_border_main) !important;
  background: var(--gallery_panel_background_color);
  transition: all 1s ease-in-out;
  box-shadow: 0 0 0 0.2em transparent;
}

/* Image gallery area during image generation with live preview */
.dark .livePreview {
  /* Note: If you put transparent here, the previous images will show under the live preview images*/
  background-color: var(--gallery_panel_background_color);
  margin: 0px; /* This fixes misaligned curtain that pops out of the gallery panel*/
}

.dark .group {
  max-height: 81vh;
}

[id$="_gallery"] svg {
  display: none;
}

.dark .gr-input-label,
.dark .gr-button {
  background-image: none;
  transition: all 0.3s ease-in-out;
}

/* This is at least the small X button on the top right to close a zoomed image (which is pretty hard to see) */
.backdrop-blur .modify-upload .hover\:shadow-xl{
  border: 2px solid var(--theme_color_blue);
  background: var(--button_background_color);
 }

 /* This is the small X symbol in the button */
 .dark .backdrop-blur .modify-upload svg{
  display: block !important;
  stroke: #fff;
}

/* Gallery items ----------------------------------------------------------- */
#gallery_item {
  border-width: 2px;
}

/* Image border color */
/* TODO: This looks like this might break when Gradio is updated! */
.dark .gallery-item.svelte-1g9btlg.svelte-1g9btlg {
  --tw-ring-color: var(--image_border_color) !important;
}

/* This is the curtain that hides other images when viewing a specific image.
This also affect background of tiny Source label in file upload area. */
.dark .dark\:bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: var(--theme_color_panel_background);
}

/* Gallery items fix (No idea what this fixes exactly) */
#img2img_image,
#img2img_image > .h-60,
#img2img_image > .h-60 > div,
#img2img_image > .h-60 > div > img,
#img2img_sketch,
#img2img_sketch > .h-60,
#img2img_sketch > .h-60 > div,
#img2img_sketch > .h-60 > div > img,
#img2maskimg, #img2maskimg > .h-60,
#img2maskimg > .h-60 > div,
#img2maskimg > .h-60 > div > img,
#inpaint_sketch, #inpaint_sketch > .h-60,
#inpaint_sketch > .h-60 > div,
#inpaint_sketch > .h-60 > div > img {
  height: 550px;
  max-height: 100% !important;
  min-height: 90% !important;
}

/* Hide button "Open images output directory" as it opens the file explorer on
the server, and does not work with multiple devices. Open file explorer manually. */
#open_folder_txt2img,
#open_folder_extras,
#open_folder_img2img {
  display: none;
}

/* Prevent buttons from overly stretching */
#image_buttons_txt2img,
#image_buttons_img2img,
#image_buttons_extras {
  max-width: 800px;
}

/* Checkboxes -------------------------------------------------------------- */

.dark .gr-check-radio {
  background-color: var(--theme_color_panel_background);
  border-color: var(--theme_color_border_main);
}

.dark .gr-check-radio:checked {
  background-color: var(--theme_color_blue);
}

/* Text color of checked checkbox */
input[type=checkbox]:checked + span, input[type=radio]:checked + span {
  color: var(--theme_color_text_main);
}

/* Radio button hover */
.dark .gr-input-label:hover {
  border-color: var(--theme_color_blue);;
  color: var(--theme_color_text_main);
  box-shadow: 0 0 0 0.5em transparent;
}


/* Progress bar ------------------------------------------------------------ */
.dark .progressDiv {
  position: absolute;
  width: 100%;
  height: 22px;
  background: transparent;
  /*border-color: transparent;
  border-width: 0.5px;*/
  border-radius: var(--border_radius) !important;
  cursor: progress;
  top: -21px;
}

.dark .progressDiv .progress {
  font-family: var(--font_family);
  background: var(--progress_bar_color);
  color: var(--progress_bar_text_color);
  font-weight: bold;
  line-height: 18px;
  text-align: right;
  border-radius: var(--border_radius) !important;
  cursor: progress;
}

/* Progress bar position */
#txt2img_progressbar, #img2img_progressbar, #ti_progressbar {
  position: absolute;
  z-index: 1000;
  right: 0;
  padding-left: 5px;
  padding-right: 5px;
  display: block;
  cursor: progress;
}

#txt2img_progress_row, #img2img_progress_row {
  margin-bottom: 10px;
  margin-top: -18px;
  flex-direction:column;
  gap: 0;
}

 #txt2img_progress_row > div {
  min-width: calc(var(--left-column-width));
  max-width: var(--left-column-width);
}

/* txt2img left settings panel */
#txt2img_settings {
  /*border: 1px solid var(--theme_color_border_low_visibility);*/
  padding: 20px 10px;
  min-width: var(--left-column-width);
  max-width: var(--left-column-width);
}

#txt2img_settings > div.row {
  margin-bottom: 40px;
}

#txt2img_results {
  padding: 0;
}

/* img2img left settings panel */
#img2img_settings {
  border: 1px solid var(--theme_color_border_low_visibility);
  min-width: var(--left-column-width);
  max-width: var(--left-column-width);
}

.dark .overflow-hidden .flex .flex-col .relative col .gap-4 {
  min-width: var(--left-column-width);
  max-width: var(--left-column-width);
}

/* Extension: Dynamic Prompts */
#dynamic-prompting {
  margin-bottom: 20px; /* Fix plugin from overflowing to script dropdown's label */
}

/* Buttons ----------------------------------------------------------------- */

.gr-button {
  border-radius: 4px !important;
}

/* Call-to-action button --------------------------------------------------- */

#txt2img_generate,
#img2img_generate {
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: 20px;
  min-height: 3.5em;
  transition: all 0.3s ease-in-out;
}

#txt2img_interrupt,
#img2img_interrupt,
#txt2img_skip,
#img2img_skip {
  background: var(--background_color);
  border-color: var(--theme_color_red);
  border-width: 2px;
  color: var(--theme_color_red);
  z-index: 11;
  transition: all 0.3s ease-in-out;
}

#txt2img_interrupt,
#img2img_interrupt {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#txt2img_skip,
#img2img_skip {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

#txt2img_interrupt:hover,
#img2img_interrupt:hover,
#txt2img_skip:hover,
#img2img_skip:hover {
  z-index: 11;
  box-shadow: inset 0 0 10px var(--theme_color_red);;
}

#txt2img_actions_column,
#img2img_actions_column {
  max-width: 900px;
  max-height: 80px;
  flex-direction: row; /* Flip main button, little buttons and style dropdown from rows to columns */
  align-items: start;
  margin-top: 0;
  gap: 20px;
}

#txt2img_tools {
  justify-content: center; /* Center little buttons between its neighboring columns */
}

.dark .gr-button-primary,
#modelmerger_merge,
#deforum_generate,
#depthmap_generate,
#vxa_gen_btn {
  font-family: var(--font_family);
  font-variant: small-caps;
  border-color: var(--theme_color_green);
  border-width: 4px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--theme_color_green);
  z-index: 10;
  transition: all 0.3s ease-in-out;
}

.dark .gr-button-primary:hover,
#modelmerger_merge:hover,
#deforum_generate:hover,
#depthmap_generate:hover,
#vxa_gen_btn:hover {
  border-color: var(--theme_color_green);
  border-width: 4px;
  background-color: var(--theme_color_green);
  color: var(--background_color);
}

/* Main generate button flash animation on click */
.dark .gr-button-primary:active {
  animation: anim_pulse_green 0.2s;
  -webkit-animation: anim_pulse_green 0.2s;
  -moz-animation: anim_pulse_green 0.2s;
  -o-animation: anim_pulse_green 0.2s;
  box-shadow: 0 0 0 1.0em transparent;
}

#txt2img_interrupt:active,
#img2img_interrupt:active,
#txt2img_skip:active,
#img2img_skip:active {
  animation: anim_pulse_red 0.2s;
  -webkit-animation: anim_pulse_red 0.2s;
  -moz-animation: anim_pulse_red 0.2s;
  -o-animation: anim_pulse_red 0.2s;
  box-shadow: 0 0 0 1.0em transparent;
}

/* Context/Right-click menu, appears at least when right-clicking Generate button */
#context-menu {
  font-family: var(--font_family);
  border-color: var(--theme_color_border_main);
  box-shadow: none;
}

/* Secondary buttons ------------------------------------------------------- */
/* (Open, Save, Send to img2img, Random seed, Previous seed, Save style etc.)*/
.dark .gr-button-secondary,
.dark .gr-button-tool {
  font-family: var(--font_family);
  border-color: var(--button_border_color);
  background: var(--button_background_color);
  color: var(--button_text_color);
  border-width: 1px;
  transition: all 0.3s ease-in-out;
}

/* Secondary button on hover */
.dark .gr-button-secondary:hover,
.dark .gr-button-tool:hover {
  border-color: var(--button_background_hover_color);
  border-width: 1px;
  background-color: var(--button_background_hover_color);
  color: var(--theme_color_text_highlight);
}

.dark .gr-button-secondary:active,
.dark .gr-button-tool:active {
  animation: anim_pulse_blue 0.2s;
  -webkit-animation: anim_pulse_blue 0.2s;
  -moz-animation: anim_pulse_blue 0.2s;
  -o-animation: anim_pulse_blue 0.2s;
  box-shadow: 0 0 0 1.0em transparent;
}

/* Number input field, the ones accompanying sliders with the up/down arrow buttons */
.dark .gr-box > div > div > input.gr-text-input {
  position: absolute;
  right: 1.1em;
  top: -0.9em;
  z-index: 200;
  width: 4em;
  padding: 0;
  text-align: right;
  border-color: var(--input_number_border_color);
}

.dark .gr-box > div > div > input.gr-text-input:hover,
.dark .gr-box > div > div > input.gr-text-input:focus {
  border-color: var(--input_number_border_hover_color);
}

/* Quicksettings Range*/
#quicksettings [id^="setting_"] {
  display: grid;
}

/* Gr-block gap and padding */
.gr-block.gr-box {
  row-gap: 1.1ch;
  padding: 1.1em;
}

/* Sliders ----------------------------------------------------------------- */

/* Override default slider */
.gradio-container input[type=range] {
  -webkit-appearance: none;
  outline: none;
  opacity: 1.0;
  background: transparent;
  margin: auto;
  position: relative;
  overflow: hidden;
  height: 10px;
  width: 100%;
  cursor: pointer;
  border-radius: 0;
}
.gradio-container input[type=range]:focus {
  outline: none;
}

/* Slider track (narrow track where the "knob" slides along */
.gradio-container input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 0;
  background: var(--theme_color_input_background);
}
.gradio-container input[type=range]:hover::-webkit-slider-runnable-track {
  background: var(--slider_lower_fill_color);
}

/* THUMB SLIDER */
.gradio-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  box-shadow: -2000px 0 0 2000px var(--slider_lower_fill_color); /* Hacky way to color-fill the bar */
  border: none;
  background: var(--input_focus_color);
  height: 20px;
  width: 10px;
  border-radius: 0;
  margin-top: -10px;
}

.gradio-container input[type=range]:active::-webkit-slider-thumb {
  background: var(--slider_grabbed_knob_background_color);
  box-shadow: -2000px 0 0 2000px var(--input_focus_color); /* Hacky way to color-fill the bar */
}

/* Hide extra horizontal ruler between the footer and the save/send buttons */
#txt2img_results > div.flex > div.svelte-10ogue4 > div.flex {
  border: 0 !important;
}

/* Footer */
#footer {
  padding-top: 50px;
  color: var(--theme_color_text_low_importance);
  opacity: 0.7;
}


/* Text description of generated photos, basically recap of the parameters you just used */
#html_info_txt2img,
#html_info_x_extras,
#html_info_img2img,
#html_log_txt2img,
#html_log_img2img {
  color: var(--theme_color_text_low_importance);
  margin-bottom: 10px;
}

/* Display-size tweaks ----------------------------------------------------- */


@media screen and (min-width: 2500px) {

  /* Add small side margins to whole WebUI*/
  div.gradio-container > div.w-full {
    margin: 0 auto !important;
    width: 95% !important;
  }

  /* Increase gallery height so that two rows of images fit without scrolling */
  #txt2img_gallery, #img2img_gallery {
    min-height: 1024px;
  }

  #txt2img_gallery > div.overflow-y-auto {
    max-height: 88vh;
  }
}

/* Animations -------------------------------------------------------------- */
@keyframes anim_pulse_green {
  0% { box-shadow: 0 0 0 0 var(--theme_color_green) }
}

@keyframes anim_pulse_blue {
  0% { box-shadow: 0 0 0 0 var(--theme_color_blue) }
}

@keyframes anim_pulse_red {
  0% { box-shadow: 0 0 0 0 var(--theme_color_red) }
}