mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-11 07:26:10 +00:00
48b1263533
The language dropdown currently impacts rendering due to making use of visibility: hidden as space must be allocated for it on the page. However when ULS is installed it is never used. As some JS to take that into account so it doesn't impact the rendering of the page. Since ULS may not be installed we have to consider that case and retain the existing behaviour for those wiki (this should only impact 3rd parties) Bug: T340715 Change-Id: Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba
127 lines
4.3 KiB
Plaintext
127 lines
4.3 KiB
Plaintext
// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
|
|
@import '../../common/variables.less';
|
|
@import '../../common/mixins.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Note vector-feature-language-in-header-enabled class is not used here as that class
|
|
// only applies to main page.
|
|
// This must be limited to vector-page-titlebar as the mw-portlet-lang class is shared with
|
|
// the language portlet that can display in the sidebar.
|
|
.vector-page-titlebar .mw-portlet-lang {
|
|
box-sizing: border-box;
|
|
flex-shrink: 0;
|
|
|
|
// If there are no languages and JavaScript is not enabled there is no fallback so we hide
|
|
// the button altogether.
|
|
.client-nojs & .mw-portlet-lang-heading-0 {
|
|
// FIXME: remove !important after VectorZebra is the default
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
display: none !important;
|
|
}
|
|
|
|
.vector-dropdown-label {
|
|
// Prevent select of span text "X languages"
|
|
user-select: none;
|
|
// Set opacity to `1` on language button (it applies to more menu because of label color).
|
|
opacity: @opacity-base;
|
|
|
|
.vector-dropdown-label-text {
|
|
// Special treatment for language button, based on Vector font-size
|
|
font-size: @font-size-base;
|
|
}
|
|
|
|
// T291286: Temporarily use progressive ULS style
|
|
&.cdx-button--action-progressive.cdx-button--weight-quiet::after {
|
|
// !important needed to override Zebra Dropdown.less styles
|
|
// FIXME: Remove !important when Zebra is default
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
background-image: url( ../common/images/arrow-down-progressive.svg ) !important;
|
|
opacity: @opacity-base;
|
|
}
|
|
}
|
|
|
|
.vector-dropdown-checkbox:active + .vector-dropdown-label {
|
|
&.cdx-button--action-progressive.cdx-button--weight-quiet {
|
|
.vector-icon {
|
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
filter: brightness( 0 ) invert( 1 );
|
|
}
|
|
|
|
&::after {
|
|
// Invert arrow color
|
|
// !important needed to override Zebra Dropdown.less styles
|
|
// FIXME: Remove !important when Zebra is default
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
background-image: url( ../common/images/arrow-down-invert.svg ) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vector-dropdown-content {
|
|
// align borders of open menu align with button
|
|
box-sizing: border-box;
|
|
max-height: 65vh;
|
|
overflow: auto;
|
|
.mixin-vector-dropdown-content-flip();
|
|
|
|
li a {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
.after-portlet {
|
|
// ensure there is a visual separation between the language links and additional links.
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.mw-portlet-lang-heading-empty {
|
|
.mixin-vector-arrowed-dropdown-toggle();
|
|
}
|
|
|
|
// styles for less prominent Language button (without label) to be used for non-content pages (see T316559)
|
|
.mw-portlet-lang-heading-empty + .vector-dropdown-content {
|
|
min-width: 300px;
|
|
|
|
.mw-portlet-empty-language-selector-body {
|
|
padding: 20px;
|
|
border-bottom: @border-style-base @border-width-base @border-color-portal-heading;
|
|
color: @color-subtle;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hides language button with CSS, ensures language button is in DOM for temporary JS hack for interwiki links
|
|
// Temporary solution to T287206, can be removed when ULS dialog includes interwiki links
|
|
#p-lang-btn.mw-portlet-empty {
|
|
display: none;
|
|
}
|
|
|
|
.mw-interlanguage-selector {
|
|
.mixin-vector-arrowed-dropdown-toggle();
|
|
}
|
|
|
|
// Hide the "Add languages" on pages which are not action=view where there are 0 languages
|
|
.vector-dropdown > .mw-portlet-lang-heading-0 {
|
|
display: none;
|
|
}
|
|
|
|
// IMPORTANT: Since dropdowns are visibility: hidden, it is important if ULS has been enabled
|
|
// and taken over the menu, that we set the dropdown to display none to avoid impacting the
|
|
// initial render. Language lists can be long (on some pages +200 links) so avoid having to
|
|
// consider them in the render at all costs! In future, we may want to reconsider this component
|
|
// and potentially use Minerva's fallback - where languages are inside the footer, but that's
|
|
// a change for another day!
|
|
.client-js .mw-portlet-lang .vector-dropdown-content {
|
|
display: none;
|
|
|
|
// ... since ULS is an optional dependency it may not be installed.
|
|
.vector-uls-disabled& {
|
|
display: inherit;
|
|
}
|
|
}
|
|
|
|
// Show it on view pages where there are 0 languages so user can add languages (JavaScript required)
|
|
.client-js .action-view .vector-dropdown > .mw-portlet-lang-heading-0 {
|
|
display: flex;
|
|
}
|