client, css: links in summaries, hover dynamics, white underline

2 files changed, 78 insertions, 0 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index c068c07d..32b314c4 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -395,6 +395,36 @@ summary > span:hover {
   text-decoration-color: var(--primary-color);
 }
 
+summary > span:hover a {
+  text-decoration: none !important;
+}
+
+summary > span:hover:has(a:hover),
+summary > span:hover:has(a.nested-hover),
+summary.has-nested-hover > span {
+  text-decoration: none !important;
+}
+
+summary > span:hover:has(a:hover) a,
+summary > span:hover:has(a.nested-hover) a,
+summary.has-nested-hover > span a {
+  text-decoration: underline !important;
+}
+
+summary.underline-white > span:hover {
+  text-decoration-color: white;
+}
+
+/* This link isn't supposed to be underlined *at all*
+ * when the summary (and not link) is hovered, but
+ * for some reason Safari is still applying its colored
+ * and dotted(!) underline. Get around the apparent
+ * effect by just making it white.
+ */
+summary.underline-white > span:hover a:not(:hover) {
+  text-decoration-color: white;
+}
+
 summary .group-name {
   color: var(--primary-color);
 }
diff --git a/src/static/js/client.js b/src/static/js/client.js
index fe45ba16..49326663 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -1045,6 +1045,54 @@ if (
     });
 }
 
+// Links nested in summaries ------------------------------
+
+const summaryNestedLinksInfo = initInfo('summaryNestedLinksInfo', {
+  summaries: null,
+  links: null,
+});
+
+function getSummaryNestedLinksReferences() {
+  const info = summaryNestedLinksInfo;
+
+  info.summaries =
+    Array.from(document.getElementsByTagName('summary'));
+
+  info.links =
+    info.summaries
+      .map(summary =>
+        Array.from(summary.getElementsByTagName('a')));
+
+  filterMultipleArrays(
+    info.summaries,
+    info.links,
+    (_summary, links) => !empty(links));
+}
+
+function addSummaryNestedLinksPageListeners() {
+  const info = summaryNestedLinksInfo;
+
+  for (const {summary, links} of stitchArrays({
+    summary: info.summaries,
+    links: info.links,
+  })) {
+    for (const link of links) {
+      link.addEventListener('mouseover', () => {
+        link.classList.add('nested-hover');
+        summary.classList.add('has-nested-hover');
+      });
+
+      link.addEventListener('mouseout', () => {
+        link.classList.remove('nested-hover');
+        summary.classList.remove('has-nested-hover');
+      });
+    }
+  }
+}
+
+clientSteps.getPageReferences.push(getSummaryNestedLinksReferences);
+clientSteps.getPageReferences.push(addSummaryNestedLinksPageListeners);
+
 // Tooltip-style hover (infrastructure) -------------------
 
 const hoverableTooltipInfo = initInfo('hoverableTooltipInfo', {