wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-30 18:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Separate out indicator and icon selectors

Browse source 
Follow up to I584491c280d93f18a48d8c90c4d8a6628f1a672f

Since these selectors are nested, this was generating unexpected
selectors, meaning the invert wasn't applying correctly to indicators.

This is evident on Special:Search

Bug: T365764
Change-Id: I40f8a8ad6598d145a6284c831e0cef944c5d7e75
This commit is contained in:
Jon Robson 2024-06-13 08:16:32 -07:00 committed by Jdlrobson
parent 74d5cd5cfc
commit 71c532e542
1 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,7 +21,8 @@
* This includes OOUI icons that are not colored (progressive/destructive), checkbox icons, and * This includes OOUI icons that are not colored (progressive/destructive), checkbox icons, and
* indicator widgets. * 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 '; @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 * Light mode
@ -58,13 +59,15 @@ html.skin-theme-clientpref-night {
// T365102 invert class specifically for image related elements // T365102 invert class specifically for image related elements
html.skin-theme-clientpref-night .skin-invert-image img, 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} { html.skin-theme-clientpref-night @{OOUIIconSelectors},
html.skin-theme-clientpref-night @{OOUIIndicatorSelectors} {
color-scheme: light; color-scheme: light;
filter: invert( 1 ) hue-rotate( 180deg ); filter: invert( 1 ) hue-rotate( 180deg );
} }
html.skin-theme-clientpref-night .notheme, html.skin-theme-clientpref-night .notheme,
html.skin-theme-clientpref-night @{OOUIOverrideSelectors} { html.skin-theme-clientpref-night @{OOUIOverrideSelectors},
html.skin-theme-clientpref-night @{OOUIIndicatorSelectors} {
color-scheme: light; color-scheme: light;
color: var( --color-base ); color: var( --color-base );
} }
@ -85,14 +88,16 @@ html.skin-theme-clientpref-night @{OOUIOverrideSelectors} {
} }
html.skin-theme-clientpref-os .notheme, html.skin-theme-clientpref-os .notheme,
html.skin-theme-clientpref-os @{OOUIOverrideSelectors} { html.skin-theme-clientpref-os @{OOUIOverrideSelectors},
html.skin-theme-clientpref-os @{OOUIIndicatorSelectors} {
color-scheme: light; color-scheme: light;
} }
// T365102 invert class specifically for image related elements // T365102 invert class specifically for image related elements
html.skin-theme-clientpref-os .skin-invert-image img, 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} { html.skin-theme-clientpref-os @{OOUIIconSelectors},
html.skin-theme-clientpref-os @{OOUIIndicatorSelectors} {
color-scheme: light; color-scheme: light;
filter: invert( 1 ) hue-rotate( 180deg ); filter: invert( 1 ) hue-rotate( 180deg );
} }
@ -106,10 +111,13 @@ html.skin-theme-clientpref-night @{OOUIOverrideSelectors} {
* - OOUI icons inside elements with .skin-invert * - OOUI icons inside elements with .skin-invert
* - OOUI icons inside elements with .notheme * - OOUI icons inside elements with .notheme
*/ */
@{OOUIOverrideSelectors} @{OOUIIconSelectors}, @{OOUIOverrideSelectors},
.skin-invert @{OOUIIconSelectors}, .skin-invert,
.notheme @{OOUIIconSelectors} { .notheme {
filter: none !important; /* stylelint-disable-line declaration-no-important */ @{OOUIIndicatorSelectors},
@{OOUIIconSelectors} {
filter: none !important; /* stylelint-disable-line declaration-no-important */
}
} }
/** /**