mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-05-31 22:58:18 +00:00
603b2d9502
The stars.html template now outputs a span containing “no rating” when the stars represent a non-existent or zero rating. This text is already translated because it was previously added as a invisible text only for screen readers. The span is given a special CSS class so that it can be styled as italic in the stylesheet. There is now also an extra span in book.html to group the stars with the “(2 reviews)” text. This is needed because the outer div is using a flex layout and it eats the spacing between the two parts otherwise. Fixes #2856
57 lines
1.6 KiB
SCSS
57 lines
1.6 KiB
SCSS
/** Stars
|
|
******************************************************************************/
|
|
|
|
.stars {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stars .no-rating {
|
|
font-style: italic;
|
|
}
|
|
|
|
/** Stars in a review form
|
|
*
|
|
* Specificity makes hovering taking over checked inputs.
|
|
*
|
|
* \e9d9: filled star
|
|
* \e9d7: empty star;
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
.form-rate-stars {
|
|
width: max-content;
|
|
}
|
|
|
|
/* All stars are visually filled by default. */
|
|
.form-rate-stars .icon::before {
|
|
content: "\e9d9"; /* icon-star-full */
|
|
}
|
|
|
|
/* Icons directly following half star inputs are marked as half */
|
|
.form-rate-stars input.half:checked ~ .icon::before {
|
|
content: "\e9d8"; /* icon-star-half */
|
|
}
|
|
|
|
/* stylelint-disable no-descending-specificity */
|
|
.form-rate-stars input.half:checked + input + .icon:hover::before {
|
|
content: "\e9d8" !important; /* icon-star-half */
|
|
}
|
|
|
|
/* Icons directly following half check inputs that follow the checked input are emptied. */
|
|
.form-rate-stars input.half:checked + input + .icon ~ .icon::before {
|
|
content: "\e9d7"; /* icon-star-empty */
|
|
}
|
|
|
|
/* Icons directly following inputs that follow the checked input are emptied. */
|
|
.form-rate-stars input:checked ~ input + .icon::before {
|
|
content: "\e9d7"; /* icon-star-empty */
|
|
}
|
|
|
|
/* When a label is hovered, repeat the fill-all-then-empty-following pattern. */
|
|
.form-rate-stars:hover .icon.icon::before {
|
|
content: "\e9d9" !important; /* icon-star-full */
|
|
}
|
|
|
|
.form-rate-stars .icon:hover ~ .icon::before {
|
|
content: "\e9d7" !important; /* icon-star-empty */
|
|
}
|