collage-maker/web/index.css

109 lines
1.5 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%;
}
.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: 100px;
height: 100px;
}
2023-09-14 14:57:33 -04:00
.template-selected {
background-color: green;
}
.template div {
border: 1px solid;
}
.single div {
width: 100%;
height: 100%;
}
.one-two {
display: grid;
grid-template-areas:
"one two"
"one three";
}
.one-two .img1{
grid-area: one;
}
.half-leftright {
display:flex;
}
.half-leftright .img {
flex: 50%;
}
.half-topbottom .img {
width: 100%;
height: 50%;
}
.two-one-two-leftright {
display: grid;
grid-template-areas:
"one two two three"
"four two two five";
}
.two-one-two-leftright .img2 {
grid-area: two;
}
.two-one-two-topbottom {
display: grid;
grid-template-areas:
"one two"
"three three"
"three three"
"four five"
}
.two-one-two-topbottom .img3 {
grid-area: three;
}