diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss index f3fe96be10..b6e21b8074 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss @@ -22,39 +22,46 @@ $link-underline-offset: 0.1578em !default; // - 0.12em (relative to the link's text size) $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default; +@function if-important($important) { + @return #{if($important, "!important", "")}; +} + // Ensures links have an underline decoration by default - needed to meet // WCAG SC 1.4.1 -@mixin link-decoration { - text-decoration: underline; +@mixin link-decoration($important: false) { + text-decoration: underline if-important($important); @if $link-underline-thickness { - text-decoration-thickness: $link-underline-thickness; + text-decoration-thickness: $link-underline-thickness + if-important($important); } @if $link-underline-offset { - text-underline-offset: $link-underline-offset; + text-underline-offset: $link-underline-offset if-important($important); } } // Ensures links have an underline decoration on hover - distinct from the // default behaviour -@mixin link-decoration-hover { +@mixin link-decoration-hover($important: true) { @if $link-hover-decoration-thickness { - text-decoration-thickness: $link-hover-decoration-thickness; + text-decoration-thickness: $link-hover-decoration-thickness + if-important($important); // Disable ink skipping on underlines on hover. Browsers haven't // standardised on this part of the spec yet, so set both properties - text-decoration-skip-ink: none; // Chromium, Firefox - text-decoration-skip: none; // Safari + text-decoration-skip-ink: none + if-important($important); // Chromium, Firefox + text-decoration-skip: none if-important($important); // Safari } } // Simple hover style - can be used alone or in conjunction with other mixins // Add the text underline and change in thickness on hover -@mixin link-style-hover { +@mixin link-style-hover($important: true) { &:hover { - @include link-decoration; - @include link-decoration-hover; - color: var(--pst-color-link-hover); + @include link-decoration($important: $important); + @include link-decoration-hover($important: $important); + color: var(--pst-color-link-hover) if-important($important); } } diff --git a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss index d8aeca7c63..990706a2c6 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss @@ -3,12 +3,8 @@ font-family: inherit !important; a { color: var(--pst-color-link) !important; - text-decoration: unset; - @include link-style-hover; - &:hover { - color: var(--pst-color-link-hover); - background-color: var(--pst-color-surface); - } + text-decoration: underline !important; + @include link-style-hover($important: true); } &.rst-badge { border-color: var(--pst-color-border) !important; @@ -53,11 +49,10 @@ border-style: solid !important; border-width: 1px !important; a { + @include link-style-hover($important: true); + background-color: var(--pst-color-surface); color: var(--pst-color-text-base) !important; - @include link-style-hover; - &:hover { - color: var(--pst-color-link-hover); - } + text-decoration: none !important; } } }