Add support for SEX X (other)

7 files changed, 176 insertions, 104 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);
 }