Update up-down icons

nummi/history/templates/history/plot.html

@@ -70,7 +70,7 @@
                         {% endif %}
                         {% if m %}
                             <td class="{% if m.sum > 0 %}p{% else %}m{% endif %}"
-                                style="background-color: color-mix(in hsl, currentcolor {% calendar_opacity m.sum history.max.sum %}, white)"
+                                style="--opacity: {% calendar_opacity m.sum history.max.sum %}"
                                 title="{{ m.sum|pmrvalue }}">{% up_down_icon m.sum %}</td>
                         {% else %}
                             <td></td>

nummi/history/templatetags/history_extras.py

@@ -30,11 +30,11 @@ def empty_calendar_cells_end(n):
 @register.simple_tag
 def up_down_icon(val):
     if val > 0:
-        return remix("arrow-up-s", "green w")
+        return remix("arrow-up-s", "green")
     elif val < 0:
-        return remix("arrow-down-s", "red w")
+        return remix("arrow-down-s", "red")
 
-    return ""
+    return remix("equal", "white")
 
 
 @register.simple_tag

nummi/main/static/main/css/main.css

@@ -232,14 +232,19 @@ footer {
   font-weight: normal;
 
   &.green,
-  &.red {
-    color: white;
+  &.red,
+  &.white {
+    color: var(--bg);
     &.green {
       background: var(--green);
     }
     &.red {
       background: var(--red);
     }
+    &.white {
+      background: var(--bg-01);
+      color: var(--text);
+    }
     border-radius: var(--radius);
     height: 1.5rem;
     width: 1.5rem;

nummi/main/static/main/css/plot.css

@@ -101,11 +101,16 @@ table.full-width col.bar {
 
       td {
         text-align: center;
+        background-color: color-mix(
+          in hsl,
+          var(--td-bg, var(--bg)) var(--opacity),
+          var(--bg)
+        );
         &.p {
-          color: var(--green);
+          --td-bg: var(--green);
         }
         &.m {
-          color: var(--red);
+          --td-bg: var(--red);
         }
       }
     }