Better SDWebUI

user.css

:root {
    --generate-box-width: 12em;
}

/* move generate button */
.generate-box {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 2em !important;
    width: var(--generate-box-width) !important;
    transform: rotate(-90deg) translateY(calc(-1 * var(--generate-box-width)));
    transform-origin: 100% 0%;
    filter: drop-shadow(0 0 0.2em gray) !important;
    line-height: 0;
    opacity: 0.8;
    z-index: var(--layer-top) !important;
}
#txt2img_generate,
#img2img_generate {
    min-height: unset !important;
}
.generate-box-interrupt,
.generate-box-skip,
.generate-box-interrupting {
    min-width: 3em !important;
}

/* move progress bar */
.progressDiv {
    position: fixed !important;
    top: 0 !important;
    left: 2em !important;
    right: unset !important;
    width: var(--generate-box-width) !important;
    transform: rotate(-90deg) translateY(calc(-1 * var(--generate-box-width)));
    transform-origin: 100% 0%;
    z-index: var(--layer-top) !important;
}

/* move quick settings */
#quicksettings span[data-testid="block-info"] {
    z-index: 0;
}
#quicksettings {
    transition: transform 0.3s ease;
    transform: translateX(calc(-100% + 2em));
    overflow: visible;
    position: fixed;
    left: 0;
    top: calc(var(--generate-box-width) + 1em);
    z-index: var(--layer-top);
    background: rgb(from var(--button-primary-background-fill) r g b / 0.6) !important;
    border: solid 0.4em var(--button-primary-border-color);
    padding: 1em !important;
    max-width: 50%;
}
#quicksettings:hover,
#quicksettings:focus-within {
    transition: transform 0.3s ease 0.5s;
    transform: translateX(0);
}
#quicksettings ul.options[role="listbox"] {
    position: absolute !important;
    top: 100% !important;
}

/* larger prompt font */
#txt2img_prompt_container textarea,
#img2img_prompt_container textarea {
    font-size: larger !important;
}

/* thinner nav bar */
.tab-nav {
    min-height: unset !important;
}

/* collapsible top nav bar */
.tabs.gradio-tabs:not(.extra-networks) > .tab-nav {
    overflow-y: hidden;
    height: 0.5em !important;
    transition: height 0.3s ease;
}
.tabs.gradio-tabs:not(.extra-networks) > .tab-nav:hover {
    height: 3em !important;
}

/* thinner page margins */
.gradio-container {
    padding: var(--size-1) var(--size-1) var(--size-1) var(--size-8) !important
}