MediaWiki:Gadget-wswbLanguageSelector.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ============================================================
   WSWB language selector
   ============================================================ */
   
/*
 * Hide the unarranged language list while JavaScript
 * determines which options fit in the main bar.
 *
 * visibility keeps the selector measurable by JavaScript.
 * overflow prevents the hidden options from creating
 * horizontal page overflow.
 */
 
html.client-js
.wswb-language-selector:not(.is-ready) {
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
}

.wswb-language-selector {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	box-sizing: border-box;
	width: max-content;
	max-width: 90%;
	margin: 0 auto 0.75em;
	padding: 14px 14px;
	border: 2px solid var(--wswb-ui-border-color);
	border-radius: 10px;
	font-size: 0.9rem;
	line-height: 1.4;
	white-space: nowrap;
}

/* Inline language list */
.wswb-language-selector__inline {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 28px;
	white-space: nowrap;
}

/* Every language uses the same basic dimensions */
.wswb-language-selector__option {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 28px;
	font-weight: 600;
	white-space: nowrap;
}

/* Consistent separator and spacing between every pair */
.wswb-language-selector__inline >
.wswb-language-selector__option +
.wswb-language-selector__option::before {
	content: "·";
	margin: 0 0.8em;
	color: var(--wswb-ui-subtle-color);
	font-weight: 400;
}

.wswb-language-selector__toggle-separator {
	flex: 0 0 auto;
	margin: 0 0.8em;
	color: var(--wswb-ui-subtle-color);
	font-weight: 400;
}

/* Keep links and current-language text aligned */
.wswb-language-selector__option > a,
.wswb-language-selector__option > strong {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 26px;
	padding: 2px 6px;
	font-weight: 600;
	line-height: 1.4;
}

/* Current language */
.wswb-language-selector__current > strong {
	border-radius: 5px;
	background-color:
		var(--wswb-ui-action-background);
	color: var(--wswb-ui-action-text-color);
}

/* Dropdown button */
.wswb-language-selector__toggle {
	display: inline-flex;
	align-items: center;
	flex: none;
	box-sizing: border-box;
	min-height: 26px;
	padding: 2px 8px;
	border:
		1px solid
		var(--wswb-ui-action-border-color);
	border-radius: 5px;
	background-color: var(--wswb-ui-surface-color);
	color: var(--wswb-ui-action-color);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.wswb-language-selector__toggle::after {
	content: "▼";
	margin-left: 0.45em;
	font-size: 0.7em;
}

.wswb-language-selector__toggle[aria-expanded="true"]::after {
	content: "▲";
}

.wswb-language-selector__toggle:hover,
.wswb-language-selector__toggle[aria-expanded="true"] {
	background-color:
		var(--wswb-ui-action-background);
	color: var(--wswb-ui-action-text-color);
}

.wswb-language-selector__toggle:focus-visible {
	outline:
		2px solid
		var(--wswb-ui-action-color);
	outline-offset: 2px;
}

.wswb-language-selector__toggle.is-hidden,
.wswb-language-selector__toggle-separator.is-hidden {
	display: none;
}

/* Dropdown panel */
.wswb-language-selector__menu {
	position: absolute;
	z-index: 100;
	top: calc(100% + 0.4em);
	right: 0;
	left: auto;
	box-sizing: border-box;
	display: none;
	grid-template-columns: repeat(2, max-content);
	gap: 5px 1.5em;
	width: max-content;
	max-width: calc(100vw - 2em);
	max-height: 24em;
	overflow-y: auto;
	padding: 10px;
	border-radius: 10px;
	border: 2px solid var(--wswb-ui-border-color);
	background-color: var(--wswb-ui-surface-color);
	color: var(--wswb-ui-text-color);
	box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
	white-space: normal;
}

.wswb-language-selector__menu.is-open {
	display: grid;
}

/* Languages moved into the dropdown */
.wswb-language-selector__menu >
.wswb-language-selector__option {
	display: flex;
	padding: 5px 8px;
	border-radius: 5px;
}

/* Do not show inline separators inside the dropdown */
.wswb-language-selector__menu >
.wswb-language-selector__option::before {
	content: none;
}

.wswb-language-selector__menu >
.wswb-language-selector__option:hover {
	background-color: rgb(34 51 61 / 10%);
}

.wswb-language-selector__menu >
.wswb-language-selector__option > a {
	display: block;
	min-height: 0;
	padding: 0;
	text-decoration: none;
}

.wswb-language-selector__menu >
.wswb-language-selector__option > a:hover {
	text-decoration: underline;
}

@media (max-width: 500px) {
	.wswb-language-selector {
		max-width: calc(100% - 1em);
	}

	.wswb-language-selector__menu {
		grid-template-columns: max-content;
	}
}

.wswb-object-reference {
	white-space: nowrap;
}