wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-04 03:59:53 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.styles/components/Icon.less

70 lines
2.5 KiB
Plaintext
Raw Normal View History

Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
.vector-icon {
.cdx-mixin-css-icon-background( );
.cdx-mixin-css-icon-size( );
.cdx-mixin-css-icon-alignment( );
font-size: 14px;
Icons should not repeat at larger font sizes Bug: T365731 Change-Id: I539f906e06bb2dc133885092dbacb851fd774c23
2024-05-24 16:30:44 +00:00
// Since we use background-image for various icons instead of mask-image
// We need to fix the width and height for icons to avoid
// the container increasing with font size and the icons becoming
// repeated (as happened in T365731)
// FIXME: Remove after T363920 has been resolved (making sure to test
// different font sizes when doing that)
background-repeat: no-repeat;
background-position: center;
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
}
Enable night theme in Vector - New night theme added via Codex `.cdx-mode-dark();` mixin. - CSS custom properties separated from skin.less. - Font-size rem conversion removed since Codex now uses rems. - bundlesize increased by 1kb ( followup from Icfcb5c7418061a5727580f0685054356ba4edb72 ). - Icons that use background-images are inverted for night-theme. - Linter error fixed for long-lines in clientPreferences.js Co-Author: <Bernard Wang> bwang@wikimedia.org Bug: T354889 Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
2024-03-06 22:12:45 +00:00
// FIXME: T363920 Remove when all icons are migrated from ResourceLoader to Codex
Remove not selector and target OOUI icons for inversion only A number of icons using the vector-icon class that have been converted to codex are being double inverted by this rule. Instead, switch it to enumerate the full list of OOUI icons and invert them, so that subsequent codex migrations can be easier as well Also bumps the bundle size to account for the increase in bytes Visual change for the table of contents arrows being fixed, ideally not for anything else Bug: T365951 Bug: T365580 Change-Id: Ia389e73c72432eb5f7a2df4ff9b48593751bc184
2024-06-11 21:53:01 +00:00
//
// enumerate full list of OOUI icons to be inverted rather than selecting on vector-icon alone
// so as not to punish switching to codex
.vector-icon.mw-ui-icon-wikimedia-article,
.vector-icon.mw-ui-icon-wikimedia-edit,
.vector-icon.mw-ui-icon-wikimedia-editLock,
.vector-icon.mw-ui-icon-wikimedia-exitFullscreen,
.vector-icon.mw-ui-icon-wikimedia-fullScreen,
.vector-icon.mw-ui-icon-wikimedia-history,
.vector-icon.mw-ui-icon-wikimedia-speechBubbles,
.vector-icon.mw-ui-icon-wikimedia-speechBubbleAdd,
.vector-icon.mw-ui-icon-wikimedia-wikiText,
.vector-icon.mw-ui-icon-wikimedia-appearance,
.vector-icon.mw-ui-icon-wikimedia-tray,
.vector-icon.mw-ui-icon-wikimedia-bell,
.vector-icon.mw-ui-icon-wikimedia-menu,
.vector-icon.mw-ui-icon-wikimedia-heart,
.vector-icon.mw-ui-icon-wikimedia-language,
.vector-icon.mw-ui-icon-wikimedia-ellipsis,
.vector-icon.mw-ui-icon-wikimedia-userAvatar,
.vector-icon.mw-ui-icon-wikimedia-userAdd,
.vector-icon.mw-ui-icon-wikimedia-userTemporary,
.vector-icon.mw-ui-icon-wikimedia-userTalk,
.vector-icon.mw-ui-icon-wikimedia-sandbox,
.vector-icon.mw-ui-icon-wikimedia-search,
.vector-icon.mw-ui-icon-wikimedia-settings,
.vector-icon.mw-ui-icon-wikimedia-labFlask,
.vector-icon.mw-ui-icon-wikimedia-star,
.vector-icon.mw-ui-icon-wikimedia-halfStar,
.vector-icon.mw-ui-icon-wikimedia-unStar,
.vector-icon.mw-ui-icon-wikimedia-watchlist,
.vector-icon.mw-ui-icon-wikimedia-userContributions,
.vector-icon.mw-ui-icon-wikimedia-logIn,
.vector-icon.mw-ui-icon-wikimedia-logOut,
.vector-icon.mw-ui-icon-wikimedia-imageGallery,
.vector-icon.mw-ui-icon-wikimedia-userGroup,
.vector-icon.mw-ui-icon-wikimedia-listBullet,
.vector-icon.mw-ui-icon-wikimedia-close {
Revert "Prevent dark-mode styles from affecting print media" This reverts commit b3ca12e628205ee2ffa02c0ca6ffa4d230119a2e. Reason for revert: Icons are appearing black on black in dark mode in origin/wmf/1.43.0-wmf.18. Change-Id: Ifdf3970c77b66e5a7835ca44eb45deec2b44eb43
2024-08-13 07:24:28 +00:00
html.skin-theme-clientpref-night & {
filter: invert( 1 );
Enable night theme in Vector - New night theme added via Codex `.cdx-mode-dark();` mixin. - CSS custom properties separated from skin.less. - Font-size rem conversion removed since Codex now uses rems. - bundlesize increased by 1kb ( followup from Icfcb5c7418061a5727580f0685054356ba4edb72 ). - Icons that use background-images are inverted for night-theme. - Linter error fixed for long-lines in clientPreferences.js Co-Author: <Bernard Wang> bwang@wikimedia.org Bug: T354889 Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
2024-03-06 22:12:45 +00:00
}
/**
* Auto night mode.
*
* Applies the night mode color palette only in response to system settings.
*/
Revert "Prevent dark-mode styles from affecting print media" This reverts commit b3ca12e628205ee2ffa02c0ca6ffa4d230119a2e. Reason for revert: Icons are appearing black on black in dark mode in origin/wmf/1.43.0-wmf.18. Change-Id: Ifdf3970c77b66e5a7835ca44eb45deec2b44eb43
2024-08-13 07:24:28 +00:00
@media ( prefers-color-scheme: dark ) {
Enable night theme in Vector - New night theme added via Codex `.cdx-mode-dark();` mixin. - CSS custom properties separated from skin.less. - Font-size rem conversion removed since Codex now uses rems. - bundlesize increased by 1kb ( followup from Icfcb5c7418061a5727580f0685054356ba4edb72 ). - Icons that use background-images are inverted for night-theme. - Linter error fixed for long-lines in clientPreferences.js Co-Author: <Bernard Wang> bwang@wikimedia.org Bug: T354889 Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
2024-03-06 22:12:45 +00:00
html.skin-theme-clientpref-os & {
filter: invert( 1 );
}
}
}
Reference in a new issue Copy permalink