From 773880de87b79bf3107dbc32df29a86dd11e4e6f Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Thu, 18 Jan 2024 18:18:42 +0100 Subject: Update ToC highlighting styles to prevent UI shifts (#1372) Co-authored-by: Chris Swithinbank --- .changeset/young-roses-tickle.md | 17 +++++++++++++++++ .../TableOfContents/TableOfContentsList.astro | 8 ++------ 2 files changed, 19 insertions(+), 6 deletions(-) create mode 100644 .changeset/young-roses-tickle.md diff --git a/.changeset/young-roses-tickle.md b/.changeset/young-roses-tickle.md new file mode 100644 index 00000000..4a2c2fc8 --- /dev/null +++ b/.changeset/young-roses-tickle.md @@ -0,0 +1,17 @@ +--- +'@astrojs/starlight': minor +--- + +Updates the table of contents highlighting styles to prevent UI shifts when scrolling through a page. + +If you want to preserve the previous, buggy styling, you can add the following custom CSS to your site: + +```css +starlight-toc a[aria-current='true'], +starlight-toc a[aria-current='true']:hover, +starlight-toc a[aria-current='true']:focus { + font-weight: 600; + color: var(--sl-color-text-invert); + background-color: var(--sl-color-text-accent); +} +``` diff --git a/packages/starlight/components/TableOfContents/TableOfContentsList.astro b/packages/starlight/components/TableOfContents/TableOfContentsList.astro index db370b61..8ea9eb84 100644 --- a/packages/starlight/components/TableOfContents/TableOfContentsList.astro +++ b/packages/starlight/components/TableOfContents/TableOfContentsList.astro @@ -38,12 +38,8 @@ const { toc, isMobile = false, depth = 0 } = Astro.props; padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline); line-height: 1.25; } - a[aria-current='true'], - a[aria-current='true']:hover, - a[aria-current='true']:focus { - font-weight: 600; - color: var(--sl-color-text-invert); - background-color: var(--sl-color-text-accent); + a[aria-current='true'] { + color: var(--sl-color-text-accent); } .isMobile a { --pad-inline: 1rem; -- cgit