Template:LanguageButton/styles.css
Appearance
.main-page-lang-btn { display: none; }
html.client-js body.skin-vector .main-page-lang-btn { display: block; }
html.client-js body.skin-version-legacy .main-page-lang-btn { display: none; }
/** Styles used by [[Template:Clickable button 3]] */
.module-clickable-button-3 a {
background-color: #f9f9f9;
border-color: #aaaaaa;
color: #222222;
display: inline-block;
box-sizing: border-box;
margin: 0;
border-width: 1px;
border-style: solid;
border-radius: 0;
vertical-align: middle;
font-family: inherit;
font-size: 1em;
font-weight: bold;
line-height: 1.28571429em;
text-align: center;
background-image: none;
transition-property: background-color, color, border-color, box-shadow;
transition-duration: 100ms;
min-height: 32px;
min-width: 4em;
max-width: 28.75em;
padding: 5px 12px;
text-decoration: none;
}
.module-clickable-button-3 a:visited {
color: #222222;
}
.module-clickable-button-3 a:hover {
background-color: #ffffff;
color: #444444;
cursor: pointer;
}
.module-clickable-button-3 a:focus {
color: #222222;
border-color: #0645ad;
box-shadow: inset 0 0 0 1px #0645ad;
outline: 1px solid transparent;
}
.module-clickable-button-3 a:active {
background-color: #eeeeee;
color: #000000;
border-color: #767676;
box-shadow: none;
}
.module-clickable-button-3 a:focus {
color: #222222;
border-color: #0645ad;
box-shadow: inset 0 0 0 1px #0645ad;
outline: 1px solid transparent;
}
.module-clickable-button-3 a:active {
background-color: #eeeeee;
color: #000000;
border-color: #767676;
box-shadow: none;
}
.module-clickable-button-3.module-clickable-button-quiet a,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a {
background-color: transparent;
color: #222222;
border-color: transparent;
font-weight: bold;
}
.module-clickable-button-3.module-clickable-button-quiet a:hover,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a:hover,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a:hover {
background-color: rgba(0, 24, 73, 0.027);
color: #222222;
}
.module-clickable-button-3.module-clickable-button-quiet a:focus,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a:focus,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a:focus {
color: #222222;
border-color: #0645ad;
box-shadow: inset 0 0 0 1px #0645ad;
}
.module-clickable-button-3.module-clickable-button-quiet a:active,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a:active,
.module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a:active {
background-color: rgba(0, 24, 73, 0.082);
color: #000000;
border-color: #767676;
box-shadow: none;
}
.module-clickable-button-3.module-clickable-button-progressive a {
background-color: #0645ad;
color: #ffffff;
border-color: #0645ad;
}
.module-clickable-button-3.module-clickable-button-progressive a:hover {
background-color: #447ff5;
border-color: #447ff5;
}
.module-clickable-button-3.module-clickable-button-progressive a:focus {
box-shadow: inset 0 0 0 1px #0645ad, inset 0 0 0 2px #ffffff;
}
.module-clickable-button-3.module-clickable-button-progressive a:active {
background-color: #2a4b8d;
border-color: #2a4b8d;
box-shadow: none;
}
.module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a {
background-color: rgba(255, 255, 255, 0);
color: #0645ad;
border-color: transparent;
}
.module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a:hover {
background-color: rgba(52, 123, 255, 0.2);
color: #447ff5;
border-color: transparent;
}
.module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a:focus {
color: #0645ad;
border-color: #0645ad;
}
.module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a:active {
color: #ffffff;
background-color: #2a4b8d;
border-color: #2a4b8d;
}
.module-clickable-button-3.module-clickable-button-destructive a {
background-color: #dd0033;
color: #ffffff;
border-color: #dd0033;
}
.module-clickable-button-3.module-clickable-button-destructive a:hover {
background-color: #ff4242;
border-color: #ff4242;
}
.module-clickable-button-3.module-clickable-button-destructive a:focus {
box-shadow: inset 0 0 0 1px #dd0033, inset 0 0 0 2px #ffffff;
}
.module-clickable-button-3.module-clickable-button-destructive a:active {
background-color: #b32424;
border-color: #b32424;
box-shadow: none;
}
.module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a {
color: #dd0033;
background-color: rgba(255, 255, 255, 0);
border-color: transparent;
}
.module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a:hover {
background-color: #ff4242;
border-color: transparent;
color: #ff4242;
}
.module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a:focus {
color: #dd0033;
border-color: #dd0033;
}
.module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a:active {
color: #ffffff;
background-color: #b32424;
border-color: #b32424;
}
/* Styles for night mode: [[Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis]] */
@media screen {
html.skin-theme-clientpref-night .module-clickable-button-3 a {
background-color: #222222;
color: #f9f9f9;
}
html.skin-theme-clientpref-night .module-clickable-button-3 a:hover {
color: #ffffff;
background-color: #444444;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .module-clickable-button-3 a {
background-color: #222222;
color: #f9f9f9;
}
html.skin-theme-clientpref-os .module-clickable-button-3 a:hover {
color: #ffffff;
background-color: #444444;
}
}