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: 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 { | .lang-btn { | ||
appearance: none; | |||
border: 0; | |||
background: transparent; | |||
color: rgba(255, 252, 245, .85); | |||
font: inherit; | |||
background: | 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. | /* 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; | |||
} | } | ||
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;
}