Merge branch 'main' into list-style-fixes
This commit is contained in:
Joachim
GitHub
@ -140,7 +140,7 @@ body {
|
||||
*
|
||||
* \e9d9: filled star
|
||||
* \e9d7: empty star;
|
||||
******************************************************************************/
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.form-rate-stars {
|
||||
width: max-content;
|
||||
@ -166,70 +166,67 @@ body {
|
||||
}
|
||||
|
||||
/** 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 breapoints:
|
||||
*
|
||||
* `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 {
|
||||
height: 250px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
max-width: 250px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-container.is-large {
|
||||
height: max-content;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.cover-container.is-large img {
|
||||
max-height: 500px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
/* Book cover
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.book-cover {
|
||||
height: 100%;
|
||||
object-fit: scale-down;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
/* Useful when stretching under-sized images. */
|
||||
image-rendering: optimizeQuality;
|
||||
image-rendering: smooth;
|
||||
}
|
||||
|
||||
.no-cover {
|
||||
position: relative;
|
||||
white-space: normal;
|
||||
}
|
||||
/* Cover caption
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.no-cover div {
|
||||
.no-cover .cover_caption {
|
||||
position: absolute;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 0.25em;
|
||||
font-size: 0.75em;
|
||||
color: white;
|
||||
background-color: #002549;
|
||||
}
|
||||
|
||||
/** Avatars
|
||||
@ -240,16 +237,6 @@ body {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.is-32x32 {
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.is-96x96 {
|
||||
min-width: 96px;
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
/** Statuses: Quotes
|
||||
*
|
||||
* \e906: icon-quote-open
|
||||
@ -397,3 +384,386 @@ ol.ordered-list li::before {
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dimensions
|
||||
* @todo These could be in rem.
|
||||
******************************************************************************/
|
||||
|
||||
.is-32x32 {
|
||||
min-width: 32px !important;
|
||||
min-height: 32px !important;
|
||||
}
|
||||
|
||||
.is-96x96 {
|
||||
min-width: 96px !important;
|
||||
min-height: 96px !important;
|
||||
}
|
||||
|
||||
.is-w-auto {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.is-w-xs {
|
||||
width: 80px !important;
|
||||
}
|
||||
|
||||
.is-w-s {
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.is-w-m {
|
||||
width: 150px !important;
|
||||
}
|
||||
|
||||
.is-w-l {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.is-w-xl {
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
.is-w-xxl {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.is-h-xs {
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
.is-h-s {
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
.is-h-m {
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
.is-h-l {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.is-h-xl {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.is-h-xxl {
|
||||
height: 500px !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.is-w-auto-mobile {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.is-w-xs-mobile {
|
||||
width: 80px !important;
|
||||
}
|
||||
|
||||
.is-w-s-mobile {
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.is-w-m-mobile {
|
||||
width: 150px !important;
|
||||
}
|
||||
|
||||
.is-w-l-mobile {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.is-w-xl-mobile {
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
.is-w-xxl-mobile {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.is-h-xs-mobile {
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
.is-h-s-mobile {
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
.is-h-m-mobile {
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
.is-h-l-mobile {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.is-h-xl-mobile {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.is-h-xxl-mobile {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
.is-w-auto-tablet {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.is-w-xs-tablet {
|
||||
width: 80px !important;
|
||||
}
|
||||
|
||||
.is-w-s-tablet {
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.is-w-m-tablet {
|
||||
width: 150px !important;
|
||||
}
|
||||
|
||||
.is-w-l-tablet {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.is-w-xl-tablet {
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
.is-w-xxl-tablet {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.is-h-xs-tablet {
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
.is-h-s-tablet {
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
.is-h-m-tablet {
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
.is-h-l-tablet {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.is-h-xl-tablet {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.is-h-xxl-tablet {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.is-w-auto-desktop {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.is-w-xs-desktop {
|
||||
width: 80px !important;
|
||||
}
|
||||
|
||||
.is-w-s-desktop {
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.is-w-m-desktop {
|
||||
width: 150px !important;
|
||||
}
|
||||
|
||||
.is-w-l-desktop {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.is-w-xl-desktop {
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
.is-w-xxl-desktop {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.is-h-xs-desktop {
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
.is-h-s-desktop {
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
.is-h-m-desktop {
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
.is-h-l-desktop {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.is-h-xl-desktop {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.is-h-xxl-desktop {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alignments
|
||||
*
|
||||
* Use them with `.align.to-(c|t|r|b|l)[-(mobile|tablet)]`
|
||||
******************************************************************************/
|
||||
|
||||
/* Flex item position
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.align {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.align.to-c {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.align.to-t {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.align.to-r {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.align.to-b {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.align.to-l {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.align.to-c-mobile {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.align.to-t-mobile {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.align.to-r-mobile {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.align.to-b-mobile {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.align.to-l-mobile {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.align.to-c-tablet {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.align.to-t-tablet {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.align.to-r-tablet {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.align.to-b-tablet {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.align.to-l-tablet {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Spacings
|
||||
*
|
||||
* Those are supplementary rules to Bulma’s. They follow the same conventions.
|
||||
* Add those you’ll need.
|
||||
******************************************************************************/
|
||||
|
||||
.mr-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.m-0-mobile {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.mr-auto-mobile {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ml-auto-mobile {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mt-3-mobile {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
|
||||
.ml-3-mobile {
|
||||
margin-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
.mx-3-mobile {
|
||||
margin-right: 0.75rem !important;
|
||||
margin-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
.my-3-mobile {
|
||||
margin-top: 0.75rem !important;
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.m-0-tablet {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.mr-auto-tablet {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ml-auto-tablet {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mt-3-tablet {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
|
||||
.ml-3-tablet {
|
||||
margin-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
.mx-3-tablet {
|
||||
margin-right: 0.75rem !important;
|
||||
margin-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
.my-3-tablet {
|
||||
margin-top: 0.75rem !important;
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
2
bookwyrm/static/css/vendor/bulma.min.css
vendored
2
bookwyrm/static/css/vendor/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
@ -97,10 +97,12 @@ let BookWyrm = new class {
|
||||
updateCountElement(counter, data) {
|
||||
const currentCount = counter.innerText;
|
||||
const count = data.count;
|
||||
const hasMentions = data.has_mentions;
|
||||
|
||||
if (count != currentCount) {
|
||||
this.addRemoveClass(counter.closest('[data-poll-wrapper]'), 'is-hidden', count < 1);
|
||||
counter.innerText = count;
|
||||
this.addRemoveClass(counter.closest('[data-poll-wrapper]'), 'is-danger', hasMentions);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user