Page MenuHomeWickedGov Phorge
Files F4108591

LanguageDropdown.less
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

LanguageDropdown.less
View Options

// 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 {
display: none;
}
.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;
// T291286: Temporarily use progressive ULS style
&.cdx-button--action-progressive.cdx-button--weight-quiet::after {
mask-image: url( ./images/arrow-down-progressive.svg );
background-color: @color-progressive;
opacity: @opacity-base;
}
}
.vector-dropdown-checkbox:active + .vector-dropdown-label {
&.cdx-button--action-progressive.cdx-button--weight-quiet {
.vector-icon {
filter: brightness( 0 ) invert( 1 );
}
&::after {
// Invert arrow color
background-image: url( ./images/arrow-down-invert.svg );
}
}
}
.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-subtle;
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;
}
.mw-interlanguage-selector-empty:checked ~ .vector-dropdown-content {
display: inherit;
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 20:38 (2 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
a9/a9/7e4dd3f09a3e517466f5488dc02b
Default Alt Text
LanguageDropdown.less (3 KB)

Event Timeline