wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "[styles] LanguageButton: Amend icon color by setting opacity"

Browse source
This commit is contained in:
jenkins-bot 2021-03-30 23:10:51 +00:00 committed by Gerrit Code Review
parent d6b7ef0a8e 5a1a382c17
commit 1b42cd8dd4
4 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/skins.vector.styles/LanguageButton.less
View file

@ -1,9 +1,16 @@
// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook // The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
@import '../../variables.less'; @import '../../variables.less';
@import 'mediawiki.mixins.less';
// mw-body-header class can be removed when language button is the default. // `.mw-body-header` class can be removed when language button is the default.
// e.g. upon removal of SkinVector::isLanguagesInHeader // e.g. upon removal of SkinVector::isLanguagesInHeader
.mw-body-header .mw-portlet-lang { .mw-body-header .mw-portlet-lang {
.mw-ui-icon:before {
margin-right: 8px;
// Put icon on correct standard normal state color.
opacity: 0.87;
}
.vector-menu-heading { .vector-menu-heading {
// Special treatment for language button, based on Vector font-size // Special treatment for language button, based on Vector font-size
font-size: @font-size-base; font-size: @font-size-base;
@ -13,6 +20,7 @@
padding: 4px 30px 4px 8px; padding: 4px 30px 4px 8px;
// Prevent select of span text "X languages" // Prevent select of span text "X languages"
user-select: none; user-select: none;
// Remove opacity on language button (it applies to more menu because of label color).
opacity: 1; opacity: 1;
&:after { &:after {
@ -24,7 +32,7 @@
top: auto; top: auto;
right: 0; right: 0;
// align borders of open menu align with button // align borders of open menu align with button
box-sizing: border-box; .box-sizing( border-box );
max-height: 65vh; max-height: 65vh;
overflow: scroll; overflow: scroll;
border-top-width: 1px; border-top-width: 1px;

2
skin.json
View file

@ -132,7 +132,7 @@
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before", "selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before", "selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
"useDataURI": false, "useDataURI": false,
"defaultColor": "#54595d", "defaultColor": "#000",
"class": "ResourceLoaderOOUIIconPackModule", "class": "ResourceLoaderOOUIIconPackModule",
"variants": [], "variants": [],
"icons": [ "icons": [

16
skinStyles/mediawiki.ui.icon.less
View file

@ -1,10 +1,10 @@
// The .mw-page-container class is used to restrict this to the modern Vector. // Override core's `.mw-ui-icon` which defaults to 24x24.
// This element is not needed in legacy Vector. // The Design Style Guide and its icons are now set to 20x20.
// FIXME: With core set to 20x20 this file should become obsolete, see T191021.
@import '../variables.less';
.mw-portlet-lang .mw-ui-icon:before { .mw-portlet-lang .mw-ui-icon:before {
// mw-ui-icon in core defaults to 24x24. The style guide now requests 20x20. background-size: unit( @size-icon / @font-size-base, em ) auto;
background-size: 20px auto; width: unit( @size-icon / @font-size-base, em );
width: 20px; height: unit( @size-icon / @font-size-base, em );
height: 20px;
min-height: 20px;
margin-right: 8px;
} }

6
variables.less
View file

@ -56,6 +56,12 @@
@line-height-footer-buttons: 2; @line-height-footer-buttons: 2;
@size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`. @size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`.
@size-icon: unit( 20 / @font-size-browser, em );
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
// FIXME: Use global variable since Echo and CentralNotice use this variable // FIXME: Use global variable since Echo and CentralNotice use this variable
@border-color-content: #a7d7f9; @border-color-content: #a7d7f9;
// Due to darker background gradient, border needs to be darkened for aligned visual perception. // Due to darker background gradient, border needs to be darkened for aligned visual perception.