stable-diffusion-webui/style.css

1115 lines
21 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* temporary fix to load default gradio font in frontend instead of backend */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
/* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */
div.gradio-image button[aria-label="Edit"] {
display: none;
}
/* general gradio fixes */
:root, .dark{
--checkbox-label-gap: 0.25em 0.1em;
--section-header-text-size: 12pt;
--block-background-fill: transparent;
}
.block.padded:not(.gradio-accordion) {
padding: 0 !important;
}
div.gradio-container{
max-width: unset !important;
}
.hidden{
display: none;
}
.compact{
background: transparent !important;
padding: 0 !important;
}
div.form{
border-width: 0;
box-shadow: none;
background: transparent;
overflow: visible;
gap: 0.5em;
}
.block.gradio-dropdown,
.block.gradio-slider,
.block.gradio-checkbox,
.block.gradio-textbox,
.block.gradio-radio,
.block.gradio-checkboxgroup,
.block.gradio-number,
.block.gradio-colorpicker {
border-width: 0 !important;
box-shadow: none !important;
}
div.gradio-group, div.styler{
border-width: 0 !important;
background: none;
}
.gap.compact{
padding: 0;
gap: 0.2em 0;
}
div.compact{
gap: 1em;
}
.gradio-dropdown label span:not(.has-info),
.gradio-textbox label span:not(.has-info),
.gradio-number label span:not(.has-info)
{
margin-bottom: 0;
}
.gradio-dropdown ul.options{
z-index: 3000;
min-width: fit-content;
max-width: inherit;
white-space: nowrap;
}
@media (pointer:fine) {
.gradio-dropdown ul.options li.item {
padding: 0.05em 0;
}
}
.gradio-dropdown ul.options li.item.selected {
background-color: var(--neutral-100);
}
.dark .gradio-dropdown ul.options li.item.selected {
background-color: var(--neutral-900);
}
.gradio-dropdown div.wrap.wrap.wrap.wrap{
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.gradio-dropdown:not(.multiselect) .wrap-inner.wrap-inner.wrap-inner{
flex-wrap: unset;
}
.gradio-dropdown .single-select{
white-space: nowrap;
overflow: hidden;
}
.gradio-dropdown .token-remove.remove-all.remove-all{
display: none;
}
.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{
display: flex;
}
.gradio-slider input[type="number"]{
width: 6em;
}
.block.gradio-checkbox {
margin: 0.75em 1.5em 0 0;
}
.gradio-html div.wrap{
height: 100%;
}
div.gradio-html.min{
min-height: 0;
}
.block.gradio-gallery{
background: var(--input-background-fill);
}
.gradio-container .prose a, .gradio-container .prose a:visited{
color: unset;
text-decoration: none;
}
a{
font-weight: bold;
cursor: pointer;
}
/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */
div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{
overflow: visible !important;
}
/* align-items isn't enough and elements may overflow in Safari. */
.unequal-height {
align-content: flex-start;
}
/* general styled components */
.gradio-button.tool{
max-width: 2.2em;
min-width: 2.2em !important;
height: 2.4em;
align-self: end;
line-height: 1em;
border-radius: 0.5em;
}
.gradio-button.secondary-down{
background: var(--button-secondary-background-fill);
color: var(--button-secondary-text-color);
}
.gradio-button.secondary-down, .gradio-button.secondary-down:hover{
box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset;
}
.gradio-button.secondary-down:hover{
background: var(--button-secondary-background-fill-hover);
color: var(--button-secondary-text-color-hover);
}
button.custom-button{
border-radius: var(--button-large-radius);
padding: var(--button-large-padding);
font-weight: var(--button-large-text-weight);
border: var(--button-border-width) solid var(--button-secondary-border-color);
background: var(--button-secondary-background-fill);
color: var(--button-secondary-text-color);
font-size: var(--button-large-text-size);
display: inline-flex;
justify-content: center;
align-items: center;
transition: var(--button-transition);
box-shadow: var(--button-shadow);
text-align: center;
}
div.block.gradio-accordion {
border: 1px solid var(--block-border-color) !important;
border-radius: 8px !important;
margin: 2px 0;
padding: 8px 8px;
}
/* txt2img/img2img specific */
.block.token-counter{
position: absolute;
display: inline-block;
right: 1em;
min-width: 0 !important;
width: auto;
z-index: 100;
top: -0.75em;
}
.block.token-counter span{
background: var(--input-background-fill) !important;
box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
border: 2px solid rgba(192,192,192,0.4) !important;
border-radius: 0.4em;
}
.block.token-counter.error span{
box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075);
border: 2px solid rgba(255,0,0,0.4) !important;
}
.block.token-counter div{
display: inline;
}
.block.token-counter span{
padding: 0.1em 0.75em;
}
[id$=_subseed_show]{
min-width: auto !important;
flex-grow: 0 !important;
display: flex;
}
[id$=_subseed_show] label{
margin-bottom: 0.65em;
align-self: end;
}
[id$=_seed_extras] > div{
gap: 0.5em;
}
.html-log .comments{
padding-top: 0.5em;
}
.html-log .comments:empty{
padding-top: 0;
}
.html-log .performance {
font-size: 0.85em;
color: #444;
display: flex;
}
.html-log .performance p{
display: inline-block;
}
.html-log .performance p.time, .performance p.vram, .performance p.time abbr, .performance p.vram abbr {
margin-bottom: 0;
color: var(--block-title-text-color);
}
.html-log .performance p.time {
}
.html-log .performance p.vram {
margin-left: auto;
}
.html-log .performance .measurement{
color: var(--body-text-color);
font-weight: bold;
}
#txt2img_generate, #img2img_generate {
min-height: 4.5em;
}
@media screen and (min-width: 2500px) {
#txt2img_gallery, #img2img_gallery {
min-height: 768px;
}
}
.gradio-gallery .thumbnails img {
object-fit: scale-down !important;
}
#txt2img_actions_column, #img2img_actions_column {
gap: 0.5em;
}
#txt2img_tools, #img2img_tools{
gap: 0.4em;
}
.interrogate-col{
min-width: 0 !important;
max-width: fit-content;
gap: 0.5em;
}
.interrogate-col > button{
flex: 1;
}
.generate-box{
position: relative;
}
.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{
position: absolute;
width: 50%;
height: 100%;
display: none;
background: #b4c0cc;
}
.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover{
background: #c2cfdb;
}
.gradio-button.generate-box-interrupt{
left: 0;
border-radius: 0.5rem 0 0 0.5rem;
}
.gradio-button.generate-box-skip{
right: 0;
border-radius: 0 0.5rem 0.5rem 0;
}
#img2img_scale_resolution_preview.block{
display: flex;
align-items: end;
}
#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{
font-weight: bold;
}
#txtimg_hr_finalres div.pending, #img2img_scale_resolution_preview div.pending {
opacity: 1;
transition: opacity 0s;
}
.inactive{
opacity: 0.5;
}
[id$=_column_batch]{
min-width: min(13.5em, 100%) !important;
}
div.dimensions-tools{
min-width: 1.6em !important;
max-width: fit-content;
flex-direction: column;
place-content: center;
}
div#extras_scale_to_tab div.form{
flex-direction: row;
}
#img2img_sketch, #img2maskimg, #inpaint_sketch {
overflow: overlay !important;
resize: auto;
background: var(--panel-background-fill);
z-index: 5;
}
.image-buttons > .form{
justify-content: center;
}
.infotext {
overflow-wrap: break-word;
}
#img2img_column_batch{
align-self: end;
margin-bottom: 0.9em;
}
#img2img_unused_scale_by_slider{
visibility: hidden;
width: 0.5em;
max-width: 0.5em;
min-width: 0.5em;
}
/* settings */
#quicksettings {
align-items: end;
}
#quicksettings > div, #quicksettings > fieldset{
max-width: 36em;
width: fit-content;
flex: 0 1 fit-content;
padding: 0;
border: none;
box-shadow: none;
background: none;
}
#quicksettings > div.gradio-dropdown{
min-width: 24em !important;
}
#settings{
display: block;
}
#settings > div{
border: none;
margin-left: 10em;
padding: 0 var(--spacing-xl);
}
#settings > div.tab-nav{
float: left;
display: block;
margin-left: 0;
width: 10em;
}
#settings > div.tab-nav button{
display: block;
border: none;
text-align: left;
white-space: initial;
padding: 4px;
}
#settings_result{
height: 1.4em;
margin: 0 1.2em;
}
table.popup-table{
background: var(--body-background-fill);
color: var(--body-text-color);
border-collapse: collapse;
margin: 1em;
border: 4px solid var(--body-background-fill);
}
table.popup-table td{
padding: 0.4em;
border: 1px solid rgba(128, 128, 128, 0.5);
max-width: 36em;
}
table.popup-table .muted{
color: #aaa;
}
table.popup-table .link{
text-decoration: underline;
cursor: pointer;
font-weight: bold;
}
.ui-defaults-none{
color: #aaa !important;
}
#settings span{
color: var(--body-text-color);
}
#settings .gradio-textbox, #settings .gradio-slider, #settings .gradio-number, #settings .gradio-dropdown, #settings .gradio-checkboxgroup, #settings .gradio-radio{
margin-top: 0.75em;
}
#settings span .settings-comment {
display: inline
}
.settings-comment a{
text-decoration: underline;
}
.settings-comment .info{
opacity: 0.75;
}
#sysinfo_download a.sysinfo_big_link{
font-size: 24pt;
}
#sysinfo_download a{
text-decoration: underline;
}
#sysinfo_validity{
font-size: 18pt;
}
#settings .settings-info{
max-width: 48em;
border: 1px dotted #777;
margin: 0;
padding: 1em;
}
/* live preview */
.progressDiv{
position: absolute;
height: 20px;
background: #b4c0cc;
border-radius: 3px !important;
top: -20px;
width: 100%;
}
.progress-container{
position: relative;
}
[id$=_results].mobile{
margin-top: 28px;
}
.dark .progressDiv{
background: #424c5b;
}
.progressDiv .progress{
width: 0%;
height: 20px;
background: #0060df;
color: white;
font-weight: bold;
line-height: 20px;
padding: 0 8px 0 0;
text-align: right;
border-radius: 3px;
overflow: visible;
white-space: nowrap;
padding: 0 0.5em;
}
.livePreview{
position: absolute;
z-index: 300;
background: var(--background-fill-primary);
width: 100%;
height: 100%;
}
.livePreview img{
position: absolute;
object-fit: contain;
width: 100%;
height: calc(100% - 60px); /* to match gradio's height */
}
/* fullscreen popup (ie in Lora's (i) button) */
.popup-metadata{
color: black;
background: white;
display: inline-block;
padding: 1em;
white-space: pre-wrap;
}
.global-popup{
display: flex;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.global-popup *{
box-sizing: border-box;
}
.global-popup-close:before {
content: "×";
position: fixed;
right: 0.25em;
top: 0;
cursor: pointer;
color: white;
font-size: 32pt;
}
.global-popup-close{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(20, 20, 20, 0.95);
}
.global-popup-inner{
display: inline-block;
margin: auto;
padding: 2em;
z-index: 1001;
}
/* fullpage image viewer */
#lightboxModal{
display: none;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(20, 20, 20, 0.95);
user-select: none;
-webkit-user-select: none;
flex-direction: column;
}
.modalControls {
display: flex;
position: absolute;
right: 0px;
left: 0px;
gap: 1em;
padding: 1em;
background-color:rgba(0,0,0,0);
z-index: 1;
transition: 0.2s ease background-color;
}
.modalControls:hover {
background-color:rgba(0,0,0,0.9);
}
.modalClose {
margin-left: auto;
}
.modalControls span{
color: white;
text-shadow: 0px 0px 0.25em black;
font-size: 35px;
font-weight: bold;
cursor: pointer;
width: 1em;
}
.modalControls span:hover, .modalControls span:focus{
color: #999;
text-decoration: none;
}
#lightboxModal > img {
display: block;
margin: auto;
width: auto;
}
#lightboxModal > img.modalImageFullscreen{
object-fit: contain;
height: 100%;
width: 100%;
min-height: 0;
}
.modalPrev,
.modalNext {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.modalNext {
right: 0;
border-radius: 3px 0 0 3px;
}
.modalPrev:hover,
.modalNext:hover {
background-color: rgba(0, 0, 0, 0.8);
}
#imageARPreview {
position: absolute;
top: 0px;
left: 0px;
border: 2px solid red;
background: rgba(255, 0, 0, 0.3);
z-index: 900;
pointer-events: none;
display: none;
}
/* context menu (ie for the generate button) */
#context-menu{
z-index:9999;
position:absolute;
display:block;
padding:0px 0;
border:2px solid #a55000;
border-radius:8px;
box-shadow:1px 1px 2px #CE6400;
width: 200px;
}
.context-menu-items{
list-style: none;
margin: 0;
padding: 0;
}
.context-menu-items a{
display:block;
padding:5px;
cursor:pointer;
}
.context-menu-items a:hover{
background: #a55000;
}
/* extensions */
#tab_extensions table{
border-collapse: collapse;
}
#tab_extensions table td, #tab_extensions table th{
border: 1px solid #ccc;
padding: 0.25em 0.5em;
}
#tab_extensions table input[type="checkbox"]{
margin-right: 0.5em;
appearance: checkbox;
}
#tab_extensions button{
max-width: 16em;
}
#tab_extensions input[disabled="disabled"]{
opacity: 0.5;
}
.extension-tag{
font-weight: bold;
font-size: 95%;
}
#available_extensions .info{
margin: 0;
}
#available_extensions .info{
margin: 0.5em 0;
display: flex;
margin-top: auto;
opacity: 0.80;
font-size: 90%;
}
#available_extensions .date_added{
margin-right: auto;
display: inline-block;
}
#available_extensions .star_count{
margin-left: auto;
display: inline-block;
}
/* replace original footer with ours */
footer {
display: none !important;
}
#footer{
text-align: center;
}
#footer div{
display: inline-block;
}
#footer .versions{
font-size: 85%;
opacity: 0.85;
}
/* extra networks UI */
.extra-network-cards{
height: calc(100vh - 24rem);
overflow: clip scroll;
resize: vertical;
min-height: 52rem;
}
.extra-networks > div.tab-nav{
min-height: 3.4rem;
}
.extra-networks > div > [id *= '_extra_']{
margin: 0.3em;
}
.extra-network-subdirs{
padding: 0.2em 0.35em;
}
.extra-network-subdirs button{
margin: 0 0.15em;
}
.extra-networks .tab-nav .search,
.extra-networks .tab-nav .sort,
.extra-networks .tab-nav .show-dirs
{
margin: 0.3em;
align-self: center;
width: auto;
}
.extra-networks .tab-nav .search {
width: 16em;
max-width: 16em;
}
.extra-networks .tab-nav .sort {
width: 12em;
max-width: 12em;
}
#txt2img_extra_view, #img2img_extra_view {
width: auto;
}
.extra-network-cards .nocards{
margin: 1.25em 0.5em 0.5em 0.5em;
}
.extra-network-cards .nocards h1{
font-size: 1.5em;
margin-bottom: 1em;
}
.extra-network-cards .nocards li{
margin-left: 0.5em;
}
.extra-network-cards .card .button-row{
display: none;
position: absolute;
color: white;
right: 0;
z-index: 1
}
.extra-network-cards .card:hover .button-row{
display: flex;
}
.extra-network-cards .card .card-button{
color: white;
}
.extra-network-cards .card .metadata-button:before{
content: "🛈";
}
.extra-network-cards .card .edit-button:before{
content: "🛠";
}
.extra-network-cards .card .card-button {
text-shadow: 2px 2px 3px black;
padding: 0.25em 0.1em;
font-size: 200%;
width: 1.5em;
}
.extra-network-cards .card .card-button:hover{
color: red;
}
.standalone-card-preview.card .preview{
position: absolute;
object-fit: cover;
width: 100%;
height:100%;
}
.extra-network-cards .card, .standalone-card-preview.card{
display: inline-block;
margin: 0.5rem;
width: 16rem;
height: 24rem;
box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
border-radius: 0.2rem;
position: relative;
background-size: auto 100%;
background-position: center;
overflow: hidden;
cursor: pointer;
background-image: url('./file=html/card-no-preview.png')
}
.extra-network-cards .card:hover{
box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);
}
.extra-network-cards .card .actions .additional{
display: none;
}
.extra-network-cards .card .actions{
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5em;
background: rgba(0,0,0,0.5);
box-shadow: 0 0 0.25em 0.25em rgba(0,0,0,0.5);
text-shadow: 0 0 0.2em black;
}
.extra-network-cards .card .actions *{
color: white;
}
.extra-network-cards .card .actions .name{
font-size: 1.7em;
font-weight: bold;
line-break: anywhere;
}
.extra-network-cards .card .actions .description {
display: block;
max-height: 3em;
white-space: pre-wrap;
line-height: 1.1;
}
.extra-network-cards .card .actions .description:hover {
max-height: none;
}
.extra-network-cards .card .actions:hover .additional{
display: block;
}
.extra-network-cards .card ul{
margin: 0.25em 0 0.75em 0.25em;
cursor: unset;
}
.extra-network-cards .card ul a{
cursor: pointer;
}
.extra-network-cards .card ul a:hover{
color: red;
}
.extra-network-cards .card .preview{
position: absolute;
object-fit: cover;
width: 100%;
height:100%;
}
div.block.gradio-box.edit-user-metadata {
width: 56em;
background: var(--body-background-fill);
padding: 2em !important;
}
.edit-user-metadata .extra-network-name{
font-size: 18pt;
color: var(--body-text-color);
}
.edit-user-metadata .file-metadata{
color: var(--body-text-color);
}
.edit-user-metadata .file-metadata th{
text-align: left;
}
.edit-user-metadata .file-metadata th, .edit-user-metadata .file-metadata td{
padding: 0.3em 1em;
overflow-wrap: anywhere;
word-break: break-word;
}
.edit-user-metadata .wrap.translucent{
background: var(--body-background-fill);
}
.edit-user-metadata .gradio-highlightedtext span{
word-break: break-word;
}
.edit-user-metadata-buttons{
margin-top: 1.5em;
}
div.block.gradio-box.popup-dialog, .popup-dialog {
width: 56em;
background: var(--body-background-fill);
padding: 2em !important;
}
div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{
margin-top: 1em;
}
div.block.input-accordion{
}
.input-accordion-extra{
flex: 0 0 auto !important;
margin: 0 0.5em 0 auto;
}
div.accordions > div.input-accordion{
min-width: fit-content !important;
}
div.accordions > div.gradio-accordion .label-wrap span{
white-space: nowrap;
margin-right: 0.25em;
}
div.accordions{
gap: 0.5em;
}
div.accordions > div.input-accordion.input-accordion-open{
flex: 1 auto;
flex-flow: column;
}
/* sticky right hand columns */
#img2img_results, #txt2img_results, #extras_results {
position: sticky;
top: 0.5em;
}
body.resizing {
cursor: col-resize !important;
}
body.resizing * {
pointer-events: none !important;
}
body.resizing .resize-handle {
pointer-events: initial !important;
}
.resize-handle {
position: relative;
cursor: col-resize;
grid-column: 2 / 3;
min-width: 16px !important;
max-width: 16px !important;
height: 100%;
}
.resize-handle::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 7.5px;
border-left: 1px dashed var(--border-color-primary);
}