Sharing my minimalist user.css UI

[2u843yt385592yjh]

Before

After

Make a new file called user.css and drop it with this contents in the root webui folder

/* Hide scroll arrows from number sliders */
input[type=number] { 
    -moz-appearance: textfield !important;
}

/* Set the button color */
#txt2img_generate {
	background:#3A3A3A !important;
}

/* Hide interrogate buttons */

#interrogate,#deepbooru {
	display:none;
}

/* Compact quicksettings */

#quicksettings {
	flex-wrap: nowrap;
	overflow: scroll;
	overflow-y: hidden;
	scrollbar-width: thin;
}

/* Style sliders */

input[type="range"].svelte-1cl284s {
	background:initial !important;
}

input[type=range]::-moz-range-track, input[type=range]::-moz-range-thumb {
  border: 2px solid black;
  border-radius: 0px;
  background: #6A6A6A;
  cursor: pointer;
}

/* Squaring borders */

input, button, label, textarea, div, span {
	border-color: unset !important;
	border-radius: unset !important;
	border: unset !important;
}

.block.gradio-accordion.input-accordion {
	border-color: unset !important;
	border-radius: unset !important;
	border: 1px solid #6A6A6A !important;
	color: #9A9A9A;
}

/* Dropdowns */

.options {
	scrollbar-width: thin;
}

[tommcg]

And if for some reason you don't like the orange buttons you can add this to your user.css to make them some other color:

/* Set the button color */
.dark {--primary-600: #2563eb;}
.dark {--primary-500: #3b82f6;}
.dark {--button-primary-border-color: #93c5fd;}

-T

[w-e-w]

https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/User-Interface-Customizations#gradio-themes
whill user.css does offer Advanced customization
there's also the option to customize the look by using Gradio themes setting, this is much more user friendly for the average user