mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-11 22:06:07 +00:00
c98508facb
Right now visited links in night mode are showing the day mode style for
@color-visited, because --color-link--visited is defined, but never set
to a corresponding night mode style. This defines the night mode
variant in the stylesheet, and sets it to the same value as
--color-visited
Visual change only in night mode, which is behind a feature flag
I also added /coverage/ to the eslintignore, as I was getting failures
on the pre-commit hook due to us linting the coverage report 🙃
Bug: T356825
Change-Id: I96695fe4c094b79385e36aef9e29b8d392c06302
105 lines
3.7 KiB
Plaintext
105 lines
3.7 KiB
Plaintext
/**
|
|
* Minerva CSS Custom properties
|
|
* ----------------------------
|
|
* Please be aware that these properties are accessible via *any* client-side code.
|
|
* These variables should mirror Codex design token names and values:
|
|
* https://doc.wikimedia.org/codex/latest/design-tokens
|
|
* Only include properties that are required for client-side modification.
|
|
*
|
|
* @private - Currently, these variables are only intended for use by Minerva,
|
|
* however, they are designed to mimic the naming convention in Codex tokens
|
|
* in order to facilitate an eventual migration to a centralized source.
|
|
* @experimental
|
|
* @since February 2024 (MediaWiki 1.43)
|
|
*/
|
|
|
|
@import 'mediawiki.skin.variables.less';
|
|
@import '../../minerva.less/minerva.variables.less';
|
|
|
|
:root {
|
|
/* Standard Codex colors */
|
|
--background-color-base: @background-color-base;
|
|
--background-color-destructive: @background-color-destructive;
|
|
--background-color-interactive: @background-color-interactive;
|
|
--background-color-interactive-subtle: @background-color-interactive-subtle;
|
|
--background-color-progressive-subtle: @background-color-progressive-subtle;
|
|
--border-color-base: @border-color-base;
|
|
--border-color-inverted: @border-color-inverted;
|
|
--border-color-muted: @border-color-muted;
|
|
--border-color-progressive--focus: @border-color-progressive--focus;
|
|
--border-color-subtle: @border-color-subtle;
|
|
--border-color-transparent: @border-color-transparent;
|
|
--box-shadow-color-progressive--focus: @box-shadow-color-progressive--focus;
|
|
--color-base: @color-base;
|
|
--color-error: @color-error;
|
|
--color-inverted: @color-inverted;
|
|
--color-subtle: @color-subtle;
|
|
|
|
// NOTE: The following link colors are fed *back* into MediaWiki core
|
|
// by being used in mediawiki.skin.variables.less.
|
|
--color-progressive: @color-progressive;
|
|
--color-visited: @color-visited;
|
|
--color-progressive--active: @color-progressive--active;
|
|
--color-link: @color-progressive;
|
|
--color-link-red: @color-link-red;
|
|
--color-link-red--visited: @color-link-red--visited;
|
|
--color-link-external: @color-progressive;
|
|
--color-link-external--visited: @color-visited;
|
|
--color-link-external--active: @color-progressive--active;
|
|
--color-link--visited: @color-visited;
|
|
// T357381: Note Minerva uses a different active color then the standard one.
|
|
--color-link--active: #faa700;
|
|
|
|
/* Minerva specific colors */
|
|
// FIXME: Replace with Codex drop shadows
|
|
--box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );
|
|
}
|
|
|
|
/**
|
|
* Placeholder Night mode color palette.
|
|
* NOTE: These values are temporarily hard coded.
|
|
*/
|
|
.night-mode-palette() {
|
|
--color-base: #f8f9fa;
|
|
--color-subtle: #d4d5d5;
|
|
--color-link: #6e85d8;
|
|
--color-link-red: #e45d52;
|
|
--color-progressive: #6e85d8;
|
|
--background-color-destructive: #e45d52;
|
|
--color-progressive--active: #afb6e9;
|
|
--background-color-base: #101418;
|
|
--color-visited: #977dbd;
|
|
--background-color-interactive: #202122;
|
|
--background-color-interactive-subtle: #202122;
|
|
--background-color-progressive-subtle: #202122;
|
|
--border-color-base: #2e3136;
|
|
--border-color-inverted: #f8f9fa;
|
|
--border-color-muted: #2e3136;
|
|
--border-color-progressive--focus: #afb6e9;
|
|
--border-color-subtle: #d4d5d5;
|
|
--border-color-transparent: transparent;
|
|
--box-shadow-color-progressive--focus: #afb6e9;
|
|
--color-error: #e45d52;
|
|
--color-inverted: #f8f9fa;
|
|
--color-link-red--visited: #b97876;
|
|
--color-link-external: #6e85d8;
|
|
--color-link-external--visited: #b97876;
|
|
--color-link-external--active: #2a4b8d;
|
|
--color-link--visited: #977dbd;
|
|
--box-shadow-color-drawer: #afb6e9;
|
|
}
|
|
|
|
.night-mode-invert() {
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
|
|
html.skin-night-mode-clientpref-1 {
|
|
.night-mode-palette();
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
html.skin-night-mode-clientpref-2 {
|
|
.night-mode-palette();
|
|
}
|
|
}
|