wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-11 16:38:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: Apply inversion on certain OOUI icons and indicators

Browse source 
In order for most OOUI grayscale icons and indicators to be inverted
correctly, we need to apply the inversion to a limited number of
elements by a general class.
Applying here to keep OOUI library MediaWiki agnostic.

Bug: T365764
Depends-On: Ib183cd7c28ea3fb68a6614b38362325560b426f8
Change-Id: I437db61c34cdcce8d3602b1354fa4addc98530fd
This commit is contained in:
Volker E 2024-06-03 21:19:51 +03:00 committed by Jon Robson
parent 91fd8a977b
commit 6d037d4e9f
1 changed files with 57 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
resources/skins.minerva.base.styles/CSSCustomProperties.less
View file

@ -29,33 +29,6 @@
// </T361717>
}
/**
* == 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;
.mixin-night-mode-palette();
// T363911 Temporarily override Codex variable for Vector night mode release
// Remove after task has been resolved and new color is available in Codex.
--color-link-red: #b97876;
}
/**
* == 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;
.mixin-night-mode-palette();
// T363911 Temporarily override Codex variable for Vector night mode release
// Remove after task has been resolved and new color is available in Codex.
--color-link-red: #b97876;
}
}
/**
* == Night-mode helpers ==
* The following classes are provided to help third-parties deal with night mode when using the
@ -92,16 +65,64 @@ html.skin-theme-clientpref-night {
color: @color-base;
}
// T365102 invert class specifically for image related elements
html.skin-theme-clientpref-night .skin-invert-image img,
html.skin-theme-clientpref-night .skin-invert {
filter: invert( 1 ) hue-rotate( 180deg );
}
/**
* == 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;
.mixin-night-mode-palette();
// T363911 Temporarily override Codex variable for Vector night mode release
// Remove after task has been resolved and new color is available in Codex.
--color-link-red: #b97876;
@media ( prefers-color-scheme: dark ) {
// T365102 invert class specifically for image related elements
html.skin-theme-clientpref-os .skin-invert-image img,
html.skin-theme-clientpref-os .skin-invert {
.skin-invert,
.skin-invert-image img,
/* Special treatment of inverted OOUI icons, see T365764 */
.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
.oo-ui-indicatorElement-indicator {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* 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 */
.skin-invert,
.notheme {
.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
.oo-ui-indicatorElement-indicator {
filter: none !important;
}
}
}
/**
* == 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;
.mixin-night-mode-palette();
// T363911 Temporarily override Codex variable for Vector night mode release
// Remove after task has been resolved and new color is available in Codex.
--color-link-red: #b97876;
.skin-invert,
.skin-invert-image img,
.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
.oo-ui-indicatorElement-indicator {
filter: invert( 1 ) hue-rotate( 180deg );
}
/* 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 */
.skin-invert,
.notheme {
.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
.oo-ui-indicatorElement-indicator {
filter: none !important;
}
}
}
}