mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/links.less
Steph Toyofuku 6f98cc6460 (Almost) no more CSS variables in minerva
Remove direct usage of CSS variables in Minerva, and replace them with
codex design tokens again.  Document this decision in the original ADR

Note: there are still a small number of CSS variables in use, including
most notably the --color-link-red fix, which broke when I removed it,
but this change takes care of all the ones that could be easily replaced

Bug: T363743
Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
2024-06-11 11:44:47 -07:00

64 lines
1.9 KiB
Plaintext

@import 'mediawiki.mixins.less';
@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
/**
* Note that certain links may not have an href selector.
* It is particularly important on wikis for example inside navbox's that these
* links can be differentiated from other links. Thus we only apply the linkColor to links with href
* attributes.
* This can be removed when Minerva uses ResourceLoaderSkinModule `elements` feature.
*/
a:not( [ href ] ) {
color: @color-base;
/* The anchor is functionally a link so show a hand cursor. */
cursor: pointer;
}
/* stylelint-disable-next-line no-descending-specificity */
a {
/* `a` element code block can be removed
* when Minerva uses ResourceLoaderSkinModule `elements` feature. */
color: @color-link;
text-decoration: none;
background: none;
/* :visited code block can be removed
* when Minerva uses ResourceLoaderSkinModule `elements` feature. */
&:visited {
color: @color-visited;
}
/* :active code block can be removed
* when Minerva uses ResourceLoaderSkinModule `elements` feature. */
&:active {
color: @color-progressive--active;
}
/* :hover code block can be removed
* when Minerva uses ResourceLoaderSkinModule `elements` feature. */
&:hover {
text-decoration: underline;
}
}
// External links
// Use of `a` element selector due to its widespread usage and for limiting generic class scope.
// `a.external` is for footer's “Creative Commons” license link only.
a.external,
.mw-parser-output a.external {
// background-image is specified by ResourceLoader via skin.json.
background-position: center right;
background-repeat: no-repeat;
// Force the image size to be 10px.
background-size: 10px;
padding-right: 13px;
}
// Generic class name needed
.return-link {
display: block;
font-size: @font-size-minerva-small;
margin-top: 1.5em;
}