Choose nicer colors for timeline chart blocks. Rebuild css and js.

8 files changed, 39 insertions, 199 deletions

diff --git a/resources/css/_chart-timeline.css b/resources/css/_chart-timeline.css
index 7f30fdf212..b24ab5edaa 100644
--- a/resources/css/_chart-timeline.css
+++ b/resources/css/_chart-timeline.css
@@ -18,3 +18,40 @@
  *
  * wt-chart, wt-chart-timeline
  */
+#timeline_chart {
+    position: relative;
+    top: 0;
+    left: 0;
+}
+
+.person0 {
+    background-color: #ffb3ba;
+}
+
+.person1 {
+    background-color: #ffd8ba;
+}
+
+.person2 {
+    background-color: #fff3ba;
+}
+
+.person3 {
+    background-color: #d4ffba;
+}
+
+.person4 {
+    background-color: #baffc9;
+}
+
+.person5 {
+    background-color: #bae1ff;
+}
+
+.person6 {
+    background-color: #e2baff;
+}
+
+.person7 {
+    background-color: #ffbaf3;
+}
diff --git a/resources/css/clouds.css b/resources/css/clouds.css
index 5368840cad..e0a3d481ca 100755
--- a/resources/css/clouds.css
+++ b/resources/css/clouds.css
@@ -798,42 +798,6 @@ div.fact_SHARED_NOTE {
     bottom: 20px;
 }
 
-.person0 {
-    background-color: #ddf;
-    border: outset #999 1px;
-    vertical-align: top;
-}
-
-.person1 {
-    background-color: #afa;
-    border: outset #afa 1px;
-    vertical-align: top;
-}
-
-.person2 {
-    background-color: #faa;
-    border: outset #faa 1px;
-    vertical-align: top;
-}
-
-.person3 {
-    background-color: #aad;
-    border: outset #55f 1px;
-    vertical-align: top;
-}
-
-.person4 {
-    background-color: #f55;
-    border: outset #f55 1px;
-    vertical-align: top;
-}
-
-.person5 {
-    background-color: #5f5;
-    border: outset #5f5 1px;
-    vertical-align: top;
-}
-
 .starredname {
     text-decoration: underline;
 }
@@ -1112,13 +1076,6 @@ div.faq_body {
     font-weight: bold;
 }
 
-/*-- timeline  --*/
-#timeline_chart {
-    position: relative;
-    top: 0;
-    left: 0;
-}
-
 [class^="icon-"],
 [class*=" icon-"] {
     display: inline-block;
diff --git a/resources/css/fab.css b/resources/css/fab.css
index 883c75deb5..c069497b58 100755
--- a/resources/css/fab.css
+++ b/resources/css/fab.css
@@ -557,36 +557,6 @@ div.fact_SHARED_NOTE {
     bottom: 20px;
 }
 
-.person0 {
-    background-color: #aaf;
-    vertical-align: top;
-}
-
-.person1 {
-    background-color: #afa;
-    vertical-align: top;
-}
-
-.person2 {
-    background-color: #faa;
-    vertical-align: top;
-}
-
-.person3 {
-    background-color: #55f;
-    vertical-align: top;
-}
-
-.person4 {
-    background-color: #f55;
-    vertical-align: top;
-}
-
-.person5 {
-    background-color: #5f5;
-    vertical-align: top;
-}
-
 .starredname {
     text-decoration: underline;
 }
@@ -871,13 +841,6 @@ div.faq_body {
     font-weight: bold;
 }
 
-/*-- timeline  --*/
-#timeline_chart {
-    position: relative;
-    top: 0;
-    left: 0;
-}
-
 /*
  * Any element that is loaded dynamically has the class wt-ajax-load.
  * We can provide a "loading" placeholder for empty elements with this class.
diff --git a/resources/css/minimal.css b/resources/css/minimal.css
index 8a4678f64f..69723157a5 100755
--- a/resources/css/minimal.css
+++ b/resources/css/minimal.css
@@ -587,37 +587,6 @@ div.faq_body {
     vertical-align: top;
 }
 
-.person0 {
-    background-color: var(--bs-primary-bg-subtle);
-}
-
-.person1 {
-    background-color: var(--bs-secondary-bg-subtle);
-}
-
-.person2 {
-    background-color: var(--bs-success-bg-subtle);
-}
-
-.person3 {
-    background-color: var(--bs-danger-bg-subtle);
-}
-
-.person4 {
-    background-color: var(--bs-warning-bg-subtle);
-}
-
-.person5 {
-    background-color: var(--bs-info-bg-subtle);
-}
-
-/*-- timeline  --*/
-#timeline_chart {
-    position: relative;
-    top: 0;
-    left: 0;
-}
-
 /*
  * Default icons are provided by FontAwesome.
  */
diff --git a/resources/css/webtrees.css b/resources/css/webtrees.css
index 7866cd95bd..2a8df0c687 100755
--- a/resources/css/webtrees.css
+++ b/resources/css/webtrees.css
@@ -752,42 +752,6 @@ div.fact_SHARED_NOTE {
     bottom: 20px;
 }
 
-.person0 {
-    background-color: #aaf;
-    border: outset #aaf 1px;
-    vertical-align: top;
-}
-
-.person1 {
-    background-color: #afa;
-    border: outset #afa 1px;
-    vertical-align: top;
-}
-
-.person2 {
-    background-color: #faa;
-    border: outset #faa 1px;
-    vertical-align: top;
-}
-
-.person3 {
-    background-color: #55f;
-    border: outset #55f 1px;
-    vertical-align: top;
-}
-
-.person4 {
-    background-color: #f55;
-    border: outset #f55 1px;
-    vertical-align: top;
-}
-
-.person5 {
-    background-color: #5f5;
-    border: outset #5f5 1px;
-    vertical-align: top;
-}
-
 .starredname {
     text-decoration: underline;
 }
@@ -1056,13 +1020,6 @@ div.faq_body {
     font-weight: bold;
 }
 
-/*-- timeline  --*/
-#timeline_chart {
-    position: relative;
-    top: 0;
-    left: 0;
-}
-
 /*
  * Any element that is loaded dynamically has the class wt-ajax-load.
  * We can provide a "loading" placeholder for empty elements with this class.
diff --git a/resources/css/xenea.css b/resources/css/xenea.css
index bb7b872b6a..ea6a5a1c5e 100755
--- a/resources/css/xenea.css
+++ b/resources/css/xenea.css
@@ -745,42 +745,6 @@ div.fact_SHARED_NOTE {
     bottom: 20px;
 }
 
-.person0 {
-    background-color: #aaf;
-    border: outset #aaf 1px;
-    vertical-align: top;
-}
-
-.person1 {
-    background-color: #afa;
-    border: outset #afa 1px;
-    vertical-align: top;
-}
-
-.person2 {
-    background-color: #faa;
-    border: outset #faa 1px;
-    vertical-align: top;
-}
-
-.person3 {
-    background-color: #55f;
-    border: outset #55f 1px;
-    vertical-align: top;
-}
-
-.person4 {
-    background-color: #f55;
-    border: outset #f55 1px;
-    vertical-align: top;
-}
-
-.person5 {
-    background-color: #5f5;
-    border: outset #5f5 1px;
-    vertical-align: top;
-}
-
 .starredname {
     text-decoration: underline;
 }
@@ -1045,13 +1009,6 @@ div.faq_body {
     font-weight: bold;
 }
 
-/*-- timeline  --*/
-#timeline_chart {
-    position: relative;
-    top: 0;
-    left: 0;
-}
-
 /*
  * Any element that is loaded dynamically has the class wt-ajax-load.
  * We can provide a "loading" placeholder for empty elements with this class.
diff --git a/resources/views/modules/timeline-chart/chart.phtml b/resources/views/modules/timeline-chart/chart.phtml
index da80fe7c44..65fffc0645 100644
--- a/resources/views/modules/timeline-chart/chart.phtml
+++ b/resources/views/modules/timeline-chart/chart.phtml
@@ -409,7 +409,7 @@ use Fisharebest\Webtrees\Individual;
                     <td>
                         <?php if (!empty($birthyears[$indi->xref()])) : ?>
                             <?php $tyear = round(($ageyoffset + $bheight / 2) / $scale) + $baseyear; ?>
-                            <table class="person<?= $p % 6 ?>" style="cursor: grab;">
+                            <table class="person<?= $p % 8 ?>" style="cursor: grab;">
                                 <tr>
                                     <td>
                                         <?= I18N::translate('Year:') ?>
diff --git a/resources/views/modules/timeline-chart/page.phtml b/resources/views/modules/timeline-chart/page.phtml
index 5e644c2825..5f5d9bd2c2 100644
--- a/resources/views/modules/timeline-chart/page.phtml
+++ b/resources/views/modules/timeline-chart/page.phtml
@@ -63,7 +63,7 @@ use Illuminate\Support\Collection;
 
 <div class="row my-4">
     <?php foreach ($individuals as $n => $individual) : ?>
-        <div class="col-md-6 col-lg-4 col-xl-3 person<?= $n % 6 ?>">
+        <div class="col-md-6 col-lg-4 col-xl-3 person<?= $n % 8 ?>">
             <?= view('icons/sex', ['sex' => $individual->sex()]) ?>
             <a href="<?= e($individual->url()) ?>">
                 <?= $individual->fullName() ?>