mediawiki-skins-Citizen/skinStyles/extensions/UniversalLanguageSelector/jquery.uls.less

/*
 * Citizen
 *
 * SkinStyles for Extension:UniversalLanguageSelector
 * Module: jquery.uls
 * Version: MLEB 2021.12
 *
 * Date: 2022-05-17
*/

/* jquery.uls.css */
// Needed to override specificity from original style
.skin-citizen #pt-uls .uls-trigger {
	display: flex;
	flex-direction: row-reverse; // So that icon is after the text
	padding: 0.625rem 1.25rem !important;

	// Sync with .resource-loader-list-icon() mixin
	&:before {
		width: @icon-size;
		height: @icon-size;
		flex-shrink: 0;
		padding: 0;
		background-position: center;
		background-size: contain;
		opacity: var( --opacity-icon-base );
	}

	// Hide default icon
	&:after {
		content: none;
	}
}

.skin-citizen-dark .uls-trigger:before {
	filter: invert( 1 ) hue-rotate( 180deg );
}

.uls-menu {
	border: 0;
	background-color: var( --color-surface-1 );
	box-shadow: var( --box-shadow-dialog );
}

.uls-search {
	border-bottom-color: var( --border-color-base );
	background-color: var( --color-surface-1 );
}

.uls-search-label {
	opacity: var( --opacity-icon-base );
}

.skin-citizen-dark .uls-search-label {
	filter: invert( 1 ) hue-rotate( 180deg );
}

.uls-languagefilter {
	color: var( --color-base );
}

.uls-filtersuggestion {
	background-color: var( --color-surface-1 );
	color: var( --color-base--subtle );
}

.uls-languagefilter-clear {
	opacity: var( --opacity-icon-base );
}

.skin-citizen-dark .uls-languagefilter-clear {
	filter: invert( 1 ) hue-rotate( 180deg );
}

/* jquery.uls.lcd.css */
.uls-lcd {
	background-color: var( --color-surface-2 );
}

.uls-lcd-region-title {
	color: var( --color-base );
}

.uls-language-block > ul > li {
	border-radius: var( --border-radius--small );
}

.uls-language-block > ul > li:hover {
	background-color: var( --background-color-primary--hover );
}

.uls-language-block > ul > li:active {
	background-color: var( --background-color-primary--active );
}

.uls-language-block a {
	color: var( --color-primary );
}

.uls-no-results-found-title {
	color: var( --color-base--subtle );
}

.uls-no-found-more {
	border-top-color: var( --border-color-base );
	color: var( --color-base--subtle );
}