Add support for SEX X (other)

10 files changed, 183 insertions, 122 deletions

diff --git a/resources/css/_chart-interactive.css b/resources/css/_chart-interactive.css
index 0f45dee4ee..ecda60ec81 100644
--- a/resources/css/_chart-interactive.css
+++ b/resources/css/_chart-interactive.css
@@ -229,14 +229,10 @@ table#tvTreeBorder td,
 [dir=rtl] #tv_tree div.tv_box img {
     float: right;
 }
-#tv_tree div.tv_box .icon-silhouette-M,
-#tv_tree div.tv_box .icon-silhouette-F,
-#tv_tree div.tv_box .icon-silhouette-U {
+#tv_tree div.tv_box .icon-silhouette {
     float: left;
 }
-[dir=rtl] #tv_tree div.tv_box .icon-silhouette-M,
-[dir=rtl] #tv_tree div.tv_box .icon-silhouette-F,
-[dir=rtl] #tv_tree div.tv_box .icon-silhouette-U {
+[dir=rtl] #tv_tree div.tv_box .icon-silhouette {
     float: right;
 }
 
diff --git a/resources/css/clouds.css b/resources/css/clouds.css
index 3cad256858..d667b17fce 100755
--- a/resources/css/clouds.css
+++ b/resources/css/clouds.css
@@ -29,6 +29,8 @@
     --sex-m-fg: #aaaaaa;
     --sex-u-bg: #ffffff;
     --sex-u-fg: #aaaaaa;
+    --sex-x-bg: #fceaa1;
+    --sex-x-fg: #ffab57;
 }
 
 /* Override Bootstrap formatting */
@@ -524,11 +526,6 @@ table {
  * wt-route-individual
  * +---wt-header-wrapper
  */
-
-.wt-individual-silhouette {
-    content: url(images/individual-silhouette-unknown.png);
-}
-
 .wt-individual-silhouette-f {
     content: url(images/individual-silhouette-female.png);
 }
@@ -537,6 +534,11 @@ table {
     content: url(images/individual-silhouette-male.png);
 }
 
+.wt-individual-silhouette-u,
+.wt-individual-silhouette-x {
+    content: url(images/individual-silhouette-unknown.png);
+}
+
 /*
  * Chart-boxes are used to build the various charts.
  * Each type of chart will set its own size and hide/show content.
@@ -555,12 +557,6 @@ table {
  * +--- wt-chart-box-facts
  *     +--- wt-chart-box-fact
  */
-.wt-chart-box,
-.wt-chart-box-menu {
-    background: var(--sex-u-bg);
-    border: dashed var(--sex-u-fg) thin;
-}
-
 .wt-chart-box {
     height: 5rem;
     padding: 2px;
@@ -579,6 +575,18 @@ table {
     border: solid var(--sex-m-fg) thin;
 }
 
+.wt-chart-box-u,
+.wt-chart-box-u .wt-chart-box-dropdown {
+    background: var(--sex-u-bg);
+    border: solid var(--sex-u-fg) thin;
+}
+
+.wt-chart-box-x,
+.wt-chart-box-x .wt-chart-box-dropdown {
+    background: var(--sex-x-bg);
+    border: solid var(--sex-x-fg) thin;
+}
+
 /* ====== Round Corners ======== */
 input,
 fieldset,
@@ -700,17 +708,24 @@ div.fact_SHARED_NOTE {
 }
 
 .wt-facts-table td {
-    background: #fff;
     border: solid #999 1px;
     border-radius: 3px;
 }
 
-.wt-facts-table .wt-gender-M td {
+.wt-facts-table .wt-sex-f td {
+    background-color: var(--sex-f-bg);
+}
+
+.wt-facts-table .wt-sex-m td {
     background-color: var(--sex-m-bg);
 }
 
-.wt-facts-table .wt-gender-F td {
-    background-color: var(--sex-f-bg);
+.wt-facts-table .wt-sex-u td {
+    background-color: var(--sex-u-bg);
+}
+
+.wt-facts-table .wt-sex-x td {
+    background-color: var(--sex-x-bg);
 }
 
 .details_label {
@@ -1215,15 +1230,16 @@ div.faq_body {
 }
 
 /* Silhouettes on charts */
-.icon-silhouette-F {
+.icon-silhouette-f {
     content: url(clouds/images/silhouette_female_small.png);
 }
 
-.icon-silhouette-M {
+.icon-silhouette-m {
     content: url(clouds/images/silhouette_male_small.png);
 }
 
-.icon-silhouette-U {
+.icon-silhouette-u,
+.icon-silhouette-x {
     content: url(clouds/images/silhouette_unknown_small.png);
 }
 
diff --git a/resources/css/colors.css b/resources/css/colors.css
index b53f408984..526f38aadd 100644
--- a/resources/css/colors.css
+++ b/resources/css/colors.css
@@ -508,15 +508,16 @@ div.faq_title {
 }
 
 /* Silhouettes on charts */
-.icon-silhouette-F {
+.icon-silhouette-f {
     content: url(colors/images/silhouette_female_small.png);
 }
 
-.icon-silhouette-M {
+.icon-silhouette-m {
     content: url(colors/images/silhouette_male_small.png);
 }
 
-.icon-silhouette-U {
+.icon-silhouette-u,
+.icon-silhouette-x {
     content: url(colors/images/silhouette_unknown_small.png);
 }
 
diff --git a/resources/css/fab.css b/resources/css/fab.css
index c77ad29c50..9456815516 100755
--- a/resources/css/fab.css
+++ b/resources/css/fab.css
@@ -29,9 +29,13 @@
     --sex-m-fg: #8888ff;
     --sex-u-bg: #ddffdd;
     --sex-u-fg: #88ff88;
+    --sex-x-bg: #fceaa1;
+    --sex-x-fg: #ffab57;
 }
 
-/* Override Bootstrap formatting */
+/* Override Bootstrap format    --sex-u-bg: #ddffdd;
+    --sex-u-fg: #88ff88;
+ting */
 .btn-link {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
@@ -288,11 +292,6 @@ table {
  * wt-route-individual
  * +---wt-header-wrapper
  */
-
-.wt-individual-silhouette {
-    content: url(images/individual-silhouette-unknown.png);
-}
-
 .wt-individual-silhouette-f {
     content: url(images/individual-silhouette-female.png);
 }
@@ -301,6 +300,11 @@ table {
     content: url(images/individual-silhouette-male.png);
 }
 
+.wt-individual-silhouette-u,
+.wt-individual-silhouette-x {
+    content: url(images/individual-silhouette-unknown.png);
+}
+
 /*
  * Chart-boxes are used to build the various charts.
  * Each type of chart will set its own size and hide/show content.
@@ -319,11 +323,6 @@ table {
  * +--- wt-chart-box-facts
  *     +--- wt-chart-box-fact
  */
-.wt-chart-box,
-.wt-chart-box-menu {
-    background: var(--sex-u-bg);
-    border: dashed var(--sex-u-fg) thin;
-}
 
 .wt-chart-box {
     height: 5rem;
@@ -336,11 +335,25 @@ table {
 .wt-chart-box-f,
 .wt-chart-box-f .wt-chart-box-dropdown {
     background: var(--sex-f-bg);
+    border: solid var(--sex-f-fg) thin;
 }
 
 .wt-chart-box-m,
 .wt-chart-box-m .wt-chart-box-dropdown {
     background: var(--sex-m-bg);
+    border: solid var(--sex-m-fg) thin;
+}
+
+.wt-chart-box-u,
+.wt-chart-box-u .wt-chart-box-dropdown {
+    background: var(--sex-u-bg);
+    border: solid var(--sex-u-fg) thin;
+}
+
+.wt-chart-box-x,
+.wt-chart-box-x .wt-chart-box-dropdown {
+    background: var(--sex-x-bg);
+    border: solid var(--sex-x-fg) thin;
 }
 
 /* ====== Round Corners ======== */
@@ -449,17 +462,24 @@ div.fact_SHARED_NOTE {
 
 .wt-facts-table td {
     border-radius: 4px;
-    background-color: #ddd;
 }
 
-.wt-facts-table .wt-gender-M td {
+.wt-facts-table .wt-sex-m > td {
     background-color: var(--sex-m-bg);
 }
 
-.wt-facts-table .wt-gender-F td {
+.wt-facts-table .wt-sex-f > td {
     background-color: var(--sex-f-bg);
 }
 
+.wt-facts-table .wt-sex-u > td {
+    background-color: var(--sex-u-bg);
+}
+
+.wt-facts-table .wt-sex-x > td {
+    background-color: var(--sex-x-bg);
+}
+
 .details_label {
     font-weight: bold;
 }
@@ -1101,15 +1121,16 @@ a > .wt-icon-arrow-up:hover {
 }
 
 /* Silhouettes on charts */
-.icon-silhouette-F {
+.icon-silhouette-f {
     content: url(fab/images/silhouette_female_small.png);
 }
 
-.icon-silhouette-M {
+.icon-silhouette-m {
     content: url(fab/images/silhouette_male_small.png);
 }
 
-.icon-silhouette-U {
+.icon-silhouette-u,
+.icon-silhouette-x {
     content: url(fab/images/silhouette_unknown_small.png);
 }
 
diff --git a/resources/css/minimal.css b/resources/css/minimal.css
index 870b71ede5..040c1f9709 100755
--- a/resources/css/minimal.css
+++ b/resources/css/minimal.css
@@ -29,6 +29,8 @@
     --sex-m-fg: #888888;
     --sex-u-bg: #ffffff;
     --sex-u-fg: #888888;
+    --sex-x-bg: #ffffff;
+    --sex-x-fg: #888888;
 }
 
 /* Override Bootstrap formatting */
@@ -250,11 +252,6 @@ table {
  * wt-route-individual
  * +---wt-header-wrapper
  */
-
-.wt-individual-silhouette {
-    content: url(images/individual-silhouette-unknown.png);
-}
-
 .wt-individual-silhouette-f {
     content: url(images/individual-silhouette-female.png);
 }
@@ -263,6 +260,11 @@ table {
     content: url(images/individual-silhouette-male.png);
 }
 
+.wt-individual-silhouette-u,
+.wt-individual-silhouette-x {
+    content: url(images/individual-silhouette-unknown.png);
+}
+
 /*
  * Chart-boxes are used to build the various charts.
  * Each type of chart will set its own size and hide/show content.
@@ -281,12 +283,6 @@ table {
  * +--- wt-chart-box-facts
  *     +--- wt-chart-box-fact
  */
-.wt-chart-box,
-.wt-chart-box-menu {
-    background: var(--sex-u-bg);
-    border: dashed var(--sex-u-fg) thin;
-}
-
 .wt-chart-box {
     height: 5rem;
     padding: 2px;
@@ -305,6 +301,18 @@ table {
     border: solid var(--sex-m-fg) thin;
 }
 
+.wt-chart-box-u,
+.wt-chart-box-u .wt-chart-box-dropdown {
+    background: var(--sex-u-bg);
+    border: solid var(--sex-u-fg) thin;
+}
+
+.wt-chart-box-x,
+.wt-chart-box-x .wt-chart-box-dropdown {
+    background: var(--sex-x-bg);
+    border: solid var(--sex-x-fg) thin;
+}
+
 /* ---Pending edits--- */
 .wt-new {
     outline: solid thin blue;
@@ -898,15 +906,16 @@ a > .wt-icon-arrow-up:hover {
 }
 
 /* Silhouettes on charts */
-.icon-silhouette-F {
+.icon-silhouette-f {
     content: url(minimal/images/silhouette_female_small.png);
 }
 
-.icon-silhouette-M {
+.icon-silhouette-m {
     content: url(minimal/images/silhouette_male_small.png);
 }
 
-.icon-silhouette-U {
+.icon-silhouette-u,
+.icon-silhouette-x {
     content: url(minimal/images/silhouette_unknown_small.png);
 }
 
diff --git a/resources/css/webtrees.css b/resources/css/webtrees.css
index a1dba72728..6da029cd43 100755
--- a/resources/css/webtrees.css
+++ b/resources/css/webtrees.css
@@ -27,8 +27,10 @@
     --sex-f-fg: #ff2080;
     --sex-m-bg: #edf7fd;
     --sex-m-fg: #81a9cb;
-    --sex-u-bg: #ffffff;
-    --sex-u-fg: #81a9cb;
+    --sex-u-bg: #cceecc;
+    --sex-u-fg: #559955;
+    --sex-x-bg: #fceaa1;
+    --sex-x-fg: #ffab57;
 }
 
 /* Override Bootstrap formatting */
@@ -496,10 +498,6 @@ table {
  * +---wt-header-wrapper
  */
 
-.wt-individual-silhouette {
-    content: url(images/individual-silhouette-unknown.png);
-}
-
 .wt-individual-silhouette-f {
     content: url(images/individual-silhouette-female.png);
 }
@@ -508,6 +506,11 @@ table {
     content: url(images/individual-silhouette-male.png);
 }
 
+.wt-individual-silhouette-u,
+.wt-individual-silhouette-x {
+    content: url(images/individual-silhouette-unknown.png);
+}
+
 /*
  * Chart-boxes are used to build the various charts.
  * Each type of chart will set its own size and hide/show content.
@@ -526,12 +529,6 @@ table {
  * +--- wt-chart-box-facts
  *     +--- wt-chart-box-fact
  */
-.wt-chart-box,
-.wt-chart-box-menu {
-    background: var(--sex-u-bg);
-    border: dashed var(--sex-u-fg) thin;
-}
-
 .wt-chart-box {
     height: 5rem;
     padding: 2px;
@@ -550,6 +547,18 @@ table {
     border: solid var(--sex-m-fg) thin;
 }
 
+.wt-chart-box-u,
+.wt-chart-box-u .wt-chart-box-dropdown {
+    background: var(--sex-u-bg);
+    border: solid var(--sex-u-fg) thin;
+}
+
+.wt-chart-box-x,
+.wt-chart-box-x .wt-chart-box-dropdown {
+    background: var(--sex-x-bg);
+    border: solid var(--sex-x-fg) thin;
+}
+
 :focus {
     outline-style: none;
 }
@@ -641,19 +650,24 @@ div.fact_SHARED_NOTE {
     min-width: 20%;
 }
 
-.wt-facts-table td {
-    background-color: #edf7fd;
-    border: solid #81a9cb 1px;
+.wt-facts-table .wt-sex-f > td {
+    background-color: var(--sex-f-bg);
+    border: solid #81a9cb thin;
 }
 
-.wt-facts-table .wt-gender-M td {
+.wt-facts-table .wt-sex-m > td {
     background-color: var(--sex-m-bg);
-    border-color: #81a9cb;
+    border: solid var(--sex-m-fg) thin;
 }
 
-.wt-facts-table .wt-gender-F td {
-    background-color: var(--sex-f-bg);
-    border-color: #ff2080;
+.wt-facts-table .wt-sex-u > td {
+    background-color: var(--sex-u-bg);
+    border: solid var(--sex-u-fg) thin;
+}
+
+.wt-facts-table .wt-sex-x > td {
+    background-color: var(--sex-x-bg);
+    border: solid var(--sex-x-fg) thin;;
 }
 
 .details_label {
@@ -1308,15 +1322,16 @@ a > .wt-icon-arrow-up:hover {
 }
 
 /* Silhouettes on charts */
-.icon-silhouette-F {
+.icon-silhouette-f {
     content: url(webtrees/images/silhouette_female_small.png);
 }
 
-.icon-silhouette-M {
+.icon-silhouette-m {
     content: url(webtrees/images/silhouette_male_small.png);
 }
 
-.icon-silhouette-U {
+.icon-silhouette-u,
+.icon-silhouette-x {
     content: url(webtrees/images/silhouette_unknown_small.png);
 }
 
diff --git a/resources/css/xenea.css b/resources/css/xenea.css
index 2bdfc56660..31d866cc21 100755
--- a/resources/css/xenea.css
+++ b/resources/css/xenea.css
@@ -29,6 +29,8 @@
     --sex-m-fg: #84beff;
     --sex-u-bg: #ffffff;
     --sex-u-fg: #008080;
+    --sex-x-bg: #fceaa1;
+    --sex-x-fg: #ffab57;
 }
 
 /* Override Bootstrap formatting */
@@ -489,11 +491,6 @@ table {
  * wt-route-individual
  * +---wt-header-wrapper
  */
-
-.wt-individual-silhouette {
-    content: url(images/individual-silhouette-unknown.png);
-}
-
 .wt-individual-silhouette-f {
     content: url(images/individual-silhouette-female.png);
 }
@@ -502,6 +499,11 @@ table {
     content: url(images/individual-silhouette-male.png);
 }
 
+.wt-individual-silhouette-u,
+.wt-individual-silhouette-x {
+    content: url(images/individual-silhouette-unknown.png);
+}
+
 /*
  * Chart-boxes are used to build the various charts.
  * Each type of chart will set its own size and hide/show content.
@@ -520,12 +522,6 @@ table {
  * +--- wt-chart-box-facts
  *     +--- wt-chart-box-fact
  */
-.wt-chart-box,
-.wt-chart-box-menu {
-    background: var(--sex-u-bg);
-    border: dashed var(--sex-u-fg) thin;
-}
-
 .wt-chart-box {
     height: 5rem;
     padding: 2px;
@@ -544,6 +540,18 @@ table {
     border: solid var(--sex-m-fg) thin;
 }
 
+.wt-chart-box-u,
+.wt-chart-box-u .wt-chart-box-dropdown {
+    background: var(--sex-u-bg);
+    border: solid var(--sex-u-fg) thin;
+}
+
+.wt-chart-box-x,
+.wt-chart-box-x .wt-chart-box-dropdown {
+    background: var(--sex-x-bg);
+    border: solid var(--sex-x-fg) thin;
+}
+
 #content #home-page {
     margin-left: 5px;
 }
@@ -634,19 +642,24 @@ div.fact_SHARED_NOTE {
     min-width: 20%;
 }
 
-.wt-facts-table td {
-    background-color: #ecf5ff;
-    border: solid #c3dfff 1px;
-}
-
-.wt-facts-table .wt-gender-M td {
+.wt-facts-table .wt-sex-m > td {
     background-color: var(--sex-m-bg);
-    border-color: #84beff;
+    border: solid var(--sex-m-fg) thin;
 }
 
-.wt-facts-table .wt-gender-F td {
+.wt-facts-table .wt-sex-f > td {
     background-color: var(--sex-f-bg);
-    border-color: #ff2080;
+    border: solid var(--sex-f-fg) thin;
+}
+
+.wt-facts-table .wt-sex-u > td {
+    background-color: var(--sex-u-bg);
+    border: solid var(--sex-u-fg) thin;
+}
+
+.wt-facts-table .wt-sex-x > td {
+    background-color: var(--sex-x-bg);
+    border: solid var(--sex-x-fg) thin;
 }
 
 .details_label {
@@ -1460,15 +1473,16 @@ a > .wt-icon-arrow-up:hover {
 }
 
 /* Silhouettes on charts */
-.icon-silhouette-F {
+.icon-silhouette-f {
     content: url(xenea/images/silhouette_female_small.png);
 }
 
-.icon-silhouette-M {
+.icon-silhouette-m {
     content: url(xenea/images/silhouette_male_small.png);
 }
 
-.icon-silhouette-U {
+.icon-silhouette-u,
+.icon-silhouette-x {
     content: url(xenea/images/silhouette_unknown_small.png);
 }
 
diff --git a/resources/views/individual-sex.phtml b/resources/views/individual-sex.phtml
index 6563b86be4..b47f1fe249 100644
--- a/resources/views/individual-sex.phtml
+++ b/resources/views/individual-sex.phtml
@@ -5,6 +5,7 @@ use Fisharebest\Webtrees\Functions\FunctionsPrint;
 use Fisharebest\Webtrees\Functions\FunctionsPrintFacts;
 use Fisharebest\Webtrees\Http\RequestHandlers\EditFactPage;
 use Fisharebest\Webtrees\I18N;
+use Fisharebest\Webtrees\Registry;
 
 /**
  * @var Fact $fact
@@ -27,19 +28,7 @@ if ($fact->isPendingDeletion()) {
             <?= view('icons/expand') ?>
             <?= view('icons/collapse') ?>
             <span class="label"><?= I18N::translate('Gender') ?></span>
-            <?php
-            switch ($fact->value()) {
-                case 'M':
-                    echo I18N::translate('Male');
-                    break;
-                case 'F':
-                    echo I18N::translate('Female');
-                    break;
-                default:
-                    echo I18N::translateContext('unknown gender', 'Unknown');
-                    break;
-            }
-            ?>
+            <?= Registry::elementFactory()->make('INDI:SEX')->value($fact->value(), $tree) ?>
         </button>
     </div>
     <div id="name-content-<?= $fact->id() ?>" class="accordion-collapse collapse" data-bs-parent="#individual-names" aria-labelledby="name-header-<?= $fact->id() ?>">
diff --git a/resources/views/modules/family_nav/sidebar-family.phtml b/resources/views/modules/family_nav/sidebar-family.phtml
index b81e0be1f8..067cb0524f 100644
--- a/resources/views/modules/family_nav/sidebar-family.phtml
+++ b/resources/views/modules/family_nav/sidebar-family.phtml
@@ -21,7 +21,7 @@ use Fisharebest\Webtrees\Services\RelationshipService;
     </caption>
     <tbody>
         <?php foreach ($family->spouses() as $spouse) : ?>
-            <tr class="text-center wt-family-navigator-parent wt-gender-<?= $spouse->sex() ?>">
+            <tr class="text-center wt-family-navigator-parent wt-sex-<?= strtolower($spouse->sex()) ?>">
                 <th class="align-middle wt-family-navigator-label" scope="row">
                     <?php if ($spouse === $individual) : ?>
                         <?= app(RelationshipService::class)->getCloseRelationshipName($individual, $spouse) ?>
@@ -69,7 +69,7 @@ use Fisharebest\Webtrees\Services\RelationshipService;
         <?php endforeach ?>
 
         <?php foreach ($family->children() as $child) : ?>
-            <tr class="text-center wt-family-navigator-child wt-gender-<?= $child->sex() ?>">
+            <tr class="text-center wt-family-navigator-child wt-sex-<?= strtolower($child->sex()) ?>">
                 <th class="align-middle wt-family-navigator-label" scope="row">
                     <?php if ($child === $individual) : ?>
                         <?= app(RelationshipService::class)->getCloseRelationshipName($individual, $child) ?>
diff --git a/resources/views/modules/relatives/family.phtml b/resources/views/modules/relatives/family.phtml
index 8690998521..9eea7d85f6 100644
--- a/resources/views/modules/relatives/family.phtml
+++ b/resources/views/modules/relatives/family.phtml
@@ -34,7 +34,7 @@ use Fisharebest\Webtrees\Services\RelationshipService;
             $found |= !$fact->isPendingDeletion();
             $person = $fact->target();
             if ($person instanceof Individual) {
-                $row_class = 'wt-gender-' . $person->sex();
+                $row_class = 'wt-sex-' . strtolower($person->sex());
                 if ($fact->isPendingAddition()) {
                     $row_class .= ' wt-new';
                 } elseif ($fact->isPendingDeletion()) {
@@ -71,7 +71,7 @@ use Fisharebest\Webtrees\Services\RelationshipService;
             $person = $fact->target();
             if ($person instanceof Individual) {
                 $found |= !$fact->isPendingDeletion();
-                $row_class = 'wt-gender-' . $person->sex();
+                $row_class = 'wt-sex-' . strtolower($person->sex());
                 if ($fact->isPendingAddition()) {
                     $row_class .= ' wt-new';
                 } elseif ($fact->isPendingDeletion()) {
@@ -157,7 +157,7 @@ use Fisharebest\Webtrees\Services\RelationshipService;
         foreach ($family->facts(['CHIL'], false, $fam_access_level) as $fact) {
             $person = $fact->target();
             if ($person instanceof Individual) {
-                $row_class = 'wt-gender-' . $person->sex();
+                $row_class = 'wt-sex-' . strtolower($person->sex());
                 if ($fact->isPendingAddition()) {
                     $child_number++;
                     $row_class .= ' new';