extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-05-30 06:40:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixed styling to work properly for mobile

Browse Source
This commit is contained in:
Malcolm Diller 2022-10-15 17:26:52 -07:00
parent 2a25ac0847
commit 1b0d5b710e
2 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -62,7 +62,7 @@
<input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
</div>
<label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt" size="50"><br/><br/>
<label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt"><br/><br/>
<div id="editor-inputs-init-image" class="row">
<label for="init_image"><b>Initial Image (img2img):</b> <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>

50
ui/media/main.css
View File

@ -55,6 +55,7 @@
* {
font-family: Work Sans, Verdana, Geneva, sans-serif;
box-sizing: border-box;
}
body {
@ -74,12 +75,6 @@ label {
#prompt {
width: 100%;
height: 65pt;
box-sizing: border-box;
}
@media screen and (max-width: 600px) {
#prompt {
width: 95%;
}
}
.image_preview_container {
/* display: none; */
@ -228,6 +223,7 @@ label {
}
.flex-container {
display: flex;
width: 100%;
}
.col-50 {
flex: 50%;
@ -517,6 +513,11 @@ img {
#editor-settings-entries table td:first-child {
float: right;
padding-right: 4px;
white-space: nowrap;
}
#negative_prompt {
width: 100%;
}
button,
@ -570,3 +571,40 @@ input[type="range"]::-moz-range-thumb {
height: 24px;
border-radius: 12px;
} */
@media screen and (max-width: 700px) {
body {
margin: 0px;
}
#container {
margin: 0px;
padding: 10px
}
.flex-container {
flex-direction: column;
}
#preview {
margin: 0px;
padding: 0px;
}
#preview .collapsible-content {
padding: 0px;
}
#preview .collapsible-content {
padding: 0px;
}
.imgItem {
margin-right: 0px;
}
.imgItem img {
height: 100%;
width: 100%;
object-fit: contain;
}
.dropdown-content {
width: auto !important;
transform: none !important;
left: 0px;
right: 0px;
}
}