wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 10:21:40 +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 black 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: I792e89a8253a426b8c723486b96cb87bf9e1d85d
Change-Id: I584491c280d93f18a48d8c90c4d8a6628f1a672f
This commit is contained in:
Volker E 2024-06-03 21:30:02 +03:00 committed by Jdlrobson
parent 4353654418
commit 7e6e3bcedb
1 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
resources/skins.vector.styles/CSSCustomProperties.less
View file

@ -16,6 +16,13 @@
*/
@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 ), .oo-ui-indicatorElement-indicator ';
/**
* Light mode
*
@ -44,9 +51,14 @@ html.skin-theme-clientpref-night {
--color-link-red: #b97876;
}
/**
* Forced light mode.
* Also special treatment of inverted OOUI icons, see T365764.
*/
// T365102 invert class specifically for image related elements
html.skin-theme-clientpref-night .skin-invert-image img,
html.skin-theme-clientpref-night .skin-invert {
html.skin-theme-clientpref-night .skin-invert,
html.skin-theme-clientpref-night @{OOUIIconSelectors} {
color-scheme: light;
filter: invert( 1 ) hue-rotate( 180deg );
}
@ -79,12 +91,27 @@ html.skin-theme-clientpref-night @{OOUIOverrideSelectors} {
// 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 .skin-invert,
html.skin-theme-clientpref-os @{OOUIIconSelectors} {
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} @{OOUIIconSelectors},
.skin-invert @{OOUIIconSelectors},
.notheme @{OOUIIconSelectors} {
filter: none !important; /* stylelint-disable-line declaration-no-important */
}
/**
* Font size settings
*/