1 files changed, 64 insertions, 67 deletions

diff --git a/resources/css/colors.css b/resources/css/colors.css
index 10782df472..7b9860859e 100644
--- a/resources/css/colors.css
+++ b/resources/css/colors.css
@@ -13,7 +13,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* The colors theme */
+/* The colors theme is based on the clouds theme */
+
+/* Colors for chart boxes, etc. */
+:root {
+}
 
 /* Override Bootstrap formatting */
 
@@ -94,10 +98,24 @@ table {
 	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
 }
 
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f {
+	content: url(images/sex-F.png);
+}
+
+.wt-icon-sex-m {
+	content: url(images/sex-M.png);
+}
+
+.wt-icon-sex-u {
+	content: url(images/sex-U.png);
+}
+
+.wt-icon-sex-x {
+	content: url(images/sex-U.png);
+}
+
 /*
- * Icons use FontAwesome by default, but have additional classes to
- * allow them to be overridden
- *
  * .wt-icon-arrow-down
  * .wt-icon-arrow-end (right on LTR, left on RTL)
  * .wt-icon-arrow-start (left on LTR, right on RTL)
@@ -284,7 +302,7 @@ i[class*="wt-icon-media"] {
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -305,21 +323,28 @@ i[class*="wt-icon-media"] {
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
-.wt-block-header::before {
-	content: url(colors/images/block-header-disk.png);
-}
-
 .wt-global {
+	/* Prevent redraws when dynamic content requires a scrollbar. */
+	overflow-y: scroll;
+	/* Keep the page as tall as the window, so the footer can remain at the bottom. */
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	/* Any wide content will have its own horizontal scrollbar */
+	overflow-x: hidden;
 	background: #fff; /* Override clouds */
 	color: #333;
 }
 
 .wt-header-wrapper {
-	background: inherit none;
+	background: #acf none;
 }
 
 .wt-header-wrapper .dropdown-item.active {
@@ -341,7 +366,6 @@ i[class*="wt-icon-media"] {
 }
 
 .wt-site-logo {
-	display: none;
 }
 
 .wt-site-title {
@@ -360,6 +384,12 @@ i[class*="wt-icon-media"] {
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
+.wt-header-search-button {
+}
+
 .wt-secondary-navigation {
 	order: 2;
 	flex: 0 0 0;
@@ -749,22 +779,32 @@ i[class*="wt-icon-media"] {
 	margin-top: 1rem;
 }
 
-.wt-footer-container {
+.wt-footers {
+}
+
+.wt-footer {
 }
 
-.wt-footer-content {
+.wt-footer-contact {
 }
 
-.wt-contact-links {
+.wt-footer-cookies {
+	background: #aaa;
+	color: #fff;
+	height: 3em;
+	line-height: 2.5em;
+	transition: height 0.5s;
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies.hidden {
+	height: 0;
+	overflow: hidden;
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
@@ -786,6 +826,10 @@ i[class*="wt-icon-media"] {
  * +---wt-block-content, wt-block-content-XXX
  */
 
+.wt-block-header::before {
+	content: url(colors/images/block-header-disk.png);
+}
+
 /*
  * Pending changes page
  *
@@ -2588,7 +2632,7 @@ div.faq_body {
 	width: 70px;
 	height: 60px;
 	display: inline-block;
-	background-image: url(colors/images/lifespan-chunk.png);
+	background-image: url(images/lifespan-decade.png);
 	background-position-y: bottom;
 	background-repeat: no-repeat;
 	background-size: 70px 37px;
@@ -2843,41 +2887,6 @@ div.faq_body {
 	background-image: url(colors/images/selected.png);
 }
 
-.icon-sex_f_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(colors/images/sex_f_15x15.png);
-}
-
-.icon-sex_f_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(colors/images/sex_f_9x9.png);
-}
-
-.icon-sex_m_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(colors/images/sex_m_15x15.png);
-}
-
-.icon-sex_m_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(colors/images/sex_m_9x9.png);
-}
-
-.icon-sex_u_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(colors/images/sex_u_15x15.png);
-}
-
-.icon-sex_u_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(colors/images/sex_u_9x9.png);
-}
 
 .icon-source {
 	width: 32px;
@@ -3148,15 +3157,3 @@ footer {
 	height: 25px;
 	background-image: url(colors/images/user_add.png);
 }
-
-.cookie-warning {
-	background: #aaa;
-	color: #fff;
-	height: 3em;
-	line-height: 2.5em;
-	transition: height 0.5s;
-}
-.cookie-warning.hidden {
-	height: 0;
-	overflow: hidden;
-}