Tint timeline background colors (#5356)

* Tint background color so it works with dark mode

* Apply for person6 and person7 also

2 files changed, 14 insertions, 9 deletions

diff --git a/resources/css/_chart-timeline.css b/resources/css/_chart-timeline.css
index b24ab5edaa..675bf9c029 100644
--- a/resources/css/_chart-timeline.css
+++ b/resources/css/_chart-timeline.css
@@ -24,34 +24,39 @@
     left: 0;
 }
 
+.person0, .person1, .person2, .person3,
+.person4, .person5, .person6, .person7 {
+    --person-bg-alpha: 30%;
+}
+
 .person0 {
-    background-color: #ffb3ba;
+    background-color: color-mix(in srgb, var(--bs-red) var(--person-bg-alpha), transparent);
 }
 
 .person1 {
-    background-color: #ffd8ba;
+    background-color: color-mix(in srgb, var(--bs-orange) var(--person-bg-alpha), transparent);
 }
 
 .person2 {
-    background-color: #fff3ba;
+    background-color: color-mix(in srgb, var(--bs-yellow) var(--person-bg-alpha), transparent);
 }
 
 .person3 {
-    background-color: #d4ffba;
+    background-color: color-mix(in srgb, var(--bs-green) var(--person-bg-alpha), transparent);
 }
 
 .person4 {
-    background-color: #baffc9;
+    background-color: color-mix(in srgb, var(--bs-teal) var(--person-bg-alpha), transparent);
 }
 
 .person5 {
-    background-color: #bae1ff;
+    background-color: color-mix(in srgb, var(--bs-cyan) var(--person-bg-alpha), transparent);
 }
 
 .person6 {
-    background-color: #e2baff;
+    background-color: color-mix(in srgb, var(--bs-purple) var(--person-bg-alpha), transparent);
 }
 
 .person7 {
-    background-color: #ffbaf3;
+    background-color: color-mix(in srgb, var(--bs-pink) var(--person-bg-alpha), transparent);
 }
diff --git a/resources/css/minimal.css b/resources/css/minimal.css
index 69723157a5..ae70fe334c 100755
--- a/resources/css/minimal.css
+++ b/resources/css/minimal.css
@@ -582,7 +582,7 @@ div.faq_body {
     bottom: 20px;
 }
 
-.person0, .person1, .person2, .person3, .person4, .person5 {
+.person0, .person1, .person2, .person3, .person4, .person5, .person6, .person7 {
     border: outset var(--bs-border-color) var(--bs-border-width);
     vertical-align: top;
 }