Vorlage:MediaWiki-Button/styles.css: Unterschied zwischen den Versionen

Aktuelle Version vom 23. Dezember 2019, 22:45 Uhr

.mw-ui-button {  background-color: #f8f9fa;  color: #222222;
 display: inline-block;
 box-sizing: border-box;
 min-width: 4em;
 max-width: 28.75em;
 margin: 0;
 padding: 0.546875em 1em;
 border: 1px solid #a2a9b1;
 border-radius: 2px;
 font-family: inherit;
 font-size: 1em;
 font-weight: bold;
 line-height: 1.286;
 text-align: center;
 vertical-align: middle;
 cursor: pointer;}

.mw-ui-button:visited {  color: #222222;}

.mw-ui-button:hover {
  background-color: #ffffff;
  color: #444444;
  border-color: #a2a9b1;
}
.mw-ui-button:focus {
  background-color: #ffffff;
  color: #222222;
  border-color: #3366cc;
  box-shadow: inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff;
  outline-width: 0;
}
.mw-ui-button:active,
.mw-ui-button.is-on {
  background-color: #c8ccd1;
  color: #000000;
  border-color: #72777d;
  box-shadow: none;
}
.mw-ui-button:disabled,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive {
  background-color: #c8ccd1;
  color: #ffffff;
  border-color: #c8ccd1;
  cursor: default;
}
.mw-ui-button:disabled:hover,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:hover,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:hover,
.mw-ui-button:disabled:active,
.mw-ui-button.mw-ui-quiet.mw-ui-progressive:active,
.mw-ui-button.mw-ui-quiet.mw-ui-destructive:active {
  background-color: #c8ccd1;
  color: #ffffff;
  box-shadow: none;
  border-color: #c8ccd1;
}
.mw-ui-button:not( :disabled ) {
  transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
}
.mw-ui-button.mw-ui-quiet {
  background-color: transparent;
  color: #222222;
  border-color: transparent;
}
.mw-ui-button.mw-ui-quiet:hover {
  background-color: transparent;
  color: #444444;
  border-color: transparent;
  box-shadow: none;
}
.mw-ui-button.mw-ui-quiet:active {
  background-color: transparent;
  color: #000000;
  border-color: transparent;
}
.mw-ui-button.mw-ui-quiet:focus {
  background-color: transparent;
  color: #222222;
  border-color: transparent;
  box-shadow: none;
}
.mw-ui-button.mw-ui-quiet:disabled {
  background-color: transparent;
  color: #c8ccd1;
  border-color: transparent;
}
.mw-ui-button.mw-ui-progressive {
  background-color: #3366cc;
  color: #fff;
  border: 1px solid #3366cc;
}
.mw-ui-button.mw-ui-progressive:hover {
  background-color: #447ff5;
  border-color: #447ff5;
}
.mw-ui-button.mw-ui-progressive:focus {
  box-shadow: inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff;
}
.mw-ui-button.mw-ui-progressive:active,
.mw-ui-button.mw-ui-progressive.is-on {
  background-color: #2a4b8d;
  border-color: #2a4b8d;
  box-shadow: none;
}
.mw-ui-button.mw-ui-progressive:disabled {
  background-color: #c8ccd1;
  color: #fff;
  border-color: #c8ccd1;
}
.mw-ui-button.mw-ui-progressive:disabled:hover,
.mw-ui-button.mw-ui-progressive:disabled:active {
  background-color: #c8ccd1;
  color: #fff;
  border-color: #c8ccd1;
  box-shadow: none;
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet {
  color: #3366cc;
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:hover {
  background-color: transparent;
  color: #447ff5;
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:active {
  color: #2a4b8d;
}
.mw-ui-button.mw-ui-progressive.mw-ui-quiet:focus {
  background-color: transparent;
  color: #3366cc;
}
.mw-ui-button.mw-ui-destructive {
  background-color: #dd3333;
  color: #fff;
  border: 1px solid #dd3333;
}
.mw-ui-button.mw-ui-destructive:hover {
  background-color: #ff4242;
  border-color: #ff4242;
}
.mw-ui-button.mw-ui-destructive:focus {
  box-shadow: inset 0 0 0 1px #dd3333, inset 0 0 0 2px #ffffff;
}
.mw-ui-button.mw-ui-destructive:active,
.mw-ui-button.mw-ui-destructive.is-on {
  background-color: #b32424;
  border-color: #b32424;
  box-shadow: none;
}
.mw-ui-button.mw-ui-destructive:disabled {
  background-color: #c8ccd1;
  color: #fff;
  border-color: #c8ccd1;
}
.mw-ui-button.mw-ui-destructive:disabled:hover,
.mw-ui-button.mw-ui-destructive:disabled:active {
  background-color: #c8ccd1;
  color: #fff;
  border-color: #c8ccd1;
  box-shadow: none;
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet {
  color: #dd3333;
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:hover {
  background-color: transparent;
  color: #ff4242;
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:active {
  color: #b32424;
}
.mw-ui-button.mw-ui-destructive.mw-ui-quiet:focus {
  background-color: transparent;
  color: #dd3333;
}
.mw-ui-button.mw-ui-big {
  font-size: 1.3em;
}
.mw-ui-button.mw-ui-block {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
a.mw-ui-button {
  text-decoration: none;
}
a.mw-ui-button:hover,
a.mw-ui-button:focus {
  text-decoration: none;
}
.mw-ui-button-group > * {
  min-width: 48px;
  border-radius: 0;
  float: left;
}
.mw-ui-button-group > *:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.mw-ui-button-group > *:not( :first-child ) {
  border-left: 0;
}
.mw-ui-button-group > *:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.mw-ui-button-group .is-on .button {
  cursor: default;
}