From d08b7e677471bf6ebca52cd1b33b066690a89692 Mon Sep 17 00:00:00 2001 From: tanav29 Date: Wed, 7 Oct 2026 23:29:23 +0530 Subject: [PATCH] fix(styles): Dim highlight box in either DOM order Signed-off-by: tanav29 --- assets/scss/_content_project.scss | 13 ++++++++++++- assets/scss/_navbar_project.scss | 15 +++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/assets/scss/_content_project.scss b/assets/scss/_content_project.scss index a1e2c0f7b941..cd57d17bd07d 100644 --- a/assets/scss/_content_project.scss +++ b/assets/scss/_content_project.scss @@ -357,9 +357,20 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em box-shadow: $ecosystem-box-glow; } - /* Hide the sibling highlight-box's shadow when this one is hovered/focused */ + /* Hide the sibling highlight-box's shadow when this one is hovered/focused. + The `~` selector only matches following siblings, so it covers the case + where the hidden box comes first. */ &:hover ~ .highlight-box, &:focus ~ .highlight-box { box-shadow: none; } } + +/* Cover the reverse order (highlight box first, hidden box second, as on + /cloud/): when the hidden box is hovered/focused, dim the highlight box + regardless of DOM order. */ +.pageinfo:has(.hidden-highlight-box:hover) .highlight-box, +.pageinfo:has(.hidden-highlight-box:focus) .highlight-box, +.pageinfo:has(.hidden-highlight-box:focus-visible) .highlight-box { + box-shadow: none; +} diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index de8e5eab4593..7f37e62ea218 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -255,9 +255,20 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em box-shadow: $ecosystem-box-glow; } - /* Hide the sibling highlight-box's shadow when this one is hovered/focused */ + /* Hide the sibling highlight-box's shadow when this one is hovered/focused. + The `~` selector only matches following siblings, so it covers the case + where the hidden box comes first. */ &:hover ~ .highlight-box, &:focus ~ .highlight-box { box-shadow: none; } -} \ No newline at end of file +} + +/* Cover the reverse order (highlight box first, hidden box second, as on + /cloud/): when the hidden box is hovered/focused, dim the highlight box + regardless of DOM order. */ +.pageinfo:has(.hidden-highlight-box:hover) .highlight-box, +.pageinfo:has(.hidden-highlight-box:focus) .highlight-box, +.pageinfo:has(.hidden-highlight-box:focus-visible) .highlight-box { + box-shadow: none; +}