Add an entry for "Cosmogramma"
[books.alexwlchan.net] / templates / _review_style.css
index 23c41eb..198f36e 100644 (file)
@@ -1,26 +1,48 @@
-{% set r = (tint_colors[review_entry.book.cover_image][0] * 255) | int %}
-{% set g = (tint_colors[review_entry.book.cover_image][1] * 255) | int %}
-{% set b = (tint_colors[review_entry.book.cover_image][2] * 255) | int %}
+{% set (r, g, b) = review_entry.book.cover.tint_color | from_hex %}
 
-#review_preview_{{ r }}_{{ g }}_{{ b }} {
-  background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
-  border-color: rgb({{ r }}, {{ g }}, {{ b }});
-}
+/* See https://stackoverflow.com/a/11615135/1558022 */
+#review_preview_{{ review_entry.book.slug }} {
+  border-color: {{ review_entry.book.cover.tint_color }};
 
-{% if review_entry.review.rating == 5 %}
-  #review_preview_{{ r }}_{{ g }}_{{ b }}.review_fave {
-    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.2);
-    border-color: rgb({{ r }}, {{ g }}, {{ b }});
+  {% if review_entry.review.rating == 5 %}
+    background: rgb(
+      {{ (r * 0.3 + 0.8 * 255) | int | cap_rgb }},
+      {{ (g * 0.3 + 0.8 * 255) | int | cap_rgb }},
+      {{ (b * 0.3 + 0.8 * 255) | int | cap_rgb }}
+    );
     border-width: 3px;
     margin-left:  -1px;
     margin-right: -1px;
-  }
-{% endif %}
+    box-shadow: 0px 0px 5px {{ review_entry.book.cover.tint_color | as_rgba(0.3) }};
+  {% else %}
+    background: rgb(
+      {{ (r * 0.08 + 0.92 * 255) | int | cap_rgb }},
+      {{ (g * 0.08 + 0.92 * 255) | int | cap_rgb }},
+      {{ (b * 0.08 + 0.92 * 255) | int | cap_rgb }}
+    );
+  {% endif %}
+}
+
+#review_preview_{{ review_entry.book.slug }} img {
+  border: 0.1px solid {{ review_entry.book.cover.tint_color }};
+}
 
-#review_preview_{{ r }}_{{ g }}_{{ b }} a:hover {
-  background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
+#review_preview_{{ review_entry.book.slug }}:hover {
+  {% if review_entry.review.rating == 5 %}
+    background: rgb(
+      {{ (r * 0.42 + 0.58 * 255) | int }},
+      {{ (g * 0.42 + 0.58 * 255) | int }},
+      {{ (b * 0.42 + 0.58 * 255) | int }}
+    );
+  {% else %}
+    background: rgb(
+      {{ (r * 0.26 + 0.74 * 255) | int }},
+      {{ (g * 0.26 + 0.74 * 255) | int }},
+      {{ (b * 0.26 + 0.74 * 255) | int }}
+    );
+  {% endif %}
 }
 
-#review_preview_{{ r }}_{{ g }}_{{ b }} .review_preview img {
-  box-shadow: 0px 2.5px 2.5px rgba({{ r }}, {{ g }}, {{ b }}, 0.25);
+#review_preview_{{ review_entry.book.slug }} a:hover {
+  background: none;
 }