mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-06-01 07:08:16 +00:00
71 lines
1.8 KiB
SCSS
71 lines
1.8 KiB
SCSS
/** Book covers
|
||
*
|
||
* - .is-cover gives the behaviour of the cover and its surrounding. (optional)
|
||
* - .cover-container gives the dimensions and position (for borders, image and other elements).
|
||
* - .book-cover is positioned and sized based on its container.
|
||
*
|
||
* To have the cover within specific dimensions, specify a width or height for
|
||
* standard bulma’s named breakpoints:
|
||
*
|
||
* `is-(w|h)-(auto|xs|s|m|l|xl|xxl)[-(mobile|tablet|desktop)]`
|
||
*
|
||
* The cover will be centered horizontally and vertically within those dimensions.
|
||
*
|
||
* When using `.column.is-N`, add `.is-w-auto` to the container so that the flex
|
||
* calculations are not biased by the default `max-content`.
|
||
******************************************************************************/
|
||
|
||
.column.is-cover {
|
||
flex-grow: 0 !important;
|
||
}
|
||
|
||
.column.is-cover,
|
||
.column.is-cover + .column {
|
||
flex-basis: auto !important;
|
||
}
|
||
|
||
.cover-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
width: max-content;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Book cover
|
||
* -------------------------------------------------------------------------- */
|
||
|
||
.book-cover {
|
||
display: block;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
|
||
/* Useful when stretching under-sized images. */
|
||
image-rendering: optimizeQuality;
|
||
image-rendering: smooth;
|
||
}
|
||
|
||
/* Cover caption
|
||
* -------------------------------------------------------------------------- */
|
||
|
||
.no-cover .cover-caption {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 0.5em;
|
||
font-size: 0.75em;
|
||
color: white;
|
||
background-color: $no-cover-color;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 1em;
|
||
white-space: initial;
|
||
text-align: center;
|
||
}
|