mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
Responsive for devices under 600px
This doesn't not work for the Canvas Painting yet, but works on img2img and text2img
This commit is contained in:
parent
0439b51a26
commit
b77f34998c
frontend/src/styles/Mixins
159
frontend/src/styles/Mixins/_Responsive.scss
Normal file
159
frontend/src/styles/Mixins/_Responsive.scss
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
@media (max-width: 600px) {
|
||||||
|
#root{
|
||||||
|
.app-content{
|
||||||
|
padding: 5px;
|
||||||
|
.site-header {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
height: 100px;
|
||||||
|
z-index: 1;
|
||||||
|
.site-header-left-side{
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
min-width: 145px;
|
||||||
|
float: left;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.site-header-right-side{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
grid-template-rows: 25px 25px 25px;
|
||||||
|
grid-template-areas: 'logoSpace logoSpace logoSpace sampler sampler sampler'
|
||||||
|
'status status status status status status'
|
||||||
|
'btn1 btn2 btn3 btn4 btn5 btn6';
|
||||||
|
row-gap: 15px;
|
||||||
|
.chakra-popover__popper{
|
||||||
|
grid-area: logoSpace;
|
||||||
|
}
|
||||||
|
> :nth-child(1).chakra-text{
|
||||||
|
grid-area: status;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
> :nth-child(2){
|
||||||
|
grid-area: sampler;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
select{
|
||||||
|
width: 185px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.chakra-select__icon-wrapper{
|
||||||
|
right:10px;
|
||||||
|
svg{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> :nth-child(3){
|
||||||
|
grid-area: btn1;
|
||||||
|
}
|
||||||
|
> :nth-child(4){
|
||||||
|
grid-area: btn2;
|
||||||
|
}
|
||||||
|
> :nth-child(6){
|
||||||
|
grid-area: btn3;
|
||||||
|
}
|
||||||
|
> :nth-child(7){
|
||||||
|
grid-area: btn4;
|
||||||
|
}
|
||||||
|
> :nth-child(8){
|
||||||
|
grid-area: btn5;
|
||||||
|
}
|
||||||
|
> :nth-child(9){
|
||||||
|
grid-area: btn6;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.app-tabs{
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 15px;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 120px;
|
||||||
|
.app-tabs-list{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.app-tabs-panels{
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.workarea-main{
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: 'workarea'
|
||||||
|
'options'
|
||||||
|
'gallery';
|
||||||
|
row-gap: 15px;
|
||||||
|
.options-panel-wrapper{
|
||||||
|
grid-area: options;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
overflow: inherit;
|
||||||
|
padding: 0 10px;
|
||||||
|
.main-options-row{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.advanced-settings-item{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.workarea-children-wrapper{
|
||||||
|
grid-area: workarea;
|
||||||
|
.workarea-split-view{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.current-image-options{
|
||||||
|
column-gap: 3px;
|
||||||
|
}
|
||||||
|
.text-to-image-area{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.current-image-preview {
|
||||||
|
height: 430px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//image 2 image
|
||||||
|
.image-upload-button {
|
||||||
|
row-gap: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
svg {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Cavas Painting
|
||||||
|
.inpainting-settings{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 10px;
|
||||||
|
}
|
||||||
|
.inpainting-canvas-area{
|
||||||
|
.konvajs-content{
|
||||||
|
height: 400px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-gallery-wrapper{
|
||||||
|
grid-area: gallery;
|
||||||
|
min-height: 400px;
|
||||||
|
.image-gallery-popup{
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
|||||||
@forward './Shared';
|
@forward './Shared';
|
||||||
@forward './Buttons';
|
@forward './Buttons';
|
||||||
@forward './Variables';
|
@forward './Variables';
|
||||||
|
@forward './Responsive';
|
Loading…
Reference in New Issue
Block a user