mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-24 05:33:24 +00:00
9695647608
Visual changes are subtle, but impact 43 scenarios. The color and positioning is slightly modified to match Codex. Bug: T363920 Change-Id: Ie5c88e0aa243f73f2dc9f310d18fd59b831edc64
119 lines
3.6 KiB
Plaintext
119 lines
3.6 KiB
Plaintext
// 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;
|
|
|
|
.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 {
|
|
mask-image: url( ./images/arrow-down-progressive.svg );
|
|
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;
|
|
}
|
|
}
|