Jump to content

Template:LanguageButton/styles.css

From Wikipedia, the free encyclopedia
.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;
  }
}