Add styling to figure 1c heatmap and its tooltip

MoTrPAC · Nov 3, 2023 · ea92cab · ea92cab
1 parent 2eede0c
commit ea92cab
Showing 1 changed file with 72 additions and 0 deletions.
diff --git a/src/sass/_landingPage.scss b/src/sass/_landingPage.scss
@@ -254,6 +254,78 @@ body.homepage {
       display: block;
     }
   }
+
+  #heatmap-container {
+    min-width: 1450px !important;
+    min-height: 610px;
+  }
+
+  .heatmap-y-axis {
+    .tick {
+      text {
+        font-size: 1.35rem;
+        font-weight: 800;
+      }
+    }
+    .tick:last-child,
+    .tick:nth-child(7),
+    .tick:nth-child(8) {
+      text {
+        fill: #FC8D62;
+      }
+    }
+    .tick:nth-child(3),
+    .tick:nth-child(4),
+    .tick:nth-child(5),
+    .tick:nth-child(6) {
+      text {
+        fill: #8DA0CB;
+      }
+    }
+    .tick:nth-child(2) {
+      text {
+        fill: #66C2A5;
+      }
+    }
+    .tick:first-child {
+      text {
+        fill: #E78AC3;
+      }
+    }
+  }
+
+  .heatmap-tooltip {
+    background: #000;
+    border-radius: 4px;
+    color: #ffffff;
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 9px 13px;
+    position: absolute;
+    text-align: left;
+  }
+
+  .legend-title-diff-proportion,
+  .legend-title-ome-type {
+    tspan {
+      fill: #fff;
+      font-size: 1.0rem;
+    }
+  }
+
+  .legend-y-axis {
+    font-size: 0.7rem;
+
+    .tick {
+      text {
+        fill: #fff;
+        font-size: 0.85rem;
+      }
+      text::before {
+        content: '%';
+      }
+    }
+  }
 }
 
 section.first {