mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-17 03:08:12 +00:00
59fd0cd5dc
All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
64 lines
1.9 KiB
Plaintext
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: var( --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: var( --color-link--visited );
|
|
}
|
|
|
|
/* :active code block can be removed
|
|
* when Minerva uses ResourceLoaderSkinModule `elements` feature. */
|
|
&:active {
|
|
color: var( --color-link--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;
|
|
}
|