use solid colours on book entries
authorAlex Chan <alex@alexwlchan.net>
Wed, 16 Dec 2020 20:27:36 +0000 (20:27 +0000)
committerAlex Chan <alex@alexwlchan.net>
Wed, 16 Dec 2020 20:27:36 +0000 (20:27 +0000)
static/style.css
templates/_inline_book_list.html
templates/_review_style.css
templates/list_reading.html

index b5c6051..1ea8ce5 100644 (file)
@@ -167,7 +167,6 @@ footer a:hover {
   max-height: 130px;
 /*  margin-top: 12px;
   margin-bottom: 7px;*/
-  box-shadow: 0px 2.5px 2.5px rgba(0,0,0,0.25);
   vertical-align: middle;
 }
 
index a8886b1..f1c1a13 100644 (file)
@@ -5,7 +5,11 @@
 
 <style>
   #reading_{{ r }}_{{ g }}_{{ b }} {
-    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
+    background: rgb(
+      {{ (r * 0.08 + 0.92 * 255) | int }},
+      {{ (g * 0.08 + 0.92 * 255) | int }},
+      {{ (b * 0.08 + 0.92 * 255) | int }}
+    );
     border-color: rgb({{ r }}, {{ g }}, {{ b }});
   }
 
   }
 
   #reading_{{ r }}_{{ g }}_{{ b }} a:hover {
-    background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
+    background: rgb(
+      {{ (r * 0.3 + 0.7 * 255) | int }},
+      {{ (g * 0.3 + 0.7 * 255) | int }},
+      {{ (b * 0.3 + 0.7 * 255) | int }}
+    );
   }
 </style>
 
index 23c41eb..7cea1ed 100644 (file)
@@ -2,25 +2,32 @@
 {% set g = (tint_colors[review_entry.book.cover_image][1] * 255) | int %}
 {% set b = (tint_colors[review_entry.book.cover_image][2] * 255) | int %}
 
+/* See https://stackoverflow.com/a/11615135/1558022 */
 #review_preview_{{ r }}_{{ g }}_{{ b }} {
-  background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
   border-color: rgb({{ r }}, {{ g }}, {{ b }});
-}
 
-{% 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.24 + 0.76 * 255) | int }},
+      {{ (g * 0.24 + 0.76 * 255) | int }},
+      {{ (b * 0.24 + 0.76 * 255) | int }}
+    );
     border-width: 3px;
     margin-left:  -1px;
     margin-right: -1px;
-  }
-{% endif %}
-
-#review_preview_{{ r }}_{{ g }}_{{ b }} a:hover {
-  background: rgba({{ r }}, {{ g }}, {{ b }}, 0.3);
+  {% else %}
+    background: rgb(
+      {{ (r * 0.08 + 0.92 * 255) | int }},
+      {{ (g * 0.08 + 0.92 * 255) | int }},
+      {{ (b * 0.08 + 0.92 * 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_{{ r }}_{{ g }}_{{ b }} a:hover {
+  background: rgb(
+    {{ (r * 0.3 + 0.7 * 255) | int }},
+    {{ (g * 0.3 + 0.7 * 255) | int }},
+    {{ (b * 0.3 + 0.7 * 255) | int }}
+  );
 }
index 75ae2b4..483f03b 100644 (file)
 
   <style>
     #reading_{{ r }}_{{ g }}_{{ b }} {
-      background: rgba({{ r }}, {{ g }}, {{ b }}, 0.05);
+      background: rgb(
+        {{ (r * 0.08 + 0.92 * 255) | int }},
+        {{ (g * 0.08 + 0.92 * 255) | int }},
+        {{ (b * 0.08 + 0.92 * 255) | int }}
+      );
       border-color: rgb({{ r }}, {{ g }}, {{ b }});
     }
   </style>