From a1d4058bed6598bbad7be037ffb09c1c0ca43a97 Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Tue, 24 Mar 2020 17:14:13 -0400
Subject: [PATCH] Apply theme to the help window

---
 help/coUA.css             |  4 ++++
 styles/layout.css         |  2 ++
 styles/themes/classic.css | 28 +++++++++++++++++++++-------
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/help/coUA.css b/help/coUA.css
index bf8c598..c1f3360 100644
--- a/help/coUA.css
+++ b/help/coUA.css
@@ -2,12 +2,16 @@
 
 body {
 	background: #FFFFFF;
+	/* background: var(--Info); */
+	/* color: var(--InfoText); */
+	color: var(--WindowText);
 	font-size: 70%;
 	font-family: Verdana, Arial, Helvetica, "MS Sans Serif";
 }
 
 a:link {
 	color: #0000CC;
+	color: var(--HotTrackingColor);
 }
 
 a:active {
diff --git a/styles/layout.css b/styles/layout.css
index 8d69e96..0d1ab6c 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -358,6 +358,8 @@ html, body, .jspaint {
 }
 .help-window .contents {
 	background: white;
+	background: var(--Window);
+	color: var(--WindowText);
 	flex-basis: 300px; /* normally the default is 200px, but that leaves a scrollbar and we don't have rollover viewing of longer titles (@TODO) */
 	flex-grow: 0;
 	flex-shrink: 0;
diff --git a/styles/themes/classic.css b/styles/themes/classic.css
index f7fe01d..8fd1255 100644
--- a/styles/themes/classic.css
+++ b/styles/themes/classic.css
@@ -297,24 +297,38 @@ body,
 	font-family: 'Segoe UI', sans-serif;
 	font-size: 12px;
 	padding: 0 2px;
+	position: relative; /* for ::after */
 }
 .help-window .item:hover {
 	text-decoration: underline;
-	color: var(--HotTrackingColor);
+	color: #0000FF;
 	cursor: pointer;
 }
 .help-window li:before {
 	background-image: url("../../images/help-icons.png");
 }
-.help-window .item.selected {
-	/* @TODO: separate into :focus */
-	/* TODO: --Hilight */
-	background-color: #0000aa;
+.help-window:not(.focused) .item.selected {
+	background-color: var(--ButtonFace);
+	color: var(--ButtonText); /* ?? */
+}
+.help-window.focused .item.selected {
+	background-color: var(--Hilight);
 	color: var(--HilightText);
-	/* TODO: --inverse-Hilight or use a pseudo element with mix-blend-mode */
-	outline: 1px dotted #ffffaa;
+	/* @TODO: separate focus state of the item */
+	outline: 1px dotted black;
 	outline-offset: -1px;
 }
+/* @TODO: separate focus state of the item; while mouse down, the main highlight does not move with the arrow keys but this does, among other differences */
+/* .help-window.focused .item.selected::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	border: 1px dotted white;
+	mix-blend-mode: difference;
+} */
 
 input[type=text],
 input[type=url] {