mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-04 20:18:57 +00:00
cd44419c95
Visual changes: blue and red link colors have been updated to match codex, including hover/focus/active state colors Bug: T366515 Change-Id: I16411a7ea47ae26c7e67a71f83e0521962c8ce61
141 lines
4.3 KiB
Plaintext
141 lines
4.3 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-mixin-dark.less';
|
|
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-reset.less';
|
|
|
|
/**
|
|
* FIXME: Temporary Night-mode override classes
|
|
* Remove these once T363849 has been addressed.
|
|
*
|
|
* The following classes are meant to force OOUI interfaces
|
|
* into light-mode when night-mode is enabled. They should be
|
|
* grouped with the `.notheme` rulset as an alternative to
|
|
* using the `.notheme` class in multiple places.
|
|
*
|
|
* Note: These are wrapped in quotes to avoid dashed being interpreted as minus signs,
|
|
* along with a `~` to unwrap them when they are used as selectors.
|
|
*/
|
|
@OOUIOverrideSelectors: ~'.ve-ui-overlay, .oo-ui-popupWidget-popup, .oo-ui-toolbar'; // T363861 - VisualEditor Overlays
|
|
|
|
/**
|
|
* T365764 - OOUI Icon classes for inverted dark-mode icons.
|
|
* This includes OOUI icons that are not colored (progressive/destructive), checkbox icons, and
|
|
* indicator widgets.
|
|
*/
|
|
@OOUIIconSelectors: ~'.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon )';
|
|
@OOUIIndicatorSelectors: ~'.oo-ui-indicatorElement-indicator';
|
|
|
|
/**
|
|
* Light mode
|
|
*
|
|
* Applies the light mode color palette by default
|
|
* or with the .skin-invert, or .notheme classes
|
|
*/
|
|
:root,
|
|
.skin-invert,
|
|
.notheme,
|
|
@{OOUIOverrideSelectors} {
|
|
.cdx-mode-reset();
|
|
}
|
|
|
|
/**
|
|
* Forced night mode.
|
|
*
|
|
* Applies the night mode color palette per the users explicit preference,
|
|
* regardless of system settings.
|
|
*/
|
|
html.skin-theme-clientpref-night {
|
|
color-scheme: dark;
|
|
.cdx-mode-dark();
|
|
}
|
|
|
|
/**
|
|
* Inverted Dark-mode
|
|
* Creates a dark-mode effect on elements by flipping their color,
|
|
* (usually from black to white).
|
|
* Applied as a last resort when using CSS variables is not possible.
|
|
* NOTE: `.skin-invert` is used in templates and user generated content.
|
|
*
|
|
* - T365102 invert class specifically for image related element
|
|
* - T365764 special treatment of inverted OOUI icons
|
|
*/
|
|
html.skin-theme-clientpref-night .skin-invert-image img,
|
|
html.skin-theme-clientpref-night .skin-invert,
|
|
html.skin-theme-clientpref-night @{OOUIIconSelectors},
|
|
html.skin-theme-clientpref-night @{OOUIIndicatorSelectors} {
|
|
color-scheme: light;
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
|
|
/**
|
|
* Forced light mode.
|
|
* Makes elements appear in light-mode when dark-mode is enabled.
|
|
* NOTE: might be used in templates and user generated content.
|
|
*/
|
|
html.skin-theme-clientpref-night .notheme,
|
|
html.skin-theme-clientpref-night @{OOUIOverrideSelectors} {
|
|
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-theme-clientpref-os {
|
|
color-scheme: light dark;
|
|
.cdx-mode-dark();
|
|
}
|
|
|
|
html.skin-theme-clientpref-os .notheme,
|
|
html.skin-theme-clientpref-os @{OOUIOverrideSelectors} {
|
|
color-scheme: light;
|
|
}
|
|
|
|
// T365102 invert class specifically for image related elements
|
|
html.skin-theme-clientpref-os .skin-invert-image img,
|
|
html.skin-theme-clientpref-os .skin-invert,
|
|
html.skin-theme-clientpref-os @{OOUIIconSelectors},
|
|
html.skin-theme-clientpref-os @{OOUIIndicatorSelectors} {
|
|
color-scheme: light;
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Prevent double inversion.
|
|
* Do not apply invert to elements that are inside a notheme or a skin-invert class to avoid inversion in light theme or
|
|
* double inversion in an already inverted element
|
|
* - OOUI icons inside .notheme OOUI elements
|
|
* - OOUI icons inside elements with .skin-invert
|
|
* - OOUI icons inside elements with .notheme
|
|
*/
|
|
@{OOUIOverrideSelectors},
|
|
.skin-invert,
|
|
.notheme {
|
|
@{OOUIIndicatorSelectors},
|
|
@{OOUIIconSelectors} {
|
|
filter: none !important; /* stylelint-disable-line declaration-no-important */
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Font size settings
|
|
*/
|
|
.vector-feature-custom-font-size-clientpref--excluded,
|
|
.vector-feature-custom-font-size-clientpref-0 {
|
|
--font-size-medium: @font-size-small;
|
|
--line-height-medium: @line-height-small;
|
|
}
|
|
|
|
.vector-feature-custom-font-size-clientpref-1 {
|
|
--font-size-medium: @font-size-medium;
|
|
--line-height-medium: @line-height-medium;
|
|
}
|
|
|
|
.vector-feature-custom-font-size-clientpref-2 {
|
|
--font-size-medium: @font-size-x-large;
|
|
--line-height-medium: 1.5;
|
|
}
|