You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Fipamo/public/assets/css/dash/book.css

117 lines
2.4 KiB
CSS

section[role="book-index-header"] {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 100px auto 20px;
width: 100%;
max-width: 900px;
}
section[role="book-index-header"] > div[role="book-index-header-left"] {
text-transform: capitalize;
display: inline-block;
color: var(--white);
font-size: 3em;
}
section[role="book-index-header"] > div[role="book-index-header-right"] {
text-align: right;
display: inline-block;
}
section[role="book-index-pages"] {
margin: 0 auto;
width: 100%;
max-width: 900px;
}
section[role="book-index-pages"] > a.page-link {
vertical-align: top;
display: inline-block;
width: 100%;
text-decoration: none;
margin: 0 0 20px;
border-radius: 3px;
height: 350px;
overflow: hidden;
}
section[role="book-index-pages"] > a.page-link div.page-video {
width: 100%;
height: 350px;
display: flex;
justify-content: left;
align-items: center;
border-radius: 5px;
border-bottom: none;
position: relative;
}
section[role="book-index-pages"] > a.page-link video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
section[role="book-index-pages"] > a.page-link > div.page-bg {
width: 100%;
height: 350px;
display: flex;
justify-content: left;
align-items: center;
border-radius: 5px;
border-bottom: none;
position: relative;
}
section[role="book-index-pages"] aside {
font-size: 1.1em;
color: var(--white);
text-shadow: 2px 2px 2px var(--black);
padding: 10px;
position: relative;
}
section[role="book-index-pages"] hr {
color: var(--white);
border: 0.1px solid;
margin: 7px 0;
}
section[role="book-index-pages"] button[data-active="true"] {
background: var(--primary);
}
section[role="book-index-pages"] button[data-active="true"] svg {
fill: var(--tertiary);
}
section[role="book-index-pages"] button[data-active="false"] {
background: var(--secondary);
}
section[role="book-index-pages"] button[data-active="false"] svg {
fill: var(--primary);
}
section[role="book-index-pages"] > div[role="paginate"] {
width: fit-content;
margin: 0 auto;
font-size: 1.5em;
color: var(--highlight);
}
section[role="book-index-pages"] > div[role="paginate"] i {
color: var(--secondary);
}
section[role="book-index-pages"] > div[role="paginate"] a,
section[role="book-index-pages"] > div[role="paginate"] span {
display: inline;
}
section[role="book-index-pages"] > div[role="paginate"] span {
position: relative;
top: -15px;
}