mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-19 09:11:05 +00:00
5ef5694fbf
- Define icon size variables in icons.less - Update icon classes to use .cdx-mixin-css-icon() - Remove temporary fixes in icons.less - Add 'codex.styles' dependency in skin.json - Set 'useMaskImage' to true in skin.json Bug: T374145 Depends-On: Ia8f770aec365da77b39cb0258f546df7894e6ba4 Change-Id: I87b060cf98194d81679da2610944f58e8d941389
69 lines
1.9 KiB
Plaintext
69 lines
1.9 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
|
|
// NOTE: @param-is-button-icon lets us change the icon color
|
|
// with background-color by using mask-image.
|
|
// over specified so that it overrides the minerva-icon default.
|
|
.minerva-icon.minerva-icon--modified-history {
|
|
.cdx-mixin-css-icon( @cdx-icon-history, @param-is-button-icon: true );
|
|
}
|
|
|
|
.minerva-icon.minerva-icon--expand {
|
|
.cdx-mixin-css-icon( @cdx-icon-next, @param-is-button-icon: true );
|
|
}
|
|
|
|
.minerva-icon.minerva-icon--newspaper {
|
|
.cdx-mixin-css-icon(@cdx-icon-newspaper, @param-is-button-icon: true);
|
|
}
|
|
|
|
.minerva-icon.minerva-icon-size-small {
|
|
.cdx-mixin-css-icon-background( @size-icon-small );
|
|
.cdx-mixin-css-icon-size( @size-icon-small );
|
|
}
|
|
|
|
// Start T374145
|
|
@transparentPNG: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
|
|
|
|
.minerva-icon {
|
|
// By default use a transparent PNG. This is important for icons loaded via JavaScript, as without this
|
|
// the icon will appear as a black square until loaded.
|
|
-webkit-mask-image: @transparentPNG;
|
|
mask-image: @transparentPNG;
|
|
.cdx-mixin-css-icon('none');
|
|
background-color: @color-subtle;
|
|
}
|
|
|
|
.minerva-icon--language-disabled {
|
|
background-color: @color-disabled;
|
|
}
|
|
|
|
// Dark mode adjustments
|
|
@media screen {
|
|
html.skin-theme-clientpref-night {
|
|
// Disable inversion for icons in dark mode, except where explicitly defined
|
|
.toggle-list .minerva-icon {
|
|
filter: none;
|
|
}
|
|
|
|
// Invert only branding images (e.g., logo) inside the branding-box in dark mode
|
|
.branding-box img {
|
|
filter: invert( 1 );
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and ( prefers-color-scheme: dark ) {
|
|
html.skin-theme-clientpref-os {
|
|
// Disable inversion for OS-level dark mode as well
|
|
.toggle-list .minerva-icon {
|
|
filter: none;
|
|
}
|
|
|
|
// Branding image inversion for OS-level dark mode
|
|
.branding-box img {
|
|
filter: invert( 1 );
|
|
}
|
|
}
|
|
}
|
|
|
|
// End T374145
|