feat(fe-heatmap): add css class heated for heatmap elements

relates to #405

templates/default-layout.lucius

@@ -606,3 +606,29 @@ section {
 .notification__content {
   color: var(--color-font);
 }
+
+
+
+
+/*
+  "Heated" element.
+  Set custom property "--hotness" to a value from 0 to 1 to turn
+  the element's background to a color on a gradient from green to red.
+
+  TBD:
+  - move to a proper place
+  - think about font-weight...
+
+  Example:
+  <div .heated style="--hotness: 0.2">Lorem ipsum
+*/
+
+.heated {
+  --hotness: 0;
+  --red: calc(var(--hotness) * 200);
+  --green: calc(255 - calc(var(--hotness) * 255));
+  --opacity: calc(calc(var(--red) / 600) + 0.1);
+
+  font-weight: var(--weight, 600);
+  background-color: rgba(var(--red), var(--green), 0, var(--opacity));
+}