diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/static/css/site.css | 30 | ||||
-rw-r--r-- | src/static/js/client.js | 48 |
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', { |