stable-diffusion-webui/style.css
AUTOMATIC 91bfc71261 A big rework, just what you were secretly hoping for!
SD upscale moved to scripts
Batch processing script removed
Batch processing added to main img2img and now works with scripts
img2img page UI reworked to use tabs
2022-09-22 12:11:48 +03:00

364 lines
6.2 KiB
CSS

.output-html p {margin: 0 0.5em;}
.performance {
font-size: 0.85em;
color: #444;
display: flex;
justify-content: space-between;
white-space: nowrap;
}
.performance .time {
margin-right: 0;
}
.performance .vram {
margin-left: 0;
text-align: right;
}
#generate{
min-height: 4.5em;
}
@media screen and (min-width: 2500px) {
#txt2img_gallery, #img2img_gallery {
min-height: 768px;
}
}
#txt2img_gallery img, #img2img_gallery img{
object-fit: scale-down;
}
.justify-center.overflow-x-scroll {
justify-content: left;
}
.justify-center.overflow-x-scroll button:first-of-type {
margin-left: auto;
}
.justify-center.overflow-x-scroll button:last-of-type {
margin-right: auto;
}
#random_seed, #random_subseed, #reuse_seed, #reuse_subseed{
min-width: auto;
flex-grow: 0;
padding-left: 0.25em;
padding-right: 0.25em;
}
#seed_row, #subseed_row{
gap: 0.5rem;
}
#subseed_show_box{
min-width: auto;
flex-grow: 0;
}
#subseed_show_box > div{
border: 0;
height: 100%;
}
#subseed_show{
min-width: auto;
flex-grow: 0;
padding: 0;
}
#subseed_show label{
height: 100%;
}
#roll{
min-width: 1em;
max-width: 4em;
margin: 0.5em;
}
#style_apply, #style_create, #interrogate{
margin: 0.75em 0.25em 0.25em 0.25em;
min-width: 3em;
}
#style_pos_col, #style_neg_col{
min-width: 8em !important;
}
#style_index, #style2_index{
margin-top: 1em;
}
.gr-form{
background: transparent;
}
.my-4{
margin-top: 0;
margin-bottom: 0;
}
#toprow div{
border: none;
gap: 0;
background: transparent;
}
#resize_mode{
flex: 1.5;
}
button{
align-self: stretch !important;
}
#prompt, #negative_prompt{
border: none !important;
}
#prompt textarea, #negative_prompt textarea{
border: none !important;
}
#img2maskimg .h-60{
height: 30rem;
}
.overflow-hidden, .gr-panel{
overflow: visible !important;
}
#x_type, #y_type{
max-width: 10em;
}
#txt2img_preview, #img2img_preview{
position: absolute;
width: 320px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 100;
}
#txt2img_preview div.left-0.top-0, #img2img_preview div.left-0.top-0{
display: none;
}
fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block span{
position: absolute;
top: -0.6em;
line-height: 1.2em;
padding: 0 0.5em;
margin: 0;
background-color: white;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
.dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span{
background-color: rgb(31, 41, 55);
border-top: 1px solid rgb(55 65 81);
border-left: 1px solid rgb(55 65 81);
border-right: 1px solid rgb(55 65 81);
}
#settings fieldset span.text-gray-500, #settings .gr-block.gr-box span.text-gray-500, #settings label.block span{
position: relative;
border: none;
}
.gr-panel div.flex-col div.justify-between label span{
margin: 0;
}
.gr-panel div.flex-col div.justify-between div{
position: absolute;
top: -0.1em;
right: 1em;
padding: 0 0.5em;
}
#settings .gr-panel div.flex-col div.justify-between div{
position: relative;
z-index: 200;
}
input[type="range"]{
margin: 0.5em 0 -0.3em 0;
}
#txt2img_sampling label{
padding-left: 0.6em;
padding-right: 0.6em;
}
#mask_bug_info {
text-align: center;
display: block;
margin-top: -0.75em;
margin-bottom: -0.75em;
}
#txt2img_negative_prompt, #img2img_negative_prompt{
}
#progressbar{
position: absolute;
z-index: 1000;
right: 0;
padding-left: 5px;
padding-right: 5px;
display: block;
}
#progressRow{
margin-bottom: 10px;
margin-top: -18px;
}
.progressDiv{
width: 100%;
height: 20px;
background: #b4c0cc;
border-radius: 8px;
}
.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: 8px;
}
#lightboxModal{
display: none;
position: fixed;
z-index: 1001;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(20, 20, 20, 0.95);
}
.modalControls {
display: grid;
grid-template-columns: 32px auto 1fr 32px;
grid-template-areas: "zoom tile space close";
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 16px;
gap: 16px;
background-color: rgba(0,0,0,0.2);
}
.modalClose {
grid-area: close;
}
.modalZoom {
grid-area: zoom;
}
.modalTileImage {
grid-area: tile;
}
.modalClose,
.modalZoom,
.modalTileImage {
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.modalClose:hover,
.modalClose:focus,
.modalZoom:hover,
.modalZoom:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
#modalImage {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
width: auto;
}
.modalImageFullscreen {
object-fit: contain;
height: 90%;
}
.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
}
#interrupt{
position: absolute;
width: 100%;
height: 72px;
background: #b4c0cc;
border-radius: 8px;
display: none;
}