Fix appearance on mobile

This commit is contained in:
tesseractcat 2022-08-25 15:01:08 -04:00
parent 2ad73246f9
commit 91966e9ffa
2 changed files with 19 additions and 6 deletions

View File

@ -6,16 +6,25 @@
} }
#search { #search {
margin-top: 20vh; margin-top: 20vh;
margin-left: auto;
margin-right: auto;
max-width: 800px;
text-align: center; text-align: center;
} }
fieldset { fieldset {
border: none; border: none;
} }
#fieldset-search {
display: flex;
}
#prompt { #prompt {
width: 500px; flex-grow: 1;
border-radius: 20px 0px 0px 20px; border-radius: 20px 0px 0px 20px;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
border: 1px solid black; border: 1px solid black;
border-right: none;
outline: none; outline: none;
} }
#submit { #submit {
@ -25,8 +34,8 @@ fieldset {
} }
#results { #results {
text-align: center; text-align: center;
padding-left: 20vw; max-width: 1000px;
padding-right: 20vw; margin: auto;
padding-top: 10px; padding-top: 10px;
} }
img { img {
@ -35,7 +44,7 @@ img {
border-radius: 5px; border-radius: 5px;
margin: 10px; margin: 10px;
} }
#generate-config { #fieldset-config {
line-height:2em; line-height:2em;
} }
input[type="number"] { input[type="number"] {
@ -47,3 +56,6 @@ input[type="number"] {
hr { hr {
width: 200px; width: 200px;
} }
label {
white-space: nowrap;
}

View File

@ -2,6 +2,7 @@
<head> <head>
<title>Stable Diffusion WebUI</title> <title>Stable Diffusion WebUI</title>
<link rel="icon" href="data:,"> <link rel="icon" href="data:,">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="scripts/static/index.css"> <link rel="stylesheet" href="scripts/static/index.css">
<script src="scripts/static/index.js"></script> <script src="scripts/static/index.js"></script>
@ -11,11 +12,11 @@
<h2 id="header">Stable Diffusion</h2> <h2 id="header">Stable Diffusion</h2>
<form id="generate-form" method="post" action="#"> <form id="generate-form" method="post" action="#">
<fieldset> <fieldset id="fieldset-search">
<input type="text" id="prompt" name="prompt"> <input type="text" id="prompt" name="prompt">
<input type="submit" id="submit" value="Generate"> <input type="submit" id="submit" value="Generate">
</fieldset> </fieldset>
<fieldset id="generate-config"> <fieldset id="fieldset-config">
<label for="batch">Batch Size:</label> <label for="batch">Batch Size:</label>
<input value="1" type="number" id="batch" name="batch"> <input value="1" type="number" id="batch" name="batch">
<label for="steps">Steps:</label> <label for="steps">Steps:</label>