MediaWiki:Vorlage Button.css
Aus ZUM-Unterrichten
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
/* .button -> Vorlage:Button */
.button {
display: inline flow-root;
}
.button-left,
.button-center,
.button-right
{
display: flex;
}
@media(min-width:1360px) {
.button-right a,
.button-right:not(:has(> a)) {
margin-inline-start: auto;
}
.button-center a,
.button-center:not(:has(> a)) {
margin-inline: auto;
}
.button-left a,
.button-left:not(:has(> a)) {
margin-inline-end: auto;
}
}
:is(.button, .button-left, .button-center, .button-right).button__small a,
:is(.button, .button-left, .button-center, .button-right).button__small:not(:has(> a)) {
padding-block:0;
padding-inline:0.4em;
}
.button a,
.button:not(:has(> a)),
.button-left a,
.button-left:not(:has(> a)),
.button-center a,
.button-center:not(:has(> a)),
.button-right a,
.button-right:not(:has(> a)) {
padding-inline:0.6em;
padding-block:0.2em;
display:inline flow-root;
outline: 1px solid transparent;
border-radius: 0.2em;
}
.button-left a .fa,
.button-left:not(:has(> a)) .fa,
.button-center a .fa,
.button-center:not(:has(> a)) .fa,
.button-right a .fa,
.button-right:not(:has(> a)) .fa {
margin-inline:0.2em;
}
.mediawiki .button a,
.mediawiki .button:not(:has(> a)),
.mediawiki .button-left a,
.mediawiki .button-left:not(:has(> a)),
.mediawiki .button-center a,
.mediawiki .button-center:not(:has(> a)),
.mediawiki .button-right a,
.mediawiki .button-right:not(:has(> a)) {
color: hsl(0,0%,20%);
background-color: var(--zum-farbe-grau--hell);
outline-color: var(--zum-farbe-grau-dunkel);
}
.mediawiki .button:not(:has(> a)):hover,
.mediawiki .button:not(:has(> a)):focus,
.mediawiki .button-left:not(:has(> a)):hover,
.mediawiki .button-left:not(:has(> a)):focus,
.mediawiki .button-center:not(:has(> a)):hover,
.mediawiki .button-center:not(:has(> a)):focus,
.mediawiki .button-right:not(:has(> a)):hover,
.mediawiki .button-right:not(:has(> a)):focus {
text-decoration:underline;
}
.mediawiki .button a:hover,
.mediawiki .button a:focus,
.mediawiki .button:not(:has(> a)):hover,
.mediawiki .button:not(:has(> a)):focus,
.mediawiki .button-left a:hover,
.mediawiki .button-left a:focus,
.mediawiki .button-left:not(:has(> a)):hover,
.mediawiki .button-left:not(:has(> a)):focus,
.mediawiki .button-center a:hover,
.mediawiki .button-center a:focus,
.mediawiki .button-center:not(:has(> a)):hover,
.mediawiki .button-center:not(:has(> a)):focus,
.mediawiki .button-right a:hover,
.mediawiki .button-right a:focus,
.mediawiki .button-right:not(:has(> a)):hover,
.mediawiki .button-right:not(:has(> a)):focus { background-color: var(--zum-farbe-grau--x-heller); }
.mediawiki .button.button-primary a,
.mediawiki .button.button-primary:not(:has(> a)),
.mediawiki .button-left.button-primary a,
.mediawiki .button-left.button-primary:not(:has(> a)),
.mediawiki .button-center.button-primary a,
.mediawiki .button-center.button-primary:not(:has(> a)),
.mediawiki .button-right.button-primary a,
.mediawiki .button-right.button-primary:not(:has(> a)) {
color: hsl(0,0%,20%);
background-color: var(--zum-farbe-links--heller);
outline-color: var(--zum-farbe-links);
}
.mediawiki .button.button-primary a:hover,
.mediawiki .button.button-primary a:focus,
.mediawiki .button.button-primary:not(:has(> a)):hover,
.mediawiki .button.button-primary:not(:has(> a)):focus,
.mediawiki .button-left.button-primary a:hover,
.mediawiki .button-left.button-primary a:focus,
.mediawiki .button-left.button-primary:not(:has(> a)):hover,
.mediawiki .button-left.button-primary:not(:has(> a)):focus,
.mediawiki .button-center.button-primary a:hover,
.mediawiki .button-center.button-primary a:focus,
.mediawiki .button-center.button-primary:not(:has(> a)):hover,
.mediawiki .button-center.button-primary:not(:has(> a)):focus,
.mediawiki .button-right.button-primary a:hover,
.mediawiki .button-right.button-primary a:focus,
.mediawiki .button-right.button-primary:not(:has(> a)):hover,
.mediawiki .button-right.button-primary:not(:has(> a)):focus { background-color: var(--zum-farbe-links--x-heller); }
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary a,
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)) {
color:hsl(0, 0%, 20%);
outline-color: var(--zum-farbe-sekund\är-2);
background-color: var(--zum-farbe-sekund\är-2--x-heller);
}
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary :is(a:hover, a:focus),
.mediawiki :is(.button, .button-left, .button-center, .button-right).button-secondary:not(:has(> a)):is(:hover, :focus) {
background-color: var(--zum-farbe-sekund\är-2--xx-heller);
}