MediaWiki:Gadget-I18nSwitcher.css

From Bodhicitta
Revision as of 19:18, 2 October 2026 by Jeremi (talk | contribs) (Language switcher: segmented pill design)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* Language switcher in the navbar: a segmented pill, after the toggle on PLL's
   bilingual pages. One rounded track; the active language is filled with the
   site's cream so it reads at a glance on the dark blue bar. */
.lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0 .75rem;
	padding: 3px;
	border: 1px solid rgba(255, 252, 245, .35);
	border-radius: 999px;
	background: rgba(255, 252, 245, .08);
	align-self: center;
}

.lang-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: rgba(255, 252, 245, .85);
	font: inherit;
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.3;
	padding: .3em .95em;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.lang-btn:hover {
	color: #fff;
	background: rgba(255, 252, 245, .14);
}

.lang-btn:focus-visible {
	outline: 2px solid #bf9659;
	outline-offset: 1px;
}

.lang-btn.active,
.lang-btn.active:hover {
	background: #fdf5e4;
	color: #113651;
}

/* Tibetan label in a Tibetan face, a touch larger and lowered so it sits level
   with the Latin label. */
.lang-btn--bo {
	font-family: 'Jomolhari', 'BabelStoneTibetan', serif;
	font-size: 1rem;
	padding-top: .35em;
	padding-bottom: .15em;
}