Page MenuHomeWickedGov Phorge
Files F4117894

CSSCustomProperties.less
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

CSSCustomProperties.less
View Options

@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';
/**
* 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 ):not( .oo-ui-image-invert ):not( .mw-no-invert )';
@OOUIIndicatorSelectors: ~'.oo-ui-indicatorElement-indicator';
@media screen {
/**
* Light mode
*
* Applies the light mode color palette by default
* or with the .skin-invert, or .notheme classes
*/
:root,
.skin-invert,
.notheme {
.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 {
color-scheme: light;
color: var( --color-base );
}
/**
* 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
*/
.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;
}
}
/**
* Auto night mode.
*
* Applies the night mode color palette only in response to system settings.
*/
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
color-scheme: light dark;
.cdx-mode-dark();
}
html.skin-theme-clientpref-os .notheme {
color-scheme: light;
color: var( --color-base );
}
// 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 );
}
}

File Metadata

Mime Type
text/plain
Expires
Wed, Aug 19, 02:24 (2 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
65/6c/b0a4b665f909921bee7c84330657
Default Alt Text
CSSCustomProperties.less (3 KB)

Event Timeline