mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-10 20:06:59 +02:00
60 lines
1.3 KiB
CSS
60 lines
1.3 KiB
CSS
.App {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: auto;
|
|
display: grid;
|
|
background-color: rgb(32, 33, 36);
|
|
grid-template-columns: 360px 1fr;
|
|
grid-template-rows: 100px 1fr 300px;
|
|
grid-template-areas: "header header header"
|
|
"create display display"
|
|
"footer footer footer";
|
|
}
|
|
|
|
/* Very basic mobile stacked UI*/
|
|
@media screen and (max-width: 768px) {
|
|
.App {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 100px 1fr 1fr 300px;
|
|
grid-template-areas: "header"
|
|
"create"
|
|
"display"
|
|
"footer";
|
|
}
|
|
}
|
|
|
|
.header-layout {
|
|
grid-area: header;
|
|
}
|
|
|
|
.create-layout {
|
|
grid-area: create;
|
|
}
|
|
|
|
.display-layout {
|
|
grid-area: display;
|
|
}
|
|
|
|
.footer-layout {
|
|
grid-area: footer;
|
|
|
|
}
|
|
|
|
/* Copypasta from Bootstrap, makes content visually hidden but still accessible for screenreaders */
|
|
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
/* TODO proper utility classes */
|
|
.mb-4 {
|
|
margin-bottom: 1rem;
|
|
} |