From e5eae80a14fdfaae76e387af6c53ce3261672595 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Tue, 28 Jul 2026 10:28:44 +0200 Subject: [PATCH 1/3] ui: small visual adjustment for second nav and dropdown elements --- .../DocsSecondaryNav/styles.module.css | 98 ++++++++++--------- website/src/css/docs-secondary-nav.scss | 32 ++++-- 2 files changed, 75 insertions(+), 55 deletions(-) diff --git a/website/src/components/DocsSecondaryNav/styles.module.css b/website/src/components/DocsSecondaryNav/styles.module.css index 28d631ff16c..1587cc91c3d 100644 --- a/website/src/components/DocsSecondaryNav/styles.module.css +++ b/website/src/components/DocsSecondaryNav/styles.module.css @@ -11,7 +11,7 @@ justify-content: space-between; gap: 1rem; height: var(--rn-subnav-height); - padding: 0 1.5rem; + padding: 6px 1.5rem 0; /* Pin directly below the main navbar so page content scrolls underneath. */ position: sticky; @@ -40,7 +40,7 @@ content: ""; position: absolute; right: 0.75rem; - bottom: 0; + bottom: -6px; left: 0.75rem; height: 1px; background-color: var(--ifm-toc-border-color); @@ -49,7 +49,7 @@ .start { display: flex; align-items: center; - gap: 1rem; + gap: 0.5rem; min-width: 0; } @@ -71,6 +71,7 @@ font-size: 1.5rem; font-weight: var(--ifm-heading-font-weight); line-height: 1.2; + margin-right: 0.5rem; } /* Outlined controls: the section dropdown toggle and the back link share the @@ -90,9 +91,12 @@ font-size: 0.9rem; color: var(--ifm-font-color-base); background: transparent; - border: 1px solid var(--ifm-color-emphasis-300); + border: 1px solid var(--ifm-color-emphasis-400); border-radius: var(--ifm-global-radius); text-decoration: none; + transition: + background-color 0.2s ease, + border-color 0.2s ease; } .dropdownToggle { @@ -127,7 +131,7 @@ color: var(--ifm-font-color-base); text-decoration: none; background-color: var(--ifm-menu-color-background-hover); - border-color: var(--ifm-color-gray-400); + border-color: var(--ifm-color-gray-500); } /* Docs version dropdown wrapper. The dropdown reuses the theme navbar dropdown; @@ -137,9 +141,6 @@ .versionDropdown { display: flex; align-items: center; - - /* Sit closer to the section dropdown than the .start gap allows. */ - margin-left: -0.5rem; } /* Copy page button — appearance shared with its former home in DocItem */ @@ -150,59 +151,60 @@ button.copyPageButton { border-radius: var(--ifm-global-radius); - border-color: var(--ifm-color-gray-500); -} + border-color: var(--ifm-color-gray-400); -button.copyPageButton:hover { - background-color: var(--ifm-menu-color-background-hover) !important; - border-color: var(--ifm-color-gray-400) !important; -} + &:hover { + background-color: var(--ifm-menu-color-background-hover) !important; + border-color: var(--ifm-color-gray-500) !important; + } -button.copyPageButton svg { - opacity: 0.75; + svg { + opacity: 0.75; + } } .copyPageDropdown { border-color: var(--ifm-table-border-color) !important; -} - -.copyPageDropdown button[class^="dropdownItem"] { - border-bottom-color: var(--ifm-table-border-color) !important; -} -.copyPageDropdown button[class^="dropdownItem"]:hover { - background-color: var(--ifm-menu-color-background-hover); -} + button[class^="dropdownItem"] { + border-bottom-color: var(--ifm-table-border-color) !important; -.copyPageDropdown div[class^="itemDescription"] { - font-weight: 300; - font-size: 12px; -} + &:hover { + background-color: var(--ifm-menu-color-background-hover); + } + } -[data-theme="dark"] .dropdownToggle, -[data-theme="dark"] .backLink { - background-color: var(--light); + div[class^="itemDescription"] { + font-weight: 300; + font-size: 12px; + } } -[data-theme="dark"] .dropdownToggle:hover, -[data-theme="dark"] .backLink:hover { - background-color: color-mix(in srgb, var(--light), white 10%); - border-color: var(--ifm-color-gray-800); -} +[data-theme="dark"] { + .dropdownToggle, + .backLink, + button.copyPageButton { + background-color: color-mix(in srgb, var(--light), black 25%) !important; + border-color: var(--ifm-hr-border-color) !important; + } -[data-theme="dark"] button.copyPageButton:hover { - background-color: var(--dark) !important; - border-color: var(--ifm-color-gray-800) !important; -} + .dropdownToggle:hover, + .backLink:hover, + button.copyPageButton:hover { + background-color: color-mix(in srgb, var(--light), black 10%) !important; + border-color: var(--ifm-color-gray-800) !important; + } -[data-theme="dark"] .copyPageDropdown { - background-color: var(--ifm-navbar-background-color); -} + .copyPageDropdown { + background-color: var(--ifm-navbar-background-color); + background-color: color-mix(in srgb, var(--light), black 40%) !important; -[data-theme="dark"] .copyPageDropdown button[class^="dropdownItem"]:hover { - background-color: var(--dark); -} + button[class^="dropdownItem"]:hover { + background-color: color-mix(in srgb, var(--light), black 20%); + } -[data-theme="dark"] .copyPageDropdown div[class^="itemDescription"] { - color: var(--ifm-color-gray-600) !important; + div[class^="itemDescription"] { + color: var(--ifm-color-gray-600) !important; + } + } } diff --git a/website/src/css/docs-secondary-nav.scss b/website/src/css/docs-secondary-nav.scss index 470ecea47bc..e7c8965d4c2 100644 --- a/website/src/css/docs-secondary-nav.scss +++ b/website/src/css/docs-secondary-nav.scss @@ -79,32 +79,50 @@ html.plugin-docs { line-height: normal; color: var(--ifm-font-color-base); background: transparent; - border: 1px solid var(--ifm-color-emphasis-300); + border: 1px solid var(--ifm-color-emphasis-400); border-radius: 999px; + transition: + background-color 0.2s ease, + border-color 0.2s ease; // Match the section dropdown caret: nudged down and dimmed to grey. &:after { opacity: 0.6; transform: translateY(-1px); + border-width: 0.3rem 0.3rem 0; + margin-left: 0.35rem; } &:hover { color: var(--ifm-font-color-base); background-color: var(--ifm-menu-color-background-hover); - border-color: var(--ifm-color-gray-400); + border-color: var(--ifm-color-gray-500); } } } +[class*="dropdown"] { + .dropdown__menu { + border: 1px solid var(--ifm-table-border-color); + } +} + +[data-theme="dark"] [class*="dropdown"] { + .dropdown__menu { + background-color: color-mix(in srgb, var(--light), black 40%); + } +} + // Placed before the `[data-version-next]` block so the brand-blue "Next" state // still wins. [data-theme="dark"] [class*="versionDropdown"] .navbar__link { - background-color: var(--light); -} + background-color: color-mix(in srgb, var(--light), black 25%); + border-color: var(--ifm-hr-border-color); -[data-theme="dark"] [class*="versionDropdown"] .navbar__link:hover { - background-color: color-mix(in srgb, var(--light), white 10%); - border-color: var(--ifm-color-gray-800); + &:hover { + background-color: color-mix(in srgb, var(--light), black 10%); + border-color: var(--ifm-color-gray-800); + } } [class*="versionDropdown"][data-version-next] .navbar__link { From fc1bf7eb4d640f086fb39759223ce6202dd1930a Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Tue, 28 Jul 2026 16:14:14 +0200 Subject: [PATCH 2/3] fix scroll regression, unify button height and dropdown placement --- website/src/components/DocsSecondaryNav/index.tsx | 6 ++---- .../components/DocsSecondaryNav/styles.module.css | 10 ++++++---- website/src/css/docs-secondary-nav.scss | 12 ++++++++++++ 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/website/src/components/DocsSecondaryNav/index.tsx b/website/src/components/DocsSecondaryNav/index.tsx index 39a2a8106bc..e95e2d472cd 100644 --- a/website/src/components/DocsSecondaryNav/index.tsx +++ b/website/src/components/DocsSecondaryNav/index.tsx @@ -243,15 +243,13 @@ export default function DocsSecondaryNav({ )} +
); } diff --git a/website/src/components/DocsSecondaryNav/styles.module.css b/website/src/components/DocsSecondaryNav/styles.module.css index 1587cc91c3d..7be1ac4736c 100644 --- a/website/src/components/DocsSecondaryNav/styles.module.css +++ b/website/src/components/DocsSecondaryNav/styles.module.css @@ -11,7 +11,7 @@ justify-content: space-between; gap: 1rem; height: var(--rn-subnav-height); - padding: 6px 1.5rem 0; + padding: 0 var(--ifm-spacing-horizontal); /* Pin directly below the main navbar so page content scrolls underneath. */ position: sticky; @@ -36,11 +36,10 @@ /* Bottom keyline, inset from both edges so it comes in from the screen edges without lining up with the inner elements' padding. */ -.secondaryNav:after { - content: ""; +.secondaryNavDivider { position: absolute; right: 0.75rem; - bottom: -6px; + bottom: 0; left: 0.75rem; height: 1px; background-color: var(--ifm-toc-border-color); @@ -152,6 +151,8 @@ button.copyPageButton { border-radius: var(--ifm-global-radius); border-color: var(--ifm-color-gray-400); + padding: 7px 12px; + margin-bottom: 0; &:hover { background-color: var(--ifm-menu-color-background-hover) !important; @@ -165,6 +166,7 @@ button.copyPageButton { .copyPageDropdown { border-color: var(--ifm-table-border-color) !important; + margin-top: -2px; button[class^="dropdownItem"] { border-bottom-color: var(--ifm-table-border-color) !important; diff --git a/website/src/css/docs-secondary-nav.scss b/website/src/css/docs-secondary-nav.scss index e7c8965d4c2..b67236a747d 100644 --- a/website/src/css/docs-secondary-nav.scss +++ b/website/src/css/docs-secondary-nav.scss @@ -104,6 +104,18 @@ html.plugin-docs { [class*="dropdown"] { .dropdown__menu { border: 1px solid var(--ifm-table-border-color); + transform: translateY(4px); + overflow: visible; + + // Make sure that menu does not close on hover, with dropdown portion detached via transform + &::before { + content: ""; + position: absolute; + height: 5px; + top: -5px; + left: 0; + right: 0; + } } } From 3c8751767c220c4c7efaeed42db24e2db242ca59 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Tue, 28 Jul 2026 16:19:38 +0200 Subject: [PATCH 3/3] value tweak, lint fix --- website/src/components/DocsSecondaryNav/styles.module.css | 2 +- website/src/css/docs-secondary-nav.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/components/DocsSecondaryNav/styles.module.css b/website/src/components/DocsSecondaryNav/styles.module.css index 7be1ac4736c..8c28dcc6309 100644 --- a/website/src/components/DocsSecondaryNav/styles.module.css +++ b/website/src/components/DocsSecondaryNav/styles.module.css @@ -166,7 +166,7 @@ button.copyPageButton { .copyPageDropdown { border-color: var(--ifm-table-border-color) !important; - margin-top: -2px; + margin-top: -3px; button[class^="dropdownItem"] { border-bottom-color: var(--ifm-table-border-color) !important; diff --git a/website/src/css/docs-secondary-nav.scss b/website/src/css/docs-secondary-nav.scss index b67236a747d..c5289d301a4 100644 --- a/website/src/css/docs-secondary-nav.scss +++ b/website/src/css/docs-secondary-nav.scss @@ -108,7 +108,7 @@ html.plugin-docs { overflow: visible; // Make sure that menu does not close on hover, with dropdown portion detached via transform - &::before { + &:before { content: ""; position: absolute; height: 5px;