From 92379ccabff85b87d64f90653a5e40dbdc33d7bf Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Thu, 9 Oct 2025 11:19:24 +0200 Subject: [PATCH 1/6] Highlight current section --- .../Assets/styles.css | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css index 04d5597fc..db903a5da 100644 --- a/src/Elastic.Documentation.Site/Assets/styles.css +++ b/src/Elastic.Documentation.Site/Assets/styles.css @@ -178,6 +178,60 @@ body { @apply text-blue-elastic! font-semibold; } +/* Highlight the active section: parent li and all sibling li elements */ +#pages-nav li:has(ul a.current), +#pages-nav li:has(ul a.current) > ul > li { + position: relative; +} + +#pages-nav li:has(ul a.current)::before, +#pages-nav li:has(ul a.current) > ul > li::before { + content: ''; + position: absolute; + top: -12px; + left: -12px; + right: -12px; + bottom: -12px; + @apply bg-grey-10 rounded-lg; + z-index: -1; +} + +/* Also highlight when the parent itself is the current item */ +#pages-nav li:has(> a.current), +#pages-nav li:has(> a.current) ~ li { + position: relative; +} + +#pages-nav li:has(> a.current)::before, +#pages-nav li:has(> a.current) ~ li::before { + content: ''; + position: absolute; + top: -12px; + left: -12px; + right: -12px; + bottom: -12px; + @apply bg-grey-10 rounded-lg; + z-index: -1; +} + +/* Also highlight all children when the parent itself is current */ +#pages-nav li:has(> div > a.current), +#pages-nav li:has(> div > a.current) > ul > li { + position: relative; +} + +#pages-nav li:has(> div > a.current)::before, +#pages-nav li:has(> div > a.current) > ul > li::before { + content: ''; + position: absolute; + top: -12px; + left: -12px; + right: -12px; + bottom: -12px; + @apply bg-grey-10 rounded-lg; + z-index: -1; +} + .markdown-content { @apply font-body; } From 45dc1e9f71e98791c5c9d228dcaf9a021cce1c0b Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Thu, 9 Oct 2025 11:29:11 +0200 Subject: [PATCH 2/6] Fix padding and color --- src/Elastic.Documentation.Site/Assets/styles.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css index db903a5da..23c936333 100644 --- a/src/Elastic.Documentation.Site/Assets/styles.css +++ b/src/Elastic.Documentation.Site/Assets/styles.css @@ -190,9 +190,9 @@ body { position: absolute; top: -12px; left: -12px; - right: -12px; + right: -8px; bottom: -12px; - @apply bg-grey-10 rounded-lg; + @apply bg-grey-20 rounded-lg; z-index: -1; } @@ -208,9 +208,9 @@ body { position: absolute; top: -12px; left: -12px; - right: -12px; + right: -8px; bottom: -12px; - @apply bg-grey-10 rounded-lg; + @apply bg-grey-20 rounded-lg; z-index: -1; } @@ -226,9 +226,9 @@ body { position: absolute; top: -12px; left: -12px; - right: -12px; + right: -8px; bottom: -12px; - @apply bg-grey-10 rounded-lg; + @apply bg-grey-20 rounded-lg; z-index: -1; } From 51447379ffc2a42327cef4beae19fa520d140241 Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Thu, 9 Oct 2025 11:47:57 +0200 Subject: [PATCH 3/6] Edit further sizes --- .../Assets/styles.css | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css index 23c936333..55d104361 100644 --- a/src/Elastic.Documentation.Site/Assets/styles.css +++ b/src/Elastic.Documentation.Site/Assets/styles.css @@ -188,11 +188,11 @@ body { #pages-nav li:has(ul a.current) > ul > li::before { content: ''; position: absolute; - top: -12px; - left: -12px; - right: -8px; - bottom: -12px; - @apply bg-grey-20 rounded-lg; + top: -15px; + left: -15px; + right: 0; + bottom: -15px; + @apply bg-grey-20 rounded-sm; z-index: -1; } @@ -206,11 +206,11 @@ body { #pages-nav li:has(> a.current) ~ li::before { content: ''; position: absolute; - top: -12px; - left: -12px; - right: -8px; - bottom: -12px; - @apply bg-grey-20 rounded-lg; + top: -15px; + left: -15px; + right: 0; + bottom: -15px; + @apply bg-grey-20 rounded-sm; z-index: -1; } @@ -224,11 +224,11 @@ body { #pages-nav li:has(> div > a.current) > ul > li::before { content: ''; position: absolute; - top: -12px; - left: -12px; - right: -8px; - bottom: -12px; - @apply bg-grey-20 rounded-lg; + top: -15px; + left: -15px; + right: 0; + bottom: -15px; + @apply bg-grey-20 rounded-sm; z-index: -1; } From 94b4fbb4a37dea468337c5c8b8ea743f3c10c9de Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Fri, 10 Oct 2025 10:32:32 +0200 Subject: [PATCH 4/6] Add hover effect --- .../Assets/styles.css | 50 ++++++++++++------- 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css index 55d104361..344d4016e 100644 --- a/src/Elastic.Documentation.Site/Assets/styles.css +++ b/src/Elastic.Documentation.Site/Assets/styles.css @@ -178,12 +178,12 @@ body { @apply text-blue-elastic! font-semibold; } -/* Highlight the active section: parent li and all sibling li elements */ -#pages-nav li:has(ul a.current), -#pages-nav li:has(ul a.current) > ul > li { +/* Grey-10 background for active sections */ +#pages-nav li { position: relative; } +/* Highlight the active section: parent li and all sibling li elements */ #pages-nav li:has(ul a.current)::before, #pages-nav li:has(ul a.current) > ul > li::before { content: ''; @@ -192,16 +192,11 @@ body { left: -15px; right: 0; bottom: -15px; - @apply bg-grey-20 rounded-sm; - z-index: -1; + @apply bg-grey-10 rounded-sm; + z-index: -2; } /* Also highlight when the parent itself is the current item */ -#pages-nav li:has(> a.current), -#pages-nav li:has(> a.current) ~ li { - position: relative; -} - #pages-nav li:has(> a.current)::before, #pages-nav li:has(> a.current) ~ li::before { content: ''; @@ -210,16 +205,11 @@ body { left: -15px; right: 0; bottom: -15px; - @apply bg-grey-20 rounded-sm; - z-index: -1; + @apply bg-grey-10 rounded-sm; + z-index: -2; } /* Also highlight all children when the parent itself is current */ -#pages-nav li:has(> div > a.current), -#pages-nav li:has(> div > a.current) > ul > li { - position: relative; -} - #pages-nav li:has(> div > a.current)::before, #pages-nav li:has(> div > a.current) > ul > li::before { content: ''; @@ -228,6 +218,32 @@ body { left: -15px; right: 0; bottom: -15px; + @apply bg-grey-10 rounded-sm; + z-index: -2; +} + +/* Grey-20 hover effect for all nav links - only direct child link */ +#pages-nav li:has(> a:hover):not(:has(> ul))::after, +#pages-nav li:has(> div > a:hover):not(:has(> ul))::after { + content: ''; + position: absolute; + top: -8px; + left: -8px; + right: 8px; + bottom: -8px; + @apply bg-grey-20 rounded-sm; + z-index: -1; +} + +/* For parent items with children, apply hover only to the direct link/div area */ +#pages-nav li:has(> a:hover):has(> ul) > a::before, +#pages-nav li:has(> div > a:hover):has(> ul) > div::before { + content: ''; + position: absolute; + top: -8px; + left: -8px; + right: 8px; + bottom: -8px; @apply bg-grey-20 rounded-sm; z-index: -1; } From 4780b7bad74924c8ec5bbfe3a96d7ea3f5c34c46 Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Fri, 10 Oct 2025 10:36:38 +0200 Subject: [PATCH 5/6] Refine parent behavior --- src/Elastic.Documentation.Site/Assets/styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css index 344d4016e..0f695cdd9 100644 --- a/src/Elastic.Documentation.Site/Assets/styles.css +++ b/src/Elastic.Documentation.Site/Assets/styles.css @@ -235,6 +235,12 @@ body { z-index: -1; } +/* Position the parent link/div containers */ +#pages-nav li > a, +#pages-nav li > div { + position: relative; +} + /* For parent items with children, apply hover only to the direct link/div area */ #pages-nav li:has(> a:hover):has(> ul) > a::before, #pages-nav li:has(> div > a:hover):has(> ul) > div::before { From 431ae8aaca4916fe02d0a3a4f0608b6cbdb2e9bf Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Fri, 10 Oct 2025 10:43:41 +0200 Subject: [PATCH 6/6] Refine hover width --- src/Elastic.Documentation.Site/Assets/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css index 0f695cdd9..eb48b32b4 100644 --- a/src/Elastic.Documentation.Site/Assets/styles.css +++ b/src/Elastic.Documentation.Site/Assets/styles.css @@ -247,8 +247,8 @@ body { content: ''; position: absolute; top: -8px; - left: -8px; - right: 8px; + left: -15px; + right: 0; bottom: -8px; @apply bg-grey-20 rounded-sm; z-index: -1;