We only need to fetch the review template once
[books.alexwlchan.net] / templates / _review_style.css
1 {% set r = (tint_colors[review_entry.book.cover_image][0] * 255) | int %}
2 {% set g = (tint_colors[review_entry.book.cover_image][1] * 255) | int %}
3 {% set b = (tint_colors[review_entry.book.cover_image][2] * 255) | int %}
4
5 /* See https://stackoverflow.com/a/11615135/1558022 */
6 #review_preview_{{ review_entry.book.slug }} {
7   border-color: rgb({{ r }}, {{ g }}, {{ b }});
8
9   {% if review_entry.review.rating == 5 %}
10     background: rgb(
11       {{ (r * 0.3 + 0.8 * 255) | int | cap_rgb }},
12       {{ (g * 0.3 + 0.8 * 255) | int | cap_rgb }},
13       {{ (b * 0.3 + 0.8 * 255) | int | cap_rgb }}
14     );
15     border-width: 3px;
16     margin-left:  -1px;
17     margin-right: -1px;
18     box-shadow: 0px 0px 5px rgba({{r}}, {{g}}, {{ b }}, 0.3);
19   {% else %}
20     background: rgb(
21       {{ (r * 0.08 + 0.92 * 255) | int | cap_rgb }},
22       {{ (g * 0.08 + 0.92 * 255) | int | cap_rgb }},
23       {{ (b * 0.08 + 0.92 * 255) | int | cap_rgb }}
24     );
25   {% endif %}
26 }
27
28 #review_preview_{{ review_entry.book.slug }} img {
29   border: 0.1px solid rgb({{ r }}, {{ g }}, {{ b }});
30 }
31
32 #review_preview_{{ review_entry.book.slug }}:hover {
33   {% if review_entry.review.rating == 5 %}
34     background: rgb(
35       {{ (r * 0.42 + 0.58 * 255) | int }},
36       {{ (g * 0.42 + 0.58 * 255) | int }},
37       {{ (b * 0.42 + 0.58 * 255) | int }}
38     );
39   {% else %}
40     background: rgb(
41       {{ (r * 0.26 + 0.74 * 255) | int }},
42       {{ (g * 0.26 + 0.74 * 255) | int }},
43       {{ (b * 0.26 + 0.74 * 255) | int }}
44     );
45   {% endif %}
46 }
47
48 #review_preview_{{ review_entry.book.slug }} a:hover {
49   background: none;
50 }