mediawiki-skins-Vector/resources/skins.vector.styles/components/LanguageDropdown.less

// 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 {
				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;
	}

	.mw-interlanguage-selector-empty:checked ~ .vector-dropdown-content {
		display: inherit;
	}
}