Improve borders on timestamps

* Fixes the double border issue, and changes color depending on if it's for a Track or Challenge
* `VideoSection` is defined separately for Tracks and Challenges separately, so it changes both
* Keeps the default white background color on Track Stops and Parts respectively

Author: aryanpingle

src/components/TimestampTimeline.module.css

@@ -11,8 +11,12 @@
   display: flex;
   padding: 0;
   cursor: pointer;
-  border-bottom: var(--border-red-light);
-  border-top: var(--border-red-light);
+  
+  &:first-child {
+    /* border-top will be set by the variant */
+    border-top: none !important;
+  }
+
   & span {
     display: flex;
     align-items: center;
@@ -68,6 +72,10 @@
   & .time {
     color: var(--red);
   }
+
+  & .timestamp {
+    border-top: var(--border-red-light);
+  }
 }
 
 .cyan {
@@ -83,6 +91,10 @@
   & .time {
     color: var(--cyan);
   }
+
+  & .timestamp {
+    border-top: var(--border-cyan-light);
+  }
 }
 
 @media (--reduced) {

src/components/challenges/VideoSection.module.css

@@ -150,8 +150,7 @@
   font-size: var(--maru-small);
   font-family: var(--maru-mono);
 
-  background-color: #fffcfc;
-  background-color: var(--red-lightest);
+  background-color: white;
 }
 
 .partTimeline.hide,

src/components/tracks/VideoSection.module.css

@@ -150,6 +150,8 @@
   color: var(--red);
   font-size: var(--maru-small);
   font-family: var(--maru-mono);
+
+  background-color: white;
 }
 
 .overviewTimeline.hide,

src/styles/variables.css

@@ -111,6 +111,7 @@
   --border-red-light: 1px solid rgba(255, 0, 0, 0.1);
   --border-orange: 1px solid var(--orange);
   --border-cyan: 1px solid var(--cyan);
+  --border-cyan-light: 1px solid rgba(0, 128, 128, 0.1);
   --border-pink: 1px solid var(--pink);
 
   --box-padding: 25px;