MediaWiki:Gadget-I18nSwitcher.css: Difference between revisions

From Bodhicitta
((by SublimeText.Mediawiker))
(Language switcher: segmented pill design)
 
Line 1: Line 1:
 
/* 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 {
.lang-toggle {
    display: block;
display: inline-flex;
    margin: 10px;
align-items: center;
    padding: 2px 3px 4px 2px;
gap: 2px;
    border: 2px solid #86cf96;
margin: 0 .75rem;
    border-radius: 3px;
padding: 3px;
border: 1px solid rgba(255, 252, 245, .35);
border-radius: 999px;
background: rgba(255, 252, 245, .08);
align-self: center;
}
}


.lang-btn {
.lang-btn {
    cursor: pointer;
appearance: none;
    display: inline-block;
border: 0;
    color: white;
background: transparent;
    font-weight: bold;
color: rgba(255, 252, 245, .85);
border: none;
font: inherit;
background: none;
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;
}
}


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

Latest revision as of 19:18, 2 October 2026

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