Frontpage and Heatmap CSS tweaks (#13443)

* Frontpage and Heatmap CSS tweaks

- Make heatmap use primary color
- Defined secondary color shades
- Set various blue colors to CSS vars
- Misc tweaks

* remove a useless variable

* remove another useless variable

Co-authored-by: Lauris BH <lauris@nix.lv>

1 files changed, 50 insertions, 0 deletions

diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less
new file mode 100644
index 0000000000..3aa46a500f
--- /dev/null
+++ b/web_src/less/features/heatmap.less
@@ -0,0 +1,50 @@
+#user-heatmap {
+  width: 107%; // Fixes newest contributions not showing
+  text-align: center;
+
+  svg:not(:root) {
+    overflow: inherit;
+    padding: 0 !important;
+  }
+
+  @media (max-width: 1200px) {
+    & {
+      display: none;
+    }
+  }
+
+  .total-contributions {
+    text-align: left;
+    font-weight: 500;
+    margin-top: 0;
+  }
+}
+
+.heatmap-container {
+  position: relative;
+}
+
+.heatmap-container .total-contributions {
+  font-size: 11px;
+  position: absolute;
+  bottom: 0;
+  left: 25px;
+}
+
+@media (max-width: 1200px) {
+  .heatmap-container .total-contributions {
+    left: 21px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .heatmap-container .total-contributions {
+    font-size: 10px;
+    left: 17px;
+    bottom: -2px;
+  }
+}
+
+.heatmap-container text {
+  fill: currentColor !important;
+}