.flip-book {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
display: none;
background-size: cover;
}
.page {
padding: 20px;
background-color: hsl(35, 55, 98);
color: hsl(35, 35, 35);
border: solid 1px hsl(35, 20, 70);
overflow: hidden;
.page-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
.page-header {
height: 30px;
font-size: 100%;
text-transform: uppercase;
text-align: center;
}
.page-image {
height: 100%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.page-text {
height: 100%;
flex-grow: 1;
font-size: 80%;
text-align: justify;
margin-top: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: solid 1px hsl(35, 55, 90);
}
.page-footer {
height: 30px;
border-top: solid 1px hsl(35, 55, 90);
font-size: 80%;
color: hsl(35, 20, 50);
}
}
&.--left { // for left page (property will be added automatically)
border-right: 0;
box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
&.--right { // for right page (property will be added automatically)
border-left: 0;
box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4);
.page-footer {
text-align: right;
}
}
&.hard { // for hard page
background-color: hsl(35, 50, 90);
border: solid 1px hsl(35, 20, 50);
}
&.page-cover {
background-color: hsl(35, 45, 80);
color: hsl(35, 35, 35);
border: solid 1px hsl(35, 20, 50);
h2 {
text-align: center;
padding-top: 50%;
font-size: 210%;
}
&.page-cover-top {
box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), -2px 0 5px 2px rgba(0, 0, 0, 0.4);
}
&.page-cover-bottom {
box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), 10px 0 8px 0px rgba(0, 0, 0, 0.4);
}
}
}