Joel Bradshaw a579ea52f4 Add initial inline progress update
Doesn't work yet
2020-11-19 19:38:38 -08:00

154 lines
2.6 KiB
CSS

/* --- --- */
.navbar .logo {
max-height: 50px;
}
/* --- TOGGLES --- */
input.toggle-control {
display: none;
}
.hidden {
display: none;
}
input.toggle-control:checked ~ .toggle-content {
display: block;
}
input.toggle-control:checked ~ .modal.toggle-content {
display: flex;
}
/* --- STARS --- */
.rate-stars button.icon {
background: none;
border: none;
padding: 0;
margin: 0;
display: inline;
}
.rate-stars:hover .icon:before {
content: '\e9d9';
}
.rate-stars form:hover ~ form .icon:before{
content: '\e9d7';
}
/* stars in a review form */
.form-rate-stars:hover .icon:before {
content: '\e9d9';
}
.form-rate-stars input + .icon:before {
content: '\e9d9';
}
.form-rate-stars input:checked + .icon:before {
content: '\e9d9';
}
.form-rate-stars input:checked + * ~ .icon:before {
content: '\e9d7';
}
.form-rate-stars:hover label.icon:before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover:before {
content: '\e9d9';
}
.form-rate-stars label.icon:hover ~ label.icon:before{
content: '\e9d7';
}
/* progress update */
.progress-update {
padding: 0 0.5rem;
}
.progress-update.is-small,
.progress-update input.is-small {
font-size: 0.75rem;
}
.progress-update input {
width: 3em;
}
/* --- BOOK COVERS --- */
.cover-container {
height: 250px;
width: max-content;
}
.cover-container.is-medium {
height: 150px;
}
.cover-container.is-small {
height: 100px;
}
@media only screen and (max-width: 768px) {
.cover-container {
height: 200px;
width: max-content;
}
.cover-container.is-medium {
height: 100px;
}
.cover-container.is-small {
height: 70px;
}
}
.cover-container.is-medium .no-cover div {
font-size: 0.9em;
padding: 0.3em;
}
.cover-container.is-small .no-cover div {
font-size: 0.7em;
padding: 0.1em;
}
.book-cover {
height: 100%;
object-fit: scale-down;
}
.no-cover {
position: relative;
white-space: normal;
}
.no-cover div {
position: absolute;
padding: 1em;
color: white;
top: 0;
left: 0;
text-align: center;
}
/* --- AVATAR --- */
.avatar {
vertical-align: middle;
display: inline;
}
/* --- QUOTES --- */
.quote blockquote {
position: relative;
padding-left: 2em;
}
.quote blockquote:before, .quote blockquote:after {
font-family: 'icomoon';
position: absolute;
}
.quote blockquote:before {
content: "\e905";
top: 0;
left: 0;
}
.quote blockquote:after {
content: "\e904";
right: 0;
}
/* --- BLOCKQUOTE --- */
blockquote {
white-space: pre-line;
}