Adjust base CSSs and minimal theme to use Bootstrap variables (#5328)

* Use bootstrap variables in root

* Spinner color

* Colorbox

* Remove hardcoded red

* OSK styling

* Override hardcoded color in tom select control

* Remove more hardcoded stuff

* Header style

* Use border color for vertical indented line

* More border colors

* No bg for lifespan area

* Add padding

* Style first person levels

* Odometer styling

* list_value

* More borders

* Person backgrounds

* More prominent chart line

* Used?

* FAQ

* Fan chart context menu

* A little more subtle spinner

* Lifespans info box

* Accordion button bg

* Fix indentation

* Interactive chart styling

* Remove unused stuff

* Use normal borders in dropdown menus

7 files changed, 103 insertions, 161 deletions

diff --git a/resources/css/_base.css b/resources/css/_base.css
index ae640252d0..836a8202b0 100644
--- a/resources/css/_base.css
+++ b/resources/css/_base.css
@@ -87,7 +87,7 @@ a:hover {
 /* Accordions */
 .accordion-button,
 .accordion-button:not(.collapsed) {
-    background-color: rgba(0,0,0,.03);
+    background-color: var(--bs-tertiary-bg);
     color: currentcolor;
 }
 
@@ -125,7 +125,7 @@ a:hover, .btn-link:hover, .nav-link:hover {
 .wt-nested-edit-fields {
     padding-left: 1rem;
     margin-left: 1rem;
-    border-left: solid 4px grey;
+    border-left: solid 4px var(--bs-border-color);
 }
 
 .wt-text-overflow-elipsis {
@@ -159,7 +159,7 @@ a:hover, .btn-link:hover, .nav-link:hover {
 }
 
 .wt-icon-spinner {
-    color: lightgrey;
+    color: var(--bs-secondary-color);
     opacity: 0;
     animation: spinner-fade-in 0.5s ease-in forwards;
     animation-delay: 1s;
diff --git a/resources/css/_chart-interactive.css b/resources/css/_chart-interactive.css
index 45a5feaaba..c2f76c916b 100644
--- a/resources/css/_chart-interactive.css
+++ b/resources/css/_chart-interactive.css
@@ -22,13 +22,13 @@
 .tv_out {
     position: relative;
     overflow: hidden;
-    border: thin solid #CCCCCC; /* customizable */
+    border: thin solid var(--bs-border-color); /* customizable */
     /* The chart height can be adjusted to fill the pag */
     height: 50vh;
     resize: vertical;
     min-height: 25vh;
     max-height: 95vh;
-    background: #E6E6E6; /* customizable */
+    background: var(--bs-secondary-bg); /* customizable */
     display: -webkit-box;
     display: -moz-box;
     display: flex;
@@ -159,8 +159,8 @@ table#tvTreeBorder td,
 
 /* Person or couple(s) box style */
 #tv_tree div.tv_box {
-    border: thin outset #81A9CB; /* customizable */
-    background: #fffdfd; /* customizable */
+    border: thin outset var(--bs-tertiary-color); /* customizable */
+    background: transparent; /* customizable */
     margin-top: 2px;
     margin-bottom: 2px;
     padding: 0;
@@ -168,31 +168,17 @@ table#tvTreeBorder td,
     cursor: help; /* customizable */
     border-collapse: collapse; /* required */
     border-radius: 4px; /* customizable */
-    box-shadow: 1px 1px 2px #cfcfdf; /* customizable */
+    box-shadow: var(--bs-box-shadow-sm); /* customizable */
 }
 #tv_tree div.boxExpanded {
     width: 250px; /* customizable:initial expanded box width */
 }
-#tv_tree div.tv_box div.tvM {
-    background: #f5fdff; /* customizable */
-    color: #220000; /* customizable */
-}
-#tv_tree div.tv_box div.tvF {
-    background: #fff8f5; /* customizable */
-    color: #000022; /* customizable */
-}
 #tv_tree div.tv_box span.tvSexSymbol {
     font-weight: bold;
     font-family: x-large, serif; /*Arial Unicode MS, monospace; /* customizable, BUT test required for ALL browsers */
     vertical-align: top;
     margin: 1px;
 }
-#tv_tree div.tv_box span.tvM {
-    color: #8f8fdf; /* customizable */
-}
-#tv_tree div.tv_box span.tvF {
-    color: #df8f8f; /* customizable */
-}
 
 #tv_tree div.tv_box div.tvM,
 #tv_tree .tv_box div.tvF {
@@ -246,10 +232,10 @@ table#tvTreeBorder td,
     padding: 0;
     margin: 0; /* required */
     z-index: 90; /* should be < 100 because 100 is the z-index of WT menus */
-    background-color: #efefef; /* customizable */
-    border: 1px outset #dfdfdf; /* customizable */
-    border-radius: 4px; /* customizable */
-    box-shadow: 1px 1px 2px #cfcfdf; /* customizable */
+    background-color: var(--bs-tertiary-bg); /* customizable */
+    border: var(--bs-border-width) outset var(--bs-border-color); /* customizable */
+    border-radius: var(--bs-border-radius-sm); /* customizable */
+    box-shadow: var(--bs-box-shadow-sm ); /* customizable */
 }
 
 /* styles submenu */
@@ -274,9 +260,8 @@ table#tvTreeBorder td,
     height: 24px;
     text-align: center;
     vertical-align: middle;
-    border: thin solid #efefef; /* customizable */
-    background-color: #efefef; /* customizable */
-    border-radius: 4px;
+    border: thin solid var(--bs-border-color); /* customizable */
+    border-radius: var(--bs-border-radius-sm);
 }
 #tvStylesSubmenu li.tv_button {
     float : none;
@@ -286,11 +271,11 @@ table#tvTreeBorder td,
     display: block;
 }
 #tv_tools li.tv_button:hover {
-    border: thin outset #fdfffd; /* customizable */
+    border: thin outset var(--bs-border-color); /* customizable */
     cursor: pointer;
 }
 #tv_tools li.tvPressed {
-    border: thin inset #ffffff; /* customizable */
+    border: thin inset var(--bs-border-color); /* customizable */
 }
 #tv_tools ul li img {
     border: none;
@@ -314,26 +299,26 @@ table#tvTreeBorder td,
     cursor: move;
     height: 22px;
     width: 2px;
-    border: thin inset #f6f6f6; /* customizable */
+    border: thin inset var(--bs-border-color); /* customizable */
     margin: 2px;
     overflow: hidden; /* required for IE */
 }
 
 #tvToolsHandler:hover {
-    border: thin outset #f6f6f6; /* customizable */
+    border: thin outset var(--bs-border-color); /* customizable */
 }
 
 
 #tv_tree div.tv_box div.tvM,
 #tv_tree div.tv_box div.tvF {
     background: none;
-    color: #000;
+    color: var(--bs-body-color);
     border: 0;
     margin: 0;
     padding: 0 4px;
 }
 
-.tvM {background-color: #DDF !important;}
-.tvF {background-color: #FDD !important;}
+.tvM {background-color: var(--bs-primary-bg-subtle) !important;}
+.tvF {background-color: var(--bs-danger-bg-subtle) !important;}
 
-.dashed {border-top: thin dashed #81A9CB !important;}
+.dashed {border-top: thin dashed var(--bs-secondary-color) !important;}
diff --git a/resources/css/_colorbox.css b/resources/css/_colorbox.css
index defbbdbda1..b95bd81fbc 100644
--- a/resources/css/_colorbox.css
+++ b/resources/css/_colorbox.css
@@ -65,15 +65,15 @@
 
 #cboxContent,
 #cboxOverlay {
-    background: #fff;
+    background: var(--bs-body-bg);
 }
 
 #cboxContent {
     overflow: hidden;
     position: relative;
     padding: 0.5rem;
-    border: 0.25rem solid #ccc;
-    border-radius: 0.5rem;
+    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
     box-sizing: content-box;
 }
 
@@ -93,7 +93,6 @@
 }
 
 #cboxTitle {
-    background: #fff;
     position: absolute;
     bottom: 0.25rem;
     margin: 0 2rem 0 4.5rem;
@@ -105,9 +104,10 @@
 }
 
 #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
-    background: #eee;
+    background-color: transparent;
     border: 0;
-    border-radius: 0.5rem;
+    border-radius: var(--bs-border-radius);
+    color: var(--bs-emphasis-color);
     overflow: visible;
     padding: 0 0.5rem;
     position: absolute;
diff --git a/resources/css/_list-individuals.css b/resources/css/_list-individuals.css
index 6ac06fa283..0a39321165 100644
--- a/resources/css/_list-individuals.css
+++ b/resources/css/_list-individuals.css
@@ -46,6 +46,5 @@
 }
 
 .wt-initial.active {
-    color: #f00;
     font-weight: bold;
 }
diff --git a/resources/css/_on-screen-keyboard.css b/resources/css/_on-screen-keyboard.css
index a67e898a13..ba814347b7 100644
--- a/resources/css/_on-screen-keyboard.css
+++ b/resources/css/_on-screen-keyboard.css
@@ -24,7 +24,6 @@
 }
 
 .wt-osk-keys {
-    background: #eee;
     padding: 0.25rem;
     font-size: larger;
 }
@@ -36,21 +35,22 @@
 }
 
 .wt-osk-key {
-    background: #ddd;
+    background: var(--bs-secondary-bg);
     border-radius: .25rem;
+    color: var(--bs-emphasis-color);
     padding: 0.25rem;
     cursor: pointer;
 }
 
 .wt-osk-key-shift {
-    color: #aaa;
+    color: var(--bs-secondary-color);
     font-size: smaller;
 }
 
 .wt-osk-keys.shifted .wt-osk-key {
-    color: #aaa;
+    color: var(--bs-secondary-color);
 }
 
 .wt-osk-keys.shifted .wt-osk-key-shift {
-    color: #555;
+    color: var(--bs-tertiary-color);
 }
diff --git a/resources/css/_vendor-patches.css b/resources/css/_vendor-patches.css
index 486397bba9..843183f56a 100644
--- a/resources/css/_vendor-patches.css
+++ b/resources/css/_vendor-patches.css
@@ -56,3 +56,8 @@ table.dataTable {
 table.datatables > thead > tr > th.dt-type-numeric {
     text-align: inherit;
 }
+
+/* Don't hardcode color in tom select control */
+.ts-control, .ts-control input, .ts-dropdown {
+    color: inherit;
+}
diff --git a/resources/css/minimal.css b/resources/css/minimal.css
index 4dbdd0e6d6..08fbcbc8b8 100755
--- a/resources/css/minimal.css
+++ b/resources/css/minimal.css
@@ -17,20 +17,20 @@
 @import "_base.css";
 
 :root {
-    --chart-line-radius: 1rem;
-    --chart-line: solid gray thin;
-    --link-color-hover: #0a58ca;
-    --link-color: #0d6efd;
-    --link-decoration-hover: underline;
-    --link-decoration: underline;
-    --sex-f-bg: #ffffff;
-    --sex-f-fg: #888888;
-    --sex-m-bg: #ffffff;
-    --sex-m-fg: #888888;
-    --sex-u-bg: #ffffff;
-    --sex-u-fg: #888888;
-    --sex-x-bg: #ffffff;
-    --sex-x-fg: #888888;
+    --chart-line-radius: var(--bs-border-radius-xl);
+    --chart-line: solid var(--bs-secondary-color) var(--bs-border-width);
+    --link-color-hover: var(--bs-link-hover-color);
+    --link-color: var(--bs-link-color);
+    --link-decoration-hover: var(--bs-link-decoration);
+    --link-decoration: var(--bs-link-decoration);
+    --sex-f-bg: var(--bs-body-bg);
+    --sex-f-fg: var(--bs-pink);
+    --sex-m-bg: var(--bs-body-bg);
+    --sex-m-fg: var(--bs-blue);
+    --sex-u-bg: var(--bs-body-bg);
+    --sex-u-fg: var(--bs-gray);
+    --sex-x-bg: var(--bs-body-bg);
+    --sex-x-fg: var(--bs-gray);
 }
 
 /* Override Bootstrap formatting */
@@ -81,13 +81,8 @@ table {
  *     +---wt-footer wt-footer-xxxxx
  */
 
-::backdrop, .wt-global {
-    /* Avoid extremes of black and white.  It is better for users with dyslexia. */
-    color: #0a0a0a;
-    background-color: #f9f9f9;
-}
-
 .wt-header-wrapper {
+    background: var(--bs-primary-bg-subtle);
 }
 
 .wt-header-container {
@@ -109,6 +104,7 @@ table {
     flex: 1 1 auto;
     width: auto;
     font-size: 1.75rem;
+    color: var(--bs-primary-text-emphasis);
 }
 
 .wt-header-search {
@@ -148,7 +144,6 @@ table {
     /* Recalculate margins for content */
     margin: 0 calc(50% - 50vw);
     padding: 0 calc(50vw - 50%);
-    border-bottom: 2px solid #aaa;
 }
 
 .wt-genealogy-menu {
@@ -188,12 +183,6 @@ table {
 .wt-footer-contact {
 }
 
-.wt-footer-cookies {
-    background: #aaa;
-    color: #fff;
-    transition: height 0.5s;
-}
-
 .wt-footer-page-views {
 }
 
@@ -223,11 +212,9 @@ table {
  */
 
 .wt-block {
-    border: solid #000 1px;
 }
 
 .wt-block-header {
-    background-color: #fff;
 }
 
 .wt-block-content {
@@ -235,15 +222,16 @@ table {
 
 .wt-block-content .list_table {
     border-spacing: 1px;
-    border: solid #000 1px;
+    border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
     border-right: 0;
 }
 
 .wt-block-content .list_value,
 .wt-block-content .list_value_wrap {
     border: 0;
-    border-top: solid #000 1px;
-    border-right: solid #000 1px;
+    border-top: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
+    border-right: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
+    border-radius: var(--bs-border-radius);
 }
 
 /*
@@ -283,35 +271,32 @@ table {
  * +--- wt-chart-box-facts
  *     +--- wt-chart-box-fact
  */
+
 .wt-chart-box {
     height: 5rem;
     padding: 2px;
     line-height: 1.1;
-    border: solid gray thin;
+    border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
 }
 
-.wt-chart-box-f,
-.wt-chart-box-f .wt-chart-box-dropdown {
+.wt-chart-box-f {
     background: var(--sex-f-bg);
-    border: solid var(--sex-f-fg) thin;
+    border: var(--bs-border-style) var(--sex-f-fg) var(--bs-border-width);
 }
 
-.wt-chart-box-m,
-.wt-chart-box-m .wt-chart-box-dropdown {
+.wt-chart-box-m {
     background: var(--sex-m-bg);
-    border: solid var(--sex-m-fg) thin;
+    border: var(--bs-border-style) var(--sex-m-fg) var(--bs-border-width);
 }
 
-.wt-chart-box-u,
-.wt-chart-box-u .wt-chart-box-dropdown {
+.wt-chart-box-u {
     background: var(--sex-u-bg);
-    border: solid var(--sex-u-fg) thin;
+    border: var(--bs-border-style) var(--sex-u-fg) var(--bs-border-width);
 }
 
-.wt-chart-box-x,
-.wt-chart-box-x .wt-chart-box-dropdown {
+.wt-chart-box-x {
     background: var(--sex-x-bg);
-    border: solid var(--sex-x-fg) thin;
+    border: var(--bs-border-style) var(--sex-x-fg) var(--bs-border-width);
 }
 
 /* ---Pending edits--- */
@@ -325,7 +310,9 @@ table {
 
 .list_value,
 .list_value_wrap {
-    border: solid #000 1px;
+    background: var(--bs-body-bg);
+    border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
+    border-radius: var(--bs-border-radius);
     vertical-align: top;
     padding: 4px;
 }
@@ -352,39 +339,6 @@ table {
     text-align: center;
 }
 
-/* ======== Block styles ===== */
-.block {
-    background-color: #fff;
-    color: #555;
-    border: solid #ccc 1px;
-    padding: 3px;
-    vertical-align: top;
-}
-
-.blockcontent {
-    margin: 5px;
-    overflow: auto;
-}
-
-.blockcontent .list_table {
-    border-spacing: 0;
-    border: solid #555 1px;
-    border-right: 0;
-}
-
-.blockcontent .list_value,
-.blockcontent .list_value_wrap {
-    border: 0;
-    border-top: solid #555 1px;
-    border-right: solid #555 1px;
-}
-
-.blockheader {
-    font-weight: bold;
-}
-
-/* end Block styles */
-
 .user_welcome_block table,
 .gedcom_block_block table {
     margin: auto;
@@ -410,7 +364,6 @@ table {
 }
 
 .wt-facts-table th {
-    border: 1px solid #000;
     font-weight: normal;
 }
 
@@ -419,7 +372,6 @@ table {
 }
 
 .wt-facts-table td {
-    border: solid #000 1px;
 }
 
 .parentdeath {
@@ -428,17 +380,11 @@ table {
 
 /* ==== FAQ table styles ===== */
 table.faq {
-    background-color: #ddd;
     margin: 5px 0 50px 5px;
     width: 98%;
 }
 
-table.faq tr:nth-child(odd) td {
-    background-color: #fff;
-}
-
 div.faq_title {
-    background-color: #ddd;
     margin: 1em 0;
     padding: .25em;
     font-weight: bold;
@@ -485,10 +431,12 @@ div.faq_body {
 }
 
 .odometer {
-    font-family: courier, monospace;
-    font-weight: bold;
-    background: #000;
-    color: #fff;
+    font-family: var(--bs-font-monospace);
+    font-weight: var(--bs-font-weight-bold);
+    color: var(--bs-emphasis-color);
+    background-color: var(--bs-secondary-bg);
+    padding: 0.1rem 0.25rem;
+    border-radius: var(--bs-border-radius-sm);
 }
 
 .upcoming_events_block button,
@@ -560,7 +508,9 @@ div.faq_body {
 
 /*-- Fan chart ---- */
 .fan_chart_menu {
-    background: #fff;
+    background: var(--bs-body-bg);
+    border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
+    border-radius: var(--bs-border-radius);
     position: absolute;
     display: none;
     z-index: 100;
@@ -591,16 +541,14 @@ div.faq_body {
 }
 
 .wt-lifespans-individuals {
-    background: #fafafa;
 }
 
 .wt-lifespans-individual {
-
 }
 
 .wt-lifespans-summary {
-    background: #ffffff;
-    border: thin solid #000;
+    background: var(--bs-secondary-bg);
+    border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
     z-index: 1;
 }
 
@@ -614,7 +562,7 @@ div.faq_body {
 }
 
 .optionbox, .descriptionbox {
-    border: solid #000 1px;
+    border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
     vertical-align: top;
     padding: 3px;
 }
@@ -635,31 +583,32 @@ div.faq_body {
 }
 
 .person0, .person1, .person2, .person3, .person4, .person5 {
-    border:outset #555 1px;
-    vertical-align:top;
+    border: outset var(--bs-border-color) var(--bs-border-width);
+    vertical-align: top;
 }
-.person0{
-    background-color:#eee;
+
+.person0 {
+    background-color: var(--bs-primary-bg-subtle);
 }
 
-.person1{
-    background-color:#bfbfbf;
+.person1 {
+    background-color: var(--bs-secondary-bg-subtle);
 }
 
-.person2{
-    background-color:#999;
+.person2 {
+    background-color: var(--bs-success-bg-subtle);
 }
 
-.person3{
-    background-color:#dfdfdf;
+.person3 {
+    background-color: var(--bs-danger-bg-subtle);
 }
 
-.person4{
-    background-color:#eee;
+.person4 {
+    background-color: var(--bs-warning-bg-subtle);
 }
 
-.person5{
-    background-color:#fefefe;
+.person5 {
+    background-color: var(--bs-info-bg-subtle);
 }
 
 /*-- timeline  --*/
@@ -750,7 +699,11 @@ div.faq_body {
 
 .wt-calendar-month .wt-page-options-label,
 .wt-calendar-month .wt-page-options-value {
-    border: solid grey thin;
+    border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
+    padding: 0.2rem;
+}
+
+.wt-page-options-value {
     padding: 0.2rem;
 }