collage-maker/web/index.css

197 lines
2.8 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;
2024-08-12 17:21:25 -04:00
gap: 0.5rem;
flex: 25%;
overflow: scroll;
}
.imagebox {
padding: 2rem;
flex: 75%;
}
2023-09-05 18:42:47 -04:00
2024-08-12 17:21:25 -04:00
:root {
--collage-ap: 110 / 85;
}
.image-surface {
overflow: hidden;
margin: auto;
border: 1px solid;
height: 100%;
2023-09-05 18:42:47 -04:00
width: auto;
aspect-ratio: var(--collage-ap);
}
2024-08-12 17:21:25 -04:00
2024-08-12 22:56:50 -04:00
#image-chooser-controls {
display: none;
width: 80%;
2024-08-12 22:56:50 -04:00
}
#image-preview-box {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 80%;
}
#image-preview-box img {
width: 30%;
aspect-ratio: 1 / 1;
2024-08-12 22:56:50 -04:00
}
2024-08-12 17:21:25 -04:00
.main-controls {
display: flex;
gap: 0.5rem;
width: 80%;
2024-08-12 17:21:25 -04:00
}
.main-controls * {
width: 100%;
height: 4rem;
2024-08-12 17:21:25 -04:00
font-size: 1.2rem;
}
#notice_dialog {
z-index: 10;
width: 50%;
background-color: lightblue;
}
#notice_dialog form {
display: flex;
}
#notice_dialog button {
font-size: 1.2rem;
margin-left: auto;
}
.templates {
display: flex;
flex-wrap: wrap;
2024-08-12 17:21:25 -04:00
gap: 0.5rem;
width: 80%;
}
.templates li {
width: 30%;
list-style-type: none;
aspect-ratio: 1 / 1;
}
#page_size_selector {
2024-08-12 17:21:25 -04:00
font-size: 1.2rem;
width: 80%;
}
.template {
2024-08-12 17:21:25 -04:00
aspect-ratio: var(--collage-ap);
}
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";
}
2024-08-13 17:18:10 -04:00
.one-three-topbottom .img1 {
2024-08-10 12:16:03 -04:00
grid-area: A;
}
2024-08-13 17:18:10 -04:00
.ten-spl {
display: grid;
grid-template-areas:
"A A A B B B"
"C D D E E F"
"G D D E E H"
"I I I J J J";
}
.ten-spl .img1 { grid-area: A; }
.ten-spl .img2 { grid-area: B; }
.ten-spl .img3 { grid-area: C; }
.ten-spl .img4 { grid-area: D; }
.ten-spl .img5 { grid-area: E; }
.ten-spl .img6 { grid-area: F; }
.ten-spl .img7 { grid-area: G; }
.ten-spl .img8 { grid-area: H; }
.ten-spl .img9 { grid-area: I; }
.ten-spl .img10 { grid-area: J; }