/* 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');

/* 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;

}

.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;

}

.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;

}

/* 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);

}

.checkboxes-row{

margin-bottom: 0.5em;

margin-left: 0em;

}

.checkboxes-row > div{

flex: 0;

white-space: nowrap;

min-width: auto;

}

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;

}

/* 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.5em;

align-self: end;

}

.performance {

font-size: 0.85em;

color: #444;

}

.performance p{

display: inline-block;

}

.performance .time {

margin-right: 0;

}

.performance .vram {

}

#txt2img_generate, #img2img_generate {

min-height: 4.5em;

}

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

#txt2img_gallery, #img2img_gallery {

min-height: 768px;

}

}

#txt2img_gallery img, #img2img_gallery img, #extras_gallery img{

object-fit: scale-down;

}

#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;

}

#txtimg_hr_finalres{

min-height: 0 !important;

padding: .625rem .75rem;

margin-left: -0.75em

}

#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: 0 !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 button{

min-width: auto;

}

.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 {

width: fit-content;

align-items: end;

}

#quicksettings > div, #quicksettings > fieldset{

max-width: 24em;

min-width: 24em;

padding: 0;

border: none;

box-shadow: none;

background: none;

}

#settings{

display: block;

}

#settings > div{

border: none;

margin-left: 10em;

}

#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;

}

#settings_result{

height: 1.4em;

margin: 0 1.2em;

}

table.settings-value-table{

background: white;

border-collapse: collapse;

margin: 1em;

border: 4px solid white;

}

table.settings-value-table td{

padding: 0.4em;

border: 1px solid #ccc;

max-width: 36em;

}

.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;

}

/* live preview */

.progressDiv{

position: relative;

height: 20px;

background: #b4c0cc;

border-radius: 3px !important;

margin-bottom: -3px;

}

.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-color: white;

margin: -4px;

}

.dark .livePreview{

background-color: rgb(17 24 39 / var(--tw-bg-opacity));

}

.livePreview img{

position: absolute;

object-fit: contain;

width: 100%;

height: 100%;

}

/* 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;

background-color: rgba(20, 20, 20, 0.95);

}

.global-popup-close:before {

content: "×";

}

.global-popup-close{

position: fixed;

right: 0.25em;

top: 0;

cursor: pointer;

color: white;

font-size: 32pt;

}

.global-popup-inner{

display: inline-block;

margin: auto;

padding: 2em;

}

/* 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;

gap: 1em;

padding: 1em;

background-color: rgba(0,0,0,0.2);

}

.modalClose {

margin-left: auto;

}

.modalControls span{

color: white;

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 .date_added{

opacity: 0.85;

font-size: 90%;

}

/* 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: 725px;

overflow: scroll;

resize: vertical;

}

.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{

display: inline-block;

max-width: 16em;

margin: 0.3em;

align-self: center;

width: 16em;

}

#txt2img_extra_view, #img2img_extra_view {

width: auto;

}

.extra-network-cards .nocards, .extra-network-thumbs .nocards{

margin: 1.25em 0.5em 0.5em 0.5em;

}

.extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{

font-size: 1.5em;

margin-bottom: 1em;

}

.extra-network-cards .nocards li, .extra-network-thumbs .nocards li{

margin-left: 0.5em;

}

.extra-network-cards .card .metadata-button:before, .extra-network-thumbs .card .metadata-button:before{

content: "🛈";

}

.extra-network-cards .card .metadata-button, .extra-network-thumbs .card .metadata-button{

display: none;

position: absolute;

color: white;

right: 0;

}

.extra-network-cards .card .metadata-button {

text-shadow: 2px 2px 3px black;

padding: 0.25em;

font-size: 22pt;

width: 1.5em;

}

.extra-network-thumbs .card .metadata-button {

text-shadow: 1px 1px 2px black;

padding: 0;

font-size: 16pt;

width: 1em;

top: -0.25em;

}

.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{

display: inline-block;

}

.extra-network-cards .card .metadata-button:hover, .extra-network-thumbs .card .metadata-button:hover{

color: red;

}

.extra-network-thumbs {

display: flex;

flex-flow: row wrap;

gap: 10px;

}

.extra-network-thumbs .card {

height: 6em;

width: 6em;

cursor: pointer;

background-image: url('./file=html/card-no-preview.png');

background-size: cover;

background-position: center center;

position: relative;

}

.extra-network-thumbs .card .preview{

position: absolute;

object-fit: cover;

width: 100%;

height:100%;

}

.extra-network-thumbs .card:hover .additional a {

display: inline-block;

}

.extra-network-thumbs .actions .additional a {

background-image: url('./file=html/image-update.svg');

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

position: absolute;

top: 0;

left: 0;

width: 24px;

height: 24px;

display: none;

font-size: 0;

text-align: -9999;

}

.extra-network-thumbs .actions .name {

position: absolute;

bottom: 0;

font-size: 10px;

padding: 3px;

width: 100%;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

background: rgba(0,0,0,.5);

color: white;

}

.extra-network-thumbs .card:hover .actions .name {

white-space: normal;

word-break: break-all;

}

.extra-network-cards .card{

display: inline-block;

margin: 0.5em;

width: 16em;

height: 24em;

box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);

border-radius: 0.2em;

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:hover{

box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important;

}

.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%;

}