mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-16 18:58:45 +00:00
65f1300b78
Adds a rule that makes elements using the .notheme class inherit black text unless specified otherwise. This addresses situations where elements relying on inheritance for color. Bug: T358528 Change-Id: Ie59c31b5e25684ff5ecad507a273fbe71af4bca0
132 lines
3.9 KiB
Plaintext
132 lines
3.9 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.codex-design-tokens/theme-wikimedia-ui-experimental.less';
|
|
|
|
:root {
|
|
--minerva-diff-addedline: @color-success;
|
|
--minerva-diff-deletedline: @color-destructive;
|
|
--box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );
|
|
}
|
|
|
|
/**
|
|
* The following line groups the .skin-invert selector along with the :root selector.
|
|
* (From the theme-wikimedia-ui-experimental.less import above).
|
|
* This ensures that the light-mode color palette is always associated with the .skin-invert class.
|
|
*/
|
|
|
|
/* stylelint-disable-next-line */
|
|
.skin-invert:extend(:root) {}
|
|
/**
|
|
* As with the .skin-invert class, .notheme should also reset the CSS variables to the default light theme.
|
|
*/
|
|
|
|
/* stylelint-disable-next-line */
|
|
.notheme:extend(:root) {}
|
|
|
|
/**
|
|
* Placeholder Night mode color palette.
|
|
* NOTE: These values are temporarily hard coded.
|
|
*/
|
|
.mixin-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: #f8a397;
|
|
--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: #000;
|
|
--color-emphasized: #fff;
|
|
|
|
// Message box colors. [[T358402#9598616]]
|
|
--background-color-error-subtle: #70231f;
|
|
--background-color-warning-subtle: #4f3a1a;
|
|
--background-color-success-subtle: #194538;
|
|
--background-color-notice-subtle: #202122;
|
|
--border-color-error: #e45d52;
|
|
--border-color-warning: #ad822b;
|
|
--border-color-success: #0f9b7a;
|
|
--border-color-notice: #72777d;
|
|
--color-warning: #e7b032;
|
|
--color-success: #74c9ac;
|
|
--color-notice: #f8f9fa;
|
|
|
|
--minerva-diff-deletedline: #886525;
|
|
--minerva-diff-addedline: #36c;
|
|
}
|
|
|
|
/**
|
|
* Forced night mode.
|
|
*
|
|
* Applies the night mode color palette per the users explicit preference,
|
|
* regardless of system settings.
|
|
*/
|
|
html.skin-night-mode-clientpref-1 {
|
|
color-scheme: dark;
|
|
.mixin-night-mode-palette();
|
|
}
|
|
|
|
html.skin-night-mode-clientpref-1 .skin-invert {
|
|
color-scheme: light;
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
|
|
html.skin-night-mode-clientpref-1 .notheme {
|
|
color-scheme: light;
|
|
color: var( --color-base );
|
|
}
|
|
|
|
/**
|
|
* Auto night mode.
|
|
*
|
|
* Applies the night mode color palette only in response to system settings.
|
|
*/
|
|
@media ( prefers-color-scheme: dark ) {
|
|
html.skin-night-mode-clientpref-2 {
|
|
color-scheme: light dark;
|
|
.mixin-night-mode-palette();
|
|
}
|
|
|
|
html.skin-night-mode-clientpref-2 .notheme {
|
|
color-scheme: light;
|
|
color: var( --color-base );
|
|
}
|
|
|
|
html.skin-night-mode-clientpref-2 .skin-invert {
|
|
color-scheme: light;
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
}
|