collage-maker/web/index.css

128 lines
1.7 KiB
CSS
Raw Normal View History

.container {
display: flex;
background-color: lightyellow;
height: calc(100vh - 20px);
}
.controls {
background-color: lightgrey;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
flex: 25%;
overflow: scroll;
}
.imagebox {
padding: 2rem;
flex: 75%;
}
2023-09-05 18:42:47 -04:00
.image-surface {
overflow: hidden;
margin: auto;
border: 1px solid;
height: 100%;
2023-09-05 18:42:47 -04:00
width: auto;
--collage-ap: 110 / 85;
aspect-ratio: var(--collage-ap);
}
.showbuton {
font-size: 2rem;
}
.templates {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.templates li {
list-style-type: none;
}
#page_size_selector {
width: 100%;
}
.template {
width: 6rem;
height: 6rem;
}
2023-09-14 14:57:33 -04:00
.template-selected {
background-color: green;
}
.template div {
border: 1px solid;
}
.single {
display: grid;
}
.one-two {
display: grid;
grid-template-areas:
"A B"
"A C";
}
.one-two .img1{
grid-area: A;
}
.half-topbottom {
display: grid;
}
.two-one-two-leftright {
display: grid;
grid-template-areas:
"A B B C"
"D B B E";
}
.two-one-two-leftright .img1 {
grid-area: B;
}
.two-one-two-topbottom {
display: grid;
grid-template-areas:
2024-08-10 12:16:03 -04:00
"A B"
"C C"
"C C"
"D E";
}
.two-one-two-topbottom .img1 {
grid-area: C;
}
.two-row {
display: grid;
grid-template-areas:
2024-08-10 12:16:03 -04:00
"A B";
}
.three-row {
display: grid;
grid-template-areas:
2024-08-10 12:16:03 -04:00
"A B C";
}
.four-row {
display: grid;
grid-template-areas:
2024-08-10 12:16:03 -04:00
"A B C D";
}
.one-three-topbottom {
display: grid;
grid-template-areas:
2024-08-10 12:16:03 -04:00
"A A A"
"B C D";
}
.one-three-topbottom .img1 {
2024-08-10 12:16:03 -04:00
grid-area: A;
}